Typescript project based on matter.ts, used webpack, GamePlay based on canvas2D. Multiplayer real time for platformer gameplay. Video chat webRTC supported by node.js signalling. MongoDB used for account session. Node.js for server part. Powerfull ! ®zlatnaspirala
MIT License
Old Version:
We can fight
- 2020Out of space
- 2021Lake of fire
- 2022Right now right here
2023Fron 0.7.0 VTS migrate to webpack5 version [If you have some trouble try to deleting node_modules/ and install again]
I use my own concept: take lib only for the great benefits
. It means that i import only staff 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. In
networking aspect i use full-duplex connection under web-rtc protocol. Pretty nice working
combination of physics and realtime-multiplayer connetions. PeerToPeer used for game-play
and classic websocket(socketio) for session staff. HTMLRequest used only for loading html
parts in run time (on request) because i want clear single page application with all PWA
features inside. Also video chat is integrated based on signaling server.
You can start recording canvas gameplay with implemented record-canvas
.
Take a look project examples on: https://github.com/zlatnaspirala/visual-ts-examples
It is nice starter project. Fixed all deps to make npm i visual-ts
usable.
full-duplex
connections based on webRTC/socket.io/websocket [node.js]inself
closed. Every intervention or usedVisual Studio Code
[1.66.0].Javascript Debug Terminal
.Matter.js - Matter.ts
(npm project).broadcaster
used for video chat also for data transfer.creator-2dmap
python script. After installation of all needed modules vie pip3 for python3, you need to run:@Note If you use
git clone --recurse-submodules https://github.com/zlatnaspirala/visual-ts-game-engine
Then run creator@dmap with npm run creator
// 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:
E:\\web_server\\xampp\htdocs\\PRIVATE_SERVER\\visual-ts\\project\\visual-ts\\src\\examples\\platformer\\scripts\\packs\\"
This is separated and added like git submodules.
production
approach. You can't pass registration with fake email.true
value to skip registration confirmation process. npm install
Command (current: single player solution build):
npm run dev
// or
npm run dev-all
Output for (npm run dev):
Navigate in browser /build/app.html to see client app in action
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
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:
npm run dev-all
Output (npm run dev-all):
-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:
-Class 'Connector' (native webSocket) used for user session staff.
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;
Find configuration for client part at ./src/lib/client-config.ts
Please read About Client Configuration
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.
/**
* 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;
Setup in client-config.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:
platformer.starter.ioc.get.RecordGamePlay.recordCanvas.run();
@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.
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
.
Audios are not loaded by defoult if you use it in IOC controller. You create audio instance from code. You can mute it all.
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' })
myInstance.starter.ioc.get.Sound.createAudio("./audios/newAudio1.mp3", "newAudio1");
myInstance.starter.ioc.get.Sound.createAudio("./audios/newAudio2.mp3", "newAudio2");
root.starter.ioc.get.Sound.playById('jump');
Updated to the last https://tecadmin.net/install-mongodb-on-centos/
-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): if you use (running) services mongod no need for this command.
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
Cent os:
mongod
db.changeUserPassword(admin,<new_password>)
taskkill /im node.exe /F
Text-based protocol SIP (Session Initiation Protocol) used for signaling and controlling multimedia sessions.
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:
Note:
This is only for localhost test running. On your public server (VPS) you will need to have SSL certification
(take a look for free SSL on great https://letsencrypt.org/). Then change in server-config.js
parameter
serverMode to prod
or mongodb.net
.
If you setup with prod
it means that you have runned mongodb on public mashine.
If you setup with mongodb.net
it means that you regiter free plan on mongodb.net services and you need to setup
freeService in databaseRoot:
this.databaseRoot = { dev: "mongodb://localhost:27017" , prod: "mongodb://userAdmin:PUT_YOU_PASSWORD@localhost:27017/admin", freeService: "mongodb+srv://userAdmin:[email protected]/masterdatabase?retryWrites=true&w=majority" };
.
Cert setup on production (certPathProd): this.certPathProd = { pKeyPath: "/etc/letsencrypt/live/maximumroulette.com/privkey.pem", pCertPath: "/etc/letsencrypt/live/maximumroulette.com/cert.pem", pCBPath: "/etc/letsencrypt/live/maximumroulette.com/fullchain.pem" };
Config property defined in constructor from ServerConfig class in interest way. With two defined flags dev & prod it is easy resolved boring problem with migration localhost - public server:
// enum : 'dev', 'mongodb.net' or 'prod'
this.serverMode = "dev";
this.networkDeepLogs = false;
this.rtcServerPort = 12034;
this.rtc3ServerPort = 9001;
this.connectorPort = 1234;
this.domain = {
dev: "localhost",
prod: "maximumroulette.com"
};
this.masterServerKey = "maximumroulette.server1";
this.protocol = "http";
this.isSecure = false;
// localhost
this.certPathSelf = {
pKeyPath: "./server/rtc/self-cert/privatekey.pem",
pCertPath: "./server/rtc/self-cert/certificate.pem",
pCBPath: "./server/rtc/self-cert/certificate.pem",
};
// production
this.certPathProd = {
pKeyPath: "/etc/httpd/conf/ssl/maximumroulette.com.key",
pCertPath: "/etc/httpd/conf/ssl/maximumroulette_com.crt",
pCBPath: "/etc/httpd/conf/ssl/maximumroulette.ca-bundle"
};
this.appUseAccountsSystem = true;
this.appUseBroadcaster = true;
this.databaseName = "masterdatabase";
this.databaseRoot = {
dev: "mongodb://localhost:27017" ,
prod: "mongodb://userAdmin:********@maximumroulette.com:27017/admin"
};
this.specialRoute = {
"default": "/var/www/html/applications/visual-typescript-game-engine/build/app.html"
};
- Running server is easy : From root folder (not from server folder). If you wanna use node.js debugger you need to fix path for the certs.
npm run rtc
With this cmd : npm run rtc we run server.js hosting
and connector.ts websocket session
and webrtc broadcaster.ts
.
Connector is our account session used for login, register etc.
Implemented video chat based on webRTC protocol. Running rtc3 server is integrated.
If you wanna disable session-database-rtc3 features and run only broadcaster
:
Features comes with broadcaster:
To get GUI tools first download python3 for your OS.
creator2dmap
is python3 canvas oriented application.
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)
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:
plugins : [
new HtmlWebpackPlugin({
filename: '/templates/myGameLobby.html',
template: 'src/html-components/myGameLobby.html'
}),
...
npm run fix
npm run tslint
or use :
tslint -c tslint.json 'src/**/*.ts' --fix
tslint -c tslint.json 'src/**/*.ts'
Based on python3 tk tech.It is standalone git project imported like git submodule.
https://github.com/zlatnaspirala/creator-2dmap
After setup run python app from cli with command:
npm run creator
ACTUALLY SERVER IS RUNNING - You need to register.
Visual Typescript Game engine is under:
except ./src/lib. Folder lib is under:
- Networking based on : Muaz Khan MIT License www.WebRTC-Experiment.com/licence
- Base physics beased on : Matter.js https://github.com/liabru/matter-js
Sprites downloaded from (freebies/no licence sites):
In Dreams by Scott Buckley | www.scottbuckley.com.au Music promoted by https://www.chosic.com/free-music/all/ Attribution 4.0 International (CC BY 4.0) https://creativecommons.org/licenses/by/4.0/
I'am still far a away from project objective :