En aquesta secció aprendràs com portar el teu joc de Phaser a un nivell professional, millorant-ne la presentació, corregint errors i assegurant-te que l’experiència de l’usuari sigui òptima abans de publicar-lo. Polir i finalitzar és una etapa clau per garantir que el teu joc sigui atractiu, jugable i estable.
Conceptes clau
- Polir: Millorar detalls visuals, sonors i d’interacció per fer el joc més atractiu i agradable.
- Finalitzar: Assegurar que el joc està lliure d’errors crítics, que totes les funcionalitats funcionen correctament i que l’experiència de joc és fluida.
- Test d’usuari: Provar el joc amb usuaris reals per detectar problemes i obtenir feedback.
- Optimització: Millorar el rendiment i la compatibilitat del joc.
Passos per polir i finalitzar el teu joc
- Revisió visual i d’animacions
- Ajusta sprites, fons i efectes visuals perquè siguin coherents i atractius.
- Assegura’t que les animacions siguin suaus i no tinguin errors de frames.
- Millora de l’àudio
- Revisa volums, bucles i sincronització de sons i música.
- Afegeix efectes de so on sigui necessari per reforçar accions importants.
- Interfície d’usuari (UI)
- Comprova que els menús, botons i HUD siguin clars i fàcils d’utilitzar.
- Assegura’t que els textos siguin llegibles i estiguin ben posicionats.
- Correcció d’errors (debugging)
- Utilitza eines de depuració per trobar i corregir bugs.
- Prova totes les funcionalitats i escenes del joc.
- Test d’usuari
- Demana a altres persones que provin el joc i recull el seu feedback.
- Observa si hi ha punts de frustració o confusió.
- Optimització
- Revisa el rendiment del joc en diferents dispositius i navegadors.
- Redueix la mida d’imatges i àudios si cal.
- Preparació per a la publicació
- Assegura’t que el joc té una pantalla de títol, crèdits i instruccions.
- Inclou una icona i una descripció atractiva per a la publicació.
Taula de comprovació de poliment
| Àrea | Què revisar? | Comprovat? |
|---|---|---|
| Gràfics | Qualitat, coherència, resolució | [ ] |
| Animacions | Suavitat, sincronització | [ ] |
| Sons i música | Volum, qualitat, sincronització | [ ] |
| UI | Llegibilitat, accessibilitat, facilitat d’ús | [ ] |
| Bugs | Absència d’errors i bloquejos | [ ] |
| Rendiment | Fluïdesa, temps de càrrega, ús de memòria | [ ] |
| Compatibilitat | Funcionament en diferents dispositius/navegadors | [ ] |
| Instruccions/crèdits | Presentació clara d’instruccions i autors | [ ] |
Exemple pràctic: Polir una escena de victòria
Suposem que vols millorar l’escena de victòria del teu joc. Pots afegir una animació, un efecte de so i un botó per tornar al menú principal.
class WinScene extends Phaser.Scene {
constructor() {
super({ key: 'WinScene' });
}
create() {
// Fons animat
this.add.rectangle(400, 300, 800, 600, 0x000000, 0.7);
// Text de victòria amb animació
const winText = this.add.text(400, 200, 'Has guanyat!', {
fontSize: '48px',
color: '#FFD700'
}).setOrigin(0.5);
this.tweens.add({
targets: winText,
scale: { from: 0.5, to: 1.2 },
yoyo: true,
repeat: -1,
duration: 800
});
// Efecte de so de victòria
this.sound.play('winSound');
// Botó per tornar al menú
const menuButton = this.add.text(400, 400, 'Torna al menú', {
fontSize: '32px',
backgroundColor: '#222',
color: '#FFF',
padding: { x: 20, y: 10 }
}).setOrigin(0.5).setInteractive();
menuButton.on('pointerdown', () => {
this.scene.start('MenuScene');
});
}
}Explicació:
- Es crea un fons semitransparent per destacar el missatge.
- El text de victòria té una animació de zoom per fer-lo més atractiu.
- Es reprodueix un so de victòria.
- S’afegeix un botó interactiu per tornar al menú principal.
Exercicis pràctics
Exercici 1: Millora la pantalla de Game Over
Enunciat:
Afegeix una animació al text de “Game Over”, un efecte de so i un botó per reiniciar la partida.
Solució:
class GameOverScene extends Phaser.Scene {
constructor() {
super({ key: 'GameOverScene' });
}
create() {
// Fons
this.add.rectangle(400, 300, 800, 600, 0x000000, 0.7);
// Text animat
const gameOverText = this.add.text(400, 200, 'Game Over', {
fontSize: '48px',
color: '#FF0000'
}).setOrigin(0.5);
this.tweens.add({
targets: gameOverText,
alpha: { from: 0, to: 1 },
yoyo: true,
repeat: -1,
duration: 1000
});
// So de Game Over
this.sound.play('gameOverSound');
// Botó per reiniciar
const restartButton = this.add.text(400, 400, 'Reinicia', {
fontSize: '32px',
backgroundColor: '#222',
color: '#FFF',
padding: { x: 20, y: 10 }
}).setOrigin(0.5).setInteractive();
restartButton.on('pointerdown', () => {
this.scene.start('GameScene');
});
}
}Consell:
Assegura’t que els sons no es solapin si l’usuari prem el botó diverses vegades. Pots desactivar el botó després de la primera pulsació.
Exercici 2: Revisió de la interfície d’usuari
Enunciat:
Fes una llista de tots els elements d’interfície del teu joc (botons, textos, HUD, etc.) i revisa si són clars, llegibles i accessibles. Fes una taula com la següent i marca els punts a millorar.
| Element | És clar? | És llegible? | Millores necessàries |
|---|---|---|---|
| Botó de reinici | Sí | Sí | - |
| HUD de puntuació | No | Sí | Augmentar mida de la font |
| Text d’instrucció | Sí | No | Canviar color per contrast |
Solució:
Completa la taula amb els teus propis elements i implementa les millores detectades.
Errors comuns i consells
- No provar en diferents dispositius: El joc pot funcionar bé al teu ordinador però tenir problemes en mòbils o altres navegadors.
- Ignorar el feedback dels usuaris: El feedback extern és clau per detectar problemes que tu no veus.
- No optimitzar recursos: Imatges o sons massa grans poden alentir el joc.
- Oblidar instruccions clares: Els jugadors han de saber què fer en tot moment.
Consell addicional:
Fes servir eines com Lighthouse per analitzar el rendiment i l’accessibilitat del teu joc web.
Resum
En aquesta secció has après com polir i finalitzar el teu joc amb Phaser, millorant-ne l’aspecte visual, l’àudio, la interfície i el rendiment. També has vist la importància de provar el joc amb usuaris reals i d’optimitzar-lo per a diferents dispositius. Ara el teu joc està preparat per ser presentat i publicat amb confiança!
Pròxim pas:
A la següent secció aprendràs com presentar i mostrar el teu joc al món.
Phaser - Desenvolupament de jocs amb JavaScript
Mòdul 1: Introducció al desenvolupament de jocs i Phaser
- Què és el desenvolupament de jocs?
- Visió general de Phaser
- Configuració del teu entorn de desenvolupament
- El teu primer projecte amb Phaser
Mòdul 2: Fonaments de Phaser
- Entendre el bucle del joc
- Configuració del joc i escenes
- Carregar i mostrar imatges
- Treballar amb text
- Gestió d’entrada (teclat i ratolí)
Mòdul 3: Sprites i animació
- Què són els sprites?
- Afegir i moure sprites
- Fonaments de l’animació de sprites
- Grups de sprites i gestió
Mòdul 4: Física i interactivitat en el joc
- Introducció a la física a Phaser
- Activar la física en els sprites
- Col·lisions i superposicions
- Objectes interactius i esdeveniments
Mòdul 5: Món del joc i càmera
Mòdul 6: Àudio i interfície d’usuari
Mòdul 7: Arquitectura del joc i gestió d’estats
Mòdul 8: Funcionalitats avançades de joc
- Efectes de partícules
- Tweens i animacions
- Timers i esdeveniments retardats
- IA i comportament dels enemics