Visual ts game engine

[Nikola Lukic]

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",
  title: "PLAY PLATFORMER 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