Graphics Engine ​

TypeSpriteJS's 2D graphics engine is a scene graph. Instead of writing drawImage(...) or drawText(...) you setup graphic objects and compose them in a tree. The internal renderer translates those instructions to WebGL commands which makes it fast and flexible.

Create a Graphics Engine ​

For starters it's best to use the @GraphicsEngine:typesprite:

# myworld.edf

[!Core]
@GraphicsEngine:typesprite

[!MyPlayer->Core]
@PlayerSprite

Writing this will initilize a TypeSpriteJS GraphicsEngine object which we can use in all our objects in the given world.

Created as a static Entity you can access it via @link in your Component(s):

import {GraphicsEngine, Component} from 'typesprite'

export class PlayerSprite extends Component {
    
    @link('GraphicsEngine:typesprite')
    private gfx:GraphicsEngine
    
    onInit() {
        this.gfx.gameLayer;   // < Here we attach all our graphic objects
    }
}

Quick Example ​

To create something visible on the screen we need to do two things:

1. Create a graphics object
2. Attach it to a parent that is connected to the root-scene

Here an example to have simple, gray rectangle (quad) on the screen:

import {Color, QuadElement, GraphicsEngine, Component, link} from 'typesprite'

export class PlayerSprite extends Component {
    
    @link('GraphicsEngine:typesprite')
    private gfx:GraphicsEngine
    
    onInit() {
        const quad = new QuadElement(100, 50) // (1)
        quad.setColor(Color.fromHash('#aaa'))
        quad.x = 10;
        quad.scale = 1.4;
        quad.rotation = 13;
        this.gfx.gameLayer.addChild(quad);    // (2)
    }
    
    // NOTE: Don't forget to call removeChild (see below)
}

Render elements, like QuadElement stay on the screen as long as they are directly (or indirectly) attached to the root scene (gfx.gameLayer).

RenderElement Classes ​

QuadElement is just an example. There are more RenderElement classes:

export class CustomRenderElement extends DirectRenderElement {

    renderDirect(renderer: FatRenderer, parentMatrix: AffineMatrix) {
        // renderer.directDrawXXX(...)
    }
}

Base class: RenderElements ​

All 2D graphic objects inherit from RenderElement and they all share a wide range of common attributes and features.

RenderElement

Rendering order ​

GraphicsEngine provides a gameLayer as a starting point. We can attach our render elements to it. The order is important: every element will be drawn ontop of the last one.

All RenderElement objects can have children. This way we can setup a scene-tree in a way that works for our game.

An example for a 2D Jump & Run could look like this:

- gameLayer 
  - background
    - fillColor
    - parallax
  - level
    - ground
    - objects
      - enemy1
      - player
      - ...
  - forground
    - someDecals
    - godRays

import {GraphicsEngine, Component, cmp} from 'typesprite'

export class LevelLayer extends Component {

    @cmp('GraphicsEngine:typesprite') 
    private gfx:GraphicsEngine
    
    public background:RenderElement;
    public level:RenderElement;
    public ground:RenderElement;
    public objects:RenderElement;
    public foreground:RenderElement;

    onInit() {
        this.background = new RenderElement();
        this.gfx.addChild(this.background);
        
        this.level = new RenderElement();
        this.gfx.addChild(this.level);

        this.ground = new RenderElement();
        this.level.addChild(this.ground);

        this.objects = new RenderElement();
        this.level.addChild(this.objects);
        
        this.foreground = new RenderElement();
        this.gfx.addChild(this.foreground);
    }
}

[!Core]
@GraphicsEngine:typesprite
@LevelLayer

[!MyPlayer->Core]
@PlayerSprite

import {QuadElement, GraphicsEngine, Component, link} from 'typesprite'

export class PlayerSprite extends Component {
    
    @link('LevelLayer')
    private layer:LevelLayer
    
    onInit() {
        const quad = new QuadElement(100, 50) 
        this.layer.objects.addChild(quad);
    }
}

Activation & Deactivation & Dispose ​

The 2D graphics engine does not ship a pre-built concept for a camera. All RenderElements that are attached to the root-scene will be rendered. The engine does not try to guess what is visible and what not.

If you have large worlds with many objects off the screen you should activate/deactivate them by implementing an EntityActivator. Entities that are not important to the current game scene should be disabled.

Make sure your game components honor activation and deactivation. You can either add/remove them or switch their visibility:

export class PlayerSprite extends Component {
    
    @link('LevelLayer')
    private layer:LevelLayer
    private quad:QuadElement;
    
    onInit() {
        this.quad = new QuadElement(100, 50)
    }

    onActivate() {
        this.layer.objects.addChild(this.quad);
    }

    onDeactivate() {
        this.layer.objects.removeChild(this.quad);
    }
}

export class PlayerSprite extends Component {
    
    @link('LevelLayer')
    private layer:LevelLayer
    private quad:QuadElement;

    onInit() {
        this.quad = new QuadElement(100, 50)
        this.layer.objects.addChild(this.quad);
    }

    onActivate() {
        this.quad.visible = true;
    }

    onDeactivate() {
        this.quad.visible = false;   
    }
    
    onDispose() {
        this.layer.objects.removeChild(this.quad);
    }
}