Use npm install visual ts

Welcome to the visual-ts-game-engine wiki!

How to use it from npm:

npm i visual-ts

To fix all dependency take a look at : Visual ts game engine with npm service example project repo

/**
 * Import global css
 */
require("../../style/styles.css")
// import css from "../../style/styles,css";

// require("./../../../style/animations.css");
// import AppIcon from "../../../app-icon";

import * as V from "visual-ts"
import ClientConfig from "./client-config";
import Demo1 from "./myGame";

/**
 * @description gameInfo
 * This is strong connection.
 * html-components are on the same level with app.ts
 * webpack will handle copying files.
 * Put any parameters here.
 */
const gameInfo = {
  name: "Demo 1",
  title: "Create game with module visual-ts. ",
};

const gamesList: any[] = [
  gameInfo,
];

let injectedConfig: V.Interface.IClientConfig = new ClientConfig(gamesList);
const master = new V.IocSinglePlayerMode(null, injectedConfig);

master.singlton(Demo1, master.get.Starter);
console.info("One time instance creation with master.singlton !");
console.info("The object `master.get.Demo1` is constructed intro ioc controller and represent real instance object Access with => ",
               master.get.Demo1);
console.info("This is good to avoid double instancing / shadows etc. ");
console.info("attachAppEvents is final runner. In this case it is the simple adding two elements to the world (scene).");
master.get.Demo1.attachAppEvents();

/**
 * Make it global for DEV testing - fast access in console for testing only please.
 */
(window as any).master = master;
(window as any).demo1 = master.get.Demo1;

import * as V from "visual-ts";

/**
 * @author Nikola Lukic
 * @class Demo1 tutorial
 * @param Starter
 * @description This is game logic part
 * we stil use class based methodology.
 * About resource we use require
 */
class Demo1 implements V.Interface.IGamePlayModelNoPlayer {

  public gameName: string = "Demo 1 - Add new element";
  public version: number = 1.0;
  public playerCategory = 0x0002;
  public staticCategory = 0x0004;

  public starter: V.Starter;
  public myFirstGamePlayObject: V.Matter.Body | any = undefined;

  constructor(starter: V.Starter) {
    this.starter = starter;
  }

  public attachAppEvents() {
    const root = this;
    root.createMyElements(true);
    root.addGround();
    console.info("App event");
  }

  public addGround() {
    const newStaticElement: V.Type.worldElement = V.Matter.Bodies.rectangle(
      400,
      550,
      1000,
      90,
      {
        isStatic: true,
        isSleeping: false,
        label: "ground",
        collisionFilter: {
          group: this.staticCategory,
        } as any,
        render: {
          // visualComponent: new TextureComponent("imgGround",[require("./imgs/backgrounds/wall3.png")]),
          sprite: {
            olala: true,
          },
        } as any | Matter.IBodyRenderOptions,
      }
    );

    //  (newStaticElement.render as any).visualComponent.setVerticalTiles(2).
    //    setHorizontalTiles(1);
    this.starter.AddNewBodies([newStaticElement] as V.Type.worldElement);
  }

  public createMyElements(addToScene: boolean) {
    const playerRadius = 50;
    this.myFirstGamePlayObject = V.Matter.Bodies.circle(
      400,
      100,
      playerRadius,
      {
        label: "MYFIRSTOBJECT",
        density: 0.0005,
        friction: 0.01,
        frictionAir: 0.06,
        restitution: 0.3,
        ground: true,
        jumpCD: 0,
        portal: -1,
        collisionFilter: {
          category: this.playerCategory,
        } as any,
        render: {
          fillStyle: "blue",
          sprite: {
            xScale: 1,
            yScale: 1,
          },
        } as any,
      } as Matter.IBodyDefinition
    );
    this.myFirstGamePlayObject.collisionFilter.group = -1;

    // hardcode for now
    this.myFirstGamePlayObject.render.sprite.xScale = 0.2;
    this.myFirstGamePlayObject.render.sprite.yScale = 0.2;

    if (addToScene) {
      this.myFirstGamePlayObject.id = 2;
      this.starter.AddNewBodies(
        this.myFirstGamePlayObject as V.Type.worldElement
      );
      console.info("myFirstGamePlayObject body created from 'dead'.");
    }
  }

  protected destroyGamePlayPlatformer() {
    this.starter.destroyGamePlay();
    this.starter.deattachMatterEvents();
  }
}
export default Demo1;