Scratch 3.0 ընդարձակումներ ՝ 8 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:45

Scratch ընդարձակումները Javascript- ի կոդի կտորներ են, որոնք նոր բլոկներ են ավելացնում Scratch- ին: Մինչ Scratch- ը միավորված է մի շարք պաշտոնական ընդարձակումներով, օգտագործողի կողմից ստեղծված ընդարձակումներ ավելացնելու պաշտոնական մեխանիզմ չկա:

Երբ ես պատրաստում էի Minecraft- ի վերահսկիչ ընդլայնումը Scratch 3.0 -ի համար, ես դժվարանում էի սկսել: Այս հրահանգը հավաքում է տեղեկատվություն տարբեր աղբյուրներից (հատկապես սա), գումարած մի քանի բաներ, որոնք ես ինքս եմ հայտնաբերել:

Դուք պետք է իմանաք, թե ինչպես ծրագրավորել Javascript- ով և ինչպես տեղադրել ձեր Javascript- ը կայքում: Վերջիններիս համար ես խորհուրդ եմ տալիս GitHub Էջեր:

Հիմնական հնարքը SheepTester- ի Scratch- ի ռեժիմն օգտագործելն է, որը թույլ է տալիս բեռնել ընդարձակումներ և հավելումներ:

Այս հրահանգը ձեզ կառաջնորդի երկու ընդարձակումներ կատարելու միջոցով.

• Վերցնել. URL- ից տվյալների բեռնում և JSON պիտակների արդյունահանում, օրինակ ՝ եղանակի տվյալների բեռնման համար
• SimpleGamepad. Օգտագործելով խաղի վերահսկիչ Scratch- ում (ավելի բարդ տարբերակ ՝ այստեղ):

Քայլ 1: Երկու տեսակի ընդլայնումներ

Գոյություն ունեն երկու տեսակի ընդարձակումներ, որոնք ես կանվանեմ «առանց արկղերի մեջ» և «ավազի մեջ պահվող»: Sandboxed ընդարձակումներն աշխատում են որպես վեբ աշխատողներ, և արդյունքում ունեն զգալի սահմանափակումներ.

• Վեբ աշխատողները չեն կարող մուտք գործել գլոբալ պատուհանի օբյեկտում (փոխարենը, նրանք ունեն գլոբալ ինքնակառավարման օբյեկտ, ինչը շատ ավելի սահմանափակ է), այնպես որ դուք չեք կարող դրանք օգտագործել այնպիսի բաների համար, ինչպիսիք են խաղատախտակի մուտքը:
• Sandbox- ի ընդարձակումները մուտք չունեն Scratch գործարկման օբյեկտ:
• Sandboxed ընդարձակումները շատ ավելի դանդաղ են:
• Javascript- ի վահանակի սխալի հաղորդագրությունները ավազով փակված ընդարձակումների համար ավելի գաղտնի են Chrome- ում:

Մյուս կողմից:

• Այլ մարդկանց ավազի մեջ տեղադրված ընդարձակումների օգտագործումն ավելի անվտանգ է:
• Ավազատուփի ընդարձակումներն ավելի հավանական է, որ աշխատեն ցանկացած պաշտոնական պաշտոնական ընդլայնման բեռնման աջակցության հետ:
• Sandbox- ի ընդարձակումները կարող են փորձարկվել առանց վեբ սերվերի վրա վերբեռնման `տվյալների մեջ կոդավորելով` // URL:

Պաշտոնական ընդարձակումները (օրինակ ՝ Երաժշտությունը, Գրիչը և այլն) բոլորը անտեսանելի են: Ընդլայնման կոնստրուկտորը ստանում է գործարկման օբյեկտը Scratch- ից, և պատուհանը լիովին հասանելի է:

Fetch ընդլայնումը ավազի մեջ է, բայց Gamepad- ին անհրաժեշտ է նավիգատոր օբյեկտը պատուհանից:

Քայլ 2. Ավազի մեջ ընդլայնում գրելը. Մաս I

Ընդլայնում կատարելու համար դուք ստեղծում եք դաս, որը ծածկագրում է դրա մասին տեղեկատվությունը, այնուհետև ավելացնում մի փոքր կոդ `ընդլայնումը գրանցելու համար:

Ընդլայնման դասում գլխավորը getInfo () մեթոդն է, որը վերադարձնում է պահանջվող դաշտերով օբյեկտ.

• id. ընդլայնման ներքին անվանումը, պետք է եզակի լինի յուրաքանչյուր ընդլայնման համար
• անուն. ընդլայնման բարեկամական անուն, որը ցուցադրվում է Scratch- ի բլոկների ցանկում
• բլոկներ. նոր հարմարեցված բլոկը նկարագրող օբյեկտների ցանկ:

Եվ կա ընտրովի ընտրացանկերի դաշտ, որը չի օգտագործվում Fetch- ում, բայց կօգտագործվի Gamepad- ում:

Այսպիսով, ահա Ձեռք բերելու հիմնական ձևանմուշը.

դաս ScratchFetch {

constructor () {} getInfo () {return {"id": "Բեռնել", "name": "Ձեռք բերել", "արգելափակել". [/* ավելացնել ավելի ուշ * /]}} / * ավելացնել մեթոդներ բլոկների համար * /} Scratch.extensions.register (նոր ScratchFetch ())

Քայլ 3. Ավազի մեջ տեղադրված ընդլայնում գրելը. Մաս II

Այժմ մենք պետք է ստեղծենք getInfo () օբյեկտի բլոկների ցանկը: Յուրաքանչյուր բլոկի համար անհրաժեշտ է առնվազն այս չորս դաշտերը.

• opcode: սա այն մեթոդի անվանումն է, որը կոչված է կատարել բլոկի աշխատանքը

• blockType: սա բլոկի տեսակն է. Ընդլայնումների համար ամենատարածվածներն են.

  • «հրաման». անում է ինչ -որ բան, բայց արժեք չի վերադարձնում
  • «զեկուցող». վերադարձնում է տող կամ թիվ
  • «Բուլյան». Վերադարձնում է բուլյան (նշեք մեծատառերը)
  • «գլխարկ». իրադարձությունների գրավման բլոկ; եթե ձեր Scratch ծածկագիրը օգտագործում է այս բլոկը, ապա Scratch- ի գործարկման ժամանակը պարբերաբար հարցում է կատարում համապատասխան մեթոդով, որը վերադարձնում է բուլյան `ասելու, թե արդյոք իրադարձությունը տեղի է ունեցել
• տեքստ. սա բլոկի բարեկամական նկարագրություն է ՝ փակագծերում բերված փաստարկներով, օրինակ ՝ «տվյալներ վերցնել »

• փաստարկներ. սա օբյեկտ է, որն ունի դաշտ յուրաքանչյուր արգումենտի համար (օրինակ ՝ «url» վերը նշված օրինակում); Այս օբյեկտն իր հերթին ունի այս դաշտերը.

  • տեսակը ՝ կամ «տող», կամ «համար»
  • defaultValue: կանխադրված արժեքը, որը պետք է նախապես լրացվի:

Օրինակ, ահա բլոկների դաշտը իմ Վերցնելու ընդլայնման մեջ.

«արգելափակումներ»: [{"opcode": "fetchURL", "blockType": "reporter", "text": "anch data from ", "arguments": {"url": {"type": "string", "defaultValue ":" https://api.weather.gov/stations/KNYC/observations "},}}, {" opcode ":" jsonExtract "," blockType ":" reporter "," text ":" extract [name] [data] "," argument ": {" name ": {" type ":" string "," defaultValue ":" temperature "}," data ": {" type ":" string "," defaultValue ": '{"ջերմաստիճան": 12.3}'},}},]

Այստեղ մենք սահմանեցինք երկու բլոկ ՝ fetchURL և jsonExtract: Երկուսն էլ լրագրողներ են: Առաջինը հանում է տվյալները URL- ից և վերադարձնում դրանք, իսկ երկրորդը ՝ JSON տվյալներից դաշտ:

Ի վերջո, դուք պետք է ներառեք երկու բլոկների մեթոդները: Յուրաքանչյուր մեթոդ օբյեկտ է ընդունում որպես արգումենտ, օբյեկտը ներառում է դաշտեր բոլոր արգումենտների համար: Դուք կարող եք դրանք վերծանել ՝ օգտագործելով արգենտիններում գանգուր ամրացումներ: Օրինակ, ահա մեկ համաժամանակյա օրինակ.

jsonExtract ({անուն, տվյալներ}) {

var parsed = JSON.parse (data) if (name in parsed) {var out = parsed [name] var t = typeof (out) if (t == "string" || t == "number") return out if (t == "բուլյան") վերադարձնել t? 1: 0 վերադարձ JSON.stringify (դուրս)} այլապես {վերադարձ ""}}

Կոդը քաշում է անվան դաշտը JSON տվյալներից: Եթե դաշտը պարունակում է տող, թիվ կամ բուլյան, մենք դա վերադարձնում ենք: Հակառակ դեպքում, մենք կրկին JSONify դաշտը: Եվ մենք վերադարձնում ենք դատարկ տող, եթե անունը բացակայում է JSON- ից:

Երբեմն, այնուամենայնիվ, գուցե ցանկանաք ստեղծել բլոկ, որն օգտագործում է ասինխրոն API: FetchURL () մեթոդը օգտագործում է ստացման API- ն, որն ասինխրոն է: Նման դեպքում դուք պետք է վերադարձնեք խոստումը ձեր մեթոդից, որը գործում է: Օրինակ:

fetchURL ({url}) {

վերադարձնել բերման (url). ապա (պատասխան => պատասխան.տեքստ ())}

Վերջ: Ամբողջական ընդլայնումն ՝ այստեղ:

Քայլ 4: Օգտագործելով Sandboxed Extension

Sandboxed ընդլայնման օգտագործման երկու եղանակ կա: Նախ, կարող եք այն վերբեռնել վեբ սերվերի վրա, այնուհետև այն բեռնել SheepTester- ի Scratch ռեժիմում: Երկրորդ, դուք կարող եք այն կոդավորել տվյալների URL- ում և բեռնել այն Scratch ռեժիմում: Ես իրականում երկրորդ մեթոդը բավականին քիչ եմ օգտագործում թեստավորման համար, քանի որ այն խուսափում է սերվերի կողմից քեշ պահվող ընդլայնման հին տարբերակների մասին անհանգստություններից: Նկատի ունեցեք, որ մինչ Github Pages- ից կարող եք տեղակայել javascript, դա չեք կարող անել ուղղակիորեն github- ի սովորական պահոցից:

Իմ fetch.js- ը տեղակայված է https://arpruss.github.io/fetch.js հասցեով: Կամ կարող եք ձեր ընդլայնումը փոխակերպել տվյալների URL- ի ՝ այն վերբեռնելով այստեղ, այնուհետև պատճենել այն սեղմատախտակին: Տվյալների URL- ը հսկա URL է, որն իր մեջ պահում է մի ամբողջ ֆայլ:

Գնացեք SheepTester- ի Scratch mod: Կտտացրեք «Ավելացնել ընդլայնում» կոճակը ներքևի ձախ անկյունում: Այնուհետև կտտացրեք «Ընտրեք ընդլայնում» և մուտքագրեք ձեր URL հասցեն (ցանկության դեպքում կարող եք տեղադրել ամբողջ հսկա տվյալների URL- ը):

Եթե ամեն ինչ լավ է ընթանում, ձեր ընդլայնման համար մուտք կունենաք ձեր Scratch էկրանի ձախ կողմում: Եթե ամեն ինչ լավ չի ընթանում, դուք պետք է բացեք ձեր Javascript վահանակը (shift-ctrl-J Chrome- ում) և փորձեք կարգաբերել խնդիրը:

Վերևում կգտնեք մի օրինակ կոդ, որը վերցնում և վերլուծում է JSON տվյալները ԱՄՆ ազգային օդերևութաբանական ծառայության KNYC (Նյու Յորք) կայանից և ցուցադրում այն, մինչդեռ սփրեյթը շրջում է այնպես, ինչպես քամին է փչում: Իմ պատրաստման եղանակն այն էր, որ տվյալները վերցնում էի վեբ դիտարկիչ, այնուհետև պարզում պիտակները: Եթե ցանկանում եք փորձել այլ եղանակային կայան, մուտքագրեք մոտակա փոստային կոդը որոնման դաշտում weather.gov, և ձեր գտնվելու վայրի եղանակի էջը պետք է ձեզ տա չորս տառանոց կայանի կոդ, որը կարող եք օգտագործել KNYC- ի փոխարեն կոդը.

Դուք կարող եք նաև ձեր Sandboxed ընդլայնումը ներառել SheepTester- ի ռեժիմի URL- ում ՝ ավելացնելով «? Url =» փաստարկը: Օրինակ:

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

Քայլ 5. Գրեք անփայլ ընդլայնում. Ներածություն

Առանց տուփի ընդլայնման կոնստրուկտորը անցնում է Runtime օբյեկտ: Դուք կարող եք անտեսել այն կամ օգտագործել այն: Runtime օբյեկտի մեկ օգտագործումն է օգտագործել իր ընթացիկMSecs հատկությունը իրադարձությունները համաժամացնելու համար («գլխարկների բլոկներ»): Որքանով որ կարող եմ ասել, իրադարձությունների բլոկի կոդերը պարբերաբար հարցում են կատարվում, և քվեարկության յուրաքանչյուր փուլ ունի մեկ ընթացիկ MSecs արժեք: Եթե Ձեզ անհրաժեշտ է Runtime օբյեկտ, հավանաբար ձեր ընդլայնումը կսկսեք հետևյալով.

դասի EXTENSIONCLASS {

կոնստրուկտոր (գործարկման ժամանակ) {this.runtime = runtime…}…}

Բոլոր ստանդարտ պատուհանների օբյեկտները կարող են օգտագործվել առանց արկղերի ընդլայնման մեջ: Ի վերջո, ձեր անտեսանելի ընդլայնումը պետք է ավարտվի այս կախարդական ծածկագրով.

(գործառույթ () {

var extensionInstance = new EXTENSIONCLASS (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.get, serviceInfo ())

որտեղ դուք պետք է փոխարինեք EXTENSIONCLASS- ը ձեր ընդլայնման դասով:

Քայլ 6. Գրեք Unsandboxed Extension: Simple Gamepad

Եկեք հիմա ստեղծենք մի պարզ gamepad ընդլայնում, որն ապահովում է մեկ իրադարձության («գլխարկ») բլոկ, երբ կոճակը սեղմվում կամ բաց է թողնվում:

Յուրաքանչյուր իրադարձության բլոկի քվեարկության ցիկլի ընթացքում մենք կպահպանենք ժամանակի նշանը գործարկման օբյեկտից և խաղային տախտակի նախորդ և ընթացիկ վիճակից: Estամկետային նշանն օգտագործվում է ճանաչելու համար, եթե մենք ունենք քվեարկության նոր ցիկլ: Այսպիսով, մենք սկսում ենք.

դաս ScratchSimpleGamepad {

կոնստրուկտոր (գործարկման ժամանակ) {this.runtime = գործարկման ժամանակը this.currentMSecs = -1 this.previousButtons = this.currentButtons = }…} Մենք կունենանք մեկ իրադարձության բլոկ ՝ երկու մուտքով ՝ կոճակի համար և ընտրացանկ ՝ ընտրելու համար, թե մենք ցանկանում ենք, որ իրադարձությունը գործի դրվի մամուլի կամ թողարկման ժամանակ: Այսպիսով, ահա մեր մեթոդը

getInfo () {

return {"id": "SimpleGamepad", "name": "SimpleGamepad", "blocks": [{"opcode": "buttonPressedReleased", "blockType": "hat", "text": "button [eventType] "," argument ": {" b ": {" type ":" number "," defaultValue ":" 0 "}," eventType ": {" type ":" number "," defaultValue ":" 1 "," menu ":" pressReleaseMenu "},},},]," menus ": {" pressReleaseMenu ": [{text:" press ", value: 1}, {text:" release ", value: 0}],}}; } Կարծում եմ, որ բացվող ընտրացանկի արժեքները դեռ անցնում են կոդի գործառույթին ՝ որպես տողեր, չնայած որ դրանք համարներ են հայտարարված: Այսպիսով, դրանք ուղղակիորեն համեմատեք ըստ անհրաժեշտության ցանկում նշված արժեքների: Այժմ մենք գրում ենք մի մեթոդ, որը թարմացնում է կոճակը, երբ տեղի է ունենում նոր իրադարձության քվեարկության ցիկլ

թարմացնել () {

եթե (this.runtime.currentMSecs == this.currentMSecs) վերադառնա // ոչ նոր քվեարկության ցիկլ 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) { // տարբեր թվով կոճակներ, այնպես որ նոր gamepad this.previousButtons = for (var i = 0; i <gamepad.buttons.length; i ++) this.preciousButtons.push (false)} else {this.preciousButtons = this currentButtons} this.currentButtons = for (var i = 0; i <gamepad.buttons.length; i ++) this.currentButtons.push (gamepad.buttons .pressed)}} Ի վերջո, մենք կարող ենք իրականացնել մեր միջոցառումների բլոկը ՝ կանչելով update () մեթոդը և այնուհետև ստուգելով, արդյոք անհրաժեշտ կոճակը նոր է սեղմված կամ թողնված, համեմատելով կոճակի ընթացիկ և նախորդ վիճակները

buttonPressedReleased ({b, eventType}) {

this.update () if (b <this.currentButtons.length) {if (eventType == 1) {// նշում. սա կլինի տող, ուստի ավելի լավ է այն համեմատել 1 -ի հետ, քան այն որպես բուլյան վերաբերվել, եթե (this.currentButtons &&! this.previousButtons ) {true return}} ուրիշ {if (! this.currentButtons && this.preciousButtons ) {return true}}} վերադարձնել false} Եվ, վերջապես, դասը սահմանելուց հետո ավելացնում ենք մեր կախարդական ընդլայնման գրանցման կոդը

(գործառույթ () {

var extensionInstance = նոր ScratchSimpleGamepad (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.get)getInfo ()

Ամբողջական կոդը կարող եք ստանալ այստեղ:

Քայլ 7: Օգտագործելով Unsandboxed Extension- ը

Մեկ անգամ ևս ինչ -որ տեղ հյուրընկալեք ձեր ընդլայնումը, և այս անգամ բեռնեք այն load_plugin = ոչ թե url = փաստարկով SheepTester's Scratch mod- ում: Օրինակ, իմ պարզ Gamepad ռեժիմի համար գնացեք ՝

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

(Ի դեպ, եթե ցանկանում եք ավելի բարդ gamepad, պարզապես վերացրեք «պարզը» վերը նշված URL- ից, և դուք կունենաք դղրդյուն և անալոգային առանցքի աջակցություն):

Կրկին, ընդլայնումը պետք է հայտնվի ձեր Scratch խմբագրի ձախ կողմում: Վերևում կա շատ պարզ Scratch ծրագիր, որն ասում է «բարև», երբ սեղմում եք 0 կոճակը և «ցտեսություն», երբ այն բաց եք թողնում:

Քայլ 8: Կրկնակի համատեղելիություն և արագություն

Ես նկատել եմ, որ ընդլայնման բլոկներն ավելի արագ են գործում մի կարգի ավելի արագ ՝ օգտագործելով բեռնման մեթոդը, որը ես օգտագործել եմ անփայլ ընդարձակումների համար: Այսպիսով, եթե ձեզ չի հետաքրքրում Web Worker- ի ավազարկղում աշխատելու անվտանգության առավելությունները, ձեր ծածկագիրը կշահի? Load_plugin = URL փաստարկով բեռնվել SheepTester- ի ռեժիմում:

Դուք կարող եք ավազի մեջ տեղադրված ընդլայնում համատեղել բեռնման երկու մեթոդների հետ ՝ օգտագործելով հետևյալ ծածկագիրը ՝ ընդլայնման դասը սահմանելուց հետո (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)}})) ()