What is Angry Pixel Engine?

Angry Pixel Engine is a 2D game engine for browser written in Typescript.

Main features:

• Entity-Component-System based architecture
• WebGL rendering
• Sprite-based graphics and frame-by-frame animations
• Text rendering with support for web-safe and imported fonts
• Basic 2D lightning system
• Polygonal collision detection and physical response based on speed and acceleration.
• Keyboard, mouse, gamepad, and touchscreen input support
• Ability to create desktop or mobile games using frameworks like Electron.js or React Native
• Built-in tilemap and tileset components, with support for orthogonal maps exported from Tiled
• Dependency Injection

Getting Started

Let's create a scene where the Angry Pixel logo bounces off the edges of the screen in a DVD screensaver fashion.

Installation

npm i angry-pixel

or

yarn add angry-pixel

Initialize

First we create an instance of the Game class:

import { Game, GameConfig } from "angry-pixel";

const config: GameConfig = {
    containerNode: document.querySelector("#app"),
    width: 1920,
    height: 1080,
    canvasColor: "#00D9D9",
};

const game = new Game(config);

Create a Scene

Then we will create the MainScene class, which extends the Scene base class. This class represents a scene in our game, and has three main functions:

• To load assets.
• To create the initial entities.
• To know which are the necessary systems.

For the moment we only implement the function loadAssets to load an image that we will use later:

import { Scene } from "angry-pixel";

class MainScene extends Scene {
    // within this method we load the assets
    loadAssets(): void {
        this.assetManager.loadImage("logo.png");
    }
}

And we add this scene to our game:

// arguments: the scene class, the scene name, opening scene = true
game.addScene(MainScene, "MainScene", true);

Create a Component

Then we will create the MoveAndBounce component which has the necessary attributes to define the movement of our entity.

import { Vector2 } from "angry-pixel";

class MoveAndBounce {
    boundaries: number[] = [476, -476, 896, -896]; // top, bottom, left, right
    direction: Vector2 = new Vector2(1, 1); // the direction in wich the entity will move
    speed: number = 200; // pixels per second
}

Create a System

Once we have created our component, we will need a system that executes the business logic. Extending the base class GameSystem, we will create our MoveAndBounceSystem, which, using the EntityManager, obtains all the entities that have the MoveAndBounce component, and executes the business logic necessary for the entity to move by bouncing on the edges of the screen:

import { GameSystem, Transform } from "angry-pixel";

class MoveAndBounceSystem extends GameSystem {
    onUpdate(): void {
        this.entityManager.search(MoveAndBounce).forEach(({ component, entity }) => {
            const transform = this.entityManager.getComponent(entity, Transform);
            const { boundaries, direction, speed } = component;

            if (transform.position.y >= boundaries[0] || transform.position.y <= boundaries[1]) {
                direction.y *= -1;
            }

            if (transform.position.x >= boundaries[2] || transform.position.x <= boundaries[3]) {
                direction.x *= -1;
            }

            transform.position.x += direction.x * speed * this.timeManager.deltaTime;
            transform.position.y += direction.y * speed * this.timeManager.deltaTime;
        });
    }
}

Once the system is created, we can add it to the scene

import { Scene } from "angry-pixel";

class MainScene extends Scene {
    loadAssets(): void {
        this.assetManager.loadImage("logo.png");
    }

    // within this method we register the systems of the scene
    registerSystems(): void {
        this.addSystem(MoveAndBounceSystem);
    }
}

Create the entities

Finally, we need to create two entities, one that represents our logo, to which we want to apply the behavior of moving and bouncing, and another one that represents the camera of our game. For this we will use the EntityManager, specifically the createEntity method. This method accepts an array of components, the components can be concrete instances (this is useful when it is necessary to pass parameters by constructor) or classes (if it is not necessary to pass parameters by constructor, we can pass only the class).

import { Camera, Scene, SpriteRenderer, Transform } from "angry-pixel";

class MainScene extends Scene {
    loadAssets(): void {
        this.assetManager.loadImage("logo.png");
    }

    registerSystems(): void {
        this.addSystem(MoveAndBounceSystem);
    }

    // within this method we create the entities
    createEntities(): void {
        // camera
        this.entityManager.createEntity([new Transform(), new Camera({ layers: ["Logo"] })]);

        // logo
        this.entityManager.createEntity([
            new Transform(),
            new MoveAndBounce(),
            new SpriteRenderer({
                layer: "Logo",
                image: this.assetManager.getImage("logo.png"),
            }),
        ]);
    }
}

Run the game

Now we can start the game:

game.run();

Check this example live

🎮 https://angrypixel.gg/angry-pixel-logo-bounce

DOCS

🔎 Documentation
⚙️ Api Docs