• 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 GE

Visual JS GE

In This Article
  1. Installation and setup :
  2. Setup config.js
    1.  
  3. local node.js application tools (Use in developer mode only)
    1. On page editor 
      1. server_instance/editor.js
      2. - server_instance/build_from_editor_to_visual_js_file.js
      3. (node.js app for local use)
    2. Create RESOURCE js object ( ADD image or images for animation )
      1. server_instance/res.js
  4. VISUAL JS.exe Windows GUI freeware 
      1. only for windows users . 
      2. Visual_JS.exe Version : 1.0 comes with source editor .
      3. ML_SYS.exe - Multilanguage tool for string Labels . (Smart xml operation - No empty tags )
      4. CriptingJS.exe - Based on javascriptobfuscator.com API
      5. MakeLib.exe - Need fot bug fixing
      6. Video tutorial

"Visual-JS GameEngine" is a small but comprehensive game engine, canvas/websocket orientend. The Server is based on node.js, the client on a javascript framework, along with a windows GUI editor, and a game instance creator to complete the stack.

Installation and setup :

Download Visual-js from bitbucket. For windows users: extract the package in the same root folder, using windows tools.

Navigate to server_instance/

1) Install modules :

In the node.js command prompt or console, enter the following installation commands:

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

Setup config.js

You will find config.js in the server_instance folder: All node.js application use the same folder, server_instance. Some apps might prefer using have local storage, for instance, editor.js.

module.exports = {
   VERSION : "0.5",
   PATH_OF_NODE_APP : "D:/PATH_TO_SERVER_INSTANCE_FOLDER/server/" ,  // EDIT HERE
   PATH_OF_WWW : "D:/xamp/htdocs/project_instance/", // PATH_TO_WWW  EDIT HERE
   EDITOR_PORT : "1013",
   REG_PATH : "users/",
   ACCOUNT_PORT  : 3666 , 
   DESTROY_SESSION_AFTER_X_mSECUNDS : 20000,
};

 

local node.js application tools (Use in developer mode only)

 

On page editor 

server_instance/editor.js

- server_instance/build_from_editor_to_visual_js_file.js

(node.js app for local use)

       ** ON-PAGE Editor**
      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 .
Create game objects direct in web browser view. Takes data from system folder lib/visual_scripts/ and generate code.
After build you can found your code intro visual.js 

 

Create RESOURCE js object ( ADD image or images for animation )

server_instance/res.js

       Put image or images in one folder for example TEST_RES/  . Put that folder in this location **project_instance/res/** .
       run command :
server_instance/node res.js 
       After finishing restart web page ind enter in console :  RESOURCE.TEST_RES
       RESOURCE have all images path data. When you create folder with image and build with *node res.js* we did not create images object.
       Images object will be created after you add animation to the game objects. 
       This is good because memory safe.

 

VISUAL JS.exe Windows GUI freeware 

only for windows users . 

Visual_JS.exe Version : 1.0 comes with source editor .

ML_SYS.exe - Multilanguage tool for string Labels . (Smart xml operation - No empty tags )

CriptingJS.exe - Based on javascriptobfuscator.com API

MakeLib.exe - Need fot bug fixing

 

Video tutorial

Pencil component

Particle

Virtual kayboard

 

 

Document Tags and Contributors

 Contributors to this page: bunnybooboo, zlatnaspirala
 Last updated by: bunnybooboo, Apr 15, 2017, 1:01:48 PM
  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