Template Tela Inicial

Voltar para: Games com Phaser + Reactjs

0

(Menu moderno, animações, botões estilizados e navegação completa)

Um dos elementos que mais diferencia um protótipo de jogo de um jogo com aparência profissional é a interface.

Menus bem construídos transmitem:

  • identidade visual
  • organização
  • polimento do projeto
  • experiência agradável ao jogador

Neste guia criaremos um template reutilizável de UI usando o Phaser.

Esse template inclui:

✔ menu moderno
✔ botões estilizados
✔ animações de interface
✔ efeitos hover
✔ transições entre telas
✔ navegação completa

Esse tipo de estrutura é utilizada em jogos comerciais.

🎯 Objetivo do Template

Criar uma estrutura reutilizável para menus com:

Menu Principal
 ├── Iniciar
 │     └── Seleção de Personagem
 │
 ├── Opções
 │
 └── Créditos

Com:

  • animações suaves
  • botões modernos
  • código organizado

📂 Estrutura Profissional do Projeto

Estrutura recomendada:

src
 ├── main.js
 ├── scenes
 │   ├── BootScene.js
 │   ├── MenuScene.js
 │   ├── CharacterSelectScene.js
 │   ├── OptionsScene.js
 │   └── CreditsScene.js
 │
 ├── ui
 │   └── UIButton.js
 │
 └── assets
     ├── ui
     ├── audio
     └── images

Criamos uma pasta ui para componentes reutilizáveis.

🧩 Criando um Botão Profissional Reutilizável

Botões reutilizáveis evitam repetir código.

📄 src/ui/UIButton.js

export default class UIButton {  constructor(scene, x, y, text, callback) {    this.scene = scene;    this.button = scene.add.text(x, y, text, {      fontSize: "32px",
      fontFamily: "Arial",
      backgroundColor: "#222",
      color: "#ffffff",
      padding: { x: 20, y: 10 }    })
    .setOrigin(0.5)
    .setInteractive({ useHandCursor: true });    // Hover
    this.button.on("pointerover", () => {      this.button.setStyle({ backgroundColor: "#555" });      scene.tweens.add({
        targets: this.button,
        scale: 1.1,
        duration: 120
      });    });    // Hover saída
    this.button.on("pointerout", () => {      this.button.setStyle({ backgroundColor: "#222" });      scene.tweens.add({
        targets: this.button,
        scale: 1,
        duration: 120
      });    });    // Clique
    this.button.on("pointerdown", () => {      scene.tweens.add({
        targets: this.button,
        scale: 0.95,
        duration: 60,
        yoyo: true
      });      callback();    });  }}

Esse botão já possui:

✔ hover
✔ animação
✔ clique
✔ reutilização

🎮 Criando o Menu Principal Moderno

📄 MenuScene.js

import UIButton from "../ui/UIButton.js";export default class MenuScene extends Phaser.Scene {  constructor() {
    super("MenuScene");
  }  create() {    const { width, height } = this.cameras.main;    // Fundo
    this.add.rectangle(width/2, height/2, width, height, 0x101820);    // Título
    const title = this.add.text(width/2, 120, "MEU JOGO", {      fontSize: "64px",
      fontFamily: "Arial",
      color: "#ffffff"    }).setOrigin(0.5);    // Animação do título
    this.tweens.add({
      targets: title,
      scale: 1.05,
      duration: 1200,
      yoyo: true,
      repeat: -1
    });    // Botões
    new UIButton(this, width/2, 280, "Iniciar", () => {      this.scene.start("CharacterSelectScene");    });    new UIButton(this, width/2, 360, "Opções", () => {      this.scene.start("OptionsScene");    });    new UIButton(this, width/2, 440, "Créditos", () => {      this.scene.start("CreditsScene");    });  }}

Agora o menu possui animação e botões modernos.

🎬 Adicionando Transição Entre Cenas

Transições deixam a navegação mais profissional.

Exemplo:

this.cameras.main.fadeOut(300);this.time.delayedCall(300, () => {  this.scene.start("CharacterSelectScene");});

Isso cria um fade suave entre telas.

🧙 Tela de Seleção de Personagem Moderna

📄 CharacterSelectScene.js

import UIButton from "../ui/UIButton.js";export default class CharacterSelectScene extends Phaser.Scene {  constructor() {
    super("CharacterSelectScene");
  }  create() {    const { width } = this.cameras.main;    this.add.text(width/2, 100, "Escolha seu Personagem", {      fontSize: "40px",
      color: "#ffffff"    }).setOrigin(0.5);    new UIButton(this, width/2, 250, "Guerreiro", () => {      console.log("Selecionado Guerreiro");    });    new UIButton(this, width/2, 330, "Mago", () => {      console.log("Selecionado Mago");    });    new UIButton(this, width/2, 500, "Voltar", () => {      this.scene.start("MenuScene");    });  }}

⚙️ Tela de Opções Moderna

Opções comuns em jogos incluem:

  • volume música
  • volume efeitos
  • tela cheia
  • idioma

📄 OptionsScene.js

import UIButton from "../ui/UIButton.js";export default class OptionsScene extends Phaser.Scene {  constructor() {
    super("OptionsScene");
  }  create() {    const { width } = this.cameras.main;    this.add.text(width/2, 100, "Opções", {      fontSize: "48px",
      color: "#ffffff"    }).setOrigin(0.5);    this.add.text(width/2, 200, "Volume Música: 80%", { fontSize: "26px" }).setOrigin(0.5);
    this.add.text(width/2, 250, "Volume Efeitos: 70%", { fontSize: "26px" }).setOrigin(0.5);
    this.add.text(width/2, 300, "Tela Cheia: OFF", { fontSize: "26px" }).setOrigin(0.5);    new UIButton(this, width/2, 450, "Voltar", () => {      this.scene.start("MenuScene");    });  }}

🎬 Tela de Créditos com Estilo Profissional

📄 CreditsScene.js

import UIButton from "../ui/UIButton.js";export default class CreditsScene extends Phaser.Scene {  constructor() {
    super("CreditsScene");
  }  create() {    const { width } = this.cameras.main;    this.add.text(width/2, 80, "Créditos", {      fontSize: "48px"    }).setOrigin(0.5);    const credits = [      "Direção",
      "Nome do Diretor",      "",      "Programação",
      "Nome do Programador",      "",      "Arte",
      "Nome do Artista",      "",      "Música",
      "Nome do Compositor"    ];    let y = 180;    credits.forEach(text => {      this.add.text(width/2, y, text, {
        fontSize: "26px"
      }).setOrigin(0.5);      y += 40;    });    new UIButton(this, width/2, 520, "Voltar", () => {      this.scene.start("MenuScene");    });  }}

🎨 Melhorias Visuais Profissionais

Algumas melhorias que elevam muito o nível visual.

✔ Sons de interface

Som ao clicar em botões.

✔ Partículas no menu

Criar fundo animado.

✔ Animação de título

Flutuação ou brilho.

✔ Efeito glow nos botões

Destaca interação.

🎮 Fluxo Final da Interface

Boot
 ↓
Menu Principal
 ├── Iniciar → Seleção de Personagem
 ├── Opções
 └── Créditos

Tudo com animações e UI reutilizável.

🧠 Conceitos Profissionais Aplicados

Esse template usa vários conceitos importantes:

  • Scenes
  • UI Componentizada
  • Tween Animations
  • Input interativo
  • Navegação entre telas
  • Reutilização de componentes

Essas práticas são usadas em projetos reais.

🎓 Desafio Avançado (Recomendado)

Transformar esse menu em um menu de nível comercial.

Adicionar:

  • música no menu
  • animação de background
  • seleção visual de personagem
  • sistema real de volume
  • suporte a gamepad