We can fight - 2020Out of space - 2021 I use my own concept: take lib for 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 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.
No video recording for now (next features).
npm i visual-tsUsage examples on: https://github.com/zlatnaspirala/visual-ts-module/
No strange logs - No need for forums just follow stackoverflow.com and wc3.
Fast console log access, tracking code
no single eval ('popular' js frameworks usually are based on eval)
Fast rebuild
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. npm installCommand (current: single player solution build):
npm run devCommand current: single player solution build, multiplayer platformer basketBall chat (dev) :
npm run dev-allOutput:
├── 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
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 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-allOutput:
├── build/ (This is auto generated) | ├── multiplayer/ | ├── singleplaye/ | ├── 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 any proporsion.
Already implemented:
-video chat webRTC (SIP) chat and data communication.
-multiRTC2 for old version of brosers (UDP/TCP)
-multiRTC3 for all modern browser's and hybryd implementation
(android, ios etc.) (UDP/TCP)
-Simple facebook api script (addson).
-Class 'Connector' (native webSocket) used for user session staff. For main account session staff like login, register etc.
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
/**
* ClientConfig is config file for whole client part of application.
* It is a better to not mix with server config staff.
* All data is defined like default private property values.
* Use mmethod class to get proper.
* Class don't have any args passed.
*/
class ClientConfig {
/**
* Addson - Role is : "no dependencies scripts only"
* All addson are ansync loaded scripts.
* - hackerTimer is for better performace also based on webWorkers. Load this script on top.
* - Cache is based on webWorkers.
* - dragging is script for dragging dom elements taken from stackoverflow.com.
* - facebook addson is simple fb api implementation.
* - adapter is powerfull media/communication fixer(Objective : working on all moder browsers).
*/
private addson: Addson = [
{
name: "cache",
enabled: false,
scriptPath: "externals/cacheInit.ts",
},
{
name: "hackerTimer",
enabled: true,
scriptPath: "externals/hack-timer.js",
},
{
name: "dragging",
enabled: true,
scriptPath: "externals/drag.ts",
},
{
name: "adapter",
enabled: true,
scriptPath: "externals/adapter.js",
},
{
name: "facebook",
enabled: false,
scriptPath: "externals/fb.js",
},
];
/**
* @description This is main coordinary types of positions
* Can be "diametric-fullscreen" or "frame".
* - diametric-fullscreen is simple fullscreen canvas element.
* - frame keeps aspect ratio in any aspect.
* @property drawReference
* @type string
*/
private drawReference: string = "frame";
/**
* aspectRatio default value, can be changed in run time.
* This is 800x600, 1.78 is also good fit for lot of desktop monitors screens
*/
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";
// private domain: string = "localhost";
/**
* @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 = true;
/**
* networkDeepLogs control of dev logs for webRTC context only.
*/
private networkDeepLogs: boolean = false;
/**
* masterServerKey is channel access id used to connect
* multimedia server channel.Both multiRTC2/3
*/
private masterServerKey: string = "maximumroulette.server1";
/**
* 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;
/**
* appUseAccountsSystem If you don't want to use session
* in your application just setup this variable to the false.
*/
private appUseAccountsSystem: boolean = true;
/**
* appUseBroadcaster Disable or enable broadcaster for
* video chats.
*/
private appUseBroadcaster: boolean = true;
/**
* 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;
private showBroadcasterOnInt: boolean = true;
/**
* broadcaster socket.io address.
* Change it for production regime
*/
// private broadcastSockRoute: string = "https://maximumroulette.com:9001/";
// private broadcastSockRoute: string = "https://localhost:9001/";
/**
* broadcaster socket.io address.
* Change it for production regime
*/
private broadcastAutoConnect: boolean = false;
/**
* runBroadcasterOnInt load broadcaster
*/
private runBroadcasterOnInt: boolean = true;
/**
* broadcaster rtc session init values.
* Change it for production regime
*/
private broadcasterSessionDefaults: IBroadcasterSession = {
sessionAudio: true,
sessionVideo: true,
sessionData: true,
enableFileSharing: true,
};
private stunList: string[] = [
"stun:stun.l.google.com:19302",
"stun:stun1.l.google.com:19302",
"stun:stun.l.google.com:19302?transport=udp",
];
/**
* Possible variant by default :
* "register", "login"
*/
private startUpHtmlForm: string = "register";
private controls: {} = {
platformerPlayerController: true,
enableMobileControlsOnDesktop: true
};
private gameList: any[];
/**
* Implement default gamePlay variable's
*/
private defaultGamePlayLevelName: string = "public";
private autoStartGamePlay: boolean = false;
...
Fisrt game template is Platformer. This is high level programming in this software. Class Platformer run with procedural (method) level1. 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.
/**
import AppIcon from "./app-icon"; import GamePlay from "./examples/platformer/scripts/game-play"; import Ioc from "./controllers/ioc";
/**
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();
/**
#### About runup gameplay ####
In client-config :
`Disabled at the moment for single-player solution.`
javascriptprivate autoStartGamePlay: boolean = false;
If you setup 'autoStartGamePlay' to false you need to run gamePlay
with :
javascriptmaster.get.GamePlay.load()
Note : Only singleton object instance from master start with upcase letters.
### 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. 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.
<pre>
├── 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
| | | | ├── 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/
| | | ├── drawI.ts
| | | ├── global.ts
| | | ├── visual-components.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/
</pre>
## Server part ##
### Installed database : MongoDB server version: 3.5.6 ###
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):
```javascript
npm run dataserverLooks like this :
mongod --dbpath ./server/database/dataFix : "failed: address already in use" :
netstat -ano | findstr :27017
taskkill /PID typeyourPIDhere /FCent os:
mongod
db.changeUserPassword(‘admin’,’<new_password>’)
Also important "Run Visual Studio Code as Administrator".
-Command for kill all node.js procces for window users :
taskkill /im node.exe /FText-based protocol SIP (Session Initiation Protocol) used for signaling and controlling multimedia sessions.
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' 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 :
npm run rtcWith 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.Running rtc3 server is integrated.
If you wanna disable session-database-rtc2 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 mergeIn 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
Work with visualTs like package library will be full teste in next commits.
If you wanna generate doc you will need manual remove comment from plugin section in webpack.config.js. Restart 'npm run dev' Best way to fully healty build.
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 tslintor 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
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):
I'am still far a away from project objective :
http://apps.facebook.com/nidzica
Donate with any crypto value
Generated using TypeDoc