Scratch 3.0 uzantıları: 8 addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:42

Scratch uzantıları, Scratch -a yeni bloklar əlavə edən Javascript kod hissələridir. Scratch bir çox rəsmi uzantı ilə birlikdə olsa da, istifadəçi tərəfindən hazırlanmış uzantıları əlavə etmək üçün rəsmi bir mexanizm yoxdur.

Scratch 3.0 üçün Minecraft nəzarət uzantımı hazırlayarkən işə başlamağı çətin gördüm. Bu Təlimat müxtəlif mənbələrdən (xüsusən də bu) məlumatları, üstəlik özümü kəşf etdiyim bir neçə şeyi toplayır.

Javascript -də necə proqram quracağınızı və Javascriptinizi bir veb saytında necə yerləşdirəcəyinizi bilməlisiniz. İkincisi üçün GitHub Səhifələrini tövsiyə edirəm.

Əsas hiylə, uzantıları və plaginləri yükləməyinizə imkan verən SheepTester -in Scratch modundan istifadə etməkdir.

Bu Təlimat iki uzantı hazırlamaqda sizə yol göstərəcək:

• Al: URL -dən məlumat yükləmək və JSON etiketlərini çıxarmaq, məsələn hava məlumatlarını yükləmək üçün
• SimpleGamepad: Scratch -da bir oyun nəzarətçisindən istifadə (daha inkişaf etmiş bir versiya burada).

Addım 1: İki növ uzantı

"Qum qutusu olmayan" və "qum qutusu" adlandıracağım iki növ uzantı var. Qum qutusu uzantıları Veb İşçiləri olaraq işləyir və nəticədə əhəmiyyətli məhdudiyyətlərə malikdir:

• Veb İşçiləri, pəncərə obyektindəki qlobal məlumatlara daxil ola bilmirlər (bunun əvəzinə daha çox məhdud olan qlobal bir öz obyekti var), buna görə də onları gamepad girişi kimi şeylər üçün istifadə edə bilməzsiniz.
• Qum qutusu uzantılarının Scratch iş vaxtı obyektinə girişi yoxdur.
• Qum qutusu uzantıları daha yavaşdır.
• Qum qutusu uzantıları üçün Javascript konsolu səhv mesajları Chrome -da daha kritikdir.

Digər tərəfdən:

• Başqalarının qum qutusu uzantılarından istifadə etmək daha təhlükəsizdir.
• Qum qutusu uzantılarının hər hansı bir rəsmi rəsmi uzantı yükləmə dəstəyi ilə işləmə ehtimalı daha yüksəkdir.
• Sandboxed uzantıları, bir məlumatı kodlaşdıraraq bir veb serverə yükləmədən test edilə bilər: // URL.

Rəsmi uzantılar (məsələn, Musiqi, Qələm və s.) Hamısı qutusuzdur. Artırma üçün konstruktor iş vaxtı obyektini Scratch -dan alır və pəncərə tam əlçatandır.

Alma uzantısı qum qutusundadır, ancaq Gamepad -ın pəncərədən naviqator obyektinə ehtiyacı var.

Addım 2: Qum qutusunda uzantı yazmaq: I hissə

Bir uzantı yaratmaq üçün, bu barədə məlumatları kodlayan bir sinif yaradırsınız və sonra uzantını qeyd etmək üçün bir az kod əlavə edirsiniz.

Uzatma sinifindəki əsas şey, lazımi sahələri olan bir obyekti qaytaran bir getInfo () metodudur:

• id: uzantının daxili adı, hər bir uzantı üçün unikal olmalıdır
• ad: Scratch -in blok siyahısında görünən uzantının dost adı
• bloklar: yeni xüsusi bloku təsvir edən obyektlərin siyahısı.

Getməkdə istifadə edilməyən, lakin Gamepad -da istifadə ediləcək isteğe bağlı bir menyu sahəsi var.

Beləliklə, gətirmək üçün əsas şablon budur:

sinif ScratchFetch {

constructor () {} getInfo () {return {"id": "Al", "name": "Al", "bloklar": [/* sonra əlavə et * /]}} / * bloklar üçün metodlar əlavə et * /} Scratch.extensions.register (yeni ScratchFetch ())

Addım 3: Qum qutusunda uzantı yazmaq: II hissə

İndi getInfo () obyektindəki blokların siyahısını yaratmalıyıq. Hər bir blok üçün ən azı bu dörd sahə lazımdır:

• opcode: bu blokun işini görməyə çağırılan metodun adıdır

• blockType: bu blok növüdür; uzantıları üçün ən ümumi olanlar:

  • "əmr": bir şey edir, lakin bir dəyər qaytarmır
  • "reportyor": bir sətir və ya nömrə qaytarır
  • "Boolean": bir boolean qaytarır (böyük hərflərə diqqət yetirin)
  • "şapka": hadisə tutan blok; Scratch kodunuz bu blokdan istifadə edirsə, Scratch iş vaxtı, hadisənin baş verib -vermədiyini söyləmək üçün bir boolean qaytaran əlaqəli metodu müntəzəm olaraq sorğu -sual edir.
• mətn: bu, mötərizədə olan arqumentləri olan, blokun dostcasına təsviridir, məsələn, " -dən məlumat gətir"

• arqumentlər: bu, hər bir arqument üçün bir sahəsi olan bir obyektdir (məsələn, yuxarıdakı nümunədə "url"); bu obyekt öz növbəsində bu sahələrə malikdir:

  • növü: ya "simli" və ya "nömrə"
  • defaultValue: əvvəlcədən doldurulacaq standart dəyər.

Məsələn, Fetch uzantımdakı bloklar sahəsi budur:

"bloklar": [{"opcode": "fetchURL", "blockType": "reportyor", "text": "məlumatları -dən alın" "argumentlər": {"url": {"type": "string", "defaultValue") ":" https://api.weather.gov/stations/KNYC/observations "},}}, {" opcode ":" jsonExtract "," blockType ":" reportyor "," text ":" çıxarış [ad] [data] "," arqumentlər "dən: {" ad ": {" növ ":" sim "," defaultValue ":" temperatur "}," məlumatlar ": {" növ ":" sim "," defaultValue ": '{"temperatur": 12.3}'},}},]

Burada iki blok təyin etdik: fetchURL və jsonExtract. Hər ikisi müxbirdir. Birincisi, bir URL -dən məlumat çıxarır və geri qaytarır, ikincisi isə JSON məlumatlarından bir sahə çıxarır.

Nəhayət, iki blok üçün metodları daxil etməlisiniz. Hər bir metod bir obyekti bütün arqumentlər üçün sahələr daxil olmaqla arqument olaraq götürür. Arqumentlərdə buruq mötərizələrdən istifadə edərək bunları deşifr edə bilərsiniz. Məsələn, burada sinxron bir nümunə var:

jsonExtract ({ad, data}) {

var parsed = JSON.parse (data) if (ismi ayrıştırılmış) {var out = ayrıştırılmış [ad] var t = typeof (out) if (t == "string" || t == "number") əgər (t == "boolean") t qaytar? 1: 0 qayıt JSON.stringify (out)} başqa {qayıt ""}}

Kod, ad sahəsini JSON məlumatlarından çıxarır. Sahədə bir simli, nömrə və ya boolean varsa, onu qaytarırıq. Əks təqdirdə, sahəni yenidən JSONify edirik. Adı JSON -da yoxdursa, boş bir sətir qaytarırıq.

Bəzən, asinxron API istifadə edən bir blok etmək istəyə bilərsiniz. FetchURL () metodu, asinxron olan fetch API istifadə edir. Bu vəziyyətdə, metodunuzdan iş görən bir söz verməlisiniz. Məsələn:

fetchURL ({url}) {

qayıt (url). sonra (cavab => cavab.text ())}

Bu belədir. Tam uzantı burada.

Addım 4: Sandboxed Uzantıdan istifadə edin

Qum qutusu uzantısını istifadə etməyin iki yolu var. Əvvəlcə bir veb serverə yükləyə və sonra SheepTester -in Scratch moduna yükləyə bilərsiniz. İkincisi, onu bir məlumat URL'sinə kodlaya və Scratch moduna yükləyə bilərsiniz. İkinci metodu test üçün bir az istifadə edirəm, çünki uzantının köhnə versiyalarının server tərəfindən önbelleğe alınmasından narahat olmur. Diqqət yetirin ki, Github Səhifələrindən javascript saxlaya bilsəniz də, bunu adi bir github deposundan birbaşa edə bilməzsiniz.

Mənim fetch.js https://arpruss.github.io/fetch.js ünvanındadır. Və ya uzantınızı buraya yükləyərək məlumat URL -yə çevirə və sonra panoya kopyalaya bilərsiniz. Məlumat URL -si, bütün bir faylı saxlayan nəhəng bir URL -dir.

SheepTester -in Scratch moduna keçin. Sol alt küncdə Uzantı əlavə et düyməsini basın. Sonra "Bir uzantı seçin" düyməsini basın və URL -ni daxil edin (istəsəniz bütün nəhəng məlumat URL -ni yapışdıra bilərsiniz).

Hər şey yaxşı olarsa, Scratch ekranınızın sol tərəfində uzantınız üçün bir girişiniz olacaq. İşlər yaxşı getmirsə, Javascript konsolunuzu açmalısınız (Chrome-da shift-ctrl-J) və problemi həll etməyə çalışmalısınız.

Yuxarıda, ABŞ Milli Hava Xidmətinin KNYC (Nyu -Yorkda) stansiyasından JSON məlumatlarını götürən və təhlil edən bir nümunə kodu tapa bilərsiniz və spriti küləyin əsdiyi kimi üzünə çevirin. Etdiyim yol, məlumatları veb brauzerə daxil etmək və sonra etiketləri anlamaq idi. Fərqli bir hava stansiyasını sınamaq istəyirsinizsə, weather.govdakı axtarış qutusuna yaxınlıqdakı poçt kodunu daxil edin və yerləşdiyiniz yerin hava səhifəsi sizə KNYC yerinə istifadə edə biləcəyiniz dörd hərfli bir stansiya kodu verməlidir. kod.

"? Url =" arqumenti əlavə etməklə, "Sandbox" uzantısını SheepTester modunun URL'sinə daxil edə bilərsiniz. Məsələn:

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

Addım 5: Qum qutusuz bir uzantı yazmaq: Giriş

Qutusuz bir uzantının qurucusu Runtime obyektindən keçir. Bunu görməməzliyə vura və ya istifadə edə bilərsiniz. Runtime obyektinin istifadəsi, hadisələri sinxronizasiya etmək üçün currentMSecs xüsusiyyətindən istifadə etməkdir ("şapka blokları"). Anladığım qədər bütün hadisə bloku kodları müntəzəm olaraq sorğu -sual edilir və sorğunun hər turunun tək bir currentMSecs dəyəri var. Runtime obyektinə ehtiyacınız varsa, ehtimal ki, uzantınıza başlayacaqsınız:

sinif EXTENSIONCLASS {

qurucu (iş vaxtı) {this.runtime = iş vaxtı…}…}

Qutusuz uzantıda bütün standart pəncərə obyektləri istifadə edilə bilər. Nəhayət, qutusuz uzantınız bu sehrli kodla bitməlidir:

(funksiya () {

var extensionInstance = yeni EXTENSIONCLASS (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo ()). id (xidmət))

burada EXTENSIONCLASS -ı uzantınızın sinfi ilə əvəz etməlisiniz.

Addım 6: Qutusuz bir uzantı yazmaq: Sadə Gamepad

İndi bir düyməyə basıldıqda və ya buraxıldıqda bir hadisə ("şapka") bloku təmin edən sadə bir gamepad uzantısı edək.

Hər bir hadisə bloku seçki dövrü ərzində, iş vaxtı obyektindən bir zaman damgasını və əvvəlki və mövcud gamepad vəziyyətlərini saxlayacağıq. Zaman damgası, yeni bir seçki dövrümüzün olub olmadığını tanımaq üçün istifadə olunur. Beləliklə, başlayırıq:

sinif ScratchSimpleGamepad {

qurucu (iş vaxtı) {this.runtime = runtime this.currentMSecs = -1 this.previousButtons = this.currentButtons = }…} İki girişi olan bir hadisə blokumuz olacaq-düymənin nömrəsi və hadisənin mətbuatda və ya sərbəst buraxılmasını istədiyimizi seçmək üçün bir menyu. Beləliklə, metodumuz budur

məlumat əldə etmək() {

qayıt {"id": "SimpleGamepad", "name": "SimpleGamepad", "blocks": [{"opcode": "buttonPressedReleased", "blockType": "hat", "text": "button [eventType] "," arguments ": {" b ": {" type ":" number "," defaultValue ":" 0 "}," eventType ": {" type ":" number "," defaultValue ":" 1 "," menyu ":" pressReleaseMenu "},},},]," menyular ": {" pressReleaseMenu ": [{mətn:" basın ", dəyər: 1}, {mətn:" buraxma ", dəyər: 0}],}}; } Düşünürəm ki, açılan menyudakı dəyərlər, rəqəm olaraq elan edilməsinə baxmayaraq, hələ də simlər olaraq opcode funksiyasına keçir. Lazım gələrsə onları açıq şəkildə menyuda göstərilən dəyərlərlə müqayisə edin. İndi yeni bir hadisə seçmə dövrü baş verdikdə düyməni yeniləyən bir üsul yazırıq

yeniləmə () {

if (this.runtime.currentMSecs == this.currentMSecs) return // yeni bir seçki dövrü deyil this.currentMSecs = this.runtime.currentMSecs var gamepads = navigator.getGamepads () if (gamepad == null || gamepads.length = = 0 || gamepad [0] == null) {this.previousButtons = this.currentButtons = return} var gamepad = gamepads [0] if (gamepad.buttons.length! = This.previousButtons.length) { // fərqli sayda düymələr, buna görə yeni var gamepad this.previousButtons = for (var i = 0; i <gamepad.buttons.length; i ++) this.previousButtons.push (false)} başqa {this.previousButtons = this. currentButtons} this.currentButtons = for (var i = 0; i <gamepad.buttons.length; i ++) this.currentButtons.push (gamepad.buttons .sıkılmış)} Nəhayət, yeniləmə () metodunu çağıraraq və sonra lazımi düymənin yeni basıldığını və ya buraxıldığını yoxlayaraq, mövcud və əvvəlki düymə vəziyyətlərini müqayisə edərək hadisə blokumuzu həyata keçirə bilərik.

buttonPressedReleased ({b, eventType}) {

this.update () if (b <this.currentButtons.length) {if (eventType == 1) {// note: bu bir simli olacaq, buna görə də onu Boole kimi qəbul etməkdənsə 1 ilə müqayisə etmək daha yaxşıdır this.currentButtons &&! this.previousButtons ) {true true}} else {if (! this.currentButtons && this.previousButtons ) {true true}}} false false} Və nəhayət sinfi təyin etdikdən sonra sehrli uzantı qeydiyyat kodumuzu əlavə edirik

(funksiya () {

var extensionInstance = yeni ScratchSimpleGamepad (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo ()).)

Tam kodu burada əldə edə bilərsiniz.

Addım 7: Qum qutusu olmayan bir uzantıdan istifadə edin

Bir daha, uzantınızı bir yerə yerləşdirin və bu dəfə SheepTester -in Scratch moduna url = argument deyil, load_plugin = yükləyin. Məsələn, sadə Gamepad modum üçün bura daxil olun:

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

(Yeri gəlmişkən, daha mürəkkəb bir gamepad istəyirsinizsə, yuxarıdakı URL -dən "sadə" ni çıxarın və gurultu və ox ox dəstəyiniz olacaq.)

Yenə də uzantı Scratch redaktorunuzun sol tərəfində görünməlidir. Yuxarıda, 0 düyməsini basdığınızda "salam" və buraxdığınız zaman "əlvida" deyən çox sadə bir Scratch proqramı var.

Addım 8: İkili uyğunluq və Sürət

Uzatma bloklarının, qutusuz uzantılar üçün istifadə etdiyim yükləmə metodundan istifadə edərək daha böyük bir əmr işlədiyini gördüm. Beləliklə, bir Web Worker sandbox -da işləməyin təhlükəsizlik faydalarına əhəmiyyət verməsəniz, kodunuz SheepTester -in moduna? Load_plugin = URL arqumenti yüklənməsindən faydalanacaq.

Genişləndirmə sinifini təyin etdikdən sonra aşağıdakı kodu istifadə edərək hər iki yükləmə üsulu ilə uyğun bir qum qutusu uzantısı edə bilərsiniz (CLASSNAME -ni uzantı sinifinizin adına dəyişdirin):

(funksiya () {

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