Satura rādītājs:

Scratch 3.0 paplašinājumi: 8 soļi
Scratch 3.0 paplašinājumi: 8 soļi

Video: Scratch 3.0 paplašinājumi: 8 soļi

Video: Scratch 3.0 paplašinājumi: 8 soļi
Video: Купюрница из картона-с ретро автомобилем 2024, Jūlijs
Anonim
Scratch 3.0 paplašinājumi
Scratch 3.0 paplašinājumi

Scratch paplašinājumi ir Javascript koda fragmenti, kas Scratch pievieno jaunus blokus. Lai gan Scratch ir komplektā ar virkni oficiālu paplašinājumu, nav oficiāla mehānisma, kā pievienot lietotāja veidotus paplašinājumus.

Izstrādājot Minecraft vadības paplašinājumu Scratch 3.0, man bija grūti sākt darbu. Šis Instructable apkopo informāciju no dažādiem avotiem (īpaši šo), kā arī dažas lietas, ko es atklāju pats.

Jums jāzina, kā programmēt Javascript un kā mitināt Javascript vietnē. Pēdējam es iesaku GitHub Pages.

Galvenais triks ir izmantot SheepTester Scratch modi, kas ļauj ielādēt paplašinājumus un spraudņus.

Šī pamācība palīdzēs jums izveidot divus paplašinājumus:

  • Ielādēt: ielādēt datus no URL un iegūt JSON tagus, piemēram, laika apstākļu datu ielādēšanai
  • SimpleGamepad: izmantojot spēles kontrolieri programmā Scratch (šeit ir pieejama sarežģītāka versija).

1. darbība: divu veidu paplašinājumi

Pastāv divu veidu paplašinājumi, kurus es saukšu par "bez smilškastes" un "smilšu kastes". Paplašinājumi ar smilškastes kastēm darbojas kā tīmekļa darbinieki, un tiem ir ievērojami ierobežojumi.

  • Tīmekļa darbinieki nevar piekļūt globālajiem loga objektā (tā vietā viņiem ir globāls pašobjekts, kas ir daudz ierobežotāks), tāpēc jūs nevarat tos izmantot tādām lietām kā piekļuve spēļu planšetdatoram.
  • Paplašinājumiem ar smilškastes kastēm nav piekļuves izpildlaika objektam Scratch.
  • Paplašinājumi ar smilškastes kastēm ir daudz lēnāki.
  • Javascript konsoles kļūdu ziņojumi smilškastes paplašinājumiem pārlūkā Chrome ir noslēpumaināki.

No otras puses:

  • Citu cilvēku smilškastes paplašinājumu izmantošana ir drošāka.
  • Smilškastes paplašinājumi, visticamāk, darbosies ar jebkuru oficiālu paplašinājumu ielādes atbalstu.
  • Smilškastes paplašinājumus var pārbaudīt bez augšupielādes tīmekļa serverī, kodējot to data: // URL.

Oficiālie paplašinājumi (piemēram, mūzika, pildspalva utt.) Ir bez smilškastes. Paplašinājuma konstruktors iegūst izpildlaika objektu no Scratch, un logs ir pilnībā pieejams.

Paplašinājums Ielādēt ir ievietots smilšu kastē, bet Gamepad vienam ir nepieciešams navigatora objekts no loga.

2. darbība. Paplašinājuma rakstīšana smilškastē: I daļa

Lai izveidotu paplašinājumu, izveidojiet klasi, kas kodē informāciju par to, un pēc tam pievienojiet mazliet koda, lai reģistrētu paplašinājumu.

Galvenais paplašinājumu klasē ir metode getInfo (), kas atgriež objektu ar obligātajiem laukiem:

  • id: paplašinājuma iekšējam nosaukumam jābūt unikālam katram paplašinājumam
  • nosaukums: paplašinājuma draudzīgais nosaukums, kas redzams Scratch bloku sarakstā
  • bloki: objektu saraksts, kas apraksta jauno pielāgoto bloku.

Ir arī izvēles izvēlņu lauks, kas netiek izmantots Fetch, bet tiks izmantots Gamepad.

Tātad, šeit ir Fetch pamata veidne:

klase ScratchFetch {

konstruktors () {} getInfo () {return {"id": "Ielādēt", "nosaukums": "Ielādēt", "bloki": [/* pievienot vēlāk * /]}} / * pievienot metodes blokiem * /} Scratch.extensions.register (jauns ScratchFetch ())

3. darbība. Paplašinājuma rakstīšana smilškastē: II daļa

Tagad mums ir jāizveido bloku saraksts getInfo () objektā. Katram blokam ir nepieciešami vismaz šie četri lauki:

  • opcode: tas ir metodes nosaukums, kas tiek aicināts veikt bloka darbu
  • blockType: tas ir bloka veids; visizplatītākie paplašinājumiem ir:

    • "komanda": dara kaut ko, bet neatgriež vērtību
    • "reportieris": atgriež virkni vai skaitli
    • “Būla”: atgriež Būla vērtību (ņemiet vērā lielo burtu lietojumu)
    • "cepure": notikumu ķeršanas bloks; ja jūsu Scratch kods izmanto šo bloku, Scratch izpildlaiks regulāri aptauj saistīto metodi, kas atgriež Būla vērtību, lai pateiktu, vai notikums ir noticis
  • teksts: šis ir draudzīgs bloka apraksts, iekavās norādot argumentus, piemēram, "ielādēt datus no "
  • argumenti: šis ir objekts, kuram ir lauks katram argumentam (piemēram, “url” iepriekš minētajā piemērā); šim objektam savukārt ir šādi lauki:

    • tips: vai nu "virkne" vai "numurs"
    • defaultValue: noklusējuma vērtība, kas jāaizpilda iepriekš.

Piemēram, šeit ir bloka lauks manā paplašinājumā Ielādēt:

"bloki": [{"opcode": "fetchURL", "blockType": "reportieris", "text": "ielādēt datus no ", "arguments": {"url": {"type": "string", "defaultValue ":" https://api.weather.gov/stations/KNYC/observations "},}}, {" opcode ":" jsonExtract "," blockType ":" reportieris "," text ":" izraksts [nosaukums] from [data] "," argument ": {" name ": {" type ":" string "," defaultValue ":" Temperature "}," data ": {" type ":" string "," defaultValue ": '{"temperatūra": 12.3}'},}},]

Šeit mēs definējām divus blokus: fetchURL un jsonExtract. Abi ir reportieri. Pirmais iegūst datus no URL un atgriež tos, bet otrais iegūst lauku no JSON datiem.

Visbeidzot, jums jāiekļauj divu bloku metodes. Katra metode objektu izmanto kā argumentu, objektā iekļaujot visu argumentu laukus. Tos var atšifrēt, argumentos izmantojot cirtainās breketes. Piemēram, šeit ir viens sinhronais piemērs:

jsonExtract ({vārds, dati}) {

var parsed = JSON.parse (dati) if (nosaukums parsētajā) {var out = parsēts [vārds] var t = typeof (out) if (t == "string" || t == "number") return out if (t == "Būla") atgriezties t? 1: 0 atgriezt JSON.stringify (out)} cits {return ""}}

Kods izvelk nosaukuma lauku no JSON datiem. Ja laukā ir virkne, skaitlis vai Būla vērtība, mēs to atgriežam. Pretējā gadījumā mēs atkārtoti JSONify lauku. Un mēs atdodam tukšu virkni, ja JSON trūkst nosaukuma.

Tomēr dažreiz jūs varat izveidot bloku, kurā tiek izmantota asinhronā API. Metode fetchURL () izmanto asinhrono ielādes API. Šādā gadījumā jums jāatdod solījums no savas metodes, kas veic darbu. Piemēram:

fetchURL ({url}) {

atgriezt ienešanu (url).tad (atbilde => atbildes.teksts ())}

Tieši tā. Pilns pagarinājums ir šeit.

4. darbība. Paplašinājuma ar smilškastīti izmantošana

Izmantojot smilškastes paplašinājumu
Izmantojot smilškastes paplašinājumu
Izmantojot smilškastes paplašinājumu
Izmantojot smilškastes paplašinājumu
Izmantojot smilškastes paplašinājumu
Izmantojot smilškastes paplašinājumu

Ir divi veidi, kā izmantot paplašinājumu ar smilškastes kastīti. Pirmkārt, varat to augšupielādēt tīmekļa serverī un pēc tam ielādēt SheepTester Scratch mod. Otrkārt, varat to kodēt datu URL un ielādēt to Scratch mod. Es faktiski izmantoju otro metodi testēšanai, jo tā izvairās no bažām par to, ka servera kešatmiņā tiek saglabātas paplašinājuma vecākās versijas. Ņemiet vērā: lai gan jūs varat mitināt javascript no Github Pages, to nevar izdarīt tieši no parastas github krātuves.

Mana fetch.js tiek mitināta vietnē https://arpruss.github.io/fetch.js. Vai arī varat pārveidot paplašinājumu par datu URL, augšupielādējot to šeit un pēc tam nokopējot to starpliktuvē. Datu URL ir milzīgs URL, kurā ir vesels fails.

Dodieties uz SheepTester Scratch mod. Apakšējā kreisajā stūrī noklikšķiniet uz pogas Pievienot paplašinājumu. Pēc tam noklikšķiniet uz "Izvēlēties paplašinājumu" un ievadiet savu URL (ja vēlaties, varat ielīmēt visu milzu datu URL).

Ja viss noritēja labi, Scratch ekrāna kreisajā pusē būs jūsu paplašinājuma ieraksts. Ja viss negāja labi, atveriet savu Javascript konsoli (pārlūkā Chrome shift-ctrl-J) un mēģiniet atkļūdot problēmu.

Iepriekš jūs atradīsit koda piemēru, kas izgūst un parsē JSON datus no ASV Nacionālā meteoroloģiskā dienesta KNYC (Ņujorkā) stacijas un parāda to, vienlaikus pagriežot spritu pretī vējam. Es to izveidoju, ielādējot datus tīmekļa pārlūkprogrammā un pēc tam izdomājot tagus. Ja vēlaties izmēģināt citu meteoroloģisko staciju, ievadiet tuvumā esošo pasta indeksu meklēšanas lodziņā weather.gov, un jūsu atrašanās vietas laikapstākļu lapā ir jānorāda četru burtu stacijas kods, ko varat izmantot KNYC vietā kods.

Jūs varat arī iekļaut savu smilškastes paplašinājumu tieši SheepTester modeļa vietrādī URL, pievienojot argumentu "? Url =". Piemēram:

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

5. darbība. Paplašinājuma, kas nav pievienots smilškastē, rakstīšana: Ievads

Paplašinājuma, kas nav iekļauts smilškastē, konstruktors saņem izpildlaika objektu. Jūs varat to ignorēt vai izmantot. Viens no Runtime objekta lietojumiem ir izmantot tā rekvizītu currentMSecs, lai sinhronizētu notikumus ("cepuru bloki"). Cik es varu pateikt, visi notikumu bloka opcodes tiek aptaujāti regulāri, un katrai aptaujas kārtai ir viena pašreizējāMSecs vērtība. Ja jums ir nepieciešams Runtime objekts, iespējams, sāksit paplašinājumu ar:

klase EXTENSIONCLASS {

konstruktors (izpildlaiks) {this.runtime = runtime…}…}

Visas standarta loga objekta lietas var izmantot paplašinājumā bez smilškastes. Visbeidzot, jūsu paplašinājumam bez smilškastes vajadzētu beigties ar šo maģiskā koda bitu:

(funkcija () {

var extensionInstance = jauns EXTENSIONCLASS (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo ()) id, service ())

kur EXTENSIONCLASS jāaizstāj ar paplašinājuma klasi.

6. darbība. Paplašinājuma, kas nav pievienots smilškastē, rakstīšana: vienkārša spēļu tastatūra

Tagad izveidosim vienkāršu gamepad paplašinājumu, kas nodrošina viena notikuma ("cepures") bloku, nospiežot vai atlaižot pogu.

Katrā notikumu bloka aptaujas ciklā mēs saglabāsim laika zīmogu no izpildlaika objekta, kā arī iepriekšējo un pašreizējo gamepad stāvokli. Laika zīmogs tiek izmantots, lai atpazītu, vai mums ir jauns aptaujas cikls. Tātad, mēs sākam ar:

klases ScratchSimpleGamepad {

konstruktors (izpildlaiks) {this.runtime = runtime this.currentMSecs = -1 this.previousButtons = this.currentButtons = }…} Mums būs viens notikumu bloks ar divām ievadēm-pogas numuru un izvēlni, lai izvēlētos, vai mēs vēlamies, lai notikums sāktos pēc preses vai atbrīvošanas. Tātad, šeit ir mūsu metode

iegūt informāciju() {

return {"id": "SimpleGamepad", "name": "SimpleGamepad", "bloki": [{"opcode": "buttonPressedReleased", "blockType": "cepure", "text": "poga [eventType] "," arguments ": {" b ": {" type ":" number "," defaultValue ":" 0 "}," eventType ": {" type ":" number "," defaultValue ":" 1 "," menu ":" pressReleaseMenu "},},},]," menus ": {" pressReleaseMenu ": [{text:" press ", value: 1}, {text:" release ", value: 0}],}}; } Es domāju, ka nolaižamās izvēlnes vērtības joprojām tiek nodotas opcode funkcijai kā virknes, lai gan tās ir deklarētas kā skaitļi. Tāpēc nepārprotami salīdziniet tos ar izvēlnē norādītajām vērtībām. Tagad mēs rakstām metodi, kas atjaunina pogas stāvokli ikreiz, kad notiek jauns notikumu aptaujas cikls

Atjaunināt() {

if (this.runtime.currentMSecs == this.currentMSecs) return // nav jauns aptaujas cikls this.currentMSecs = this.runtime.currentMSecs var gamepads = navigator.getGamepads () if (gamepads == null || gamepads.length = = 0 || gamepads [0] == null) {this.previousButtons = this.currentButtons = return} var gamepad = gamepads [0] if (gamepad.buttons.length! = This.previousButtons.length) { // atšķirīgs pogu skaits, tāpēc jaunais gamepad this.previousButtons = for (var i = 0; i <gamepad.buttons.length; i ++) this.previousButtons.push (false)} else {this.previousButtons = this. currentButtons} this.currentButtons = (var i = 0; i <gamepad.buttons.length; i ++) this.currentButtons.push (gamepad.buttons .piespiests)} Visbeidzot, mēs varam īstenot savu notikumu bloku, izsaucot atjaunināšanas () metodi un pēc tam pārbaudot, vai vajadzīgā poga ir tikko nospiesta vai atlaista, salīdzinot pašreizējos un iepriekšējos pogu stāvokļus

buttonPressedReleased ({b, eventType}) {

this.update () if (b <this.currentButtons.length) {if (eventType == 1) {// piezīme: šī būs virkne, tāpēc labāk to salīdzināt ar 1, nevis uzskatīt to par Būla, ja (this.currentButtons &&! this.previousButtons ) {return true}} else {if (! this.currentButtons && this.previousButtons ) {return true}}} return false} Visbeidzot, pēc klases definēšanas mēs pievienojam savu burvju paplašinājuma reģistrācijas kodu

(funkcija () {

var extensionInstance = jauns ScratchSimpleGamepad (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo ())., id.)

Pilnu kodu varat iegūt šeit.

7. darbība. Paplašinājuma, kas nav pievienots smiltīm, izmantošana

Paplašinājuma, kas nav pievienots smiltīm, izmantošana
Paplašinājuma, kas nav pievienots smiltīm, izmantošana

Vēlreiz kaut kur mitiniet savu paplašinājumu un šoreiz ielādējiet to ar argumentu load_plugin =, nevis url = ar SheepTester Scratch mod. Piemēram, manam vienkāršajam Gamepad modam dodieties uz:

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

(Starp citu, ja vēlaties sarežģītāku spēļu tastatūru, vienkārši noņemiet “vienkāršo” no iepriekš minētā URL, un jums būs dārdoņa un analogās ass atbalsts.)

Atkal paplašinājumam vajadzētu parādīties jūsu Scratch redaktora kreisajā pusē. Iepriekš ir ļoti vienkārša Scratch programma, kas saka "sveiki", nospiežot pogu 0, un "ardievu", kad to atlaižat.

8. darbība: dubultā saderība un ātrums

Esmu ievērojis, ka paplašinājumu bloki darbojas par kārtu ātrāk, izmantojot ielādes metodi, kuru izmantoju paplašinājumiem, kas nav ievietoti smilškastē. Tātad, ja vien jums nerūp drošības priekšrocības, kas rodas, darbojoties Web Worker smilškastē, jūsu kods gūs labumu, ja SheepTester mod. Tiks ielādēts ar argumentu? Load_plugin = URL.

Jūs varat padarīt paplašinājumu ar smilškastes kastīti saderīgu ar abām ielādes metodēm, pēc paplašinājuma klases definēšanas izmantojot šādu kodu (nomainiet KLASNĪVU uz paplašinājuma klases nosaukumu):

(funkcija () {

var extensionClass = CLASSNAME, ja (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)}}) ()

Ieteicams: