Darba sākšana ar Phaser spēļu izstrādei

Phaser ir sistēma 2D videospēļu izveidei. Spēles parādīšanai tiek izmantots HTML5 audekls un spēles palaišanai - JavaScript. Phaser izmantošanas priekšrocība salīdzinājumā ar vaniļas JavaScript ir tā, ka tai ir plaša bibliotēka, kas aizpilda lielāko daļu videospēļu fizikas, ļaujot jums koncentrēties uz pašas spēles izstrādi.

Phaser samazina izstrādes laiku un atvieglo darbplūsmu. Uzzināsim, kā izveidot pamata spēli ar Phaser.

---

---

Kāpēc attīstīties ar Phaser?

Phaser ir līdzīga citām vizuālās programmēšanas valodām, jo ​​programma ir balstīta uz atjaunotajiem atjauninājumiem. Phaser ir trīs galvenie posmi: iepriekšēja ielāde, izveide un atjaunināšana.

Iepriekš ielādējot, spēles līdzekļi tiek augšupielādēti un pieejami spēlei.

Izveidot inicializē spēli un visus sākuma spēles elementus. Katra no šīm funkcijām tiek palaista vienu reizi, kad tiek sākta spēle.

No otras puses, atjauninājums visas spēles garumā darbojas nepārtraukti. Tas ir darba zirgs, kas atjaunina spēles elementus, lai padarītu to interaktīvu.

Iestatiet savu sistēmu spēļu izstrādei, izmantojot Phaser

Neskatoties uz to, ka Phaser darbojas ar HTML un JavaScript, spēles faktiski tiek palaistas servera, nevis klienta pusē. Tas nozīmē, ka jums būs jāturpina spēle jūsu vietējais saimnieks . Spēles palaišana servera pusē ļauj jūsu spēlei piekļūt papildu failiem un īpašumiem ārpus programmas. ES iesaku izmantojot XAMPP, lai iestatītu lokālo saimnieku ja jums vēl nav viena iestatījuma.

---

---

Tālāk esošais kods palīdzēs jums sākt darbu. Tas izveido pamata spēles vidi.







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');
}




Lai palaistu spēli, būs nepieciešams PNG attēls ar nosaukumu “gamePiece”, kas saglabāts vietējā mitekļa mapē “img”. Vienkāršības labad šajā piemērā ir izmantots 60xgame de60px oranžs kvadrāts. Jūsu spēlei vajadzētu izskatīties apmēram šādi:

---

---

Ja rodas kāda problēma, izmantojiet pārlūkprogrammas atkļūdotāju, lai noskaidrotu, kas notika nepareizi. Pat vienas rakstzīmes trūkums var izraisīt postu, bet parasti jūsu atkļūdotājs pamanīs šīs mazās kļūdas.

Iestatīšanas koda skaidrojums

Pagaidām spēle neko nedod. Bet mēs jau esam pārvarējuši daudz zemes! Apskatīsim kodu padziļināti.

Lai palaistu Phaser spēli, jums ir jāimportē Phaser bibliotēka. Mēs to darām 3. rindā. Šajā piemērā mēs izveidojām saiti uz avota kodu, taču jūs varat to lejupielādēt savā vietējā resursdatorā un norādīt arī uz failu.

kā uzņemt ekrānuzņēmumu snapchat, viņiem nezinot tiktok

Liela daļa no koda līdz šim konfigurē spēles vidi, kas mainīgais config veikalos. Mūsu piemērā mēs izveidojam fāzeru spēli ar zilu fonu (CCFFFF heksadecimālā krāsu kodā), kas ir 600 x 600 pikseļi. Pagaidām spēles fizika ir iestatīta uz Arkādietis , bet Phaser piedāvā atšķirīgu fiziku.

Visbeidzot, aina liek programmai palaist iepriekšēja ielāde funkciju pirms spēles sākuma un izveidot funkcija spēles sākšanai. Visa šī informācija tiek nodota spēles objektam ar nosaukumu spēle .

Saistīts: 6 labākie klēpjdatori programmēšanai un kodēšanai

Nākamā koda sadaļa ir vieta, kur spēle patiešām veidojas. Iepriekšējas ielādes funkcija ir vieta, kur vēlaties inicializēt visu, kas nepieciešams spēles palaišanai. Mūsu gadījumā mēs esam iepriekš ielādējuši mūsu spēles gabala attēlu. Pirmais parametrs .attēls nosauc mūsu attēlu, bet otrais norāda programmai, kur atrast attēlu.

GamePiece attēls tika pievienots spēlei izveides funkcijā. 29. rindā teikts, ka mēs pievienojam gamePiece attēlu kā sprite 270 pikseļus pa kreisi un 450 pikseļus uz leju no mūsu spēles apgabala augšējā kreisā stūra.

Liekam mūsu spēlei kustēties

Pagaidām to diez vai var saukt par spēli. Pirmkārt, mēs nevaram pārvietot savu spēles gabalu. Lai varētu mainīt lietas savā spēlē, mums būs jāpievieno atjaunināšanas funkcija. Mums būs arī jāpielāgo ainas konfigurācijas mainīgajā, lai pateiktu spēlei, kura funkcija darbosies, kad atjaunināsim spēli.

Atjaunināšanas funkcijas pievienošana

Jauna aina konfigurācijā:

scene: {
preload: preload,
create: create,
update: update
}

Pēc tam zem izveidošanas funkcijas pievienojiet atjaunināšanas funkciju:

kur es varu dabūt suni

function update(){
}

Atslēgu ievades iegūšana

Lai ļautu spēlētājam kontrolēt spēles gabalu ar bulttaustiņiem, mums būs jāpievieno mainīgais, lai izsekotu, kurus taustiņus spēlētājs nospiež. Deklarējiet mainīgo ar nosaukumu keyInputs zemāk, kur mēs deklarējām gamePieces. Deklarējot to, visas funkcijas varēs piekļūt jaunajam mainīgajam.

var gamePiece;
var keyInputs;

Mainīgais keyInput jāinicializē, kad spēle ir izveidota izveidošanas funkcijā.

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}

Tagad atjaunināšanas funkcijā mēs varam pārbaudīt, vai spēlētājs nespiež bulttaustiņu, un, ja tā ir, attiecīgi pārvietot mūsu spēles gabalu. Tālāk redzamajā piemērā spēles gabals tiek pārvietots 2 pikseļus, bet jūs varat to padarīt lielāku vai mazāku. Gabāla pārvietošana pa 1 pikseļiem vienlaikus šķita nedaudz lēna.

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;
}
}

Spēlei tagad ir kustīgs raksturs! Bet, lai patiesi būtu spēle, mums ir vajadzīgs mērķis. Pievienosim dažus šķēršļus. Šķēršļu novēršana bija pamats daudzām 8 bitu laikmeta spēlēm.

Šķēršļu pievienošana spēlei

Šajā koda piemērā tiek izmantoti divi šķēršļu spriti, kurus sauc par šķēršļiem1 un šķēršļiem 2. šķēršļi1 ir zils kvadrāts un šķēršļi2 ir zaļi. Katrs attēls būs jāielādē tāpat kā spēles gabals.

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}

Tad katrs šķēršļu sprīts būs jāinicializē izveidošanas funkcijā, tāpat kā spēles gabals.

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');
}

Liek šķēršļiem kustēties

Lai pārvietotu gabalus šoreiz, mēs nevēlamies izmantot spēlētāja ievadi. Tā vietā, lai viens gabals pārvietotos no augšas uz leju, bet otrs - no kreisās uz labo. Lai to izdarītu, atjaunināšanas funkcijai pievienojiet šādu kodu:

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

Iepriekš minētais kods pārvietos šķēršļus1 pa ekrānu un šķērsli2 pa spēles laukumu 4 pikseļi katrā kadrā. Kad kvadrāts ir izslēgts no ekrāna, tas tiek pārvietots atpakaļ uz pretējo pusi jaunā izlases vietā. Tas nodrošinās, ka spēlētājam vienmēr ir jauns šķērslis.

Sadursmju noteikšana

Bet mēs vēl neesam līdz galam pabeigti. Jūs, iespējams, pamanījāt, ka mūsu spēlētājs var iziet cauri šķēršļiem. Mums jāliek spēlei noteikt, kad spēlētājs ietriecas šķērslī, un spēle jāpārtrauc.

Phaser fizikas bibliotēkā ir sadursmes detektors. Viss, kas mums jādara, ir to inicializēt izveidošanas 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();
});

Sadursmes metodei ir nepieciešami trīs parametri. Pirmie divi parametri nosaka, kuri objekti saduras. Tātad iepriekš mums ir uzstādīti divi sadursmju veicēji. Pirmais nosaka, kad spēles gabals saduras ar šķērsli1, un otrais sadursmes dalībnieks meklē sadursmi starp spēles gabalu un šķērsli2.

Trešais parametrs norāda sadursmes dalībniekam, kas jādara, tiklīdz tas konstatē sadursmi. Šajā piemērā ir funkcija. Ja notiek sadursme, visi spēles elementi tiek iznīcināti; tas pārtrauc spēli. Tagad spēlētājs pārspēlēs, ja trāpīs šķērslī.

Izmēģiniet spēļu izstrādi, izmantojot Phaser

Ir daudz dažādu veidu, kā šo spēli var uzlabot un padarīt sarežģītāku. Mēs esam izveidojuši tikai vienu spēlētāju, bet otru spēlējamo varoni var pievienot un kontrolēt, izmantojot awsd vadīklas. Tāpat jūs varētu eksperimentēt, pievienojot vairāk šķēršļu un mainot to kustības ātrumu.

prāta spēles, ko spēlēt draugiem

Šis ievads ļaus jums sākt darbu, taču vēl ir daudz ko mācīties. Phaser lieliskā lieta ir tā, ka liela daļa spēles fizikas tiek veikta jūsu vietā. Tas ir lielisks vienkāršs veids, kā sākt izstrādāt 2D spēles. Turpiniet veidot šo kodu un uzlabojiet savu spēli.

Ja rodas kādas kļūdas, jūsu pārlūkprogrammas atkļūdotājs ir lielisks veids, kā atklāt šo problēmu.

Kopīgot Kopīgot Čivināt E -pasts Kā izmantot Chrome DevTools, lai novērstu vietņu problēmas

Uzziniet, kā izmantot pārlūka Chrome iebūvētos izstrādes rīkus, lai uzlabotu savas vietnes.

Lasīt Tālāk Saistītās tēmas

• Programmēšana
• JavaScript
• HTML5
• Spēļu izstrāde

Par autoru Dženifera Sītone(Publicēti 21 raksti)

J. Seaton ir zinātnes rakstnieks, kas specializējas sarežģītu tēmu sadalīšanā. Viņai ir doktora grāds Saskačevanas Universitātē; viņas pētījums bija vērsts uz spēlēm balstītas mācīšanās izmantošanu, lai palielinātu studentu iesaistīšanos tiešsaistē. Kad viņa nestrādā, jūs atradīsit viņu kopā ar lasīšanu, videospēļu spēlēšanu vai dārzkopību.

Vairāk no Dženiferas Sītones

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu