Home-theater-designers
„Phaser“ yra 2D vaizdo žaidimų kūrimo sistema. Žaidimui rodyti naudojama HTML5 drobė ir žaidimui paleisti „JavaScript“. „Phaser“ pranašumas, palyginti su „vanilla JavaScript“, yra tai, kad ji turi plačią biblioteką, kuri užbaigia didžiąją dalį vaizdo žaidimų fizikos ir leidžia susikoncentruoti ties paties žaidimo kūrimu.
„Phaser“ sutrumpina kūrimo laiką ir palengvina darbo eigą. Išmokime sukurti pagrindinį žaidimą naudojant „Phaser“.
Kodėl verta kurti naudojant „Phaser“?
Phaser yra panaši į kitas vizualinio programavimo kalbas, nes programa pagrįsta atnaujintais atnaujinimais. „Phaser“ turi tris pagrindinius etapus: išankstinį įkėlimą, kūrimą ir atnaujinimą.
Iš anksto įkeliant žaidimo ištekliai įkeliami ir pasiekiami žaidimui.
„Create“ inicijuoja žaidimą ir visus pradžios žaidimo elementus. Pradėjus žaidimą, visos šios funkcijos paleidžiamos vieną kartą.
Atnaujinimas, atvirkščiai, veikia visą žaidimą. Būtent darbinis arkliukas atnaujina žaidimo elementus, kad jis taptų interaktyvus.
Nustatykite savo žaidimų kūrimo sistemą naudodami „Phaser“
Nepaisant to, kad „Phaser“ veikia naudojant HTML ir „JavaScript“, žaidimai iš tikrųjų paleidžiami serverio, o ne kliento pusėje. Tai reiškia, kad turėsite žaisti savo žaidimą jūsų vietinis šeimininkas . Vykdydami žaidimą serverio pusėje, jūsų žaidimas gali pasiekti papildomus failus ir išteklius už programos ribų. Rekomenduoju naudojant XAMPP vietiniam prieglobai nustatyti jei dar neturite vienos sąrankos.
Žemiau pateiktas kodas padės jums pradėti veikti. Tai sukuria pagrindinę žaidimo aplinką.
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
var gamePiece;
var game = new Phaser.Game(config);
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}
Norėdami paleisti žaidimą, jums reikės PNG vaizdo, pavadinto „gamePiece“, išsaugoto jūsų „localhost“ aplanke „img“. Paprastumo dėlei šiame pavyzdyje naudojamas 60xgame de60px oranžinis kvadratas. Jūsų žaidimas turėtų atrodyti maždaug taip:
Jei susiduriate su problema, naudokite naršyklės derintuvą, kad išsiaiškintumėte, kas nutiko. Trūkstant net vieno simbolio, gali kilti sumaišties, tačiau paprastai jūsų derintojas sulauks tų mažų klaidų.
Sąrankos kodo paaiškinimas
Kol kas žaidimas nieko neduoda. Bet mes jau įveikėme daug žemės! Pažvelkime į kodą išsamiau.
Kad „Phaser“ žaidimas būtų paleistas, turite importuoti „Phaser“ biblioteką. Mes tai darome 3 eilutėje. Šiame pavyzdyje mes susiejome su šaltinio kodu, bet galite jį atsisiųsti į savo „localhost“ ir nurodyti failą.
kaip padaryti pdf nespalvotą
Didžioji dalis kodo iki šiol sukonfigūruoja žaidimo aplinką, kuri kintama konfig parduotuvėse. Mūsų pavyzdyje mes kuriame etapinį žaidimą, kurio fonas yra mėlynas (šešiolikos spalvų kodo CCFFFF), kuris yra 600 x 600 taškų. Kol kas žaidimo fizika nustatyta Arkadianas , tačiau „Phaser“ siūlo skirtingą fiziką.
Pagaliau, scena nurodo programai paleisti išankstinis įkrovimas funkcija prieš žaidimo pradžią ir sukurti funkcija žaidimui pradėti. Visa ši informacija perduodama žaidimo objektui, vadinamam žaidimas .
Susijęs: 6 geriausi nešiojamieji kompiuteriai programavimui ir kodavimui
Kitas kodo skyrius yra tas, kur žaidimas iš tikrųjų įgauna formą. Išankstinio įkėlimo funkcija yra vieta, kur norite inicijuoti viską, ko reikia žaidimui paleisti. Mūsų atveju mes iš anksto įkėlėme savo žaidimo paveikslėlį. Pirmasis parametras .vaizdas pavadina mūsų atvaizdą, o antrasis nurodo programai, kur rasti vaizdą.
„GamePiece“ vaizdas buvo pridėtas prie žaidimo naudojant kūrimo funkciją. 29 eilutėje rašoma, kad mes pridedame žaidimo „GamePiece“ vaizdą kaip 270 pikselių spritimą kairėje ir 450 taškų žemyn nuo viršutinio kairiojo žaidimo srities kampo.
Priversk mūsų žaidimą judėti
Kol kas tai vargu ar galima pavadinti žaidimu. Viena vertus, mes negalime pajudinti savo žaidimo. Kad galėtume pakeisti žaidimo dalykus, turėsime pridėti atnaujinimo funkciją. Taip pat turėsime pakoreguoti sceną konfigūracijos kintamajame, kad nurodytume žaidimui, kurią funkciją vykdyti, kai atnaujinsime žaidimą.
Atnaujinimo funkcijos pridėjimas
Nauja scena konfigūracijoje:
scene: {
preload: preload,
create: create,
update: update
}Tada po kūrimo funkcija pridėkite atnaujinimo funkciją:
„Amazon“ paketas neatvyko, sako „pristatytas“
function update(){
}Pagrindinių įvesties gavimas
Norėdami leisti žaidėjui valdyti žaidimą rodyklių klavišais, turėsime pridėti kintamąjį, kad galėtume sekti, kuriuos klavišus žaidėjas spaudžia. Toliau paskelbkite kintamąjį, vadinamą „keyInputs“, kuriame paskelbėme „gamePieces“. Paskelbus jį, visos funkcijos galės pasiekti naują kintamąjį.
var gamePiece;
var keyInputs;„KeyInput“ kintamasis turi būti inicijuotas, kai žaidimas sukuriamas naudojant funkciją „Create“.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}Dabar atnaujinimo funkcijoje galime patikrinti, ar žaidėjas spaudžia rodyklės klavišą, ir jei taip, atitinkamai perkelkite mūsų žaidimo dalį. Žemiau pateiktame pavyzdyje žaidimo dalis perkeliama 2 taškais, bet jūs galite padaryti didesnį ar mažesnį skaičių. Kūrinio perkėlimas po 1 tašką vienu metu atrodė šiek tiek lėtas.
function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}Žaidimas dabar turi judantį charakterį! Tačiau norint būti žaidimu, mums reikia tikslo. Pridėkime keletą kliūčių. Kliūčių šalinimas buvo daugelio 8 bitų eros žaidimų pagrindas.
Žaidimo kliūčių pridėjimas
Šiame kodo pavyzdyje naudojami du kliūčių spritai, vadinami kliūtimi1 ir kliūtimi 2. kliūtis1 yra mėlynas kvadratas, o kliūtis2 - žalia. Kiekvieną vaizdą reikės iš anksto įkelti, kaip ir „gamepiece sprite“.
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}Tada kiekvieną kliūčių spritą, kaip ir žaidimą, reikės inicijuoti kūrimo funkcijoje.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}Priversti kliūtis judėti
Šį kartą norėdami perkelti kūrinius, nenorime naudoti grotuvo įvesties. Vietoj to, tegul vienas gabalas juda iš viršaus į apačią, o kitas - iš kairės į dešinę. Norėdami tai padaryti, prie atnaujinimo funkcijos pridėkite šį kodą:
obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}
obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}Aukščiau pateiktas kodas perkelia kliūtį1 žemyn ekranu ir kliūtį2 per žaidimo zoną po 4 taškus kiekviename kadre. Kai kvadratas yra išjungtas iš ekrano, jis perkeliamas atgal į priešingą pusę naujoje atsitiktinėje vietoje. Tai užtikrins, kad žaidėjui visada atsiras nauja kliūtis.
Susidūrimų aptikimas
Bet mes dar ne visai baigėme. Galbūt pastebėjote, kad mūsų žaidėjas gali praeiti pro kliūtis. Turime priversti žaidimą aptikti, kada žaidėjas patenka į kliūtį, ir baigti žaidimą.
„Phaser“ fizikos bibliotekoje yra susidūrimo detektorius. Viskas, ką mums reikia padaryti, tai inicijuoti kūrimo funkciją.
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});Susidūrimo metodui reikalingi trys parametrai. Pirmieji du parametrai nustato, kurie objektai susiduria. Taigi aukščiau yra sumontuoti du greitintuvai. Pirmasis nustato, kai žaidimo elementas susiduria su kliūtimi1, o antrasis susiduria tarp žaidėjo ir kliūties2.
Trečiasis parametras nurodo susidūrimo dalyviui, ką daryti, kai jis aptinka susidūrimą. Šiame pavyzdyje yra funkcija. Jei įvyksta susidūrimas, visi žaidimo elementai sunaikinami; tai sustabdo žaidimą. Dabar žaidėjas persistengs, jei pataikys į kliūtį.
Išbandykite žaidimų kūrimą naudodami „Phaser“
Šį žaidimą galima patobulinti ir padaryti sudėtingesniu įvairiais būdais. Mes sukūrėme tik vieną žaidėją, tačiau antrą žaidžiamą personažą galima pridėti ir valdyti naudojant „awsd“ valdiklius. Panašiai galite eksperimentuoti pridėdami daugiau kliūčių ir keisdami jų judėjimo greitį.
Parsisiųsti microsoft office 2016 su produkto raktu
Ši įžanga padės jums pradėti, tačiau dar daug ko reikia išmokti. Puikus „Phaser“ dalykas yra tai, kad daug žaidimo fizikos atliekama už jus. Tai puikus būdas pradėti kurti 2D žaidimus. Toliau remkitės šiuo kodu ir tobulinkite savo žaidimą.
Jei susiduriate su klaidomis, naršyklės derintuvas yra puikus būdas išsiaiškinti problemą.
Dalintis Dalintis „Tweet“ Paštu Kaip naudoti „Chrome DevTools“ svetainės problemoms šalintiSužinokite, kaip patobulinti svetaines naudojant „Chrome“ naršyklės integruotus kūrimo įrankius.
Skaityti toliau Susijusios temos- Programavimas
- „JavaScript“
- HTML5
- Žaidimo kūrimas
J. Seatonas yra mokslo rašytojas, kurio specializacija yra sudėtingų temų skaidymas. Ji turi daktaro laipsnį Saskačevano universitete; jos tyrimas buvo sutelktas į žaidimu grindžiamo mokymosi panaudojimą, siekiant padidinti studentų dalyvavimą internete. Kai ji nedirba, ją rasite skaitydami, žaisdami vaizdo žaidimus ar dirbdami sodo darbus.
Daugiau iš Jennifer SeatonPrenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia