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

  1. 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.
  2. 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.
  3. 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.
  4. Correcció d’errors (debugging)
    • Utilitza eines de depuració per trobar i corregir bugs.
    • Prova totes les funcionalitats i escenes del joc.
  5. 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ó.
  6. Optimització
    • Revisa el rendiment del joc en diferents dispositius i navegadors.
    • Redueix la mida d’imatges i àudios si cal.
  7. 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 -
HUD de puntuació No Augmentar mida de la font
Text d’instrucció 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

Mòdul 2: Fonaments de Phaser

Mòdul 3: Sprites i animació

Mòdul 4: Física i interactivitat en el joc

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

Mòdul 9: Desplegament i optimització

Mòdul 10: Projecte final

© Copyright 2024. Tots els drets reservats