angry-pixel

!Angry Pixel


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.

$3

``bash
npm i angry-pixel
`

or

`bash
yarn add angry-pixel
`

$3

First we create an instance of the Game class:

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

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

const game = new Game(config);
`

$3

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:

`typescript
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:

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

$3

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

`typescript
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
}
`

$3

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:

`typescript
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

`typescript
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);
}
}
`

$3

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).

`typescript
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"),
}),
]);
}
}
`

$3

Now we can start the game:

`typescript
game.run();
``

$3

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

DOCS

🔎 Documentation\
⚙️ Api Docs