Home-theater-designers
Phaser és un marc per crear videojocs 2D. Utilitza HTML5 Canvas per mostrar el joc i JavaScript per executar-lo. L’avantatge d’utilitzar Phaser sobre JavaScript de vainilla és que té una extensa biblioteca que completa gran part de la física dels videojocs, cosa que us permet concentrar-vos en el disseny del joc.
Phaser redueix el temps de desenvolupament i facilita el flux de treball. Aprenem a crear un joc bàsic amb Phaser.
Per què desenvolupar-se amb Phaser?
Phaser és similar a altres llenguatges de programació visual ja que el programa es basa en actualitzacions en bucle. Phaser té tres etapes principals: precarregar, crear i actualitzar.
En la precàrrega, els recursos del joc es carreguen i es posen a disposició del joc.
Crea inicialitza el joc i tots els elements inicials del joc. Cadascuna d'aquestes funcions s'executa una vegada quan s'inicia el joc.
Actualització, en canvi, s’executa en bucle durant tot el joc. És el cavall de batalla que actualitza els elements del joc per fer-lo interactiu.
Configureu el vostre sistema per desenvolupar jocs amb Phaser
Tot i que Phaser s'executa en HTML i JavaScript, els jocs s'executen en realitat del costat del servidor, no del client. Això vol dir que haureu d'executar el vostre joc el vostre localhost . L'execució del joc al costat del servidor permet que el joc accedeixi a fitxers i recursos addicionals fora del programa. Recomano mitjançant XAMPP per configurar un host local si encara no teniu cap configuració.
El codi següent us farà funcionar. Estableix un entorn bàsic de joc.
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');
}
Per executar-se, el joc requerirà una imatge PNG anomenada 'gamePiece' desada a una carpeta 'img' del vostre host local. Per simplificar, aquest exemple utilitza un quadrat taronja de 60xgames de60px. El vostre joc hauria de ser així:
Si teniu un problema, utilitzeu el depurador del navegador per esbrinar què ha fallat. Faltar fins i tot un sol personatge pot causar estralls, però en general, el vostre depurador detectarà aquests petits errors.
Explicació del codi de configuració
Fins ara, el joc no fa res. Però ja hem cobert molt terreny! Vegem el codi amb més profunditat.
Perquè s’executi un joc de Phaser, heu d’importar la biblioteca de Phaser. Ho fem a la línia 3. En aquest exemple, hem enllaçat amb el codi font, però podeu descarregar-lo al vostre localhost i fer referència també al fitxer.
necessito Adobe Acrobat Reader DC
Gran part del codi fins ara configura l'entorn del joc, que és la variable config botigues. En el nostre exemple, estem configurant un joc phaser amb un fons blau (CCFFFF en codi de color hexadecimal) de 600 px per 600 px. De moment, la física del joc s'ha definit arcade , però Phaser ofereix una física diferent.
Finalment, escena indica al programa que executi el fitxer precàrrega funció abans que comenci el joc i el crear funció per iniciar el joc. Tota aquesta informació es transmet a l'objecte de joc anomenat joc .
Relacionat: Els 6 millors ordinadors portàtils per a programació i codificació
La següent secció de codi és on el joc pren forma realment. La funció de precàrrega és on voleu inicialitzar tot el que necessiteu per executar el joc. En el nostre cas, hem precarregat la imatge del nostre joc. El primer paràmetre de .imatge posa nom a la nostra imatge i el segon indica al programa on trobar la imatge.
La imatge gamePiece es va afegir al joc a la funció de creació. La línia 29 diu que afegirem la imatge gamePiece com a sprite de 270 px a l’esquerra i 450 px cap avall des de l’angle superior esquerre de la nostra àrea de joc.
Fer que la nostra peça de joc es mogui
Fins ara, això difícilment es pot anomenar un joc. Per una banda, no podem moure la nostra peça de joc. Per poder canviar les coses del nostre joc, haurem d’afegir una funció d’actualització. També haurem d’ajustar l’escena a la variable de configuració per dir al joc quina funció s’ha d’executar quan actualitzem el joc.
Afegir una funció d'actualització
Nova escena a la configuració:
scene: {
preload: preload,
create: create,
update: update
}A continuació, afegiu una funció d'actualització a sota de la funció de creació:
podeu protegir amb contrasenya una unitat flash
function update(){
}Obtenció d’entrada clau
Per deixar que el jugador controli la peça del joc amb les tecles de fletxa, haurem d’afegir una variable per rastrejar quines tecles està pressionant el jugador. Declareu una variable anomenada keyInputs a continuació on hem declarat gamePieces. Si ho declareu, totes les funcions podran accedir a la nova variable.
var gamePiece;
var keyInputs;La variable keyInput s'ha d'inicialitzar quan es crea el joc a la funció de creació.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}Ara, a la funció d'actualització, podem comprovar si el jugador prem una tecla de fletxa i, si ho són, moure la nostra peça de joc en conseqüència. A l'exemple següent, la peça del joc es mou 2 px, però podeu fer que sigui un nombre més gran o més petit. Moure la peça 1 px cada vegada semblava una mica lent.
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;
}
}Ara el joc té un caràcter mòbil. Però, per ser realment un joc, necessitem un objectiu. Afegim alguns obstacles. Esquivar els obstacles va ser la base per a molts jocs de l'era dels 8 bits.
Afegint obstacles al joc
Aquest exemple de codi utilitza dos sprites d'obstacles anomenats obstacle1 i obstacle 2. obstacle1 és un quadrat blau i obstacle2 és verd. Cal que cada imatge es precarregui igual que el joc sprite.
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}Llavors, cada sprite d'obstacles haurà d'inicialitzar-se a la funció de creació, igual que la peça de joc.
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');
}Fer moure els obstacles
Per moure les peces aquesta vegada, no volem fer servir l'entrada del reproductor. En lloc d’això, fem que una peça es mogui de dalt a baix i l’altra, d’esquerra a dreta. Per fer-ho, afegiu el codi següent a la funció d'actualització:
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);
}El codi anterior mourà obstacle1 per la pantalla i obstacle2 a través de l'àrea de joc 4 px cada fotograma. Un cop un quadrat està fora de la pantalla, es torna a moure cap al costat oposat en un nou punt aleatori. Això assegurarà que sempre hi hagi un nou obstacle per al jugador.
Detecció de col·lisions
Però encara no hem acabat. És possible que us hàgiu adonat que el nostre jugador pot passar pels obstacles. Hem de fer que el joc es detecti quan el jugador toca un obstacle i finalitza el joc.
La biblioteca de física Phaser té un detector de col·lisionadors. Tot el que hem de fer és inicialitzar-lo a la funció de creació.
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();
});El mètode col·lisionador requereix tres paràmetres. Els dos primers paràmetres identifiquen quins objectes xoquen. Per tant, a dalt, tenim dos col·lisionadors configurats. El primer detecta quan la peça de joc xoca amb l’obstacle1 i la segona col·lisionista busca col·lisions entre la peça de joc i l’obstacle2.
El tercer paràmetre indica al col·lisionador què ha de fer un cop detecta una col·lisió. En aquest exemple, hi ha una funció. Si hi ha una col·lisió, es destrueixen tots els elements del joc; això atura el joc. Ara el jugador canviarà de joc si toca un obstacle.
Proveu el desenvolupament de jocs amb Phaser
Hi ha moltes maneres diferents de millorar aquest joc i fer-lo més complex. Només hem creat un jugador, però es podria afegir i controlar un segon personatge jugable amb els controls 'awsd'. De la mateixa manera, podeu experimentar afegint més obstacles i variant la velocitat del seu moviment.
com jugar a jocs n64 a la wii
Aquesta introducció us permetrà començar, però en queda molt per aprendre. El millor de Phaser és que una gran part de la física del joc està feta per a vosaltres. És una manera molt senzilla de començar a dissenyar jocs 2D. Continueu basant-vos en aquest codi i perfeccioneu el vostre joc.
Si teniu algun error, el depurador del navegador és una bona manera de descobrir el problema.
Compartir Compartir Tweet Correu electrònic Com s'utilitza Chrome DevTools per resoldre problemes de llocs webObteniu informació sobre com utilitzar les eines de desenvolupament integrades del navegador Chrome per millorar els vostres llocs web.
Llegiu a continuació Temes relacionats- Programació
- JavaScript
- HTML5
- Desenvolupament de jocs
J. Seaton és un escriptor científic especialitzat en la descomposició de temes complexos. És doctora per la Universitat de Saskatchewan; la seva investigació es va centrar a utilitzar l'aprenentatge basat en jocs per augmentar la implicació dels estudiants en línia. Quan no treballa, la trobareu amb ella llegint, jugant a videojocs o fent jardineria.
Més de Jennifer SeatonSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us