Vuta viongezeo vya 3.0: Hatua 8

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:48

Viongezeo vya mwanzo ni vipande vya msimbo wa Javascript ambao huongeza vizuizi vipya kwa Scratch. Wakati Scratch imejumuishwa na rundo la viendelezi rasmi, hakuna utaratibu rasmi wa kuongeza viendelezi vilivyotengenezwa na watumiaji.

Wakati nilikuwa nikifanya ugani wangu wa kudhibiti Minecraft kwa Scratch 3.0, niliona kuwa ngumu kuanza. Maagizo haya hukusanya pamoja habari kutoka kwa vyanzo anuwai (haswa hii), pamoja na vitu kadhaa nilivyogundua mwenyewe.

Unahitaji kujua jinsi ya kupanga programu kwenye Javascript na jinsi ya kukaribisha Javascript yako kwenye wavuti. Kwa mwisho, ninapendekeza Kurasa za GitHub.

Ujanja kuu ni kutumia mod ya SheepTester ya Scratch ambayo hukuruhusu kupakia viendelezi na programu-jalizi.

Agizo hili litakuongoza kupitia kutengeneza viendelezi viwili:

• Leta: kupakia data kutoka kwa URL na kutoa lebo za JSON, kwa mfano kwa kupakia data ya hali ya hewa
• SimpleGamepad: kutumia mtawala wa mchezo katika Scratch (toleo la kisasa zaidi liko hapa).

Hatua ya 1: Aina Mbili za Viendelezi

Kuna aina mbili za viendelezi ambazo nitaita "unsandboxed" na "sandboxed". Upanuzi wa sandboxed huendeshwa kama Wafanyakazi wa Wavuti, na kwa sababu hiyo wana mapungufu makubwa:

• Wafanyikazi wa Wavuti hawawezi kupata globia katika kitu cha dirisha (badala yake, wana kitu cha kibinafsi cha ulimwengu, ambacho ni chache zaidi), kwa hivyo huwezi kuzitumia kwa vitu kama ufikiaji wa mchezo wa mchezo.
• Viendelezi vya sandboxed hazina ufikiaji wa kitu cha muda wa kukimbia.
• Upanuzi wa sandboxed ni polepole sana.
• Ujumbe wa makosa ya kiweko cha Javascript kwa viendelezi vya sandbox ni siri zaidi katika Chrome.

Kwa upande mwingine:

• Kutumia upanuzi wa sandbox za watu wengine ni salama zaidi.
• Viendelezi vya sandboxed vina uwezekano mkubwa wa kufanya kazi na msaada wowote wa upakiaji rasmi wa upakiaji rasmi.
• Viendelezi vya sandbox vinaweza kupimwa bila kupakia kwenye seva ya wavuti kwa kusimba ndani ya data: // URL.

Viongezeo rasmi (kama Muziki, Kalamu, n.k.) zote hazina sanduku. Mjenzi wa kiendelezi hupata kitu cha wakati wa kukimbia kutoka kwa Mwanzo, na dirisha inapatikana kabisa.

Ugani wa Leta ni sandboxed, lakini Gamepad moja inahitaji kitu cha navigator kutoka dirisha.

Hatua ya 2: Kuandika Ugani wa Sandboxed: Sehemu ya I

Ili kufanya ugani, unaunda darasa ambalo husimba habari juu yake, na kisha ongeza msimbo kidogo kusajili ugani.

Jambo kuu katika darasa la ugani ni njia ya kupataInfo () ambayo inarudisha kitu na sehemu zinazohitajika:

• id: jina la ndani la kiendelezi, lazima liwe la kipekee kwa kila kiendelezi
• jina: jina la urafiki la ugani, linaloonekana kwenye orodha ya Vitalu ya Scratch
• vitalu: orodha ya vitu vinavyoelezea kizuizi kipya cha kawaida.

Na kuna uwanja wa menyu wa hiari ambao hautumiwi katika Kuchota lakini utatumika katika Gamepad.

Kwa hivyo, hapa kuna templeti ya msingi ya Kuchota:

darasa ScratchFetch {

Constructor Scratch.extensions.register (mpya ScratchFetch ())

Hatua ya 3: Kuandika Ugani wa Sandboxed: Sehemu ya II

Sasa, tunahitaji kuunda orodha ya vizuizi kwenye kitu cha GetInfo (). Kila block inahitaji angalau hizi uwanja nne:

• opcode: hii ni jina la njia ambayo inaitwa kufanya kazi ya block

• blockType: hii ndio aina ya kuzuia; zile za kawaida kwa viendelezi ni:

  • "amri": hufanya kitu lakini hairudishi thamani
  • "mwandishi": hurejesha kamba au nambari
  • "Boolean": anarudi boolean (kumbuka mtaji)
  • "kofia": tukio la kukamata tukio; ikiwa msimbo wako wa mwanzo unatumia kizuizi hiki, muda wa kukimbia wa Scratch hupiga kura mara kwa mara njia inayohusiana ambayo inarudi boolean kusema ikiwa tukio limetokea
• maandishi: haya ni maelezo ya kirafiki ya kizuizi, na hoja kwenye mabano, kwa mfano, "pata data kutoka "

• hoja: hiki ni kitu kilicho na uwanja kwa kila hoja (kwa mfano, "url" katika mfano ulio hapo juu); kitu hiki kwa upande mwingine kina sehemu hizi:

  • aina: ama "kamba" au "nambari"
  • defaultValue: thamani chaguo-msingi ya kujazwa mapema.

Kwa mfano, hapa kuna uwanja wa vitalu katika ugani wangu wa Kuchukua:

"vizuizi": [{"opcode": "fetchURL", "blockType": "reporter", "text": "pata data kutoka ", "hoja": {"url": {"type": "string", "defaultValue ":" https://api.weather.gov/stations/KNYC/observations "},}}, {" opcode ":" jsonExtract "," blockType ":" reporter "," maandishi ":" dondoa [jina] kutoka [data] "," hoja ": {" name ": {" type ":" string "," defaultValue ":" joto "}," data ": {" type ":" string "," defaultValue ": '{"joto": 12.3}'},}},]

Hapa, tulielezea vizuizi viwili: fetchURL na jsonExtract. Wote ni waandishi wa habari. Wa kwanza huvuta data kutoka kwa URL na kuirudisha, na ya pili huondoa uwanja kutoka kwa data ya JSON.

Mwishowe, unahitaji kujumuisha njia za vizuizi viwili. Kila njia inachukua kitu kama hoja, na kitu kikijumuisha uwanja wa hoja zote. Unaweza kusuluhisha haya kwa kutumia braces zilizopindika katika hoja. Kwa mfano, hapa kuna mfano mmoja wa maingiliano:

jsonExtract ({jina, data}) {

var parsed = JSON.parse (data) ikiwa (jina limechanganuliwa) {var out = parsed [name] var t = typeof (nje) ikiwa (t == "string" || t == "number") itarudi ikiwa (t == "boolean") kurudi t? 1: 0 rudisha JSON.stringify (nje)} mwingine {kurudi ""}}

Nambari hiyo inavuta uwanja wa jina kutoka kwa data ya JSON. Ikiwa uwanja una kamba, nambari au boolean, tunarudisha hiyo. Vinginevyo, tunarudisha tena uwanja. Na tunarudisha kamba tupu ikiwa jina halipo kutoka kwa JSON.

Wakati mwingine, hata hivyo, unaweza kutaka kufanya kizuizi kinachotumia API ya kupendeza. Njia ya fetchURL () hutumia API ya kuchota ambayo ni ya kupendeza. Katika hali kama hiyo, unapaswa kurudisha ahadi kutoka kwa njia yako inayofanya kazi hiyo. Kwa mfano:

fetchURL ({url}) {

kurudi kuleta . basi [response => response.text ())}

Hiyo ndio. Ugani kamili uko hapa.

Hatua ya 4: Kutumia Ugani wa Sandboxed

Kuna njia mbili za kutumia ugani wa sandboxed. Kwanza, unaweza kuipakia kwenye seva ya wavuti, na kisha kuipakia kwenye mod ya SheepTester's Scratch mod. Pili, unaweza kuiingiza kwenye URL ya data, na kuipakia kwenye mod ya Scratch. Kwa kweli ninatumia njia ya pili kidogo kujaribu, kwani inaepuka wasiwasi juu ya matoleo ya zamani ya kiendelezi kinachowekwa akiba na seva. Kumbuka kuwa wakati unaweza kukaribisha javascript kutoka kwa Kurasa za Github, huwezi kufanya hivyo moja kwa moja kutoka kwa ghala ya kawaida ya github.

Fetch yangu.js ni mwenyeji katika https://arpruss.github.io/fetch.js. Au unaweza kubadilisha ugani wako kuwa URL ya data kwa kuipakia hapa kisha unakili kwenye ubao wa kunakili. URL ya data ni URL kubwa ambayo inashikilia faili nzima ndani yake.

Nenda kwa mod ya Scratch ya SheepTester. Bonyeza kitufe cha Ongeza Kiendelezi kwenye kona ya chini kushoto. Kisha bonyeza "Chagua kiendelezi", na weka URL yako (unaweza kubandika kwenye URL kubwa ya data ukipenda).

Ikiwa yote yameenda vizuri, utakuwa na kiingilio cha ugani wako upande wa kushoto wa skrini yako ya mwanzo. Ikiwa mambo hayakwenda sawa, unapaswa kufungua kiweko chako cha Javascript (shift-ctrl-J in Chrome) na ujaribu kutatua suala hilo.

Hapo juu utapata nambari ya mfano ambayo inachukua na kuchanganua data ya JSON kutoka kituo cha KNYC (huko New York) cha Huduma ya Hali ya Hewa ya Merika, na kuionesha, huku ikigeuza sprite kukabili kwa njia ile ile ambayo upepo unavuma. Njia niliyoifanya ni kuchukua data kwenye kivinjari cha wavuti, na kisha kugundua vitambulisho. Ikiwa unataka kujaribu kituo tofauti cha hali ya hewa, ingiza msimbo wa karibu wa zip kwenye sanduku la utaftaji kwa weather.gov, na ukurasa wa hali ya hewa wa eneo lako unapaswa kukupa nambari nne ya kituo cha barua, ambayo unaweza kutumia badala ya KNYC kwenye msimbo.

Unaweza pia kujumuisha ugani wako wa sandbox moja kwa moja kwenye URL ya mod ya SheepTester kwa kuongeza hoja ya "? Url =". Kwa mfano:

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

Hatua ya 5: Kuandika Kiendelezi kisicho na sanduku: Utangulizi

Mjenzi wa kiendelezi kisicho na sanduku anapitisha kitu cha Runtime. Unaweza kuipuuza au kuitumia. Matumizi moja ya kitu cha Runtime ni kutumia mali yake ya sasa ya MSecs kusawazisha hafla ("kofia vitalu"). Kwa kadiri ninavyoweza kusema, opcode zote za hafla hupigwa kura mara kwa mara, na kila raundi ya upigaji kura ina thamani moja ya sasa ya MSecs. Ikiwa unahitaji kitu cha Runtime, labda utaanza ugani wako na:

darasa EXTENSIONCLASS {

mjenzi (muda wa kukimbia) {this.runtime = muda wa kukimbia…}…}

Vitu vyote vya kawaida vya vitu vya dirisha vinaweza kutumiwa kwenye ugani wa sandbox. Mwishowe, kiendelezi chako kisicho na sanduku kinapaswa kuishia na nambari hii ya kichawi:

(kazi () {

var extensionInstance = mpya EXTENSIONCLASS (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo (). id, serviceName))

ambapo unapaswa kuchukua nafasi ya EXTENSIONCLASS na darasa la upanuzi wako.

Hatua ya 6: Kuandika Ugani Unsandboxed: Gamepad Rahisi

Wacha sasa tufanye ugani rahisi wa mchezo wa michezo ambao unatoa kizuizi cha hafla moja ("kofia") kwa wakati kitufe kinapobanwa au kutolewa.

Wakati wa kila mzunguko wa upigaji kura wa tukio, tutaokoa muhuri wa wakati kutoka kwa kitu cha wakati wa kukimbia, na majimbo ya mchezo wa awali na wa sasa. Njia ya muda hutumiwa kutambua ikiwa tuna mzunguko mpya wa upigaji kura. Kwa hivyo, tunaanza na:

darasa ScratchSimpleGamepad {

constructor (runtime) {this.runtime = runtime this.currentMSecs = -1 this.previousButtons = this.currentButtons = }…} Tutakuwa na kizuizi cha hafla moja, na pembejeo mbili - nambari ya kitufe na menyu kuchagua ikiwa tunataka hafla hiyo ichochea vyombo vya habari au kutolewa. Kwa hivyo, hii ndio njia yetu

maelezo zaidi () {

Return {"id": "SimpleGamepad", "name": "SimpleGamepad", "blocks": [{"opcode": "buttonPressedReledased", "blockType": "kofia", "maandishi": "kifungo [eventType] "," arguments ": {" b ": {" type ":" number "," defaultValue ":" 0 "}," eventType ": {" type ":" number "," defaultValue ":" 1 "," menyu ":" pressReleaseMenu "},},},]," menyu ": {" pressReleaseMenu ": [{{maandishi:" bonyeza ", thamani: 1}, {text:" release ", value: 0}],}}; } Nadhani maadili kwenye menyu kunjuzi bado hupitishwa kwa opcode kazi kama kamba, licha ya kutangazwa kama nambari. Kwa hivyo linganisha waziwazi dhidi ya maadili yaliyoainishwa kwenye menyu kama inahitajika. Sasa tunaandika njia ambayo inasasisha kifungo kinasema wakati wowote mzunguko mpya wa upigaji kura wa tukio unatokea

sasisha () {

ikiwa (this.runtime.currentMSecs == this.currentMSecs) kurudi // sio mzunguko mpya wa kupiga kura this.currentMSecs = this.runtime.currentMSecs var gamepads = navigator.getGamepads () if (gamepads == null || gamepads.length = = 0 | pedi za mchezo [0] == batili) {this.previousButtons = this.currentButtons = return} var gamepad = gamepads [0] if (gamepad.buttons.length! = This.previousButtons.length) { // idadi tofauti ya vifungo, kwa hivyo mchezo mpya wa mchezo huu.preButtons = kwa (var i = 0; i <gamepad.buttons.length; i ++) hii. PreviousButtons.push (uongo)} mwingine {this.previousButtons = this. sasaButtons} this.currentButtons = kwa (var i = 0; i <gamepad.buttons.length; i ++) this.currentButtons.push (gamepad.buttons .pressed)} Mwishowe, tunaweza kutekeleza kizuizi cha hafla yetu, kwa kupiga njia ya sasisho () na kisha kuangalia ikiwa kitufe kinachohitajika kimeshinikizwa au kutolewa, kwa kulinganisha majimbo ya kitufe cha sasa na cha awali

kitufe kilichochapishwa kimefutwa ({b, aina ya tukio}) {

hii. hii. Buttons za sasa &&! hii.buttons za awali ) {rudi kweli}} mwingine {ikiwa (! hii. sasa. Buttons && this. Na mwishowe tunaongeza nambari yetu ya usajili wa ugani wa uchawi baada ya kufafanua darasa

(kazi () {

var extensionInstance = mpya ScratchSimpleGamepad (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfoame)) huduma ya id,))

Unaweza kupata nambari kamili hapa.

Hatua ya 7: Kutumia Ugani Unsandboxed

Kwa mara nyingine tena, panga ugani wako mahali pengine, na wakati huu upakia na mzigo_plugin = badala ya hoja ya url = hoja ya SheepTester's Scratch mod. Kwa mfano, kwa mod yangu rahisi ya Gamepad, nenda kwa:

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

(Kwa njia, ikiwa unataka mchezo wa kisasa zaidi wa mchezo, ondoa tu "rahisi" kutoka kwa URL hapo juu, na utakuwa na msaada wa angani na mhimili wa analojia.)

Tena, ugani unapaswa kuonekana upande wa kushoto wa mhariri wako wa mwanzo. Hapo juu ni mpango rahisi sana wa mwanzo ambao unasema "hello" unapobonyeza kitufe 0 na "kwaheri" unapoiachilia.

Hatua ya 8: Utangamano wa mara mbili na kasi

Nimeona kuwa vizuizi vya ugani vinaendesha agizo la ukubwa haraka kutumia njia ya upakiaji niliyotumia kwa viendelezi visivyo na sanduku. Kwa hivyo isipokuwa unapojali faida za usalama za kukimbia kwenye sanduku la mchanga la Mfanyikazi wa Wavuti, nambari yako itafaidika kwa kupakiwa na? Mzigo_plugin = Hoja ya URL kwa mod ya SheepTester.

Unaweza kufanya ugani wa sandboxed uendane na njia zote mbili za kupakia kwa kutumia nambari ifuatayo baada ya kufafanua darasa la ugani (badilisha CLASSNAME kwa jina la darasa lako la ugani):

(kazi () {

var extensionClass = CLASSNAME if (typeof window === "undefined" ||! window.vm) {Scratch.extensions.register (newClass ())} mwingine {var extensionInstance = new extensionClass (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo () id, serviceName)}}) ()