2d canvas game engine based on Matter.ts 2D physics engine for the web supported with realtime communication, backend node.js/mongoDB and visual GUI tool 2d map creator/python3, visual-ts correspondent with mongoDB [Its not only for games you have basic
npm install visual-ts1.0.0 2025 BETAtake lib only for the great benefits. It means that i import only stuff that i can't make in proper way in proper time, all other coming from head. For example Physics was imported in role of npm package for typescript matter.js/ts variant and i keep dependency healthy.
record-canvas.
npm i visual-ts usable.
git clone --recurse-submodules https://github.com/zlatnaspirala/visual-ts-game-engine
full-duplex connections based on webRTC [middleware/node.js] based on kurento OV server.
inself closed. Every intervention or used
Visual Studio Code [1.95.x].
Javascript Debug Terminal.
Matter.js - Matter.ts (npm project).
creator-2dmap python script. After installation of all needed modules vie pip3 for python3, you need to run:
git clone --recurse-submodules https://github.com/zlatnaspirala/visual-ts-game-engine
npm run creator
js
// Windows
python.exe tool.py
// Macos - linux
python3 ./tool.py
`
Possible bug on oldies linux os mint. Bug related with tkinter lib.
You need to change self.absolutePacksPath from defaults.py config file.
Put example platformer pack folder path: src\examples\platformer\scripts\packs but path must be absolute, my personal path is (For windows users : use double \ for escape ):
This is example for windows users:
`bash
E:\\web_server\\xampp\htdocs\\PRIVATE_SERVER\\visual-ts\\project\\visual-ts\\src\\examples\\platformer\\scripts\\packs\\"
`
!Creator 2d map
This is separated and added like git submodules.
- This is freeware / opensource. There is no any limitation in this project.
You can use video stream as gamePlay objects , multiplayer feature is also free.
- Please don't use fake email address to test public maximumroulette.com platformer example.
Project even in dev stage is totally production approach. You can't pass registration with fake email.
Just clone, install and run in local (client & server). You need to install and run also MongoDB on
your system. Change flag in databased confimed to the true value to skip registration confirmation process.
Client part
#### To make all dependency works in build proccess we need some plugins.
`javascript
npm install
`
Command (current: single player solution build):
`javascript
npm run dev
// or
npm run dev-all
`
Output for (npm run dev):
├── build/ (This is auto generated)
| ├── externals/
| ├── imgs/
| ├── styles/
| ├── templates/
| ├── app.html
| ├── manifest.web
| ├── offline.html
| ├── visualjs2.js
| ├── worker.js
Navigate in browser /build/app.html to see client app in action
$3
Command is npm run dev-all . This is test for multi instancing webpack capabilities.
Webpack in this case use webpack.multicompile.config.js.
Thanks for common object definition:
This is best place to manage status of your build action.
Just comment or uncomment specific webpack object in this place =>
webpack.multicompile.config.js
`javascript
module.exports = [
webPackModuleMultiPlayerSolution,
webPackModuleSingleSimpleSolution,
webPackModuleMultiChatBasketBall,
webPackModuleTutorialsDemo1,
// webPackModuleTutorialsDemo2 DISABLE HERE WHOLE SUB BUILD
];
`
Point of Multi entries is to make independent healthy builds end point
for our application. Current export's for 3 solutions looks like
(runs webpack.multicompile.config.js) :
Command:
`javascript
npm run dev-all
`
Output (npm run dev-all):
├── build/ (This is auto generated)
| ├── multiplayer/
| ├── singleplaye/
| ├── demo1/
| ├── demo2/
| ├── sprite-animation/
| ├── basket-ball-chat/ [WIP]
-Client part is browser web application. No reloading or redirecting. This is 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. This is good cross for old
fasion native programmers not for web server REST oriented skills. No mix in communication usage.
You must be conform with classic socket connection methodology and your own idea about connections.
webRTC can be used for many proporsion.
Already implemented:
- video chat webRTC (SIP) chat and data communication.
based on multiRTC3 for all modern browser's and hybryd implementation
(android, ios etc.) (UDP/TCP). Running on socket.
- Bonus connections options - Coordinator another brodcaster.
Parallel multiRTC connections. Coordinator is disabled by default
but can be used in same way just like broadcaster.
- Simple facebook api script (addson).
-Class 'Connector' (native webSocket) used for user session staff.
- For main account session staff like login, register etc.
$3
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 or enabled depens on current dev status.
Find configuration for client part at ./src/lib/client-config.ts
Please read About Client Configuration
$3
- First game template is Platformer.
This is high level programming in this software. Class Platformer run
with . Class Starter is base class for my canvas part
(matter.js/ts).
It is injected to the Platformer to make full operated work.
- gamesList args for ioc constructor is for now just simbolic for now. (WIP)
- In ioc you can make strong class dependency relations.
Use it for your own structural changes. If you want to make light version for build
than use ioc to remove everything you don't need in build.
ioc.ts files located at: src\controllers. In ioc file i import choosen classes and
create instance or bind. Ioc also save (singleton) instance's and we never make same
class instance again (this is the role). We just call game.ioc.get.NAME_OF_INSTANCE.
Object .get is key access object not array.
Best practice is to use only one ioc. In that way you will get clear build without
big shared in most time unnecessary data. If you application is big project.Than
best way is still use one ioc.ts for per web page. In that way i use refresh
or redirect moment to load optimised script bundle for current page.
#### Main dependency file
- Current version:
`typescript
/**
* Import global css
*/
require("./style/animations.css");
require("./style/styles.css");
import AppIcon from "./app-icon";
import GamePlay from "./examples/platformer/scripts/game-play";
import Ioc from "./controllers/ioc";
/**
* plarformerGameInfo
* This is strong connection.
* html-components are on the same level with app.ts
* Put any parameters here.
*/
const plarformerGameInfo = {
name: "Platformer",
title: "Start Platformer game play",
};
const gamesList: any[] = [plarformerGameInfo];
const master = new Ioc(gamesList);
const appIcon: AppIcon = new AppIcon(master.get.Browser);
master.singlton(GamePlay, master.get.Starter);
console.log("Platformer: ", master.get.GamePlay);
master.get.GamePlay.attachAppEvents();
/**
* Make it global for fast access in console testing.
* (window as any).platformer = master.get.GamePlay;
*/
(window as any).master = master;
(window as any).platformer = master.get.GamePlay;
`
$3
Setup in client-config.ts:
`ts
public recordCanvasOption: any = {
injectCanvas: () => document.getElementsByTagName("canvas")[0],
frameRequestRate: 30,
videoDuration: 20,
outputFilename: "record-gameplay.mp4",
mineType: "video/mp4",
resolutions: '800x600'
}
`
You can use this call:
`ts
platformer.starter.ioc.get.RecordGamePlay.recordCanvas.run();
`
#### About runup gameplay
@Note Somethimes i override autoStartGamePlay!
In client-config :
Disabled at the moment for single-player solution.
javascript
`
private autoStartGamePlay: boolean = false;
`
If you setup 'autoStartGamePlay' to false you need to run gamePlay
with :
javascript
`
master.get.GamePlay.load()
`
Note : Only singleton object instance from master start with upcase letters.
$3
- 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. I use one git repo
but consider '/server' represent standalone application. There's server
package.json independently from client part also config is not the common.
I just like it like that.
├── package.json
├── package-lock.json
├── webpack.config.js
├── tsconfig.json
├── tslint.json
├── launch.json
├── workplace.code-workspace
├── LICENCE
logo.png
LICENSE
├── build/ (This is auto generated)
| ├── externals/
| ├── templates/
| ├── imgs/
| ├── styles/
| | └── favicon.ico
| ├── visualjs2.js
| ├── app.html
├── src/
| ├── style/
| | ├── styles.css
| ├── controllers/
| | ├── ioc.ts
| | ├── ioc-single-player.ts
| ├── libs/
| | ├── class/
| | | ├── networking/
| | | | ├── rtc-multi-connection/
| | | | | ├── FileBufferReader.js
| | | | | ├── RTCMultiConnection2.js
| | | | | ├── RTCMultiConnection3.js
| | | | | ├── linkify.js
| | | | | ├── getHTMLMediaElement.js
| | | | | ├── socket.io.js
| | | | ├── broadcaster.ts
| | | | ├── coordinator.ts
| | | | ├── connector.ts
| | | | ├── network.ts
| | | ├── visual-methods/
| | | | ├── sprite-animation.ts
| | | | ├── text.ts
| | | | ├── texture.ts
| | | ├── bot-behavior.ts
| | | ├── browser.ts
| | | ├── math.ts
| | | ├── position.ts
| | | ├── resources.ts
| | | ├── sound.ts
| | | ├── system.ts
| | | ├── view-port.ts
| | | ├── visual-render.ts
| | ├── interface/
| | | ├── controls.ts
| | | ├── drawI.ts
| | | ├── global.ts
| | | ├── visual-components.ts
| | | ├── networking.ts
| | ├── multiplatform/
| | | ├── mobile/
| | | | ├── player-controls.ts
| | | ├── global-event.ts
| | ├── types/
| | | ├── global.ts
| | ├── client-config.ts
| | ├── ioc.ts
| | ├── starter.ts
| ├── icon/ ...
| ├── examples/
| | ├── platformer/
| | ├── platformer-single-player/
| | ├── basket-ball-chat/
| | ├── tutorials/ (Most simple example of usage)
| | | ├── add-camera-stream-to-gameplay/
| | | ├── add-element/
| ├── html-components/
| | ├── register.html
| | ├── login.html
| | ├── games-list.html
| | ├── user-profile.html
| | ├── store.html
| | ├── broadcaster.html
| ├── index.html
| ├── app-icon.ts
| └── app.ts
| └── manifest.web
└── 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/
$3
Enum: dev, prod, mongodb.net or mongodb.net-dev
Explanation for:
this.serverMode = "mongodb.net-dev";
If you wanna use mongod.net database but you wanna use it from localhost.
Multiplayer (with videochat or realtime net) still use https.
For single player variant you can use http.
$3
Audios are not loaded by defoult if you use it in IOC controller.
You create audio instance from code.
You can mute it all.
#### Add new sound
- Open webpack and add line:
[After this you need to restart webpack.]
`
new CopyWebpackPlugin([
...
// Audios
{from: "./src/examples/platformer-single-player/audios/player/dead.mp3", to: "audios/newAudio1.mp3"}
{from: "./src/examples/platformer-single-player/audios/player/dead.mp3", to: "audios/newAudio2.mp3"}
], { debug: 'warn' })
`
- Find nice place for creating instance:
`js
myInstance.starter.ioc.get.Sound.createAudio(
"./audios/newAudio1.mp3",
"newAudio1"
);
myInstance.starter.ioc.get.Sound.createAudio(
"./audios/newAudio2.mp3",
"newAudio2"
);
`
- Find place where you wanna run play:
`js
root.starter.ioc.get.Sound.playById("jump");
`
$3
#### About generating localhost certs
Read more about cert
serverMode dev od prod use https protocol to make full works on both regime (If you using multiplayer example).
You need to install cert (mmc.exe) (for User or local Mashine), also in browser:
$3
To get GUI tools first download python3 for your OS.
creator2dmap is python3 canvas oriented application.
`javascript
cd tools
git submodule init
git submodule update
// or
git clone --recurse-submodules https://github.com/zlatnaspirala/visual-ts-game-engine
// update
git fetch
git merge
`
In this way you will get project: https://github.com/zlatnaspirala/creator-2dmap
intro tools/creator2dmap/ folder.
Start application with:
`
python.exe tool.py (win)
./python3 tool.py (macos)
`
Documentation:
Follow link for API: [WIP]
Application documentation
Possible to install from (It's good for instancing new clear base project):
`
npm i --save visual-ts
`
Take a look this repo (it is example for approach npm i visual-ts)
https://github.com/zlatnaspirala/visual-ts-module
If you wanna generate doc you will need manual remove comment
from plugin section in webpack.config.js. Restart 'npm run dev'
If you wanna insert some new html page just define it intro
webpack.config.js:
`javascript
plugins :
new HtmlWebpackPlugin({
filename: '/templates/myGameLobby.html',
template: 'src/html-components/myGameLobby.html'
}),
...
`
- See register and login example.
$3
`javascript
npm run fix
npm run tslint
`
or use :
`javascript
tslint -c tslint.json 'src/*/.ts' --fix
tslint -c tslint.json 'src/*/.ts'
`
Abour visual tools
Based on python3 tk tech.It is standalone git project imported like
git submodule.
https://github.com/zlatnaspirala/creator-2dmap
[Important - About tools setup
After setup run python app from cli with command:
`javascript
npm run creator
``