Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 2, 2021 12:24 am GMT

npm package `visual-ts`

Visual-Ts-Game-Engine Package Link
https://www.npmjs.com/package/visual-ts

Live:
https://codepen.io/zlatnaspirala/pen/NWdZJQJ

New example repo :

It is the strarter for visual-ts
https://github.com/zlatnaspirala/visual-ts-examples

Example:

class AppConfig extends V.ClientConfig {  constructor(gameList: any) {    super(gameList);    console.info("Make changes on Application Config.");  }  /**     * @description     * You can use prop from exstended ClientConfig class     * @name getDrawRefference     * @returns string     */  public getDrawRefference(): string {    // Do something...    console.log("Setup draw type")    // return "diametric-fullscreen"    // return this.drawReference;    return "frame"  }}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 test");  }  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 "https://cdn.skypack.dev/dead".');    }  }  protected destroyGamePlayPlatformer() {    this.starter.destroyGamePlay();    this.starter.deattachMatterEvents();  }}// Make instance - Run appconst gameInfo = {  name: "Demo 1h",  title: "Create game with module visual-ts. ",};const gamesList: any[] = [  gameInfo,];let injectedConfig: V.Interface.IClientConfig = new AppConfig(gamesList);const master = new V.IocSinglePlayerMode(null, injectedConfig);master.singlton(Demo1, master.get.Starter);master.get.Demo1.attachAppEvents();

Original Link: https://dev.to/zlatnaspirala/npm-package-visual-ts-1hk7

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To