Zgjerime Scratch 3.0: 8 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:10

Zgjatjet e gërvishtjeve janë pjesë të kodit Javascript që shtojnë blloqe të reja në Scratch. Ndërsa Scratch është i paketuar me një mori shtesash zyrtare, nuk ka një mekanizëm zyrtar për shtimin e shtesave të bëra nga përdoruesit.

Kur po bëja shtrirjen time të kontrollit të Minecraft për Scratch 3.0, e pata të vështirë të filloja. Ky Instructable mbledh së bashku informacion nga burime të ndryshme (veçanërisht kjo), plus disa gjëra që kam zbuluar vetë.

Ju duhet të dini se si të programoni në Javascript dhe si të strehoni Javascript tuaj në një faqe në internet. Për këtë të fundit, unë rekomandoj Faqet e GitHub.

Truku kryesor është të përdorni modalitetin e Scratch të SheepTester i cili ju lejon të ngarkoni shtesa dhe shtojca.

Ky udhëzues do t'ju udhëheqë duke bërë dy shtesa:

• Merrni: ngarkimi i të dhënave nga një URL dhe nxjerrja e etiketave JSON, për shembull për ngarkimin e të dhënave të motit
• SimpleGamepad: përdorimi i një kontrolluesi të lojës në Scratch (një version më i sofistikuar është këtu).

Hapi 1: Dy lloje të shtesave

Ekzistojnë dy lloje të zgjerimeve të cilat unë do t'i quaj "pa kuti" dhe "me kuti me rërë". Zgjatjet në sandbox funksionojnë si Web Punëtorë, dhe si rezultat kanë kufizime të rëndësishme:

• Punonjësit e uebit nuk mund të hyjnë në globale në objektin e dritares (në vend të kësaj, ata kanë një objekt global global, i cili është shumë më i kufizuar), kështu që ju nuk mund t'i përdorni ato për gjëra të tilla si qasja në tastierën e lojës.
• Shtesat në sandbox nuk kanë qasje në objektin e ekzekutimit të Scratch.
• Zgjatjet në sandbox janë shumë më të ngadalta.
• Mesazhet e gabimit të tastierës Javascript për shtesat në sandbox janë më të fshehta në Chrome.

Ne anen tjeter:

• Përdorimi i shtesave të njerëzve të tjerë në sandbox është më i sigurt.
• Shtesat në sandbox kanë më shumë gjasa të punojnë me çdo mbështetje eventuale zyrtare të ngarkimit.
• Zgjatjet në sandbox mund të testohen pa u ngarkuar në një server në internet duke koduar në të dhënat: // URL.

Zgjatjet zyrtare (të tilla si Muzika, Stilolapsi, etj.) Janë të gjitha pa kuti. Konstruktori për zgjerimin merr objektin e ekzekutimit nga Scratch dhe dritarja është plotësisht e arritshme.

Zgjatja Fetch është e vendosur në sandbox, por Gamepad ka nevojë për objektin e navigatorit nga dritarja.

Hapi 2: Shkrimi i një Zgjerimi në Sandbox: Pjesa I

Për të bërë një shtrirje, ju krijoni një klasë e cila kodon informacionin në lidhje me të, dhe pastaj shtoni pak kod për të regjistruar shtesën.

Gjëja kryesore në klasën e zgjerimit është një metodë getInfo () e cila kthen një objekt me fushat e kërkuara:

• id: emri i brendshëm i shtesës, duhet të jetë unik për secilën shtesë
• emri: emri miqësor i shtesës, që shfaqet në listën e blloqeve të Scratch
• blloqe: një listë e objekteve që përshkruajnë bllokun e ri të personalizuar.

Dhe ekziston një fushë e menusë opsionale e cila nuk përdoret në Fetch por do të përdoret në Gamepad.

Pra, këtu është shablloni bazë për Fetch:

klasa ScratchFetch {

konstruktor () {} getInfo () {return {"id": "Fetch", "name": "Fetch", "blloqe": [/* shto më vonë * /]}} / * shto metoda për blloqet * /} Scratch.extensions.register (ScratchFetch i ri ())

Hapi 3: Shkrimi i një Zgjerimi në Sandbox: Pjesa II

Tani, ne duhet të krijojmë listën e blloqeve në objektin e getInfo (). Çdo bllok ka nevojë për të paktën këto katër fusha:

• opcode: ky është emri i metodës që thirret për të bërë punën e bllokut

• blockType: ky është lloji i bllokut; më të zakonshmet për shtesat janë:

  • "komandë": bën diçka, por nuk kthen një vlerë
  • "reporter": kthen një varg ose numër
  • "Boolean": kthen një boolean (vini re kapitalizimin)
  • "kapelë": bllok për kapjen e ngjarjeve; nëse kodi juaj Scratch përdor këtë bllok, koha e ekzekutimit të Scratch rregullisht studion metodën e lidhur e cila kthen një boolean për të thënë nëse ngjarja ka ndodhur
• tekst: ky është një përshkrim miqësor i bllokut, me argumentet në kllapa, p.sh., "marr të dhëna nga "

• argumente: ky është një objekt që ka një fushë për çdo argument (p.sh., "url" në shembullin e mësipërm); ky objekt nga ana e tij ka këto fusha:

  • lloji: ose "varg" ose "numër"
  • defaultValue: vlera e paracaktuar që duhet të plotësohet paraprakisht.

Për shembull, këtu është fusha e blloqeve në shtrirjen time Fetch:

"blloqe": [{"opcode": "fetchURL", "blockType": "reporter", "text": "marr të dhëna nga ", "argumente": {"url": {"type": "string", "defaultValue ":" https://api.weather.gov/stations/KNYC/observations "},}}, {" opcode ":" jsonExtract "," blockType ":" reporter "," text ":" ekstrakt [emri] nga [të dhënat] "," argumentet ": {" emri ": {" lloji ":" vargu "," Vlera e paracaktuar ":" temperatura "}," të dhënat ": {" lloji ":" vargu "," Vlera e paracaktuar ": '{"temperatura": 12.3}'},}},]

Këtu, ne përcaktuam dy blloqe: fetchURL dhe jsonExtract. Të dy janë reporterë. E para tërheq të dhënat nga një URL dhe i kthen ato, dhe e dyta nxjerr një fushë nga të dhënat JSON.

Së fundi, duhet të përfshini metodat për dy blloqe. Çdo metodë merr një objekt si argument, me objektin që përfshin fushat për të gjithë argumentet. Ju mund t'i deshifroni këto duke përdorur mbajtëse kaçurrelësh në argumente. Për shembull, këtu është një shembull sinkron:

jsonExtract ({emri, të dhënat}) {

var parsed = JSON.parse (të dhënat) nëse (emri në analizë) {var out = parsed [name] var t = typeof (out) if (t == "string" || t == "number") return if (t == "boolean") kthimi t? 1: 0 kthehu JSON.stringify (jashtë)} tjetër {kthehu ""}}

Kodi tërheq fushën e emrit nga të dhënat JSON. Nëse fusha përmban një varg, numër ose boolean, ne e kthejmë atë. Përndryshe, ne ri-JSONifikojmë fushën. Dhe ne kthejmë një varg bosh nëse emri mungon në JSON.

Ndonjëherë, megjithatë, ju mund të dëshironi të bëni një bllok që përdor një API asinkron. Metoda fetchURL () përdor marrjen API e cila është asinkrone. Në një rast të tillë, ju duhet të ktheni një premtim nga metoda juaj që funksionon. Për shembull:

fetchURL ({url}) {

kthehu marr (url). pastaj (përgjigje => përgjigje.tekst ())}

Kjo eshte. Zgjatja e plotë është këtu.

Hapi 4: Përdorimi i një Zgjerimi në Sandbox

Ekzistojnë dy mënyra për të përdorur shtrirjen në sandbox. Së pari, mund ta ngarkoni në një server në internet dhe më pas ta ngarkoni në modin Scratch të SheepTester. Së dyti, mund ta kodoni atë në një URL të dhënash dhe ta ngarkoni atë në modin Scratch. Unë në fakt përdor metodën e dytë mjaft për testimin, pasi shmang shqetësimet për versionet më të vjetra të zgjerimit që ruhen nga serveri. Vini re se ndërsa mund të strehoni javascript nga Github Pages, nuk mund ta bëni këtë drejtpërdrejt nga një depo e zakonshme github.

Fetch.js im është pritur në https://arpruss.github.io/fetch.js. Ose mund ta konvertoni shtesën tuaj në një URL të dhënash duke e ngarkuar këtu dhe pastaj ta kopjoni në kujtesën e fragmenteve. Një URL e të dhënave është një URL gjigante që mban një skedar të tërë në të.

Shkoni te moda Scratch e SheepTester. Klikoni në butonin Shto shtesën në këndin e poshtëm të majtë. Pastaj klikoni në "Zgjidhni një shtesë" dhe futni URL -në tuaj (mund të ngjisni në të gjithë URL -në gjigande të të dhënave nëse dëshironi).

Nëse gjithçka shkoi mirë, do të keni një shënim për shtrirjen tuaj në anën e majtë të ekranit tuaj Scratch. Nëse gjërat nuk shkuan mirë, duhet të hapni tastierën tuaj Javascript (shift-ctrl-J në Chrome) dhe të përpiqeni të korrigjoni problemin.

Mbi ju do të gjeni një shembull të kodit që merr dhe analizon të dhënat JSON nga stacioni KNYC (në New York) i Shërbimit Kombëtar të Motit të SHBA, dhe e shfaq atë, ndërsa e ktheni sprite -in në të njëjtën mënyrë me të cilën fryn era. Mënyra se si e bëra ishte duke i tërhequr të dhënat në një shfletues uebi, dhe më pas duke gjetur etiketat. Nëse dëshironi të provoni një stacion tjetër moti, futni një kod postar aty pranë në kutinë e kërkimit në weather.gov, dhe faqja e motit për vendndodhjen tuaj duhet t'ju japë një kod stacioni me katër shkronja, të cilin mund ta përdorni në vend të KNYC në kodin.

Ju gjithashtu mund të përfshini shtesën tuaj në sandbox të drejtë në URL për modalitetin e SheepTester duke shtuar një argument "? Url =". Për shembull:

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

Hapi 5: Shkrimi i një Zgjerimi pa Kuti: Hyrje

Konstruktori i një shtese pa kuti kalon një objekt Runtime. Mund ta injoroni ose ta përdorni. Një përdorim i objektit Runtime është të përdorësh pronën e tij aktualeMSecs për të sinkronizuar ngjarjet ("blloqe kapelesh"). Me aq sa mund të them, të gjithë kodet e bllokut të ngjarjeve ankohen rregullisht, dhe çdo raund i sondazhit ka një vlerë të vetmeMSecs aktuale. Nëse keni nevojë për objektin Runtime, me siguri do të filloni zgjerimin tuaj me:

klasë EXTENSIONCLASS {

konstruktor (koha e ekzekutimit) {this.runtime = koha e ekzekutimit …}…}

Të gjitha gjërat standarde të objektit të dritares mund të përdoren në shtesën pa kuti. Së fundi, shtesa juaj pa kuti duhet të përfundojë me këtë pjesë të kodit magjik:

(funksioni () {

var extensionInstance = EXTENSIONCLASS i ri (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.get, shërbim) ())

ku duhet të zëvendësoni EXTENSIONCLASS me klasën e zgjerimit tuaj.

Hapi 6: Shkrimi i një shtojce pa kuti: Simple Gamepad

Le të bëjmë tani një shtrirje të thjeshtë të gamepad që siguron një bllok të vetëm të ngjarjes ("kapelë") kur shtypet ose lëshohet një buton.

Gjatë çdo cikli të votimit të bllokut të ngjarjeve, ne do të ruajmë një etiketë kohore nga objekti i ekzekutimit, dhe gjendjet e mëparshme dhe aktuale të tastierës së lojës. Vula kohore përdoret për të njohur nëse kemi një cikël të ri votimi. Pra, fillojmë me:

klasa ScratchSimpleGamepad {

konstruktor (koha e ekzekutimit) {this.runtime = koha e ekzekutimit this.currentMSecs = -1 this.preciousButtons = this.currentButtons = }…} Ne do të kemi një bllok ngjarjesh, me dy hyrje-një numër butoni dhe një meny për të zgjedhur nëse duam që ngjarja të aktivizohet në shtyp ose lëshim. Pra, këtu është metoda jonë

marr informacion() {

return {"id": "SimpleGamepad", "name": "SimpleGamepad", "blloqe": [{"opcode": "buttonPressedReleased", "blockType": "hat", "text": "button [eventType] "," argumente ": {" b ": {" type ":" number "," defaultValue ":" 0 "}," eventType ": {" type ":" number "," defaultValue ":" 1 "," menu ":" pressReleaseMenu "},},},]," menutë ": {" pressReleaseMenu ": [{tekst:" shtyp ", vlera: 1}, {tekst:" lëshim ", vlera: 0}],}}; } Unë mendoj se vlerat në menunë zbritëse akoma kalojnë në funksionin opcode si vargje, pavarësisht se deklarohen si numra. Pra, krahasoni ato në mënyrë eksplicite me vlerat e specifikuara në meny sipas nevojës. Ne tani shkruajmë një metodë që përditëson gjendjen e butonit sa herë që ndodh një cikël i ri i votimit të ngjarjeve

përditëso () {

nëse (this.runtime.currentMSecs == this.currentMSecs) kthehet // jo një cikël i ri votimi 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) { // numër i ndryshëm i butonave, pra gamepad i ri this.preciousButtons = për (var i = 0; i <gamepad.buttons.length; i ++) this.preciousButtons.push (false)} tjetër {this.preciousButtons = kjo. currentButtons} this.currentButtons = për (var i = 0; i <gamepad.buttons.length; i ++) this.currentButtons.push (gamepad.buttons .pressed)} Së fundi, ne mund të zbatojmë bllokun tonë të ngjarjeve, duke thirrur metodën e azhurnimit () dhe pastaj duke kontrolluar nëse butoni i kërkuar sapo është shtypur ose lëshuar, duke krahasuar gjendjet aktuale të butonave të mëparshëm

buttonPressedReleased ({b, eventType}) {

this.update () if (b <this.currentButtons.length) {if (eventType == 1) {// shënim: ky do të jetë një varg, kështu që më mirë ta krahasoni me 1 sesa ta trajtoni si një Boolean nëse (this.currentButtons &&! this.previousButtons ) {kthehu e vërtetë}} tjetër {nëse (! this.currentButtons && this.preciousButtons ) {kthehu e vërtetë}}} kthehu false} Dhe së fundi ne shtojmë kodin tonë të regjistrimit të shtrirjes magjike pasi përcaktojmë klasën

(funksioni () {

var extensionInstance = ScratchSimpleGamepad e re (dritare.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.get) shërbim (info))

Kodin e plotë mund ta merrni këtu.

Hapi 7: Përdorimi i një shtese pa kuti

Edhe një herë, mbani shtrirjen tuaj diku, dhe këtë herë ngarkojeni atë me load_plugin = dhe jo url = argument në modin Scratch të SheepTester. Për shembull, për modulin tim të thjeshtë Gamepad, shkoni te:

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

(Nga rruga, nëse doni një tastierë lojërash më të sofistikuar, thjesht hiqni "të thjeshtë" nga URL -ja e mësipërme dhe do të keni mbështetje të zhurmës dhe boshtit analog.)

Përsëri, shtesa duhet të shfaqet në anën e majtë të redaktuesit tuaj Scratch. Mbi të është një program shumë i thjeshtë Scratch që thotë "përshëndetje" kur shtypni butonin 0 dhe "lamtumirë" kur e lëshoni.

Hapi 8: Përputhshmëria e dyfishtë dhe shpejtësia

Unë kam vënë re se blloqet e zgjerimit funksionojnë një urdhër të madhësisë më shpejt duke përdorur metodën e ngarkimit që kam përdorur për shtesat pa kuti. Pra, nëse nuk kujdeseni për përfitimet e sigurisë nga funksionimi në një sandbox të Web Worker, kodi juaj do të përfitojë nga ngarkimi me argumentin? Load_plugin = URL në modin e SheepTester.

Ju mund të bëni një shtesë në sandbox të pajtueshme me të dyja metodat e ngarkimit duke përdorur kodin e mëposhtëm pasi të keni përcaktuar klasën e zgjerimit (ndryshoni CLASSNAME në emrin e klasës suaj të zgjerimit):

(funksioni () {

var extensionClass = EMRI I KLASS if (typeof window === "undefined" ||! window.vm) {Scratch.extensions.register (extensioni ri i klasës ())} tjetër {var extensionInstance = zgjerim i riClass (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo (). id, serviceName)}})) ()