Pagsisimula Sa Phaser Para sa Pag-unlad ng Laro

Ang Phaser ay isang balangkas para sa paglikha ng mga 2D video game. Gumagamit ito ng HTML5 Canvas upang maipakita ang laro at JavaScript upang mapatakbo ang laro. Ang pakinabang ng paggamit ng Phaser sa paglipas ng vanilla JavaScript ay ang pagkakaroon ng isang malawak na silid-aklatan na nakukumpleto ang karamihan sa pisika ng mga video game na nagpapahintulot sa iyo na ituon ang pansin sa pagdisenyo ng laro mismo.

Binabawasan ng Phaser ang oras ng pag-unlad at pinapagaan ang daloy ng trabaho. Alamin natin kung paano lumikha ng isang pangunahing laro sa Phaser.

Bakit Bumuo Sa Phaser?

Phaser ay katulad sa iba pang mga visual na programa ng wika na ang programa ay batay sa mga looped update. Ang Phaser ay may tatlong pangunahing yugto: paunang-preload, lumikha, at pag-update.

Sa preload, ang mga assets ng laro ay na-upload at ginawang magagamit sa laro.

Lumikha ng pinasimulan ang laro at lahat ng mga panimulang elemento ng laro. Ang bawat isa sa mga pag-andar na ito ay tatakbo nang isang beses kapag ang laro ay nagsimula.

Ang pag-update, sa kabilang banda, ay tumatakbo sa isang loop sa buong laro. Ito ang workhorse na nag-a-update ng mga elemento ng laro upang gawing interactive ito.

I-set up ang Iyong System para sa Pagbubuo ng Mga Laro Sa Phaser

Sa kabila ng pagpapatakbo ng Phaser sa HTML at JavaScript, ang mga laro ay talagang pinapatakbo ng server-side, hindi sa panig ng client. Nangangahulugan ito na kakailanganin mong patakbuhin ang iyong laro ang iyong localhost . Ang pagpapatakbo ng game server-side ay nagbibigay-daan sa iyong laro na mag-access ng mga karagdagang file at assets sa labas ng programa. Nirerekomenda ko gamit ang XAMPP upang mag-set up ng isang localhost kung wala ka pang isang pag-set up.

Ang code sa ibaba ay makakabangon sa iyo. Nagtatakda ito ng isang pangunahing kapaligiran sa laro.

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

Upang tumakbo, mangangailangan ang laro ng PNG na imaheng tinatawag na 'gamePiece' na nai-save sa isang 'img' folder sa iyong localhost. Para sa pagiging simple, ang halimbawang ito ay gumagamit ng isang 60xgame de60px orange square. Ang iyong laro ay dapat magmukhang ganito:

Kung nagkakaroon ka ng isang isyu, gamitin ang debugger ng iyong browser upang malaman kung ano ang mali. Ang pagkawala ng kahit isang solong character ay maaaring maging sanhi ng pagkasira, ngunit sa pangkalahatan, mahuhuli ng iyong debugger ang mga maliit na error.

Pagpapaliwanag sa Ang Setup Code

Sa ngayon, wala namang ginagawa ang laro. Ngunit nasakop na natin ang maraming lupa! Tingnan natin ang code nang mas malalim.

Para tumakbo ang isang laro ng Phaser, kailangan mong i-import ang Phaser library. Ginagawa namin ito sa linya 3. Sa halimbawang ito, nag-link kami sa source code, ngunit maaari mo itong i-download sa iyong localhost at i-refer din ang file.

windows 10 update 100 disk paggamit

Karamihan sa mga code sa ngayon ay nag-configure ng kapaligiran sa laro, na kung saan ang variable config mga tindahan. Sa aming halimbawa, nagse-set up kami ng isang phaser game na may asul (CCFFFF sa hex color code) na background na 600px ng 600px. Sa ngayon, ang laro physics ay naitakda sa Arcadian , ngunit nag-aalok ang Phaser ng iba't ibang pisika.

Sa wakas, eksena Sinasabi sa programa na patakbuhin ang preload pagpapaandar bago magsimula ang laro at ang lumikha pagpapaandar upang simulan ang laro. Ang lahat ng impormasyong ito ay ipinapasa sa object ng laro na tinawag laro .

Kaugnay: Ang 6 Pinakamahusay na Mga laptop para sa Programming at Coding

Ang susunod na seksyon ng code ay kung saan talagang bumubuo ang laro. Ang pagpapaandar na preload ay kung saan mo nais na simulan ang anumang kailangan mo upang patakbuhin ang iyong laro. Sa aming kaso, na-preload na namin ang imahe ng aming piraso ng laro. Ang unang parameter ng .image pinangalanan ang aming imahe at ang pangalawa ay nagsasabi sa programa kung saan hahanapin ang imahe.

Ang imahe ng gamePiece ay naidagdag sa laro sa function na lumikha. Sinasabi ng Line 29 na nagdaragdag kami ng larong gamePiece bilang isang sprite na 270px pakaliwa at 450px pababa mula sa kaliwang sulok sa itaas ng aming lugar ng laro.

Paggalaw ng aming Game Piece

Sa ngayon, ito ay mahirap tawaging isang laro. Para sa isang bagay, hindi namin maaaring ilipat ang aming piraso ng laro. Upang mapalitan ang mga bagay sa aming laro, magdagdag kami ng isang pagpapaandar sa pag-update. Kailangan din naming ayusin ang eksena sa variable ng config upang sabihin sa laro kung aling pagpapaandar ang tatakbo kapag na-update namin ang laro.

Pagdaragdag ng Isang Pag-andar ng Pag-update

Bagong eksena sa config:

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

Susunod, magdagdag ng isang pag-andar sa pag-update sa ibaba ng function na lumikha:

kung paano mag-hack pagkatapos ng app ng paaralan

function update(){  
}

Pagkuha ng Mga Key Input

Upang hayaang kontrolin ng manlalaro ang piraso ng laro gamit ang mga arrow key, magkakaroon kami upang magdagdag ng isang variable upang subaybayan kung aling mga key ang pinindot ng manlalaro. Ipahayag ang isang variable na tinatawag na keyInputs sa ibaba kung saan namin idineklara ang mga GamePieces. Ang pagdedeklara rito ay hahayaan ang lahat ng mga pagpapaandar na ma-access ang bagong variable.

var gamePiece;  
var keyInputs;

Ang variable ng keyInput ay dapat na mapasimuno kapag ang laro ay nilikha sa function na lumikha.

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

Ngayon sa pagpapa-andar ng pag-update, maaari nating suriin kung ang manlalaro ay pinindot ang isang arrow key, at kung ang mga ito, ilipat ang naaangkop sa aming laro. Sa halimbawa sa ibaba, ang piraso ng laro ay inilipat ng 2px, ngunit maaari mo itong gawing mas malaki o mas maliit na bilang. Ang paglipat ng piraso ng 1px nang paisa-isang tila medyo mabagal.

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

Ang laro ay may isang ilipat ang character ngayon! Ngunit upang tunay na maging isang laro, kailangan natin ng isang layunin. Magdagdag tayo ng ilang mga hadlang. Ang pag-dode ng mga hadlang ay ang batayan para sa maraming mga laro sa 8-bit na panahon.

Pagdaragdag ng mga hadlang sa Laro

Ang halimbawa ng code na ito ay gumagamit ng dalawang mga balakid na sprite na tinatawag na balakid1 at balakid 2. ang balakid1 ay isang asul na parisukat at ang balakid2 ay berde. Ang bawat imahe ay kailangang ma-preloaded tulad ng 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');  
}

Pagkatapos ang bawat balakid na sprite ay kailangang mapasimuno sa pag-andar ng paglikha, tulad ng gamepiece.

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

Paggalaw ng Mga Hadlang

Upang ilipat ang mga piraso sa oras na ito, hindi namin nais na gamitin ang input ng player. Sa halip, magkaroon tayo ng isang piraso ng paglipat mula sa itaas hanggang sa ibaba at ang iba pang paglipat sa kaliwa patungo sa kanan. Upang magawa iyon, idagdag ang sumusunod na code sa pagpapaandar sa pag-update:

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

Ang code sa itaas ay lilipat ng sagabal1 pababa sa screen at balakid2 sa buong lugar ng laro na 4px bawat frame. Kapag ang isang parisukat ay wala sa screen, inililipat ito pabalik sa kabaligtaran sa isang bagong random na lugar. Titiyakin nito na palaging may isang bagong balakid para sa manlalaro.

Pagtuklas ng mga banggaan

Ngunit hindi pa tayo tapos pa. Maaaring napansin mo na ang aming manlalaro ay maaaring dumaan mismo sa mga hadlang. Kailangan nating kilalanin ang laro kapag tumama ang manlalaro ng isang balakid at wakasan ang laro.

Ang Phaser physics library ay mayroong isang collider detector. Ang kailangan lang nating gawin ay ipasimula ito sa function na lumikha.

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

Ang pamamaraan ng collider ay nangangailangan ng tatlong mga parameter. Ang unang dalawang mga parameter ay kinikilala kung aling mga bagay ang nakabangga. Kaya sa itaas, mayroon kaming dalawang mga collider na naka-set up. Ang una ay nakita kapag ang gamepiece ay nakabangga ng hadlang1 at ang pangalawang collider ay naghahanap ng mga banggaan sa pagitan ng gamepiece at balakid2.

Sinasabi ng pangatlong parameter sa collider kung ano ang gagawin kapag nakakita ito ng banggaan. Sa halimbawang ito, mayroong isang pagpapaandar. Kung may isang banggaan, ang lahat ng mga elemento ng laro ay nawasak; ititigil nito ang laro. Ngayon ay maglalaro ang manlalaro kung maabot nila ang isang balakid.

Bigyan ang Pag-unlad ng Laro isang Subukan Sa Phaser

Mayroong maraming iba't ibang mga paraan na ang laro na ito ay maaaring mapabuti at gawing mas kumplikado. Lumikha lamang kami ng isang manlalaro, ngunit ang pangalawang mapaglarawang character ay maaaring maidagdag at makontrol gamit ang mga kontrol na 'awsd'. Katulad nito, maaari kang mag-eksperimento sa pagdaragdag ng maraming mga hadlang at pag-iba-iba ang bilis ng kanilang paggalaw.

mali ang oras sa aking computer

Magsisimula ka sa pagpapakilala na ito, ngunit maraming natitira pa upang malaman. Ang mahusay na bagay tungkol sa Phaser ay ang maraming mga physics ng laro ay tapos na para sa iyo. Ito ay isang mahusay na madaling paraan upang makapagsimula sa pagdidisenyo ng mga laro ng 2D. Patuloy na bumuo sa code na ito at pinuhin ang iyong laro.

Kung nagkakaroon ka ng anumang mga error, ang iyong browser debugger ay isang mahusay na paraan upang matuklasan ang isyu.

Magbahagi Magbahagi Mag-tweet Email Paano Gumamit ng Mga Chrome DevTools upang Mag-troubleshoot ng Mga Isyu sa Website

Alamin kung paano gamitin ang mga built-in na tool sa pag-unlad ng Chrome browser upang mapabuti ang iyong mga website.

Basahin Susunod Mga Kaugnay na Paksa

Programming
JavaScript
HTML5
Pag-unlad ng Laro

Tungkol sa May-akda Jennifer Seaton(21 Artikulo Nai-publish)

Si J. Seaton ay isang manunulat ng Agham na dalubhasa sa pagwawasak ng mga kumplikadong paksa. Mayroon siyang PhD mula sa University of Saskatchewan; nakatuon ang kanyang pagsasaliksik sa paggamit ng pag-aaral na batay sa laro upang madagdagan ang pakikipag-ugnayan ng mag-aaral sa online. Kapag hindi siya nagtatrabaho, mahahanap mo siya sa kanyang pagbabasa, paglalaro ng mga video game, o paghahardin.

Higit pa Mula kay Jennifer Seaton

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe