Visual typescript game engine

Project : Visual typescript game engine

Version: Sunshine - 2019

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

  • Written in typescript current version 3.1.3.
  • Text editor used and recommended: Visual Studio Code. Luanch debugger configuration comes with this project.
  • Physics engine based on Matter.js.
  • Multiplatform video chat (for all browsers) implemented. SocketIO used for session staff. MultiRTC2 used for data transfer also for video chat. MultiRTC3 alias 'broadcaster' used for video chat.

visualTS

Client part

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

  npm install
  npm run build

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

-The client part is a browser web application. No reloading or redirecting. This is a single page application. I use HTML request only for loading local/staged HTML (like register, login etc.). Networking is based on WebSocket full-duplex communication only.You must be conform with classic socket connection methodology. webRTC can be used for any proportion. Already implemented: -video chat webRTC (SIP) chat and data communication.

Look back on main staff :

-Class 'Connector' (native WebSocket) used for user session staff. For main account session staff like login, register etc.

Client config

If you want web app without any networking then setup:

appUseNetwork: boolean = false;

You want to use communication for multiplayer but you don't want to use server database account sessions. The setup this on false in main client config class. appUseAccountsSystem: boolean = false;

  • Networking is disabled by default.

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

/**
* Addson
* All addson are ansync loaded scripts.
*  - Cache is based on webWorkers.
*  - hackerTimer is for better performace also based on webWorkers.
*  - dragging is script for dragging dom elements.
*/
  private addson: Addson = [
    {
      name: "cache",
      enabled: true,
      scriptPath: "externals/cacheInit.ts",
    },
    {
      name: "hackerTimer",
      enabled: true,
      scriptPath: "externals/hack-timer.js",
    },
    {
      name: "dragging",
      enabled: true,
      scriptPath: "externals/drag.ts",
    },
  ];

  /**
   * @description This is main coordinary types of positions
   * Can be "diametric-fullscreen" or "frame".
   * @property drawReference
   * @type  string
   */
  private drawReference: string = "frame";

  /**
   * aspectRatio default value, can be changed in run time.
   */
  private aspectRatio: number = 1.333;

  /**
   * domain is simple url address,
   * recommendent to use for local propose LAN ip
   * like : 192.168.0.XXX if you wanna run ant test app with server.
   */
  private domain: string = "maximumroulette.com";

  /**
   * networkDeepLogs control of dev logs for webRTC context only.
   */
  private networkDeepLogs: boolean = false;

  /**
   * masterServerKey is channel access id used to connect
   * multimedia server channel.
   */
  private masterServerKey: string = "multi-platformer-sever1.maximum";

  /**
   * rtcServerPort Port used to connect multimedia server.
   * Default value is 12034
   */
  private rtcServerPort: number = 12034;

  /**
   * connectorPort is access port used to connect
   * session web socket.
   */
  private connectorPort: number = 1234;

  /**
   * broadcasterPort Port used to connect multimedia server MultiRTC3.
   * I will use it for explicit video chat multiplatform support.
   * Default value is 9001
   */
  private broadcasterPort: number = 9001;

  /**
   * @description Important note for this property: if you
   * disable (false) you cant use Account system or any other
   * network. Use 'false' if you wanna make single player game.
   * In other way keep it 'true'.
   */
  private appUseNetwork = false;

  /**
   * appUseAccountsSystem If you don't want to use session
   * in your application just setup this variable to the false.
   */
  private appUseAccountsSystem: boolean = false;

  /**
   * appUseBroadcaster Disable or enable broadcaster for
   * video chats.
   */
  private appUseBroadcaster: boolean = false;

  /**
   * Possible variant by default :
   * "register", "login"
   */
  private startUpHtmlForm: string = "register";

  private gameList: any[];

  /**
   * Implement default gamePlay variable's
   */
  private defaultGamePlayLevelName: string = "level1";
  private autoStartGamePlay: boolean = true;

Start the dependency system from app.ts

  • The first game template is Platformer. This is high-level programming in this software. Class GamePlay extends Platformer, it good for start. Class Starter is base class for my canvas part and matter.ts (matter.js) implementation. It is injected to the Platformer to make full operated work.
  • gamesList args for IOC constructor is for now just symbolic for now. (WIP)
  • In ioc, you can make strong class dependency relations. Use it for your own structural changes.

Main dependency file

// Symbolic for now
const plarformerGameInfo = {
  name: "Crypto-Runner",
  title: "PLAY PLATFORMER CRYPTO RUNNER!",
};

// Symbolic for now
const gamesList: any[] = [
  plarformerGameInfo,
];

const master = new Ioc(gamesList);
const appIcon: AppIcon = new AppIcon(master.get.Browser);
master.singlton(Platformer, master.get.Starter);
console.log("Platformer: ", master.get.Platformer);
master.get.Platformer.attachAppEvents();

Project structure

  • builds/ is autogenerated. Don't edit or add content in this folder.
  • src,/ is the main client part (Browser web application). Main file: app.ts
  • src/libs/ is a common and smart pack of classes, interfaces etc. easy access.
  • server/ folder is fully independent server size. I use one git repo but consider '/server' represent the standalone application. There's server package.json independently from the client part also config is not common. I just like it like that.
├── package.json
├── package-lock.json
├── webpack.config.js
├── tsconfig.json
├── tslint.json
├── launch.json
├── workplace.code-workspace
logo.png
LICENSE
├── build/  (This is auto generated)
|   ├── externals/
|   ├── templates/
|   ├── imgs/
|   ├── styles/
|   |   └── favicon.ico
|   ├── visualjs2.js
|   ├── app.html
├── src/
|   ├── style/
|   |   ├── styles.css
|   ├── libs/
|   |   ├── class/
|   |   |   ├── networking/
|   |   |   |   ├── rtc-multi-connection/
|   |   |   |   |   ├── FileBufferReader.js
|   |   |   |   |   ├── RTCMultiConnection2.js
|   |   |   |   |   ├── RTCMultiConnection3.js
|   |   |   |   |   ├── linkify.js
|   |   |   |   |   ├── getHTMLMediaElement.js
|   |   |   |   |   ├── socket.io.js
|   |   |   |   ├── broadcaster-media.ts
|   |   |   |   ├── broadcaster.ts
|   |   |   |   ├── connector.ts
|   |   |   |   ├── network.ts
|   |   |   ├── visual-methods/
|   |   |   |   ├── sprite-animation.ts
|   |   |   |   ├── text.ts
|   |   |   |   ├── texture.ts
|   |   |   ├── browser.ts
|   |   |   ├── math.ts
|   |   |   ├── position.ts
|   |   |   ├── resources.ts
|   |   |   ├── sound.ts
|   |   |   ├── system.ts
|   |   |   ├── view-port.ts
|   |   |   ├── visual-render.ts
|   |   ├── interface/
|   |   |   ├── drawI.ts
|   |   |   ├── global.ts
|   |   |   ├── visual-components.ts
|   |   ├── multiplatform/
|   |   |   ├── mobile/
|   |   |   |   ├── player-controls.ts
|   |   |   ├── global-event.ts
|   |   ├── types/
|   |   |   ├── global.ts
|   |   ├── engine-config.ts
|   |   ├── ioc.ts
|   |   ├── starter.ts
|   ├── icon/ ...
|   ├── examples/
|   |   ├── platformer/
|   ├── html-components/
|   |   ├── register.html
|   |   ├── login.html
|   |   ├── games-list.html
|   |   ├── user-profile.html
|   |   ├── store.html
|   |   ├── broadcaster.html
|   ├── index.html
|   ├── app-icon.ts
|   └── app.ts
└── server/
|   ├── package.json
|   ├── package-lock.json
|   ├── server-config.js
|   ├── database/
|   |   ├── database.js
|   |   ├── common/
|   |   ├── email/
|   |   |   ├── templates/
|   |   |   |   ├── confirmation.html.js
|   |   |   ├── nocommit.js (no commited for now)
|   |   └── data/ (ignored - db system folder)
|   ├── rtc/
|   |   ├── server.ts
|   |   ├── connector.ts
|   |   ├── self-cert/

Server part

Installed database: mongodb@3.1.8

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

-Run services database server (Locally and leave it alive to develop process):

  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".

- A command for killing all node.js process 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 signalling and controlling multimedia sessions.

General networking config:

Config property defined in constructor from ServerConfig class.

    this.networkDeepLogs = false;
    this.rtcServerPort = 12034;
    this.rtc3ServerPort = 12034;
    this.connectorPort = 1234;
    this.domain = "192.168.0.14";
    this.masterServerKey = "multi-platformer-sever1.maximum";
    this.protocol = "http";
    this.isSecure = false;
    this.appUseAccountsSystem = true;
    this.appUseVideoChat = true;
    this.databaseName = "masterdatabase";
    this.databaseRoot = "mongodb://localhost:27017";

- The running server is easy :

  npm run rtc

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

  • Implemented video chat based on webRTC protocol.

- Running rtc3 server is also easy :

Command 'npm run broadcaster' is not necessary for beginners. Features come with broadcaster:

  • Multiplatform video chat works with other hybrid frameworks or custom implementation throw the native mobile application web control (Chrome implementation usually tested).
  npm run broadcaster

Documentation :

Beta version for documentation. API Documentation

If you wanna generate doc you will need manual remove the comment from plugin section in webpack.config.js. Restart 'npm run dev' Best way to fully healthy build. HTML/CSS is not prior to 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'

The external licence in this project :

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

- Base physics based on :
Original source: Matter.js
https://github.com/liabru/matter-js
Matter.ts Used because typescript orientation.
https://www.npmjs.com/package/@types/matter-js

Crypto icons downloaded from https://www.behance.net/JunikStudio

Todo list for 2019

I'm still far away from the project objective :

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

Live demo Platformer