blob2d

Blöb2D Game Engine 🎮

Playable demo 💾 available here https://bartoszlorek.pl/run/blob2d
Package 📦 for new games here https://www.npmjs.com/package/blob2d

General Structure

• Docker is a facade for PixiJS application responsible for mounting and updating the Scene during each frame of the game cycle.

• Scene provides ground to initialize relationships between dynamics Entities and more static Tiles. One Docker can only mount one scene at a time. Unmounting the current Scene destroys all elements, relationships, or events belonging to it.

• Addon provides a way to extend Scene with additional functionality, like animation, physics, or updating Traits.

• Entity is a dynamic element of Scene, it's also known as "sprite" in other environments. Each Entity has its own velocity which can be affected by Addons or Traits.

• Trait provides a way to extend Entity with additional functionality, like movement caused by user input, or interaction with other Entities or Tiles.

• Tile is a static element of Scene. Basically always it's a group of Tiles on a grid with specific properties, like collision for Entities or purply visual aspects.

Features 📝

• ✅ Scene based environment fed by game cycles
• ✅ Sprites described as bounding box with position and velocity
• ✅ Traits system extending the functionality of sprites
• ✅ Tiles structure with methods to interact with them
• ✅ Custom and predefined events related to game cycles
• ✅ Sprite sheets manager
• ✅ Tiled integration
• ✅ Collisions
• ✅ Animations
• ✅ User inputs
• ❌ User interface
• ✅ Motion easings
• 🤷‍♂️ General physics
• ❌ Sound

Creating a New Project ✨

First, install pixi.js and blob2d as dependencies for your project, then you should run the command creating boilerplate. It populates the current directory with a file structure and demonstration components.

blob2d create

Documentation 📑

Avaible here

Basic Usage

First, create basic types for the core component of the engine.

// types.ts

import {CustomAddon} from './addons';
import {CustomTrait} from './traits';

export type Addons = {customAddon: CustomAddon};
export type Traits = {customTrait: CustomTrait};
export type Events = 'player/score' | 'player/die';
export type Keyframes = 'player/jump' | 'player/run';

Then create an Application and pass it to the Docker. From now on, you can mount and unmount different subclasses of Scene like a playable level or cutscene.

// game.ts

import {Docker} from 'blob2d';
import {Application} from 'pixi.js';
import {Level} from './Level';

const app = new Application();

loader.load(() => {
  const docker = new Docker<Addons, Events>(app);
  const level = new Level();
  docker.mount(level);
});

The Scene is a place where you can combine all parts of your game like addons, entities, tilemaps, etc. You can create multiple scenes with different functions of the game.

// Level.ts

import {Entities, Entity, Scene} from 'blob2d';
import {Sprite, Container} from 'pixi.js';
import {CustomAddon} from './addons';
import {CustomTrait} from './traits';

export class Level extends Scene<Addons, Events> {
  constructor() {
    super(Container);

    // addons should be registered before
    // calling them later in the code
    this.registerAddons({
      customAddon: new CustomAddon(this),
    });

    // create a player with traits
    const player = new Entity<Addons, Traits, Events>(
      new Sprite(texture), {customTrait: new CustomTrait()}
    );

    // add a player to the scene
    this.addElement(player);

    // add a player to the addon
    this.addons.customAddon.addChild(player);
  }
}