Scratch 3.0 -laajennukset: 8 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 08:59

Scratch -laajennukset ovat Javascript -koodin osia, jotka lisäävät uusia lohkoja Scratchiin. Vaikka Scratch sisältää joukon virallisia laajennuksia, ei ole virallista mekanismia käyttäjien tekemien laajennusten lisäämiseksi.

Kun tein Minecraftin Scratch 3.0 -ohjauslaajennusta, minun oli vaikea päästä alkuun. Tämä Instructable kerää yhteen tietoja eri lähteistä (erityisesti tästä) sekä muutamia asioita, jotka löysin itse.

Sinun on tiedettävä, miten voit ohjelmoida Javascriptissa ja kuinka voit isännöidä Javascriptiä verkkosivustolla. Jälkimmäiseen suosittelen GitHub -sivuja.

Tärkein temppu on käyttää SheepTesterin Scratch -modia, jonka avulla voit ladata laajennuksia ja laajennuksia.

Tämä opas opastaa sinua tekemään kaksi laajennusta:

• Hae: tietojen lataaminen URL -osoitteesta ja JSON -tunnisteiden purkaminen esimerkiksi säätietojen lataamista varten
• SimpleGamepad: peliohjaimen käyttäminen Scratchissa (hienostunut versio on täällä).

Vaihe 1: Kahdenlaisia laajennuksia

Laajennuksia on kahta tyyppiä, joita kutsun "hiekkalaatikoiksi" ja "hiekkalaatikoiksi". Hiekkalaatikkolaajennukset toimivat verkkotyöntekijöinä, ja niillä on siten merkittäviä rajoituksia:

• Verkkotyöntekijät eivät voi käyttää ikkunaobjektin globaaleja (heillä on sen sijaan maailmanlaajuinen itseobjekti, joka on paljon rajoitetumpi), joten et voi käyttää niitä esimerkiksi peliohjaimen käyttöön.
• Hiekkalaatikon laajennuksilla ei ole pääsyä Scratch -ajonaikaiseen objektiin.
• Hiekkalaatikon laajennukset ovat paljon hitaampia.
• Javascript -konsolin virheilmoitukset hiekkalaatikkolaajennuksille ovat salaisempia Chromessa.

Toisaalta:

• Muiden hiekkalaatikkolaajennusten käyttäminen on turvallisempaa.
• Hiekkalaatikkolaajennukset toimivat todennäköisemmin minkä tahansa virallisen laajennusten lataustuen kanssa.
• Hiekkalaatikon laajennuksia voidaan testata lataamatta niitä verkkopalvelimelle koodaamalla data: // URL -osoitteeseen.

Viralliset laajennukset (kuten musiikki, kynä jne.) Ovat kaikki hiekkalaatikoita. Laajennuksen konstruktori saa ajonaikaisen objektin Scratchista, ja ikkuna on täysin käytettävissä.

Hae -laajennus on hiekkalaatikko, mutta peliohjain tarvitsee navigointiobjektin ikkunasta.

Vaihe 2: Hiekkalaatikon laajennuksen kirjoittaminen: Osa I

Jos haluat tehdä laajennuksen, luo luokka, joka koodaa sen tiedot, ja lisää sitten hieman koodia rekisteröidäksesi laajennuksen.

Laajennusluokan tärkein asia on getInfo () -metodi, joka palauttaa vaadittujen kenttien objektin:

• id: laajennuksen sisäisen nimen on oltava yksilöllinen jokaiselle laajennukselle
• nimi: laajennuksen ystävällinen nimi, joka näkyy Scratchin lohkoluettelossa
• lohkot: luettelo objekteista, jotka kuvaavat uutta mukautettua lohkoa.

Lisäksi on valinnainen valikokenttä, jota ei käytetä Hae, mutta sitä käytetään Gamepadissa.

Joten, tässä on perusmalli Fetchille:

luokka ScratchFetch {

konstruktori () {} getInfo () {return {"id": "Hae", "nimi": "Hae", "lohkot": [/* lisää myöhemmin * /]}} / * lisää menetelmiä lohkoille * /} Scratch.extensions.register (uusi ScratchFetch ())

Vaihe 3: Hiekkalaatikon laajennuksen kirjoittaminen: Osa II

Nyt meidän on luotava luettelo lohkoista getInfo (): n objektissa. Jokainen lohko tarvitsee vähintään nämä neljä kenttää:

• opcode: tämä on sen menetelmän nimi, jota kutsutaan tekemään lohkon työ

• blockType: tämä on lohkotyyppi; yleisimmät laajennukset ovat:

  • "komento": tekee jotain, mutta ei palauta arvoa
  • "reportteri": palauttaa merkkijonon tai numeron
  • "Boolen": palauttaa boolen (huomioi isot kirjaimet)
  • "hattu": tapahtumien sieppauslohko; jos Scratch -koodisi käyttää tätä lohkoa, Scratch -ajonaikainen kysely suorittaa säännöllisesti siihen liittyvän menetelmän, joka palauttaa boolen kertoakseen, onko tapahtuma tapahtunut
• teksti: tämä on lohkon ystävällinen kuvaus, jossa argumentit ovat suluissa, esim. "nouda data "

• argumentit: tämä on objekti, jossa on kenttä jokaiselle argumentille (esim. "url" yllä olevassa esimerkissä); tällä objektilla on puolestaan seuraavat kentät:

  • tyyppi: joko "merkkijono" tai "numero"
  • defaultValue: esitäytettävä oletusarvo.

Esimerkiksi tässä on Haku -laajennuksen lohkokenttä:

"lohkot": [{"opcode": "fetchURL", "blockType": "reporter", "text": "hae tiedot ", "argumentit": {"url": {"type": "string", "defaultValue ":" https://api.weather.gov/stations/KNYC/observations "},}}, {" opcode ":" jsonExtract "," blockType ":" reportteri "," text ":" ote [nimi] from [data] "," argument ": {" name ": {" type ":" string "," defaultValue ":" temperature "}," data ": {" type ":" string "," defaultValue ": '{"lämpötila": 12,3}'},}},]

Tässä määrittelimme kaksi lohkoa: fetchURL ja jsonExtract. Molemmat ovat toimittajia. Ensimmäinen hakee tietoja URL -osoitteesta ja palauttaa ne, ja toinen poimii kentän JSON -tiedoista.

Lopuksi sinun on sisällytettävä menetelmät kahdelle lohkolle. Jokainen menetelmä ottaa objektin argumenttina, ja objekti sisältää kaikkien argumenttien kentät. Voit purkaa ne käyttämällä kiharaita aaltosulkeita argumentteissa. Tässä on esimerkiksi yksi synkroninen esimerkki:

jsonExtract ({nimi, data}) {

var parsed = JSON.parse (data) if (name in parsed) {var out = jäsennetty [name] var t = typeof (out) if (t == "string" || t == "number") return if if (t == "boolean") return t? 1: 0 palauttaa JSON.stringify (out)} else {return ""}}

Koodi vetää nimikentän JSON -tiedoista. Jos kenttä sisältää merkkijonon, numeron tai totuusarvon, palautamme sen. Muussa tapauksessa JSONify kenttä uudelleen. Ja palautamme tyhjän merkkijonon, jos nimi puuttuu JSONista.

Joskus saatat kuitenkin haluta tehdä esteen, joka käyttää asynkronista sovellusliittymää. FetchURL () -menetelmä käyttää hakusovellusliittymää, joka on asynkroninen. Tällaisessa tapauksessa sinun on palautettava lupaus menetelmästäsi, joka tekee työn. Esimerkiksi:

noudaURL ({url}) {

return nouda (url). then (response => response.text ())}

Se siitä. Koko laajennus on täällä.

Vaihe 4: Hiekkalaatikon laajennuksen käyttäminen

On kaksi tapaa käyttää hiekkalaatikkolaajennusta. Ensin voit ladata sen verkkopalvelimelle ja ladata sen sitten SheepTesterin Scratch -modiin. Toiseksi voit koodata sen data -URL -osoitteeksi ja ladata sen Scratch -modiin. Käytän itse asiassa toista menetelmää melko vähän testaamiseen, koska se välttää huolen siitä, että palvelimen välimuisti saa laajennuksen vanhemmat versiot. Huomaa, että vaikka voit isännöidä javascriptiä Github -sivuilta, et voi tehdä sitä suoraan tavallisesta github -arkistosta.

Fetch.js on isännöity osoitteessa https://arpruss.github.io/fetch.js. Tai voit muuntaa laajennuksesi datan URL -osoitteeksi lataamalla sen tänne ja kopioimalla sen sitten leikepöydälle. Tietojen URL -osoite on jättiläinen URL -osoite, joka sisältää koko tiedoston.

Siirry SheepTesterin Scratch -modiin. Napsauta vasemmassa alakulmassa olevaa Lisää laajennus -painiketta. Napsauta sitten "Valitse laajennus" ja kirjoita URL -osoitteesi (voit liittää halutessasi koko jättitiedon URL -osoitteen).

Jos kaikki meni hyvin, Scratch-näytön vasemmassa reunassa on merkintä laajennuksellesi. Jos asiat eivät sujuneet hyvin, avaa Javascript-konsoli (Shift-ctrl-J Chromessa) ja yritä korjata ongelma.

Yllä on esimerkki koodista, joka hakee ja jäsentää JSON -tiedot Yhdysvaltain kansallisen sääpalvelun KNYC -asemalta (New York) ja näyttää sen samalla, kun käännät spriten vastakkaiseen suuntaan kuin tuuli. Tein sen hakemalla tiedot verkkoselaimeen ja selvittämällä sitten tunnisteet. Jos haluat kokeilla toista sääasemaa, kirjoita lähellä oleva postinumero postinumero.gov -hakukenttään, ja sijaintisi sääsivun pitäisi antaa sinulle nelikirjaiminen asemakoodi, jota voit käyttää KNYC: n sijasta koodi.

Voit myös sisällyttää hiekkalaatikkolaajennuksesi suoraan SheepTesterin modin URL -osoitteeseen lisäämällä "? Url =" -argumentin. Esimerkiksi:

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

Vaihe 5: Hiekkalaatikon ulkopuolisen laajennuksen kirjoittaminen: Johdanto

Hiekkalaatikkoon kuulumattoman laajennuksen rakentaja ohittaa ajonaikaisen objektin. Voit jättää sen huomiotta tai käyttää sitä. Yksi Runtime -objektin käyttötapoista on käyttää sen currentMSecs -ominaisuutta tapahtumien synkronoimiseen ("hatut"). Ymmärtääkseni kaikki tapahtumalohkon opcodit pollataan säännöllisesti, ja jokaisella äänestyskierroksella on yksi currentMSecs -arvo. Jos tarvitset Runtime -objektia, aloitat laajennuksesi luultavasti seuraavasti:

luokka EXTENSIONCLASS {

konstruktori (ajonaikainen) {this.runtime = runtime…}…}

Kaikkia vakioikkunaobjekteja voidaan käyttää hiekkalaatikkoon kuulumattomassa laajennuksessa. Lopuksi hiekkalaatikkoon kuulumattoman laajennuksesi pitäisi päättyä tähän maagiseen koodiin:

(function () {

var extensionInstance = new EXTENSIONCLASS (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo ()) id, service (tunnus), palvelunimi (palvelu))

missä sinun pitäisi korvata EXTENSIONCLASS laajennuksesi luokalla.

Vaihe 6: Hiekkalaatikon ulkopuolisen laajennuksen kirjoittaminen: Yksinkertainen peliohjain

Tehdään nyt yksinkertainen peliohjaimen laajennus, joka tarjoaa yhden tapahtuman ("hattu") -lohkon, kun painiketta painetaan tai vapautetaan.

Jokaisen tapahtumalohkon kyselyjakson aikana tallennamme aikaleiman ajonaikaisesta objektista sekä edellisen ja nykyisen peliohjaimen tilasta. Aikaleimaa käytetään tunnistamaan, onko meillä uusi äänestysjakso. Aloitamme siis:

luokka ScratchSimpleGamepad {

konstruktori (ajonaikainen) {this.runtime = runtime this.currentMSecs = -1 this.previousButtons = this.currentButtons = }…} Meillä on yksi tapahtumalohko, jossa on kaksi tuloa-painikkeen numero ja valikko, josta valitaan, haluatko tapahtuman käynnistyvän painettaessa vai vapautettaessa. Joten tässä on menetelmämme

saada tietoa() {

return {"id": "SimpleGamepad", "name": "SimpleGamepad", "lohkot": [{"opcode": "buttonPressedReleased", "blockType": "hat", "text": "painike [eventType] "," argumentit ": {" b ": {" type ":" number "," defaultValue ":" 0 "}," eventType ": {" type ":" number "," defaultValue ":" 1 "," menu ":" pressReleaseMenu "},},},]," menus ": {" pressReleaseMenu ": [{text:" press ", value: 1}, {text:" release ", value: 0}],}}; } Luulen, että avattavan valikon arvot välitetään edelleen opcode-toiminnolle merkkijonoina, vaikka ne on ilmoitettu numeroina. Vertaa niitä tarvittaessa suoraan valikossa määritettyihin arvoihin. Kirjoitamme nyt menetelmän, joka päivittää painikkeen tilat aina, kun uusi tapahtumakyselyjakso tapahtuu

päivitys () {

if (this.runtime.currentMSecs == this.currentMSecs) return // ei uusi äänestysjakso this.currentMSecs = this.runtime.currentMSecs var gamepads = navigator.getGamepad () if (gamepads == null || gamepads.length = = 0 || peliohjaimet [0] == null) {this.previousButtons = this.currentButtons = return} var gamepad = peliohjaimet [0] if (gamepad.buttons.length! = This.previousButtons.length) { // eri määrä painikkeita, joten uusi peliohjain 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 . painettu)} Lopuksi voimme toteuttaa tapahtumalohkon kutsumalla päivitys () -menetelmän ja tarkistamalla sitten, onko vaadittua painiketta juuri painettu tai vapautettu, vertaamalla nykyistä ja edellistä painikkeen tilaa

buttonPressedReleased ({b, eventType}) {

this.update () if (b <this.currentButtons.length) {if (eventType == 1) {// Huomautus: tämä on merkkijono, joten on parempi verrata sitä arvoon 1 kuin käsitellä sitä Boolen arvona, jos (this.currentButtons &&! this.previousButtons ) {return true}} else {if (! this.currentButtons && this.previousButtons ) {return true}}} return false} Ja lopuksi lisäämme maagisen laajennuksen rekisteröintikoodin luokan määrittämisen jälkeen

(function () {

var extensionInstance = new ScratchSimpleGamepad (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInNO ()),)

Koko koodin saat täältä.

Vaihe 7: Hiekkalaatikon ulkopuolisen laajennuksen käyttäminen

Isännöi jälleen laajennustasi jonnekin ja lataa se tällä kertaa SheepTesterin Scratch -modin url = argumentilla load_plugin = eikä url =. Esimerkiksi yksinkertaisen Gamepad -modin kohdalla siirry osoitteeseen:

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

(Muuten, jos haluat kehittyneemmän peliohjaimen, poista "yksinkertainen" yllä olevasta URL -osoitteesta, niin saat rumble- ja analogiakselituen.)

Laajennuksen pitäisi jälleen näkyä Scratch -editorin vasemmalla puolella. Yllä on hyvin yksinkertainen Scratch -ohjelma, joka sanoo "hei", kun painat painiketta 0 ja "hyvästi", kun vapautat sen.

Vaihe 8: Kaksoisyhteensopivuus ja nopeus

Olen huomannut, että laajennuslohkot toimivat suuruusluokkaa nopeammin käyttämällä latausmenetelmää, jota käytin hiekkalaatikon ulkopuolisissa laajennuksissa. Joten jos et välitä Web Worker -hiekkalaatikon käytön turvallisuudesta, koodisi hyötyy siitä, että se ladataan SheepTesterin modin "load_plugin = URL -argumentilla".

Voit tehdä hiekkalaatikkolaajennuksen yhteensopivaksi molempien latausmenetelmien kanssa käyttämällä seuraavaa koodia, kun olet määrittänyt laajennusluokan (vaihda LUOKKA NIMI laajennusluokan nimeksi):

(function () {

var extensionClass = LUOKANIMI 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)}}) ()