blob2d v0.4.0
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 theScene
during each frame of the game cycle.Scene provides ground to initialize relationships between dynamics
Entities
and more staticTiles
. OneDocker
can only mount one scene at a time. Unmounting the currentScene
destroys all elements, relationships, or events belonging to it.Addon provides a way to extend
Scene
with additional functionality, like animation, physics, or updatingTraits
.Entity is a dynamic element of
Scene
, it's also known as "sprite" in other environments. EachEntity
has its ownvelocity
which can be affected byAddons
orTraits
.Trait provides a way to extend
Entity
with additional functionality, like movement caused by user input, or interaction with otherEntities
orTiles
.Tile is a static element of
Scene
. Basically always it's a group ofTiles
on a grid with specific properties, like collision forEntities
or purply visual aspects.
Features ๐
- โ Scene based environment fed by game cycles
- โ
Sprites described as bounding box with
position
andvelocity
- โ 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 ๐
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);
}
}