Primeros pasos

Nota: La sección Tutorial te guía paso a paso para construir un juego desde cero. El Manual es una referencia: cada página explica una parte clave del motor, con ejemplos. Si eres nuevo en Angry Pixel, empieza por el Tutorial; usa el Manual para consultar.

Requisitos previos:

Familiaridad con la terminal / línea de comandos.

Familiaridad con JavaScript o TypeScript.

Node.js en su versión 20 o superior instalado.

Instalación

Hay tres formas de iniciar un proyecto: generar un nuevo proyecto a partir de la plantilla oficial (skeleton), instalar el motor manualmente en tu propio proyecto, o cargar las compilaciones directamente desde el CDN.

Plantilla oficial (skeleton)

El skeleton oficial proporciona una estructura de proyecto preconfigurada y lista para usar. Es un monorepo (workspaces de npm) donde el juego vive en una única base de código y desde ahí se compila para web, escritorio y móvil. Incluye comandos integrados para exportar a cada plataforma; por ejemplo npm run build (web), npm run build:desktop (escritorio mediante Electron) y npm run build:android (Android). Consulta el README.md del skeleton para la lista completa de comandos y más detalles.

Genera un nuevo proyecto a partir de él e instala sus dependencias:

npx degit angry-pixel-studio/angry-pixel-skeleton my-game
cd my-game
npm install

Instalación manual

Recomendada para proyectos existentes, o para desarrolladores con experiencia que quieran configurar su propio proyecto desde cero. Instala el motor desde npm:

npm install angry-pixel

El motor incluye sus propias definiciones de tipos, por lo que no se necesitan paquetes adicionales para TypeScript.

Nota: Recomendamos configurar tu proyecto con un empaquetador como Vite, que proporciona un servidor de desarrollo con recarga en caliente y una compilación de producción.

Usar el motor desde el CDN

Las compilaciones del motor también se publican en https://cdn.angrypixel.gg/engine/, por lo que pueden cargarse directamente en el navegador sin instalar nada ni configurar un proceso de compilación.

Cada release se publica bajo su número de versión, y latest apunta a la última versión estable:

https://cdn.angrypixel.gg/engine/latest/index.js
https://cdn.angrypixel.gg/engine/2.3.5/index.js

Archivo	Formato	Se carga con
`index.js`	UMD	`<script src="...">`
`index.esm.js`	Módulo ES	`<script type="module">`

Nota: Fija una versión específica en todo lo que publiques. El contenido de latest cambia con cada release.

Script clásico

La compilación UMD expone el motor como la variable global angry-pixel. Como el nombre contiene un guion, se accede a ella con notación de corchetes:

<div id="app"></div>

<script src="https://cdn.angrypixel.gg/engine/latest/index.js"></script>
<script>
    const { Game, Scene, Transform, Camera, MaskRenderer, MaskShape } = window["angry-pixel"];

    class MainScene extends Scene {
        createEntities() {
            // cámara
            this.entityManager.createEntity([new Transform(), new Camera()]);

            // un cuadrado en el centro de la pantalla
            this.entityManager.createEntity([
                new Transform(),
                new MaskRenderer({
                    shape: MaskShape.Rectangle,
                    width: 128,
                    height: 128,
                    color: "#D9008F",
                }),
            ]);
        }
    }

    const game = new Game({
        containerNode: document.getElementById("app"),
        width: 800,
        height: 600,
        canvasColor: "#00D9D9",
    });

    game.addScene(MainScene, "MainScene", true);
    game.start();
</script>

Módulo ES

La compilación ESM se importa por URL dentro de un script de tipo módulo. No se crea ninguna variable global:

<div id="app"></div>

<script type="module">
    import { Game, Scene, Transform, Camera, MaskRenderer, MaskShape } from "https://cdn.angrypixel.gg/engine/latest/index.esm.js";

    class MainScene extends Scene {
        createEntities() {
            // cámara
            this.entityManager.createEntity([new Transform(), new Camera()]);

            // un cuadrado en el centro de la pantalla
            this.entityManager.createEntity([
                new Transform(),
                new MaskRenderer({
                    shape: MaskShape.Rectangle,
                    width: 128,
                    height: 128,
                    color: "#D9008F",
                }),
            ]);
        }
    }

    const game = new Game({
        containerNode: document.getElementById("app"),
        width: 800,
        height: 600,
        canvasColor: "#00D9D9",
    });

    game.addScene(MainScene, "MainScene", true);
    game.start();
</script>

Nota: Cargar el motor desde el CDN está pensado para pruebas rápidas, demos y ejemplos de un solo archivo. De esta forma no hay definiciones de tipos disponibles: para un proyecto en TypeScript, instala el motor desde npm como se describe más arriba.

Estructura de carpetas sugerida

La siguiente estructura es una convención para organizar un proyecto. La plantilla skeleton la sigue, y es la disposición utilizada a lo largo de este manual.

my-game/
├── src/
│   ├── main.ts        # Inicializa la instancia de Game, carga las escenas y ejecuta el juego
│   ├── component/     # Archivos de componentes
│   ├── config/        # Archivos de configuración y parámetros
│   ├── entity/        # Archivos de definición de entidades
│   ├── scene/         # Archivos de escenas
│   └── system/        # Archivos de sistemas
└── public/            # Recursos: imágenes, archivos de sonido, exportaciones de editores de mapas, etc.