chongdashu/phaser-gamedev

O que phaser-gamedev faz?

Crie jogos 2D com o framework Phaser 3. Abrange ciclo de vida de cenas, sprites, física (Arcade/Matter), tilemaps, animações, manipulação de entrada e arquitetura de jogo. Gatilho: "create phaser game", "add phaser scene", "phaser sprite", "phaser physics", "game development with phaser".

Visão Geral

Esta skill oferece suporte abrangente para desenvolvimento de jogos 2D utilizando Phaser 3, um dos frameworks mais populares para criação de jogos em HTML5. Ela cobre todos os tópicos essenciais para construir jogos completos e interativos.

Tópicos Abrangidos

• Ciclo de Vida de Cenas: Criação, carregamento, atualização e transição entre cenas.
• Sprites: Criação, manipulação e otimização de sprites.
• Física (Arcade/Matter): Implementação de física simples (Arcade) ou avançada (Matter).
• Tilemaps: Construção de níveis com tilemaps.
• Animações: Criação e gerenciamento de animações a partir de spritesheets.
• Manipulação de Entrada: Captura de eventos de teclado, mouse e toque.
• Arquitetura de Jogo: Organização de código e melhores práticas.

Como Usar

Para acionar esta skill, utilize um dos seguintes comandos:

• create phaser game - Inicia um novo projeto de jogo Phaser 3.
• add phaser scene - Adiciona uma nova cena ao projeto.
• phaser sprite - Cria e configura um sprite.
• phaser physics - Adiciona física a um objeto.
• game development with phaser - Inicia uma sessão geral de desenvolvimento.

Exemplos de Código

// Configuração básica do jogo
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: [MainScene]
};

const game = new Phaser.Game(config);

class MainScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MainScene' });
    }

    preload() {
        this.load.image('sky', 'assets/sky.png');
        this.load.image('ground', 'assets/platform.png');
        this.load.image('star', 'assets/star.png');
        this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
    }

    create() {
        this.add.image(400, 300, 'sky');

        // Plataformas
        const platforms = this.physics.add.staticGroup();
        platforms.create(400, 568, 'ground').setScale(2).refreshBody();
        platforms.create(600, 400, 'ground');
        platforms.create(50, 250, 'ground');

        // Jogador
        const player = this.physics.add.sprite(100, 450, 'dude');
        player.setBounce(0.2);
        player.setCollideWorldBounds(true);

        this.physics.add.collider(player, platforms);
    }

    update() {
        // Lógica de atualização
    }
}

Adicionando Física Matter

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'matter',
        matter: {
            gravity: { y: 1 },
            debug: true
        }
    },
    scene: [MatterScene]
};

class MatterScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MatterScene' });
    }

    create() {
        this.matter.add.image(400, 300, 'logo');
    }
}

Recursos

• Documentação Oficial do Phaser 3
• Exemplos Interativos
• Fórum da Comunidade

Licença

Esta skill é fornecida sob a licença MIT. Consulte o repositório original para mais detalhes.

---

Desenvolvido por chongdashu. Contribuições são bem-vindas!