• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Game development
  1. MDN
  2. Game development
  3. Visual-js game engine

Visual-js game engine

In This Article
  1. Full name : Visual-js Multiplatform Game engine
  2. Visual-JS Source editor  

Full name : Visual-js Multiplatform Game engine

windows GUI application version 1.0 (using visual-js 0.9 lib)
Important : you will need NET 4.5.2 minimum also redistribution pack for c++


Take a look Project Setting window : 

How to start project ?

1) Click CREATE APPLICATION 
2) Enter new application name in input prompt
3) Select folder for server part of application (important : www is not secure place)
4) Select folder for client part of application ( any path in www)
5) New app name will appear in project list , select and click OPEN APPLICATION

6) Open your server folder : 

Install node.js modules 

One way - Use windows bat-s file (in server root folder with prefix install_ )

Second way - open cmd terminal and enter next command : 

  • npm install mysql
  • npm install delivery
  • npm install express
  • npm install mkdirp
  • npm install socket.io
  • npm install nodemailer@0.7.0

Very easy installation and project files generator .

Now you can use On-Page-Editor (nice for visual setup , checking positions and dimensions - not for logic ) . manual start from cmd : server_folder/node editor.js

After starting On-Page-Editor open browser icon to open internet browser in editor mode . See video explanation : 

If you use editor.js to visual create game object method , you must start ***node build_from_editor_to_visual_js_file.js*** on the end of work.
This tool will create visual.js in folder starter/ with all your game object was created in editor style .

or you can use Visual-JS Source editor.

 

Visual-JS Source editor
 

is new and better way .In future visual staff will be better (real time simulator will be implemented).For now this place is good for coding .

Visual-js works direct with project files , no need for build .

Add->New game object (form dialog for define type of new game object )
Add->Quick code (make your work faster - add usually code blocks)
Resources - explorer view for images and audios , you can drag or edit also need to execute node build_resources for creating resources object for engine.
Inserting new code will be always at current line selected intro editor .
Save on drop menu or better with ctrl+s before testing in browsers. 

Adding new script explanation : 

After adding new script and save script if you have extra changes , open starter/run.js and you will found line : 

SYS.SCRIPT.LOAD("scripts/new_script.js") 

ctrl+S 

Use from menu Run->Choose browser for testing . - important safari not working at the moment

chrome , firefox , opera 

Free slot mashine basic demo at : 

https://jsfiddle.net/zlatnaspirala/7d0d8v6d/

Download link from repo server

Document Tags and Contributors

Tags: 
  • game engine
  • HTML5
  • JavaScript
  • Tools
  • visual-js
 Contributors to this page: bunnybooboo, zlatnaspirala
 Last updated by: bunnybooboo, Apr 16, 2017, 6:48:51 AM
  1. Introduction
    1. Introduction to game development for the Web
    2. Anatomy of a video game
    3. Examples
  2. APIs for game development
    1. Canvas
    2. CSS
    3. Full Screen
    4. Gamepad
    5. IndexedDB
    6. JavaScript
    7. Pointer Lock
    8. SVG
    9. Typed Arrays
    10. Web Audio
    11. WebGL
    12. WebRTC
    13. Web Sockets
    14. WebVR
    15. Web Workers
    16. XmlHttpRequest
  3. Techniques
    1. Using async scripts for asm.js
    2. Optimizing startup performance
    3. Using WebRTC peer-to-peer data channels
    4. Efficient animation for web games
    5. 3D games on the Web
      1. 3D games on the Web overview
      2. Explaining basic 3D theory
      3. Building up a basic demo with A-Frame
      4. Building up a basic demo with Babylon.js
      5. Building up a basic demo with PlayCanvas
      6. Building up a basic demo with Three.js
      7. Building up a basic demo with Whitestorm.js
      8. WebVR

    6. Audio for Web Games
    7. 2D collision detection
    8. 3D collision detection
      1. 3D collision detection overview
      2. Bounding volume collision detection with THREE.js
    9. Tiles and tilemaps
      1. Tiles and tilemaps overview
      2. Static maps
      3. Scrolling maps
    10. Implementing game control mechanisms
      1. Game control mechanisms overview
      2. Mobile touch controls
      3. Desktop mouse and keyboard controls
      4. Desktop gamepad controls
      5. Unconventional controls
  4. Tutorials
    1. 2D breakout game using pure JavaScript
    2. 2D breakout game using Phaser
    3. 2D maze game with device orientation
    4. 2D platform game using Phaser
  5. Publishing games
    1. Publishing games overview
    2. Game distribution
    3. Game promotion
    4. Game monetization