Scratch 3.0 laiendused: 8 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:45

Scratchi laiendid on Javascripti koodi tükid, mis lisavad Scratchile uusi plokke. Kuigi Scratch on komplekteeritud hunniku ametlike laiendustega, pole kasutajate loodud laienduste lisamiseks ametlikku mehhanismi.

Kui tegin Scratch 3.0 jaoks Minecrafti juhtimislaiendit, oli mul raske alustada. See Instructable kogub kokku teavet erinevatest allikatest (eriti sellest) ja mõned asjad, mille ma ise avastasin.

Peate teadma, kuidas Javascriptis programmeerida ja kuidas Javascripti veebisaidil hostida. Viimase jaoks soovitan GitHubi lehti.

Peamine trikk on kasutada SheepTesteri Scratchi modi, mis võimaldab teil laadida laiendusi ja pistikprogramme.

See juhend juhendab teid kahe laienduse tegemisel:

• Toomine: andmete laadimine URL -ist ja JSON -siltide ekstraheerimine, näiteks ilmastikuandmete laadimiseks
• SimpleGamepad: Scratchi mängukontrolleri kasutamine (keerukam versioon on siin).

Samm: kahte tüüpi laiendusi

On kahte tüüpi laiendusi, mida nimetan "liivakastita" ja "liivakastiks". Liivakastilaiendid töötavad veebitöötajatena ja neil on seetõttu olulised piirangud.

• Veebitöötajad ei pääse aknaobjekti globaalidele juurde (selle asemel on neil globaalne minaobjekt, mis on palju piiratum), nii et te ei saa neid kasutada näiteks mängupuldi juurdepääsuks.
• Liivakastilaienditel pole juurdepääsu Scratchi käitusaja objektile.
• Liivakastiga laiendid on palju aeglasemad.
• Liivakastiga laiendite JavaScripti konsooli veateated on Chrome'is krüptilisemad.

Teiselt poolt:

• Teiste inimeste liivakastiga laienduste kasutamine on turvalisem.
• Liivakastiga laiendid töötavad tõenäoliselt koos võimaliku ametliku laienduste laadimise toega.
• Liivakastiga laiendusi saab testida ilma veebiserverisse üles laadimata, kodeerides andmed: // URL -i.

Ametlikud laiendused (näiteks muusika, pliiats jne) on kõik liivakastita. Laienduse konstruktor saab käitusaja objekti Scratchilt ja aken on täielikult juurdepääsetav.

Laiendus Fetch on liivakastis, kuid Gamepadil on vaja aknast navigeerimisobjekti.

2. samm: liivakastiga laienduse kirjutamine: I osa

Laiendi loomiseks loote klassi, mis kodeerib selle kohta teavet, ja lisage seejärel laiendi registreerimiseks natuke koodi.

Laiendusklassi peamine asi on getInfo () meetod, mis tagastab nõutavate väljadega objekti:

• id: laiendi sisemine nimi peab olema iga laiendi jaoks kordumatu
• nimi: laienduse sõbralik nimi, mis kuvatakse Scratchi plokkide loendis
• plokid: uut kohandatud plokki kirjeldavate objektide loend.

Lisaks on valikuline menüüväli, mida Fetch ei kasuta, kuid mida kasutatakse Gamepadis.

Niisiis, siin on allalaadimise põhimall:

klass ScratchFetch {

konstruktor () {} getInfo () {return {"id": "Fetch", "name": "Fetch", "plokid": [/* lisa hiljem * /]}} / * lisage plokkidele meetodid * /} Scratch.extensions.register (uus ScratchFetch ())

3. samm: liivakastiga laienduse kirjutamine: II osa

Nüüd peame looma getInfo () objekti plokkide loendi. Iga plokk vajab vähemalt neid nelja välja:

• opcode: see on ploki töö tegemiseks kutsutud meetodi nimi

• blockType: see on ploki tüüp; levinumad laiendused on järgmised:

  • "käsk": teeb midagi, kuid ei tagasta väärtust
  • "reporter": tagastab stringi või numbri
  • "Boolean": tagastab tõeväärtuse (pange tähele suurtähti)
  • "müts": sündmuste püüdmise plokk; kui teie Scratchi kood kasutab seda plokki, küsitleb Scratchi käitusaeg regulaarselt seotud meetodit, mis tagastab tõeväärtuse, et öelda, kas sündmus on juhtunud
• tekst: see on sõbralik ploki kirjeldus, sulgudes on argumendid, nt „andmete toomine aadressilt ”

• argumendid: see on objekt, millel on iga argumendi jaoks väli (nt "URL" ülaltoodud näites); sellel objektil on omakorda järgmised väljad:

  • tüüp: kas "string" või "number"
  • defaultValue: vaikimisi täidetav väärtus.

Näiteks siin on minu väljalaiendi Fetch plokkide väli:

"plokid": [{"opcode": "fetchURL", "blockType": "reporter", "text": "andmete toomine aadressilt ", "argument": {"url": {"type": "string", "defaultValue" ":" https://api.weather.gov/stations/KNYC/observations "},}}, {" opcode ":" jsonExtract "," blockType ":" reporter "," text ":" väljavõte [nimi] from [data] "," argument ": {" name ": {" type ":" string "," defaultValue ":" Temperature "}," data ": {" type ":" string "," defaultValue ": '{"temperatuur": 12,3}'},}},]

Siin määratlesime kaks plokki: fetchURL ja jsonExtract. Mõlemad on reporterid. Esimene tõmbab andmed URL -ist ja tagastab need ning teine ekstraheerib JSON -andmetest välja.

Lõpuks peate lisama kahe ploki meetodid. Iga meetod võtab argumendina objekti, kusjuures objekt sisaldab kõigi argumentide välju. Saate need dekodeerida, kasutades argumentides lokkis traksid. Näiteks siin on üks sünkroonne näide:

jsonExtract ({nimi, andmed}) {

var parsed = JSON.parse (andmed) if (nimi parsitud) {var out = parsed [name] var t = typeof (out) if (t == "string" || t == "number") tagastavad, kui (t == "boolean") return t? 1: 0 tagastab JSON.stringify (out)} else {return ""}}

Kood tõmbab nimevälja JSON -i andmetest. Kui väli sisaldab stringi, numbrit või tõeväärtust, tagastame selle. Vastasel juhul muudame välja uuesti. Ja tagastame tühja stringi, kui nimi puudub JSON -ist.

Mõnikord võiksite siiski luua ploki, mis kasutab asünkroonset API -d. FetchURL () meetod kasutab asünkroonset tõmbamis -API -d. Sellisel juhul peaksite tagastama lubaduse oma meetodilt, mis seda tööd teeb. Näiteks:

fetchURL ({url}) {

tagasisaatmine (url).siis (vastus => vastus.tekst ())}

See on kõik. Täielik laiendus on siin.

Samm: liivakastiga laienduse kasutamine

Liivakastiga laiendit saab kasutada kahel viisil. Esiteks saate selle veebiserverisse üles laadida ja seejärel SheepTesteri Scratchi modi laadida. Teiseks saate selle kodeerida andmete URL -i ja laadida selle Scratchi modi. Ma kasutan tegelikult teist meetodit testimiseks üsna vähe, kuna see väldib muret selle pärast, et serveri vahemällu saavad laienduse vanemad versioonid. Pange tähele, et kuigi saate JavaScripti hostida Githubi lehtedelt, ei saa te seda teha otse tavalisest githubi hoidlast.

Minu fetch.js on hostitud aadressil https://arpruss.github.io/fetch.js. Või saate oma laiendi teisendada andmete URL -iks, laadides selle siia üles ja kopeerides seejärel lõikelauale. Andmete URL on hiiglaslik URL, mis sisaldab tervet faili.

Minge SheepTesteri Scratchi modi. Klõpsake vasakus alanurgas nuppu Lisa laiend. Seejärel klõpsake "Vali laiend" ja sisestage oma URL (soovi korral saate kleepida kogu hiiglasliku andmete URL -i).

Kui kõik läks hästi, on Scratchi ekraani vasakus servas oma laienduse jaoks kirje. Kui asjad ei läinud hästi, peaksite avama oma Javascripti konsooli (Chrome'is shift-ctrl-J) ja proovima probleemi siluda.

Eespool leiate mõned näidiskoodid, mis toovad ja analüüsivad JSON -i andmeid USA riikliku ilmateenistuse KNYC (New Yorgis) jaamast ja kuvavad need, pöörates samal ajal sprite'i tuule puhumise poole. See, kuidas ma selle tegin, oli andmete veebibrauserisse toomine ja seejärel siltide nuputamine. Kui soovite proovida mõnda muud ilmajaama, sisestage aadressi weather.gov otsinguväljale läheduses asuv postiindeks ja teie asukoha ilmateade peaks teile andma neljatähelise jaama koodi, mida saate KNYC asemel kasutada koodi.

Samuti saate lisada oma liivakastilaiendi otse SheepTesteri modi URL -i, lisades argumendi "? Url =". Näiteks:

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

5. samm: liivakastita laiendi kirjutamine: sissejuhatus

Liivakastita laienduse konstruktor läbib käitusaja objekti. Saate seda ignoreerida või kasutada. Runtime objekti üks kasutusviis on selle omaduse currentMSecs kasutamine sündmuste ("mütsiplokid") sünkroonimiseks. Niipalju kui ma aru saan, küsitletakse kõiki sündmusteploki opkoode regulaarselt ja igal küsitlusvoorul on üks praeguneMSecs väärtus. Kui vajate Runtime objekti, käivitate tõenäoliselt oma laienduse järgmiselt.

klass EXTENSIONCLASS {

konstruktor (käitusaeg) {this.runtime = käitusaeg…}…}

Liivakastita laienduses saab kasutada kõiki tavalisi aknaobjekti asju. Lõpuks peaks teie liivakastita laiend lõppema selle võlukoodiga:

(funktsioon () {

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

kus peaksite EXTENSIONCLASSi asendama oma laienduse klassiga.

6. samm: liivakastita laienduse kirjutamine: lihtne mängupult

Teeme nüüd lihtsa mängupuldi laienduse, mis annab nupule vajutamisel või vabastamisel ühe sündmuse ("mütsi") ploki.

Iga sündmuseploki küsitlustsükli ajal salvestame käitusajaobjektilt ajatempli ning eelmise ja praeguse mängupuldi oleku. Ajatempli abil tuvastatakse, kas meil on uus küsitlustsükkel. Niisiis, alustame:

klassi ScratchSimpleGamepad {

konstruktor (käitusaeg) {this.runtime = käitusaeg this.currentMSecs = -1 this.previousButtons = this.currentButtons = }…} Meil on üks sündmusteplokk, millel on kaks sisendit-nupunumber ja menüü, et valida, kas me tahame, et sündmus käivituks vajutamisel või vabastamisel. Niisiis, siin on meie meetod

getInfo () {

return {"id": "SimpleGamepad", "nimi": "SimpleGamepad", "plokid": [{"opcode": "buttonPressedReleased", "blockType": "müts", "text": "nupp [eventType] "," argument ": {" b ": {" type ":" number "," defaultValue ":" 0 "}," eventType ": {" type ":" number "," defaultValue ":" 1 "," menu ":" pressReleaseMenu "},},},]," menüüd ": {" pressReleaseMenu ": [{text:" press ", value: 1}, {text:" release ", value: 0}],}}; } Ma arvan, et rippmenüü väärtused edastatakse ikkagi opcode-funktsioonina stringidena, hoolimata sellest, et need on numbriteks deklareeritud. Nii et vajadusel võrrelge neid selgesõnaliselt menüüs määratud väärtustega. Nüüd kirjutame meetodi, mis värskendab nupu olekuid iga kord, kui toimub uus sündmuste küsitlustsükkel

uuenda () {

if (this.runtime.currentMSecs == this.currentMSecs) return // ei ole uus küsitlustsükkel this.currentMSecs = this.runtime.currentMSecs var gamepad = navigator.getGamepad () if (gamepad == null || gamepad.length = = 0 || mängupuldid [0] == null) {this.previousButtons = this.currentButtons = return} var gamepad = gamepad [0] if (gamepad.buttons.length! = This.previousButtons.length) { // erinev arv nuppe, seega uus mängupult 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 .pressitud)} Lõpuks saame oma sündmusteploki rakendada, helistades meetodile update () ja seejärel kontrollides, kas vajalikku nuppu on just vajutatud või vabastatud, võrreldes praegust ja eelmist nuppude olekut

buttonPressedReleased ({b, eventType}) {

this.update () if (b <this.currentButtons.length) {if (eventType == 1) {// märkus: see on string, seega on parem võrrelda seda 1 -ga kui käsitleda seda Booleanina, kui (this.currentButtons &&! this.previousButtons ) {return true}} else {if (! this.currentButtons && this.previousButtons ) {return true}}} return false} Ja lõpuks lisame pärast klassi määratlemist oma maagilise laienduse registreerimiskoodi

(funktsioon () {

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

Täieliku koodi saate siit.

Samm: liivakastita laienduse kasutamine

Taaskord hostige oma laiendus kusagil ja laadige see seekord SheepTesteri Scratchi modi asemel argumendiga load_plugin =, mitte url =. Näiteks minu lihtsa Gamepad modi jaoks minge aadressile:

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

(Muide, kui soovite keerukamat mängupulti, eemaldage ülaltoodud URL -ist lihtsalt "lihtne" ja saate rumble'i ja analoogtelgede toe.)

Jällegi peaks laiend ilmuma Scratchi redaktori vasakule küljele. Eespool on väga lihtne Scratchi programm, mis ütleb nupule 0 vajutades "tere" ja selle vabastamisel "hüvasti".

8. samm: kahekordne ühilduvus ja kiirus

Olen märganud, et laiendusplokid töötavad suurusjärgu võrra kiiremini, kasutades laadimismeetodit, mida kasutasin liivakastita laiendite puhul. Nii et kui te ei hooli veebitöötaja liivakastis töötamise turvalisuse eelistest, on teie koodile kasulik, kui laadite SheepTesteri modi argumendi? Load_plugin = URL.

Saate liivakastiga laienduse ühildada mõlema laadimismeetodiga, kasutades pärast laiendusklassi määratlemist järgmist koodi (muutke KLASSNIM oma laiendusklassi nimeks):

(funktsioon () {

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)}}) ()