game-engine
Permite ao agente criar jogos e motores de jogo para a web. Ele pode lidar com física, detecção de colisão e renderização 2D/3D.
O que ela faz
Esta ferramenta ajuda você a criar jogos para a web usando tecnologias como HTML5, Canvas e JavaScript. Ela fornece modelos e instruções para construir desde jogos simples 2D até experiências 3D.
Quando usar
- ✓Criar um jogo do zero para jogar no navegador.
- ✓Adicionar física, controles ou som a um jogo existente.
- ✓Desenvolver um motor de jogo para reutilizar em vários projetos.
Exemplo do que pedir para a IA
“Crie um jogo de plataforma 2D simples com controles de teclado.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A ferramenta usa um ciclo contínuo chamado 'game loop' para atualizar o que acontece no jogo (movimento, lógica) e depois desenhar tudo na tela. Ela também ajuda a detectar quando objetos se tocam (colisão) e a responder aos comandos do jogador.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add github/awesome-copilot --skill game-engineOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/game-engine/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Habilidade de Motor de Jogo
Crie jogos e motores de jogo baseados na web usando HTML5 Canvas, WebGL e JavaScript. Esta habilidade inclui modelos iniciais, documentação de referência e fluxos de trabalho passo a passo para desenvolvimento de jogos 2D e 3D com frameworks como Phaser, Three.js, Babylon.js e A-Frame.
Quando Usar Esta Habilidade
- Construir um motor de jogo ou jogo do zero usando tecnologias web
- Implementar loops de jogo, física, detecção de colisão ou renderização
- Trabalhar com HTML5 Canvas, WebGL ou SVG para gráficos de jogos
- Adicionar controles de jogo (teclado, mouse, toque, gamepad)
- Criar jogos de plataforma 2D, jogos estilo breakout, jogos de labirinto ou experiências 3D
- Trabalhar com tilemaps, sprites ou animações
- Adicionar áudio a jogos web
- Implementar recursos multiplayer com WebRTC ou WebSockets
- Otimizar o desempenho do jogo
- Publicar e distribuir jogos web
Pré-requisitos
- Conhecimento básico de HTML, CSS e JavaScript
- Um navegador web moderno com suporte a Canvas/WebGL
- Um editor de texto ou IDE
- Opcional: Node.js para ferramentas de build e servidores de desenvolvimento local
Conceitos Principais
Os seguintes conceitos formam a base de todo motor de jogo baseado na web.
Loop de Jogo
Todo motor de jogo gira em torno do loop de jogo -- um ciclo contínuo de:
- Processar Entrada - Ler entrada do teclado, mouse, toque ou gamepad
- Atualizar Estado - Atualizar posições de objetos do jogo, física, IA e lógica
- Renderizar - Desenhar o estado atual do jogo na tela
Use requestAnimationFrame para renderização suave e otimizada para navegador.
Renderização
- Canvas 2D - Melhor para jogos 2D, renderização baseada em sprites e tilemaps
- WebGL - Renderização 3D e 2D avançada com aceleração de hardware
- SVG - Gráficos baseados em vetores, bom para elementos de UI
- CSS - Útil para elementos de jogo baseados em DOM e transições
Física e Detecção de Colisão
- Detecção de Colisão 2D - Colisão baseada em AABB, círculo e SAT
- Detecção de Colisão 3D - Caixa delimitadora, esfera delimitadora e raycasting
- Velocidade e Aceleração - Física newtoniana básica para movimento
- Gravidade - Aceleração descendente constante para jogos de plataforma
Controles
- Teclado - Teclas de seta, WASD e atalhos de teclado personalizados
- Mouse - Clique, movimento e bloqueio de ponteiro para controles estilo FPS
- Toque - Eventos de toque em dispositivos móveis e joysticks virtuais
- Gamepad - API de Gamepad para suporte a controle
Áudio
- Web Audio API - Geração de som programática e áudio espacial
- HTML5 Audio - Reprodução de áudio simples para música e efeitos sonoros
Fluxos de Trabalho Passo a Passo
Criando um Jogo 2D Básico
- Configure um arquivo HTML com um elemento
<canvas> - Obtenha o contexto de renderização 2D
- Implemente o loop de jogo usando
requestAnimationFrame - Crie objetos de jogo com propriedades de posição, velocidade e tamanho
- Manipule a entrada do teclado/mouse para controle do jogador
- Implemente a detecção de colisão entre objetos do jogo
- Adicione pontuação, vidas e condições de vitória/derrota
- Adicione efeitos sonoros e música
Construindo um Jogo 3D
- Escolha um framework (Three.js, Babylon.js, A-Frame ou PlayCanvas)
- Configure a cena, a câmera e o renderizador
- Carregue ou crie modelos 3D e texturas
- Implemente iluminação e shaders
- Adicione física e detecção de colisão
- Implemente controles do jogador e movimento da câmera
- Adicione áudio e efeitos visuais
Publicando um Jogo
- Otimize os assets (comprima imagens, minifique código)
- Teste em navegadores e dispositivos
- Escolha a plataforma de distribuição (web, lojas de aplicativos, portais de jogos)
- Implemente monetização, se necessário
- Promova através de comunidades de jogos e mídias sociais
Modelos de Jogo
Modelos iniciais estão disponíveis na pasta assets/. Cada modelo fornece um exemplo completo e funcional que pode ser usado como ponto de partida para um novo projeto.
| Modelo | Descrição |
|---|---|
paddle-game-template.md |
Jogo estilo Breakout 2D com JavaScript puro |
2d-maze-game.md |
Jogo de labirinto com controles de orientação do dispositivo |
2d-platform-game.md |
Jogo de plataforma usando o framework Phaser |
gameBase-template-repo.md |
Estrutura de repositório base de jogo |
simple-2d-engine.md |
Motor simples de plataforma 2D com colisões |
Documentação de Referência
Material de referência detalhado está disponível na pasta references/. Consulte estes arquivos para cobertura aprofundada de tópicos específicos.
| Referência | Tópicos Abordados |
|---|---|
basics.md |
Introdução e anatomia do desenvolvimento de jogos |
…
Perguntas frequentes
Preciso saber programar muito para usar isso?
É recomendado ter noções básicas de HTML, CSS e JavaScript, mas a ferramenta oferece guias para ajudar no processo.
Posso fazer jogos 3D?
Sim, a ferramenta suporta desenvolvimento 3D usando tecnologias como WebGL e frameworks como Three.js.
Como os jogadores interagem com o jogo?
Você pode configurar controles para teclado, mouse, tela de toque e até controles de videogame (gamepads).
Detalhes
Descrição original do autor
Expert skill for building web-based game engines and games using HTML5, Canvas, WebGL, and JavaScript. Use when asked to create games, build game engines, implement game physics, handle collision detection, set up game loops, manage sprites, add game controls, or work with 2D/3D rendering. Covers techniques for platformers, breakout-style games, maze games, tilemaps, audio, multiplayer via WebRTC,
repo: github/awesome-copilot
Popularidade
- Estrelas no GitHub
- 40 mil
- Posição no ranking
- #5157
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
acquire-codebase-knowledge
Ajuda seu agente a entender e documentar um projeto de código existente. É útil para novas pessoas entrarem no projeto ou para ter uma visão geral da arquitetura.
github/awesome-copilot
acreadiness-assess
Faz seu agente avaliar a prontidão de um projeto para IA e gerar um relatório. É útil para entender o quão bem um projeto está preparado para usar ferramentas de IA.
github/awesome-copilot
acreadiness-generate-instructions
Ajuda seu agente a criar instruções para ferramentas de IA baseadas em uma avaliação. É útil para melhorar a forma como a IA interage com o código e fecha lacunas identificadas.
github/awesome-copilot
acreadiness-policy
Faz seu agente ajudar a definir ou aplicar políticas para avaliação de projetos de IA. É útil para padronizar a forma como os projetos são avaliados e garantir conformidade.
github/awesome-copilot
Skills parecidas
benchmark-optimization-loop
Faz seu agente melhorar a velocidade de algo de forma medida. Ele testa várias versões e escolhe a mais rápida que ainda funciona corretamente.
affaan-m/ECC
change-impact
Ajuda seu agente a analisar o impacto de mudanças no código antes de fazê-las. Ele compara o planejado com o real depois, cobrindo caminhos, dados, testes e documentação. É útil para mudanças arriscadas ou que afetam várias partes do sistema.
affaan-m/ECC
click-path-audit
Faz seu agente rastrear todos os botões e interações do usuário para achar bugs. Ele encontra problemas onde funções parecem funcionar sozinhas, mas falham juntas. Útil quando bugs persistem mesmo após depuração.
affaan-m/ECC