Jump to content

Visual ts game engine

Nikola Lukic

Recommended Posts

Project : Visual ts game engine

Version : new era - 2018/2019

2d canvas game engine based on Matter.js 2D physics engine for the web.

  • Writen in typescript current version 3.1.3.
  • Text editor used and recommended: Visual Studio Code


To make all dependency works in build proccess we need some plugins.

npm install
npm run build

Navigate in browser /build/app.html to see client app in action 

Client part

-Client part is browser web application. No reloading or redirecting. This is single page application. I use html request only for loading local html (register, login etc.). Networking is based on webSocket full-duplex communication. -webRTC Can be used for any proporsion. Already implemented : -video chat webRTC (SIP) -chat or data communication

-Connector (native webSocket) used for user session staff. in progress...

Client config

if you want web app without networking then setup :

appUseAccountsSystem: boolean = false; 

  • No need for deactivation multi media webRTC support becouse this feature run only on user request for now.

Find configuration at ./src/lib/client-config.ts

appUseAccountsSystem: boolean = false;

Start dependency system from app.ts

  • Fisrt game template is Platformer.

Main dependency file

const plarformerGameInfo = {  
  name: "Crypto-Runner",
const gamesList: any[] = [   plarformerGameInfo ];
const master = new Ioc(gamesList);
const appIcon: AppIcon = new AppIcon(master.get.Browser);
master.singlton(Platformer, master.get.Starter);
console.warn("Platformer: ", master.get.Platformer);  master.get.Platformer.attachAppEvents();


Project structure

  • build/ is autogenerated. Don't edit or add content in this folder.
  • src/ is main client part (Browser web application). Main file : app.ts
  • src/libs/ is common and smart pack of classes, interfaces etc. easy access.
  • server/ folder is fully indipendent server size.


Server part

Installed database : [email protected]

-No typescript here, we need keep state clear no. Node.js is best options.For email staff i choose : npm i gmail-send .

-Run services database server (Locally and leave it alive for develop proccess):

 npm run dataserver

Looks like this :

mongod --dbpath ./server/database/data

Fix : "failed: address already in use" :

  netstat -ano | findstr :27017  
  taskkill /PID typeyourPIDhere /F

Also important "Run Visual Studio Code as Administrator".

-Command for kill all node.js procces for window users :

 taskkill /im node.exe /F

Networking multimedia communication : WebSocketServer running on Node.js

Text-based protocol SIP (Session Initiation Protocol) used for signaling and controlling multimedia sessions.

- Running server is easy : 

 npm run rtc

With this cmd : npm run rtc we run server.js and connector.ts websocket. Connector is our account session used for login , register etc.

  • Implemented video chat based on webRTC protocol

Documentation :

  • In progress like whole project ... If you wanna generate doc you will need manual remove comment from plugin section in webpack.config.js. Best way to fully build healty. HTML/CSS is not prior in this project.

If you wanna insert some new html page just define it intro webpack.config.js :

plugins : [
 new HtmlWebpackPlugin({
  filename: '/templates/myGameLobby.html',
             template: 'src/html-components/myGameLobby.html'
  }), ...
  • See register and login example.

Code format :

  npm run fix
  npm run tslint


or use :  
 tslint -c tslint.json 'src/**/*.ts' --fix  
tslint -c tslint.json 'src/**/*.ts'

External licence in this project :

- Networking based on : 
Muaz Khan MIT License www.WebRTC-Experiment.com/licence 

- Base physics beased on : 
Matter.js https://github.com/liabru/matter-js 

Todo list for 2019

I'am still far a away from project objective :

  • Make visual nodes for editor mode in game play.
  • Item's selling for crypto values.
  • Create examples demos in minimum 20 game play variants (table games, actions , platformers , basic demo trow the api doc etc.).
  • Implementing AR and webGL2.

Donate this project

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...