Turinys
Atvykimas HTML5 Tai pakeitė tai, kaip matome žiniatinklį, ne tik suteikė mums geresnių įrankių jų kūrimui, bet ir atvėrė mums galimybes kurti tolesnes programas, kaip ir vaizdo žaidimų atveju.Vaizdo žaidimo kūrimo pranašumas HTML5 tai yra tai, kad jis suderinamas su beveik bet kokiu įrenginiu, turinčiu naršyklę, ir kas dar geriau, nereikia atsisiųsti ar atlikti papildomų diegimų.
Dėl šio naujo populiarumo daugėjo vaizdo žaidimų kūrimo sistemos, kurių kiekviena turi savo ypatybes ir privalumus, šį kartą mes sutelksime dėmesį į Phaser, priežastys yra kelios ir jas galime pamatyti šiame sąraše:
- Ji turi puikią bendruomenę ir yra aktyvi.
- Jis periodiškai atnaujinamas.
- Ja naudotis galima nemokamai.
- Jame yra fizikos įrankių, palengvinančių mūsų gyvenimą.
1- Mums reikia interneto prieigos, kad galėtume atsisiųsti visus išteklius, atsirandančius diegiant sistemą, įskaitant šią.
2- Turime būti įdiegę ar sugebėti įdiegti tokio tipo žiniatinklio serverį ŠVIESA arba WAMP arba MAMP tai priklauso nuo mūsų operacinės sistemos, nes Phaser naudoja HTML5 ir taip pat „JavaScript“ Todėl dėl saugumo priemonių mūsų naršyklė nepriims vietinių egzekucijų.
3- Mums reikia leidimų, kad galėtume pasiekti reikiamus aplankus ir paslaugas, kurios nustatomos diegiant sistemą.
4- Mums reikia naršyklės, suderinamos su HTML5 ir kad ji turi derinimo įrankius, šios pamokos atveju mes naudosime „Firefox“ kūrėjų leidimas naujausią versiją, tačiau jie gali laisvai pasirinkti tą, kuri jiems atrodo geriausia.
5- Galiausiai mums reikia teksto redaktoriaus, kad galėtume parašyti pavyzdžių kodą, nes jis visada gali būti bet koks, bet mes rekomenduojame Aukščiausias tekstas o „NotePad ++“ dėl daugybės abiejų papildinių, palengvinančių mūsų, kaip kūrėjų, gyvenimą.
Pirmas dalykas, kurį mes padarysime, kad galėtume įdiegti Phaser yra eiti į oficialią svetainę ir čia rasite keletą šaltinių, tačiau kol kas eisime į skyrių, kuriame rašoma parsisiųsti:
DIDELIS
docs / index.htmlČia mes turime įrašą apie ką tik atsisiųstos versijos neprisijungus ir oficialius dokumentus, tai gali padėti mums peržiūrėti kai kurias detales, nors jei turėsime galimybę prisijungti prie interneto ir dokumentuoti save, visada turėsime geresnių variantų.
build / phaser.min.jsTokia yra mūsų sistema, tai yra suspausta ir suspausta biblioteka, kurioje yra visos priemonės, kurių mums prireiks pirmiesiems projektams pradėti.
Kadangi mes atsisiuntėme projektą, norėdami patikrinti, ar viskas teisinga, tiesiog turime nukopijuoti neišpakuotą aplanką, kuriame galime jį pasiekti naudodami savo žiniatinklio serverį, paprastai tai yra katalogas www arba public_html, viskas priklauso nuo mūsų aplinkos.
Kai ten turime eiti į savo naršyklę ir paleisti savo localhost / fazer arba pavadinimą, kurį įdėjome, ir pamatysime failų sąrašą, čia turime pereiti į šį aplanką: ištekliai / mokymo priemonės / 01 Darbo pradžia / hellophaser / index.html ir galime įvertinti tai, ką matome šioje ekrano kopijoje:
DIDELIS
Aplanke, kurio žiniatinklio serveryje yra sistema, mes sukursime naują aplanką, šiuo atveju mes jį vadinsime fazeris-pavyzdys, viduje mes ketiname įdėti failą phaser.min.js jo šaknyje sukursime failą pavadinimu index.html ir dar vienas failas vadinamas main.js, mes taip pat turime įdėti vaizdą, vadinamą logo.png.webp tai bus sprintas, kurį parodysime, kurį galima rasti pagrindiniuose ištekliuose ir kuris gali būti rekomenduojamas 180 x 64 pikselių dydis. Galų gale mūsų katalogas turėtų atrodyti taip:
Mūsų pirmasis žaidimas „Phaser“Tai bus pagrindas, kuriuo remiamas mūsų žaidimas, kad vartotojas galėtų peržiūrėti turinį. Kitas žingsnis kuriant pirmąjį mūsų žaidimą yra parašyti kodą main.js, kuriame bus nagrinėjama visa mūsų žaidimo logika ir kuriame yra trys pagrindiniai metodai, pažiūrėkime:Pirmasis mūsų žaidimas =)
išankstinis įkrovimasŠis metodas yra atsakingas už visų mūsų žaidimui reikalingų išteklių, ar tai būtų vaizdai, garsas, vaizdo įrašai ir kt., Įkėlimą. Jis visada veikia paleidžiant.
sukurtiŠis metodas veikia pasibaigus išankstinis įkrovimas ir jo funkcija yra įtraukti į mūsų žaidimą įkeltus išteklius, be to, suteikti mums galimybę nustatyti pradinę jo sąranką.
atnaujintiGaliausiai, šis metodas veikia 60 kartų per sekundę ir apima tikrąją mūsų žaidimo logiką..
Kaip matome, kiekvienas iš šių metodų yra atsakingas už žaidimo būseną, pirmieji du yra prieš žaidimo pradžią, o atnaujinti atsiranda vykdymo metu. Nusprendę, ką daro kiekvienas metodas, turime tik pamatyti mums reikalingą kodą:
var mainState = {preload: function () {// Įkeliame žaidimą game.load.image ('logo', 'logo.png.webp'); }, sukurti: function () {// Mes rodome savo įvaizdį žaidime this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// mes keičiame kampą vienu vienetu 60 kartų per sekundę // tai mums suteiks vaizdo sukimosi efektą this.sprite.angle + = 1; }}; // čia mes pradedame savo žaidimą ir nustatome jį // naudoti div gameDiv, kurį įdėjome į savo HTMLvar žaidimą = new Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('main', mainState); game.state.start ('pagrindinis');Kaip matome metodų pabaigoje, sukuriame kintamąjį, vadinamą žaidimas ir šiuo atveju vykdome egzempliorių Phaser. Žaidimas kai mes perduodame kai kuriuos parametrus, šiuo metu nebūtina apie juos daug žinoti, mes tiesiog nukopijuojame juos tokius, kokius matome. Bet apytiksliai tai yra ta dalis, kur mes liepiame ieškoti savo programos Phaser kad būtų pasakyta, ką daryti su aukščiau ir pabaigoje sukurtais metodais game.state.start čia mes sakome, kad sistema pradės mūsų žaidimą.Dabar, jei viskas klostėsi gerai, vykdysime savo projektą naršyklėje ir ekrane turėtume matyti besisukantį pasirinktą vaizdą:
Baigę šį vadovėlį, sėkmingai įdiegėme Phaser, mes žinojome kai kurias pradines šios puikios sistemos savybes ir sukūrėme nedidelę programą ar žaidimą. Svarbu, kad ši pamoka būtų pradinis taškas, norint atlikti šiek tiek išsamesnį tyrimą Phaser, nes tai nėra net 1% viso to, ką mums siūlo, tačiau tai yra pirmas žingsnis, kurį mums taip dažnai tenka atlikti.
