HTML5 pasirodymas pakeitė tai, kaip mes matome žiniatinklį, jis ne tik suteikė geresnių įrankių jų plėtrai, bet ir atvėrė galimybes kurti programas, kurios viršija, pavyzdžiui, vaizdo žaidimų, galimybes. .
Vaizdo žaidimų kūrimo HTML5 pranašumas yra tas, kad jis suderinamas su beveik bet kokiu įrenginiu, turinčiu naršyklę, ir dar geriau, nereikia atsisiųsti ar atlikti papildomų diegimų.
Dėl šio naujo populiarumo išsiplėtė vaizdo žaidimų kūrimo pagrindai, kiekvienas pasižymintis savybėmis ir pranašumais. Šį kartą mes susitelksime į „ Phaser“, priežasčių yra keletas ir jas galime pamatyti šiame sąraše:
- Ji turi didelę bendruomenę ir yra aktyvi.
- Jis periodiškai atnaujinamas.
- Tai nemokama naudoti.
- Jis turi fizikos įrankių, kurie palengvina mūsų gyvenimą.
Reikalavimai
1 - Mums reikalinga prieiga prie interneto, kad galėtume atsisiųsti visus išteklius, atsirandančius diegiant sistemą, įskaitant šią.
2 - Priklausomai nuo operacinės sistemos, mes turime būti įdiegę arba sugebėti įdiegti LAMP, WAMP ar MAMP stiliaus serverius, nes „ Phaser“ naudoja HTML5 ir „ JavaScript“, kad saugumo priemonėms mūsų naršyklė Priimkite vietines egzekucijas.
3 - Mums reikia leidimų, kad galėtume pasiekti reikalingus aplankus ir paslaugas, kurie nustatomi diegiant sistemą.
4 - Mums reikalinga naršyklė, suderinama su HTML5 ir turinti derinimo įrankius, šiuo vadovėliu šiuo metu naudosime „ Firefox Developer Edition “ naujausią versiją, tačiau jie gali laisvai pasirinkti sau tinkamiausią.
5 - Pagaliau mums reikia teksto rengyklės, kad galėtume parašyti pavyzdžių kodą, kaip visada galime turėti, nors mes rekomenduojame „ Sublime Text“ arba „NotePad ++“ dėl daugybės priedų, kurie abu palengvina mūsų, kaip kūrėjų, gyvenimą. .
„Phaser“ diegimas
Pirmas dalykas, kurį padarysime įdiegdami „ Phaser“, pateksime į oficialią jos svetainę ir rasime keletą šaltinių, tačiau kol kas pateksime į skyrių, kuriame sakoma „ Atsisiųsti“ :
Atsisiuntimą turime keletą variantų, kuriuos galime naudoti norėdami atsisiųsti .zip arba .tar.gz planšetinį kompiuterį, taip pat galime sukurti kloną iš projekto „ Github“ . Tokiu atveju norėdami paspartinti procesą, atsiųsime projektą .zip. . Atsisiuntę ar klonavę projektą, svarbiausi katalogai yra šie:
docs / index.html
Čia turime prieigą prie neprisijungus prie mūsų prisijungusios versijos ir oficialios versijos, kurią ką tik atsisiuntėme, dokumentacijos, tai gali mums padėti peržiūrėti tam tikrą informaciją, nors, jei turėsime galimybę prisijungti prie interneto ir dokumentuoti, visada turėsime geresnių variantų.
statyti / phaser.min.js
Tai yra mūsų struktūra, ji yra sutrumpinta ir suglaudinta biblioteka, kurioje yra visi įrankiai, kurių mums reikės norint pradėti mūsų pirmuosius projektus.
Tikriname mūsų diegimą
Kadangi atsisiuntėme projektą, norėdami įsitikinti, kad viskas teisinga, turime tiesiog nukopijuoti neišpakuotą aplanką, kuriame galime prieiti prie savo interneto serverio, dažniausiai tai yra www arba public_html katalogas, viskas tikrai priklauso nuo mūsų aplinkos.
Kai tik mes turime patekti į savo naršyklę ir paleisti mūsų „ localhost“ / „phaser“ arba mūsų įvestą pavadinimą ir pamatyti failų sąrašą, čia turime pereiti į šį aplanką: ištekliai / vadovėliai / 01 darbo pradžia / hellophaser / index.html ir Galime įvertinti tai, ką matome šiame ekrano kopijoje:
Pirmasis mūsų žaidimas
Kadangi įsitikinome, kad mūsų aplinka veikia nepriekaištingai, pats laikas pasidaryti savo pirmąjį žaidimą, todėl šiuo metu mes išsikelsime pasiekiamą savo lygio tikslą, kur pavyzdžio pabaigoje turėtume sugebėti ekrane parodyti sprinterį .
Aplanko struktūra
Aplanke, kurį turime pagrindą savo žiniatinklio serveryje, sukursime naują aplanką, tokiu atveju mes jį vadinsime „ fazerio pavyzdžiu“, jo viduje įdėsime „phaser.min.js“ failą jo šaknyje, sukursime failą pavadinimu indeksas. .html ir kitą failą, vadinamą main.js, taip pat turime įdėti paveikslėlį, pavadintą logo.webp, kurį parodysime šriftu, kurį galime rasti pagrindų šaltiniuose ir kurio rekomenduojamas dydis gali būti 180–64 pikseliai. Galų gale mūsų katalogas turėtų atrodyti taip: $config[ads_text5] not found
Kodas
Kadangi dabar turime savo struktūrą, turime pradėti rašyti savo pirmojo projekto kodą, todėl turime atidaryti savo failą index.html ir ten, be to, sukurti „ .js“ failus, kuriuos sukūrėme.
kurio identifikatorius bus žodis gameDiv . Pažiūrėkime, kaip atrodo mūsų kodas:
Pirmasis mūsų žaidimas „Phaser“Tai bus mūsų žaidimo palaikymo pagrindas, kad vartotojas galėtų peržiūrėti turinį. Kitas žingsnis kuriant mūsų pirmąjį žaidimą yra parašyti main.js kodą, kuris tvarkys visą mūsų žaidimo logiką ir kuriame yra trys pagrindiniai metodai, pažiūrėkime:Pirmasis mūsų žaidimas =)
iš anksto įkelti
Šis metodas yra atsakingas už visų išteklių, reikalingų mūsų žaidimui, įkūrimą - vaizdus, garsą, vaizdo įrašus ir kt. Jis visada veikia paleidžiant.
kurti
Šis metodas vykdomas, kai baigiamas išankstinis įkėlimas, o jo funkcija yra įtraukti į mūsų žaidimą įkeltus išteklius, be to, suteikti mums galimybę nustatyti pradinę jo sąranką.
atnaujinti
Galiausiai, šis metodas yra vykdomas 60 kartų per sekundę ir jame yra tikroji mūsų žaidimo logika, būtent tai ir suteikia mums judėjimo tam tikru būdu išdėstyti
.
Kaip matome, kiekvienas iš šių būdų rūpinasi žaidimo būsena, pirmieji du yra prieš žaidimo pradžią, o atnaujinimas vykdomas vykdant. Apibrėžę kiekvieno metodo veikimą, turime pamatyti tik mums reikalingą kodą:
var mainState = {preload: function () {// Įkelkite paveikslėlį game.load.image ('logotipas', 'logo.webp'); }, sukurkite: function () {// Mes rodome savo atvaizdą žaidime this.sprite = game.add.sprite (200, 150, 'logotipas'); }, atnaujinti: function () {// keičiame kampą vienetu 60 kartų per sekundę // tai suteiks mums vaizdo pasukimo efektą this.sprite.angle + = 1; }}; // čia mes pradedame savo žaidimą ir nustatome //, kad turėtumėte naudoti „gameDiv div“, kurį įdėjome į savo HTMLvar žaidimą = new Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state.add ('main', mainState); game.state.start ('main'); Kaip matome metodų pabaigoje, mes sukuriame kintamąjį, vadinamą žaidimu, ir jame vykdome „ Phaser.Game “ egzempliorių, kuriame perduodami kai kurie parametrai, nes dabar nebūtina daug apie juos žinoti, mes tiesiog juos kopijuojame tokius, kokius matome. Bet maždaug šioje vietoje mes liečiame savo programai ieškoti Phaserio, kad jis pasakytų jam, ką daryti su metodais, kuriuos sukūrėme anksčiau, ir galų gale su game.state.start yra vieta, kur mes nurodome pagrindus mūsų žaidimui pradėti. . Jei viskas klostysis gerai, vykdysime savo projektą naršyklėje ir ekrane turėtume pamatyti pasirinktą vaizdą:
Šiame pavyzdyje mes panaudojome vaizdą, kuris patenka į „ Phaser “ išteklius, tačiau tai tikrai nėra reikalavimas, bet kokiu įvaizdžiu galime pasiekti tuos pačius rezultatus. Kitas dalykas, kurį galime pastebėti savo pavyzdyje, yra tas, kad apačioje atidarę naršyklės derinimo pultą, šis įrankis yra geriausias draugas, kurį turėsime, nes būtent tada galime derinti įvairias klaidas, kurias galime rasti kurdami žaidimus.
Tai baigę, mes sėkmingai įdiegėme „ Phaser“, žinojome keletą pradinių šios puikios struktūros savybių ir sukūrėme nedidelę programą ar žaidimą. Svarbu, kad šis vadovėlis būtų atskaitos taškas, norint atlikti šiek tiek nuodugnesnius „ Phaser“ tyrimus, nes tai nėra net 1% visko, ką jis mums siūlo, vis dėlto tai yra pirmas žingsnis, kurio mums taip sunku žengti.
Straipsnis