streetzero v0.7.7

Street Zero

Coverage

Statements	Branches	Functions	Lines

Streetzero is a micro framework for creating 2d video games in the browser.

Streetzero uses the canvas and browser events for the game lifecycle and for user events.

This framework is not designed for a production environment, it is currently in the experimental stage.

How to start

Instalation

1. Install package:

npm i streetzero -g

Make Project

1. run streetzero CLI

streetzero

2. Select the option 1.

====================================
STREET ZERO - MAIN MENU
====================================
? What do you need to do? (Use arrow keys)
❯ 1.- Start a new project.
  2.- Create new component.

3. Write your name project.

====================================
STREET ZERO - INIT PROJECT MENU
====================================
? Name: YourNewProject

Note: After entering the name and if you have done everything right, you will receive a "success" message on the console.

Run

1. Move from the console to the project folder.

cd your_project_folder_path

2. Insall packages

npm install

3. run server

npm start

Dependency Injection (IOC)

Now streetzero uses inversify under the hood, so you can get controller instances, and streetzero components via the @inject decorator.

You can read more about inversify here.

classes that implement the @Controller or @Injectable decorator will be automatically linked into zEngine. Streetzero uses the inversify configuration autoBindInjectable: true

zGame

Existe una instancia unica

Attributes

Game Events

Implement the GameEvents interface in your controller class and override the event methods.

Lifecycle

Game events are generated from the zGame class, and are dispatched via browser events to its controller class.

graph TD
    zGame --> | Events generated | DOM(DOM)
    DOM --> | send event through subscription | Controller(Method in your controller)

This is the cycle of events that are triggered from zGame.

graph TD
    onPreload(onPreload) --> onStart(onStart)
    onStart --> |runs for every frame | onRender
    zGame -->|the game is play | onPlay
    zGame -->|the stop method has been called  | onStop
    onStop -->| Render loop stops | onRender
    zGame --> onGameover
    zGame --> onPause
    zGame --> | the start method has been called | onPreload
    zGame --> | the level is increased | onPrenextlevel
    onPrenextlevel --> onNextlevel

Mouse Events

Lifecycle

graph TD
    Keyboard(User generated keyboard events) --> | Events generated | DOM(DOM)
    DOM --> | send event through subscription | Controller(Method in your controller)

Overwrite any of these methods within your MyGame class

Mouse Events

Overwrite any of these methods within your MyGame class

Drawable Objects

Pending documentation

Kinematiks

This is the class that is in charge of managing the physics and location of the elements within the scenario.

Note: This implementation will change in the final version.

In the final version, it is expected that this class will be implemented through a decorator and that it will support the use of both path and jpg and png images.

Example rocket.class.ts:

import { Kinematic, LayerPath } from 'streetzero';

export class Rocket extends Kinematic {
    private _primaryColor;
    constructor(canvas: HTMLCanvasElement, color: string, x: number, y: number) {
        Sounds.shoot();
        super(canvas, x, y, 30, 10);
        this._primaryColor = color;
        super.enabledGravity = false;
        this.initLayer();
    }
    initLayer() {
        const shoot = new Path2D();
        const center = 5;
        shoot.moveTo(0, center - 2);
        shoot.lineTo(20, center - 2);
        shoot.lineTo(25, center);
        shoot.lineTo(20, center + 2);
        shoot.lineTo(0, center + 2);
        shoot.lineTo(0, center - 2);
        shoot.closePath();

        const flame = new Path2D();
        flame.ellipse(0, center, 10, 4, 0, 0, Math.PI * 2); // llama

        const flame2 = new Path2D();
        flame2.ellipse(2, center, 8, 2, 0, 0, Math.PI * 2); // llama

        super.setLeyers([new LayerPath(shoot, this._primaryColor, this), new LayerPath(flame, 'red', this), new LayerPath(flame2, 'yellow', this)]);
    }

    hasColision(element: Kinematic) {
        if (super.hasColision(element)) {
            super.destroy();
            return true;
        }
        return false;
    }
}

Controllers

Controllers are where you can access all the events available in streetzero. To use any of the events, you just have to overwrite the name of the event you want to consume.

It is recommended that you use the available interfaces: GameEvents, MouseEvents y TouchEvents.

script: game.controller.ts

import { math, Controller, DOMContext, Game, zGame, GameEvents, MouseEvents } from 'streetzero';
import { inject } from 'inversify';

@Controller()
export class ShotLevelController implements GameEvents, MouseEvents {
    private context: CanvasRenderingContext2D | null;
    private canvas: HTMLCanvasElement | null;
    private _rockets: Rocket[] = [];
    constructor(@inject(DOMContext) { context, canvas }: DOMContext, @inject(zGame) private game: zGame) {
        this.context = context;
        this.canvas = canvas;
    }
    onClick(event: any): void {
        console.log('onClick');
    }
    onRender() {
        this._rockets.forEach((rocket) => {
            rocket.move();
            rocket.render();
        });
        this._rockets = this._rockets.filter((rocket) => rocket.x < this.canvas.width && !rocket.isDestroy());
        super.render();
    }
    onMousemove(event: any): void {}
    onMousedown(event: any): void {}
    onMouseup(event: any): void {}
    onMouseout(event: any): void {}
    onStop(): void {}
    onStart(): void {}
    onPreload(): void {}
    onPause(): void {}
    onPrenextlevel(): void {}
    onPlay(): void {}
    onGameover(): void {}
    onNextlevel() {}
}

zEngine

zEngine is the class in charge of managing the IOC container, so it is the one in charge of managing inversify to indicate which classes should be called.

This class is a singleton so there will only be one instance during the entire execution cycle of streetzero.

All controllers within your application should be passed in an array to zEngine via the initialize method.

import { zEngine, zGame } from 'streetzero';
import { ShotLevelController } from './controllers/game.space.class';

const engine = zEngine.initialize([ShotLevelController /* ...OTHER CONTROLLER*/]);
const game: zGame = engine.ioc.get(zGame);
game.start();
game.play();

Autor

Addison Calles