Source code

'use strict';

class MyGame extends GameObject {
  constructor() {
    super();

    // Set auto resizeable stage
    Black.stage.scaleMode = StageScaleMode.LETTERBOX;
    Black.stage.setSize(500, 500);

    // Pick up default AssetManager
    let assets = new AssetManager();

    // Load Black Vector Graphics file 
    // To convert svg to bvg follow the instructions https://github.com/MassiveHeights/svg2bvg    
    assets.enqueueVector('car-vector', '/assets/examples/bvg/car.json');

    // Load same url but this time we bake vector into the texture
    // Third param tells AssetManager to bake loaded vector graphics into texture
    assets.enqueueVectorTexture('car', '/assets/examples/bvg/car.json', true);

    // Listen for a complete message
    assets.on('complete', this.onAssetsLoaded, this);

    // Start preloading all enqueued assets
    assets.loadQueue();
  }

  onAssetsLoaded(m) {
    // Create sprite from baked vector graphics
    let sprite = new Sprite('car');

    // Align object pivot
    sprite.alignPivot();

    sprite.x = this.stage.centerX - 400;
    sprite.y = this.stage.centerY;
    sprite.scale = 3;
    
    // Add object onto the stage
    this.addChild(sprite);

    // When passing string the Graphics will get graphics data from default asset manager and 
    // Graphics will be rendered as vector
    let graphics = new Graphics('car-vector');

    // Align object pivot
    graphics.alignPivot();

    graphics.scaleX = -3;
    graphics.scaleY = 3;
    graphics.x = this.stage.centerX + 400;
    graphics.y = this.stage.centerY;
    
    // Add object onto the stage
    this.addChild(graphics);
  }
}

new Engine('game-container', MyGame, CanvasDriver).start();