{"id":17018241,"url":"https://github.com/zlatnaspirala/visual-ts-examples","last_synced_at":"2026-02-07T01:04:54.787Z","repository":{"id":70563301,"uuid":"357682491","full_name":"zlatnaspirala/visual-ts-examples","owner":"zlatnaspirala","description":"Visual TS Game engine access from node module (npm service) Video chat , multiplayer with physics, platformer , 2d map creator GUI py etc.","archived":false,"fork":false,"pushed_at":"2024-12-19T15:44:16.000Z","size":4898,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-19T16:36:41.533Z","etag":null,"topics":["2d-map-creatot","engine","game","gui-python","npm","physics","python","typescript","visual","webpack"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/visual-ts","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zlatnaspirala.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-13T20:38:26.000Z","updated_at":"2024-01-20T07:01:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"f2b586eb-1501-4f4c-ac29-1970e7963b8c","html_url":"https://github.com/zlatnaspirala/visual-ts-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlatnaspirala%2Fvisual-ts-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlatnaspirala%2Fvisual-ts-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlatnaspirala%2Fvisual-ts-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlatnaspirala%2Fvisual-ts-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zlatnaspirala","download_url":"https://codeload.github.com/zlatnaspirala/visual-ts-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235887768,"owners_count":19061159,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d-map-creatot","engine","game","gui-python","npm","physics","python","typescript","visual","webpack"],"created_at":"2024-10-14T06:45:07.728Z","updated_at":"2025-10-10T00:31:59.952Z","avatar_url":"https://github.com/zlatnaspirala.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# visual-ts-example\n\n - Visual TS Game engine access from node module (npm service) plus examples \n   in different variant.\n   First variant is webpack packing, typescript project.\n\n## Installation\n\n```\n npm i\n```\n\nUsed webpack:\n```\nnpm run game\n```\n\nFirst visual-ts-module is abstract with no player.\nJust adding ball to the scene.\n\n## Webpack Entry\n\n - from-zero     - Build clear library\n\n - add-element   - Tutorial\n\n   https://codepen.io/zlatnaspirala/pen/NWdZJQJ\n\n   ![visualTSGameEngine-From-Node-Module](https://github.com/zlatnaspirala/visual-ts-module/blob/main/screenshot1.png)\n\n - Sprite Animation\n\n   https://codepen.io/zlatnaspirala/pen/WNRVRQM?editors=1010\n\n   ![Sprite-Animation](https://github.com/zlatnaspirala/visual-ts/blob/master/nonproject-files/tutorial-resource/sprite-speed-tiles.gif)\n\n  - SpriteTextureComponent Example.\n\n    https://codepen.io/zlatnaspirala/pen/qBrdVdx\n\n    ![Texture-Stream](https://github.com/zlatnaspirala/visual-ts/blob/master/nonproject-files/tutorial-resource/generator-object-visula-ts-demo-1.png)\n    \n  - TextureStreamComponent Example with webcam.\n\n    https://codepen.io/zlatnaspirala/pen/wvJapLm\n\n    ![Texture-Stream](https://github.com/zlatnaspirala/visual-ts/blob/master/nonproject-files/tutorial-resource/generator-object-visula-ts-demo-2.png)\n\n\n\u003cpre\u003e\n├── package.json\n├── package-lock.json\n├── webpack.config.js\n├── tsconfig.json\n├── tslint.json\n├── launch.json\n├── template.html\n├── app-icon.ts\n└── app.ts\n├── build/  (This is auto generated)\n|   ├── externals/\n|   ├── templates/\n|   ├── imgs/\n|   ├── styles/\n|   |   └── favicon.ico\n|   ├── visualjs2.js\n|   ├── app.html\n├── src/\n|   ├── zero-point/\n|   |   ├── index.ts\n|   ├── add-element/\n|   |   ├── add-element.ts\n|   |   ├── client-config.ts\n|   |   ├── myGame.ts\n|   ├── ui/\n|   |   ├── Html files\n|   ├── imgs/ \n|   |   ├── IMAGES\n├── externals/\n|   ├── adapter.js\n|   ├── cacheInit.ts\n|   ├── drag.ts\n|   ├── fb.js\n|   ├── hack-timer.js\n|   ├── hack-timer-worker.js\n\n\u003c/pre\u003e\n\n\n### Here is the basic usage:\n```ts\n\nclass AppConfig extends V.ClientConfig {\n\n  constructor(gameList: any) {\n    super(gameList);\n    console.info(\"Make changes on Application Config.\");\n  }\n\n  /**\n   * @description\n   * You can use prop from exstended ClientConfig class\n   * @name getDrawRefference\n   * @returns string\n   */\n  public getDrawRefference(): string {\n    // Do something...\n    console.log(\"Setup draw type\")\n    // return \"diametric-fullscreen\"\n    // return this.drawReference;\n    return \"frame\"\n  }\n}\n\nclass Demo1 implements V.Interface.IGamePlayModelNoPlayer {\n\n  public gameName: string = \"Demo 1 - Add new element\";\n  public version: number = 1.0;\n  public playerCategory = 0x0002;\n  public staticCategory = 0x0004;\n\n  public starter: V.Starter;\n  public myFirstGamePlayObject: V.Matter.Body | any = undefined;\n\n  constructor(starter: V.Starter) {\n    this.starter = starter;\n  }\n\n  public attachAppEvents() {\n    const root = this;\n    root.createMyElements(true);\n    root.addGround();\n    console.info(\"App event test\");\n  }\n\n  public addGround() {\n    const newStaticElement: V.Type.worldElement = V.Matter.Bodies.rectangle(\n      400,\n      550,\n      1000,\n      90,\n      {\n        isStatic: true,\n        isSleeping: false,\n        label: \"ground\",\n        collisionFilter: {\n          group: this.staticCategory,\n        } as any,\n        render: {\n          // visualComponent: new TextureComponent(\"imgGround\",[require(\"./imgs/backgrounds/wall3.png\")]),\n          sprite: {\n            olala: true,\n          },\n        } as any | Matter.IBodyRenderOptions,\n      }\n    );\n\n    //  (newStaticElement.render as any).visualComponent.setVerticalTiles(2).\n    //    setHorizontalTiles(1);\n    this.starter.AddNewBodies([newStaticElement] as V.Type.worldElement);\n  }\n\n  public createMyElements(addToScene: boolean) {\n    const playerRadius = 50;\n    this.myFirstGamePlayObject = V.Matter.Bodies.circle(\n      400,\n      100,\n      playerRadius,\n      {\n        label: \"MYFIRSTOBJECT\",\n        density: 0.0005,\n        friction: 0.01,\n        frictionAir: 0.06,\n        restitution: 0.3,\n        ground: true,\n        jumpCD: 0,\n        portal: -1,\n        collisionFilter: {\n          category: this.playerCategory,\n        } as any,\n        render: {\n          fillStyle: \"blue\",\n          sprite: {\n            xScale: 1,\n            yScale: 1,\n          },\n        } as any,\n      } as Matter.IBodyDefinition\n    );\n    this.myFirstGamePlayObject.collisionFilter.group = -1;\n    this.myFirstGamePlayObject.render.sprite.xScale = 0.2;\n    this.myFirstGamePlayObject.render.sprite.yScale = 0.2;\n\n    if (addToScene) {\n      this.myFirstGamePlayObject.id = 2;\n      this.starter.AddNewBodies(\n        this.myFirstGamePlayObject as V.Type.worldElement\n      );\n    }\n  }\n\n  protected destroyGamePlayPlatformer() {\n    this.starter.destroyGamePlay();\n    this.starter.deattachMatterEvents();\n  }\n}\n\n// Make instance - Run app\n\nconst gameInfo = {\n  name: \"Demo\",\n  title: \"Create game with module visual-ts.\",\n};\n\nconst gamesList: any[] = [\n  gameInfo,\n];\n\nlet injectedConfig: V.Interface.IClientConfig = new AppConfig(gamesList);\nconst master = new V.IocSinglePlayerMode(null, injectedConfig);\n\nmaster.singlton(Demo1, master.get.Starter);\nmaster.get.Demo1.attachAppEvents();\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzlatnaspirala%2Fvisual-ts-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzlatnaspirala%2Fvisual-ts-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzlatnaspirala%2Fvisual-ts-examples/lists"}