npm package `visual-ts`
Published: 2021-05-02 00:24:43


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 app

    const 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();