Scratch 3.0 кеңейтімдері: 8 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:22

Scratch кеңейтімдері - бұл Scratch -ке жаңа блоктар қосатын Javascript кодының бөліктері. Scratch көптеген ресми кеңейтімдермен бірге жиналса да, пайдаланушы кеңейтімдерін қосудың ресми тетігі жоқ.

Мен Scratch 3.0 үшін Minecraft басқарушы кеңейтімін жасаған кезде, маған бастау қиынға соқты. Бұл нұсқаулық әр түрлі көздерден ақпаратты жинайды (әсіресе бұл), сонымен қатар мен өзім ашқан бірнеше нәрсені.

Сіз Javascript -те бағдарламалауды және веб -сайтта Javascript -ті қалай орналастыруды білуіңіз керек. Соңғысы үшін мен GitHub беттерін ұсынамын.

Негізгі трюк - кеңейтімдер мен плагиндерді жүктеуге мүмкіндік беретін SheepTester Scratch режимін пайдалану.

Бұл нұсқаулық сізге екі кеңейтімді жасауға көмектеседі:

• Алу: URL -ден деректерді жүктеу және JSON тегтерін алу, мысалы ауа райы деректерін жүктеу үшін
• SimpleGamepad: Scratch -те ойын контроллерін қолдану (мұнда неғұрлым күрделі нұсқа).

1 -қадам: кеңейтімдердің екі түрі

Кеңейтімдердің екі түрі бар, оларды мен «қорапсыз» және «құм жәшігінде» деп атаймын. Қауіпсіз қораптағы кеңейтімдер веб -жұмысшылар ретінде жұмыс істейді, нәтижесінде айтарлықтай шектеулер бар:

• Веб -жұмысшылар терезе объектісіндегі ғаламдық бағдарламаларға қол жеткізе алмайды (оның орнына оларда жаһандық өзіндік объекті бар, ол әлдеқайда шектеулі), сондықтан сіз оларды геймпадқа кіру сияқты нәрселер үшін пайдалана алмайсыз.
• Құм жәшігіндегі кеңейтімдер Scratch жұмыс уақыты нысанына кіре алмайды.
• Құм жәшігіндегі кеңейтімдер әлдеқайда баяу.
• Құм жәшігіндегі кеңейтімдерге арналған Javascript консолінің қате туралы хабарлары Chrome -да құпия болып табылады.

Басқа жақтан:

• Басқа адамдардың құм жәшігіндегі кеңейтімдерін пайдалану қауіпсіз.
• Қауіпсіз қораптағы кеңейтімдер кез келген ресми кеңейтімді жүктеу қолдауымен жұмыс істейді.
• Қауіпсіз қораптағы кеңейтімдерді деректерге кодтау арқылы веб -серверге жүктеместен тексеруге болады: // URL.

Ресми кеңейтімдер (мысалы, Музыка, Қалам және т.б.) барлығы қорапсыз. Кеңейтуге арналған конструктор Scratch -тен жұмыс уақыты объектісін алады және терезеге толық қол жетімді.

Алу кеңейтімі құм жәшігінде, бірақ Gamepad бағдарламасына навигатор объектісі терезеден қажет.

2 -қадам: Құм жәшігіндегі кеңейтімді жазу: I бөлім

Кеңейтімді жасау үшін сіз ол туралы ақпаратты кодтайтын сынып жасайсыз, содан кейін кеңейтімді тіркеу үшін кодты қосасыз.

Кеңейтім класындағы ең бастысы - объектіні қажетті өрістермен қайтаратын getInfo () әдісі:

• id: кеңейтімнің ішкі атауы әр кеңейтім үшін бірегей болуы керек
• аты: Scratch блоктар тізімінде көрсетілетін кеңейтімге ыңғайлы атау
• блоктар: жаңа реттелетін блокты сипаттайтын объектілер тізімі.

Алу мәзірінде Fetch -те қолданылмайтын, бірақ Gamepad -те қолданылатын қосымша мәзір өрісі бар.

Сонымен, Fetch негізгі үлгісі:

сынып ScratchFetch {

constructor () {} getInfo () {return {«id»: «Fetch», «name»: «Fetch», «blocks»: [/* кейінірек қосу * /]}} / * блоктардың әдістерін қосу * /} Scratch.extensions.register (жаңа ScratchFetch ())

3 -қадам: Құм жәшігіндегі кеңейтімді жазу: ІІ бөлім

Енді бізге getInfo () объектісіндегі блоктар тізімін жасау керек. Әр блокқа кемінде төрт өріс қажет:

• opcode: бұл блок жұмысын жасауға шақырылатын әдіс атауы

• blockType: бұл блок түрі; Кеңейту үшін ең кең тарағандары:

  • «команда»: бірдеңе жасайды, бірақ мәнді қайтармайды
  • «репортер»: жолды немесе санды қайтарады
  • «Логикалық»: логикалық мәнді қайтарады (бас әріпке назар аударыңыз)
  • «hat»: оқиғаны анықтайтын блок; егер сіздің Scratch кодыңыз осы блокты қолданса, Scratch жұмыс уақыты оқиғаның болған -болмағанын айтатын логикалық мәнді қайтаратын байланысты әдісті үнемі сұрайды.
• мәтін: бұл жақшадағы аргументтері бар блоктың түсінікті сипаттамасы, мысалы, « -дан деректерді алу»

• аргументтер: бұл әр аргумент үшін өрісі бар объект (мысалы, жоғарыдағы мысалда «url»); бұл объект өз кезегінде келесі өрістерге ие:

  • түрі: «жол» немесе «сан»
  • defaultValue: алдын ала толтырылатын әдепкі мән.

Мысалы, бұл менің Fetch кеңейтіміндегі блоктар өрісі:

«блоктар»: [{«opcode»: «fetchURL», «blockType»: «репортер», «мәтін»: « -ден деректерді алу» «аргументтер»: {«url»: {«түрі»: «жол», «defaultValue «:» https://api.weather.gov/stations/KNYC/observations «},}}, {» opcode «:» jsonExtract «,» blockType «:» репортер «,» мәтін «:» үзінді [аты] [data] «,» аргументтер «: {» name «: {» type «:» string «,» defaultValue «:» temperature «},» data «: {» type «:» string «,» defaultValue «: '{«температура»: 12.3}'},}},]

Мұнда біз екі блокты анықтадық: fetchURL және jsonExtract. Екеуі де тілші. Біріншісі URL мекенжайынан деректерді алып, оны қайтарады, ал екіншісі JSON деректерінен өрісті шығарады.

Ақырында, сіз екі блоктың әдістерін қосуыңыз керек. Әр әдіс объектіні аргумент ретінде қабылдайды, оның ішінде объект барлық аргументтер үшін өрістерді қамтиды. Бұларды аргументтердегі бұйра жақшалар арқылы декодтауға болады. Мысалы, мұнда бір синхронды мысал:

jsonExtract ({аты, деректер}) {

var parsed = JSON.parse (деректер) if (атауы талдауда) {var out = parsed [name] var t = typeof (out) if (t == «string» || t == «number») (t == «логикалық») t қайтару? 1: 0 қайтару JSON.stringify (out)} басқа {қайтару «»}}

Код JSON деректерінен атау өрісін шығарады. Егер өрісте жол, сан немесе логикалық болса, біз оны қайтарамыз. Әйтпесе, өрісті қайта JSONify жасаймыз. Егер JSON -да аты болмаса, біз бос жолды қайтарамыз.

Алайда, кейде асинхронды API пайдаланатын блок жасау қажет болуы мүмкін. FetchURL () әдісі асинхронды fetch API пайдаланады. Бұл жағдайда сіздің әдісіңізден жұмыс істейтін уәдені қайтару керек. Мысалы:

fetchURL ({url}) {

қайтару (url). содан кейін (жауап => жауап.текст ())}

Міне бітті. Толық кеңейтім осында.

4 -қадам: Құм жәшігіндегі кеңейтімді пайдалану

Құммен қоршалған кеңейтімді қолданудың екі әдісі бар. Біріншіден, сіз оны веб -серверге жүктей аласыз, содан кейін оны SheepTester Scratch режиміне жүктей аласыз. Екіншіден, сіз оны деректердің URL -мекен -жайына кодтай аласыз және оны Scratch режиміне жүктей аласыз. Мен тестілеу үшін екінші әдісті қолданамын, себебі бұл кеңейтімнің ескі нұсқалары сервердің кэштеуіне қатысты алаңдаушылықты болдырмайды. Назар аударыңыз, сіз JavaScript -ті Github Pages -тен орналастыра аласыз, бірақ сіз оны қарапайым github репозиторийінен жасай алмайсыз.

Менің fet.js https://arpruss.github.io/fetch.js сайтында орналасқан. Немесе кеңейтімді деректердің URL мекенжайына осы жерге жүктеу арқылы түрлендіруге болады, содан кейін оны алмасу буферіне көшіруге болады. Деректердің URL мекенжайы - бұл бүкіл файлды қамтитын алып URL.

SheepTester's Scratch режиміне өтіңіз. Төменгі сол жақ бұрышта Кеңейтім қосу түймесін басыңыз. Содан кейін «Кеңейтімді таңдаңыз» түймесін басып, URL мекен -жайыңызды енгізіңіз (егер қаласаңыз, барлық үлкен деректер URL мекенжайын қоюға болады).

Егер бәрі ойдағыдай болса, сізде Scratch экранының сол жағында кеңейтім үшін жазба болады. Егер бәрі ойдағыдай болмаса, сіз Javascript консолін (Chrome-да shift-ctrl-J) ашып, мәселені шешуге тырысуыңыз керек.

Жоғарыда сіз АҚШ Ұлттық метеорологиялық қызметінің KNYC (Нью -Йорктегі) станциясынан JSON деректерін жинайтын және талдайтын және оны көрсететін, мысалы, спрайтты жел соғып тұрғандай етіп бұратын кодты таба аласыз. Мен оны веб -шолғышқа енгізу, содан кейін тегтерді анықтау арқылы жасадым. Егер сіз басқа метеостанцияны қолданғыңыз келсе, weather.gov мекен -жайындағы іздеу жолағына жақын орналасқан пошталық индексті енгізіңіз, және сіздің орналасқан жеріңіздегі ауа райы беті сізге төрт әріптен тұратын станция кодын беруі керек, оны сіз KNYC орнына пайдалануға болады. код

Сондай -ақ, «? Url =» аргументін қосу арқылы құм жәшігіндегі кеңейтімді SheepTester режимінің URL мекенжайына қосуға болады. Мысалы:

sheeptester.github.io/scratch-gui/?url=https://arpruss.github.io/fetch.js

5 -қадам: Қауіпсіз қорапсыз кеңейтімді жазу: Кіріспе

Қапталмайтын кеңейтім конструкторы Runtime объектісін алады. Сіз оны елемеуге немесе қолдануға болады. Runtime объектісінің бір қолданылуы - оның ағымдағы MSecs қасиетін оқиғаларды синхрондау үшін пайдалану («қалпақ блоктары»). Менің түсінуімше, оқиғалар блогының барлық опкодтары үнемі сұралады және сұраудың әр раундында ағымдағы MSecs мәні болады. Егер сізге Runtime нысаны қажет болса, сіз кеңейтімді келесіден бастайтын шығарсыз:

EXTENSIONCLASS сыныбы {

конструктор (жұмыс уақыты) {this.runtime = жұмыс уақыты…}…}

Стандартты терезе объектісінің барлық нәрселері қорапсыз кеңейтімде қолданыла алады. Ақырында, сіздің қорапсыз қорғаныс кеңейтімі сиқырлы кодпен аяқталуы керек:

(функция () {

var extensionInstance = жаңа EXTENSIONCLASS (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo ()). id, service (қызмет))

онда сіз EXTENSIONCLASS -ды кеңейтім класына ауыстыруыңыз керек.

6 -қадам: Қапталмаған қорапты жазу: қарапайым геймпад

Енді түйме басылғанда немесе босатылғанда бір оқиға («қалпақ») блогын қамтамасыз ететін қарапайым геймпад кеңейтімін жасайық.

Оқиға блогының әрбір сұрау циклі кезінде біз уақыт белгісін жұмыс уақыты объектісінен, алдыңғы және ағымдағы геймпад күйлерінен сақтаймыз. Уақыт белгісі бізде жаңа сайлау циклі бар -жоғын анықтау үшін қолданылады. Сонымен, біз бастаймыз:

сынып ScratchSimpleGamepad {

конструктор (жұмыс уақыты) {this.runtime = runtime this.currentMSecs = -1 this.previousButtons = this.currentButtons = }…} Бізде бір кіріс блогы болады, оның екі кірісі бар-түйменің нөмірі және оқиғаның басылуын немесе босатылуын бастауды қалайтын мәзір. Сонымен, біздің әдіс

getInfo () {

қайтару {«id»: «SimpleGamepad», «name»: «SimpleGamepad», «block»: [{«opcode»: «buttonPressedReleased», «blockType»: «hat», «text»: «button [eventType] «,» аргументтер «: {» b «: {» type «:» number «,» defaultValue «:» 0 «},» eventType «: {» type «:» number «,» defaultValue «:» 1 «,» меню «:» pressReleaseMenu «},},},],» мәзірлер «: {» pressReleaseMenu «: [{мәтін:» басу «, мән: 1}, {мәтін:» шығару «, мән: 0}],}}; } Менің ойымша, ашылмалы мәзірдегі мәндер сандар ретінде жарияланғанына қарамастан, опкод функциясына жол ретінде беріледі. Сондықтан оларды қажет болғанда мәзірде көрсетілген мәндермен салыстырыңыз. Біз енді оқиғаны сұраудың жаңа циклы болған кезде түймені жаңартатын әдісті жазамыз

жаңарту () {

if (this.runtime.currentMSecs == this.currentMSecs) return // жаңа сұрау циклы емес this.currentMSecs = this.runtime.currentMSecs var gamepads = navigator.getGamepads () if (геймпадтар == null || геймпадтар. ұзындығы = = 0 || геймпадтар [0] == нөлдік) {this.previousButtons = this.currentButtons = return} var gamepad = gamepad [0] if (gamepad.buttons.length! = This.previousButtons.length) { // түймелердің әр түрлі саны, сондықтан жаңа геймпад this.previousButtons = for (var i = 0; i <gamepad.buttons.length; i ++) this.previousButtons.push (false)} else {this.previousButtons = this. currentButtons} this.currentButtons = for (var i = 0; i <gamepad.buttons.length; i ++) this.currentButtons.push (gamepad.buttons .сығылған)} Ақырында, біз жаңарту () әдісін шақыру арқылы, содан кейін қажетті түйменің жаңа басылғанын немесе босатылғанын тексеру арқылы ағымдағы және алдыңғы түймешіктердің күйлерін салыстыру арқылы оқиға блогын іске асыра аламыз.

buttonPressedReleased ({b, eventType}) {

this.update () if (b <this.currentButtons.length) {if (eventType == 1) {// ескерту: бұл жол болады, сондықтан оны логикалық деп қабылдағаннан гөрі оны 1 -ге салыстырған дұрыс Бұл Ақырында біз сыныпты анықтағаннан кейін сиқырлы кеңейтімді тіркеу кодын қосамыз

(функция () {

var extensionInstance = жаңа ScratchSimpleGamepad (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo ()).)

Толық кодты мына жерден алуға болады.

7 -қадам: Қауіпсіз қорапты пайдалану

Тағы да, кеңейтімді бір жерге орналастырыңыз және бұл жолы оны ShelTester's Scratch режиміне url = дәлелмен емес load_plugin = жүктеңіз. Мысалы, менің қарапайым Gamepad модулі үшін мына жерге өтіңіз:

sheeptester.github.io/scratch-gui/?load_plugin=https://arpruss.github.io/simplegamepad.js

(Айтпақшы, егер сіз неғұрлым күрделі геймпад алғыңыз келсе, жоғарыдағы URL мекенжайынан «қарапайым» дегенді алып тастаңыз, сонда сізде шу мен аналогтық оське қолдау болады.)

Тағы да, кеңейтім Scratch редакторының сол жағында пайда болуы керек. Жоғарыда өте қарапайым Scratch бағдарламасы бар, ол 0 батырмасын басқанда «сәлем», ал оны босатқанда «қош бол» дейді.

8-қадам: қос үйлесімділік және жылдамдық

Мен кеңейту блоктары қорапсыз кеңейтімдер үшін жүктеу әдісін қолдана отырып, жылдамдықпен жұмыс істейтінін байқадым. Егер сіз Web Worker құм жәшігінде жұмыс істеудің қауіпсіздік артықшылықтары туралы ойламасаңыз, сіздің кодыңыз SheepTester режиміне? Load_plugin = URL аргументін жүктеуден пайда көреді.

Сіз кеңейту класын анықтағаннан кейін келесі кодты қолдана отырып, жүктеу әдістерінің екеуімен де үйлесімді жасай аласыз (CLASSNAME кеңейтім класының атауына өзгертіңіз):

(функция () {

var extensionClass = CLASSNAME if (typeof window === «undefined» ||! window.vm) {Scratch.extensions.register (new extensionClass ())} else {var extensionInstance = new extensionClass (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo (). id, serviceName)}}) ()