Scratch 3.0 кеңейтүүлөрү: 8 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:36

Scratch кеңейтүүлөрү Scratchке жаңы блокторду кошкон Javascript кодунун бөлүктөрү. Scratch көптөгөн расмий кеңейтүүлөр менен коштолгону менен, колдонуучу тарабынан жасалган кеңейтүүлөрдү кошуунун расмий механизми жок.

Мен Scratch 3.0 үчүн Minecraft көзөмөлдөөчү кеңейтүүнү жасап жатканда, баштоо кыйынга турду. Бул Инструкция ар кандай булактардан маалыматтарды чогултат (өзгөчө бул), ошондой эле өзүм тапкан бир нече нерселер.

Сиз Javascriptте кантип программалоону жана веб -сайтта Javascriptти кантип жайгаштырууну билишиңиз керек. Экинчиси үчүн мен GitHub баракчаларын сунуштайм.

Негизги амал - SheepTesterтин Scratch режимин колдонуу, ал кеңейтүүлөрдү жана плагиндерди жүктөөгө мүмкүндүк берет.

Бул Инструкция сизге эки кеңейтүүнү жасоого жардам берет:

• Алуу: URLден маалыматтарды жүктөө жана JSON тэгдерин алуу, мисалы аба ырайы маалыматын жүктөө үчүн
• SimpleGamepad: Scratch оюн контроллерин колдонуу (татаалыраак версия бул жерде).

1 -кадам: Кеңейтүүлөрдүн эки түрү

Кеңейтүүлөрдүн эки түрү бар, аларды мен "коробкасыз" жана "кумкорулган" деп атайм. Sandboxed кеңейтүүлөрү Web Workers катары иштейт жана натыйжада олуттуу чектөөлөр бар:

• Веб -жумушчулар терезе объектисиндеги глобалдарга кире алышпайт (анын ордуна аларда глобалдык өзүнчө объект бар, ал бир топ чектелген), андыктан сиз аларды геймпадка кирүү сыяктуу нерселер үчүн колдоно албайсыз.
• Кум корголгон кеңейтүүлөр Scratch иштөө убактысынын объектине кире албайт.
• Кум коргоого алынган кеңейтүүлөр кыйла жайыраак.
• Кумкорулган кеңейтүүлөр үчүн Javascript консолунун ката билдирүүлөрү Chromeдо көбүрөөк сырдуу.

Башка жагынан:

• Башка адамдардын кумкоргон кеңейтүүлөрүн колдонуу коопсузураак.
• Кумкоргон кеңейтүүлөр кандайдыр бир акыркы расмий кеңейтүү жүктөө колдоосу менен иштеши ыктымал.
• Кум корголгон кеңейтүүлөрдү маалыматка коддоо аркылуу веб -серверге жүктөбөстөн текшерсе болот: // URL.

Расмий кеңейтүүлөр (мисалы, Музыка, Калем ж. Б.) Бардыгы коробкасыз. Кеңейтүү үчүн конструктор Scratchтан иштөө убактысынын объектисин алат жана терезе толук жеткиликтүү.

Алууну кеңейтүү кумкорулган, бирок Gamepadга навигатордун объектиси терезеден керек.

2 -кадам: Sandboxed кеңейтүүсүн жазуу: I бөлүм

Кеңейтүүнү жасоо үчүн, сиз ал жөнүндө маалыматты коддогон класс түзөсүз, анан кеңейтүүнү каттоого бир аз код кошосуз.

Кеңейтүү классындагы эң негизги нерсе - бул объектти керектүү талаалары менен кайтаруучу getInfo () ыкмасы:

• id: кеңейтүүнүн ички аталышы, ар бир кеңейтүү үчүн уникалдуу болушу керек
• аты: Scratchтин блоктор тизмесинде көрүнгөн кеңейтүүнүн достук аты
• блоктор: жаңы ыңгайлаштырылган блокту сүрөттөгөн объекттердин тизмеси.

Жана Fetchте колдонулбаган, бирок Gamepadда колдонула турган кошумча меню талаасы бар.

Ошентип, бул жерде алуу үчүн негизги шаблон:

класс ScratchFetch {

constructor () {} getInfo () {return {"id": "Fetch", "name": "Fetch", "blocks": [/* кийинчерээк кошуу * /]}} / * блокторго ыкмаларды кошуу * /} Scratch.extensions.register (new ScratchFetch ())

3 -кадам: Sandboxed кеңейтүүсүн жазуу: II бөлүм

Эми, getInfo () объектисиндеги блоктордун тизмесин түзүшүбүз керек. Ар бир блокко бул төрт талаа керек:

• opcode: бул блоктун ишин аткарууга чакырылган ыкманын аты

• blockType: бул блоктун түрү; узартуу үчүн эң кеңири таралган:

  • "command": бир нерсе кылат, бирок маанини кайтарбайт
  • "кабарчы": сапты же санды кайтарат
  • "Логикалык": логиканы кайтарат (баш тамгасына көңүл буруңуз)
  • "hat": окуя кармоочу блок; Эгерде сиздин Scratch кодуңуз бул блокту колдонсо, Scratch иштөө убактысы бул окуя болгонун айтуу үчүн логиканы кайтарган байланышкан ыкманы дайыма сурамжылайт
• текст: бул блоктун достук сүрөттөмөсү, кронштейндеги аргументтери менен, мисалы, " дан маалыматтарды алуу"

• аргументтер: бул ар бир аргумент үчүн талаасы бар объект (мисалы, жогорудагы мисалда "url"); бул объект өз кезегинде бул талааларга ээ:

  • түрү: же "сап" же "сан"
  • defaultValue: алдын ала толтурулуучу демейки маани.

Мисалы, бул жерде менин алып келүү кеңейтүүмдөгү блоктор талаасы:

"блоктор": [{"opcode": "fetchURL", "blockType": "кабарчы", "текст": "маалыматтарды алуу", "аргументтер": {"url": {"түрү": "string", "defaultValue ":" https://api.weather.gov/stations/KNYC/observations "},}}, {" opcode ":" jsonExtract "," blockType ":" reportyor "," text ":" extract [name] [data] "," arguments ": {" 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") if if return (t == "логикалык") кайтуу t? 1: 0 кайтуу JSON.stringify (out)} башка {кайтуу ""}}

Код аты талаасын JSON маалыматтарынан алат. Эгерде талаа сапты, санды же логиканы камтыса, биз аны кайтарабыз. Болбосо, биз талааны кайра JSONify кылабыз. Жана JSONдо жок болсо бош сапты кайтарабыз.

Кээде, бирок, сиз асинхрондук API колдонгон блок жасоону каалашыңыз мүмкүн. FetchURL () методу асинхрондук fetch API колдонот. Мындай учурда, сиз иштеген ыкмаңыздан убаданы кайтарышыңыз керек. Мисалы үчүн:

fetchURL ({url}) {

кайтып келүү (url). анан (жооп => жооп.текст ())}

Дал ушул. Толук кеңейтүү бул жерде.

4 -кадам: Sandboxed кеңейтүүсүн колдонуу

Кумкорулган кеңейтүүнү колдонуунун эки жолу бар. Биринчиден, аны веб -серверге жүктөп, анан SheepTester's Scratch режимине жүктөй аласыз. Экинчиден, сиз аны маалыматтын URL дарегине коддоп, Scratch режимине жүктөй аласыз. Мен чындыгында тестирлөө үчүн экинчи ыкманы бир аз колдонуп жатам, анткени ал кеңейтүүнүн эски версиялары сервер тарабынан кэштелет деген кооптонууну болтурбайт. Көңүл буруңуз, сиз Github Pagesтен JavaScriptти жайгаштыра аласыз, бирок сиз муну түз Github репозиторийинен жасай албайсыз.

Менин fetch.js https://arpruss.github.io/fetch.js дарегинде жайгашкан. Же сиз кеңейтүүнү бул жерге жүктөө менен маалыматтын URL дарегине айландырып, анан алмашуу буферине көчүрө аласыз. Маалыматтардын URLи - бул бүтүндөй файлды камтыган ири URL.

SheepTester's Scratch режимине өтүңүз. Төмөнкү сол бурчта Кеңейтүүнү кошуу баскычын чыкылдатыңыз. Андан кийин "Кеңейтүүнү тандоо" баскычын чыкылдатып, URL дарегиңизди киргизиңиз (эгер кааласаңыз, гиганттык маалыматтын URL дарегин чаптай аласыз).

Эгер баары ойдогудай болсо, Scratch экраныңыздын сол жагында кеңейтүүңүз үчүн жазуу болот. Эгерде иш жакшы жүрбөсө, анда Javascript консолуңузду ачыңыз (Chromeдогу shift-ctrl-J) жана маселени чечүүгө аракет кылыңыз.

Жогоруда сиз АКШнын Улуттук Аба ырайы кызматынын KNYC (Нью -Йоркто) станциясынан JSON маалыматын алып, талдай турган жана аны көрсөткөн мисал кодун таба аласыз. Мен муну веб -браузерге алып, анан тэгдерди табуу менен жасадым. Эгерде сиз башка метеостанцияны сынап көргүңүз келсе, weather.gov дарегиндеги издөө кутусуна жакын жайгашкан почта кодун киргизиңиз, жана жайгашкан жериңиздин аба ырайы баракчасы сизге төрт тамгалуу станция кодун бериши керек, аны сиз KNYCтин ордуна колдоно аласыз. код

Сиз ошондой эле "? Url =" аргументин кошуу менен, Sandbox кеңейтүүсүн SheepTester modунун URL дарегине кошо аласыз. Мисалы үчүн:

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

5 -кадам: unsandboxed кеңейтүүнү жазуу: киришүү

Кутусуз кеңейтилген конструктор Runtime объектисин алат. Сиз аны этибарга албай же колдонсоңуз болот. Runtime объектисинин бир жолу окуяларды синхрондоштуруу үчүн анын currentMSecs касиетин колдонуу ("шляпа блоктору"). Мен айта алам, бардык окуя блогунун опкоддору үзгүлтүксүз сурамжыланып турат жана сурамжылоонун ар бир туру бир currentMSecs маанисине ээ. Эгерде сизге Runtime объектиси керек болсо, анда сиз кеңейтүүнү төмөнкүдөй баштайсыз:

класс EXTENSIONCLASS {

конструктор (иштөө убактысы) {this.runtime = иштөө убактысы…}…}

Бардык стандарттык терезе нерселерин коробкасыз кеңейтүүдө колдонсо болот. Акырында, сиздин кутусуз кеңейтүүңүз бул сыйкырдуу код менен бүтүшү керек:

(функция () {

var extensionInstance = жаңы EXTENSIONCLASS (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo ()). id, service (кызмат))

анда EXTENSIONCLASSти кеңейтүү классы менен алмаштыруу керек.

6 -кадам: Unsandboxed Extension жазуу: Simple Gamepad

Эми бир баскыч басылганда же бошотулганда бир окуяны ("шляпа") камсыз кылган жөнөкөй геймпад кеңейтүүсүн жасайбыз.

Ар бир окуя блокунун сурамжылоо цикли учурунда, биз иштөө убактысынын объектисин жана мурунку жана учурдагы геймпаддын абалын сактап калабыз. Убакыт белгиси бизде жаңы шайлоо циклинин бар -жогун билүү үчүн колдонулат. Ошентип, биз баштайбыз:

класс ScratchSimpleGamepad {

конструктор (иштөө убактысы) {this.runtime = runtime this.currentMSecs = -1 this.previousButtons = this.currentButtons = }…} Бизде бир окуя блогу болот, эки кириши бар-баскычтын номери жана меню, биз окуяны прессте же бошотууда иштетүүнү каалайбызбы же жокпу, тандап алабыз. Ошентип, бул жерде биздин ыкма

маалымат алуу() {

кайтуу {"id": "SimpleGamepad", "name": "SimpleGamepad", "blocks": [{"opcode": "buttonPressedReleased", "blockType": "hat", "text": "button [eventType] "," arguments ": {" b ": {" type ":" number "," defaultValue ":" 0 "}," eventType ": {" type ":" number "," defaultValue ":" 1 "," меню ":" pressReleaseMenu "},},},]," менюлар ": {" pressReleaseMenu ": [{текст:" пресс ", маани: 1}, {текст:" чыгаруу ", маани: 0}],}}; } Менимче, ачылуучу менюдагы баалуулуктар дагы эле номерлер катары жарыяланганына карабай, opcode функциясына сап катары өтөт. Андыктан аларды керектүү учурда менюда көрсөтүлгөн баалуулуктар менен салыштырыңыз. Биз азыр жаңы окуя сурамжылоо цикли болгондо баскычтын абалын жаңыртып турган ыкманы жазабыз

жаңыртуу () {

if (this.runtime.currentMSecs == this.currentMSecs) return // a new poll цикл эмес this.currentMSecs = this.runtime.currentMSecs var gamepads = navigator.getGamepads () if (gamepads == null || gamepads.length = = 0 || геймпад [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.previousButtons.push (false)} башка {this.previousButtons = this. currentButtons} this.currentButtons = for (var i = 0; i <gamepad.buttons.length; i ++) this.currentButtons.push (gamepad.buttons . кысылган)} Акыр -аягы, биз учурдагы жана мурунку баскычтардын абалын салыштырып, update () ыкмасын чакырып, керектүү баскычтын жаңы басылганын же бошотулганын текшерип, окуялар блогубузду ишке ашыра алабыз.

buttonPressedReleased ({b, eventType}) {

this.update () if (b <this.currentButtons.length) {if (eventType == 1) {// note: бул сап болот, андыктан аны логикалык деп эсептөөдөн көрө 1 менен салыштыруу жакшы this.currentButtons &&! this.previousButtons ) {true true}} else {if (! this.currentButtons && this.previousButtons ) {true true}}} false false} Акыры, биз класс аныктагандан кийин сыйкырдуу кеңейтүүбүздүн каттоо кодун кошобуз

(функция () {

var extensionInstance = жаңы ScratchSimpleGamepad (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo ()).)

Толук кодду бул жерден ала аласыз.

7 -кадам: Unsandboxed кеңейтүүсүн колдонуу

Дагы бир жолу, кеңейтүүңүздү бир жерге жайгаштырыңыз жана бул жолу аны ShelTester's Scratch режимине url = argument эмес, load_plugin = менен жүктөңүз. Мисалы, менин жөнөкөй Gamepad режимим үчүн, төмөнкүгө өтүңүз:

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

(Баса, эгер сиз дагы татаал геймпадды кааласаңыз, анда жогорудагы URLден "жөнөкөй" дегенди алып салсаңыз, сизде дүрбөлөң жана аналогдук октун колдоосу болот.)

Дагы, кеңейтүү Scratch редакторуңуздун сол жагында көрүнүшү керек. Жогоруда бул өтө жөнөкөй Scratch программасы, 0 баскычын басканыңызда "салам" жана чыгарганда "кош бол" дейт.

8-кадам: кош шайкештик жана ылдамдык

Мен байкадым, кеңейтүү блоктору мен кутусуз кеңейтүүлөр үчүн колдонгон жүктөө ыкмасын колдонуу менен тезирээк иштейт. Ошентип, эгерде сиз Web Worker кум коргосунда иштөөнүн коопсуздук артыкчылыктары жөнүндө кам көрбөсөңүз, анда кодуңуз жүктөлгөндөн пайда болот? Load_plugin = URL аргументи SheepTester's mod.

Сиз кеңейтүү классын аныктагандан кийин, төмөнкү кодду колдонуу менен, эки жүктөө ыкмасына шайкеш келген кумкоргон кеңейтүүнү жасай аласыз (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)}}) ()