visual-js
Version:
[3.0.26] Prepare for npm usage. Special integration for matrix engine 1.9.0 Thunder.
426 lines (290 loc) • 11.5 kB
Markdown
# Application Programming Interface Documentation for Visual JS 1.0 - 2d part
-GAME_OBJECT is main object in this framework.Every game object can be text box , animation , collision no/off , webcam etc.
-*Default Name of program* (javascript object) : HELLO_WORLD
This is also root javascript object for canvas 2d app .
Prototype class name : PROGRAM (Only one program instance is possible for now )
#### Access method is :
```javascript
window[SYS.RUNNING_PROGRAMS[0]]
// access for default : HELLO_WORLD
```
<pre>
SYS.RUNNING_PROGRAMS[0] represent string value of canvas html tag id . Change this value by renaming canvas id intro index.html :
</pre>
```html
<canvas tabindex='1' width="1" height="1" id="HELLO_WORLD"></canvas>
```
#### Structure of -*<Default Name of program>* Default : HELLO_WORLD:
```javascript
PROGRAM = PROTOTYPE CLASS NAME
AUTO_UPDATE: [] (0)
BASELINE: "middle"
DO_GLOBAL_TRANSLATE: false
DRAW: function()
DRAW_INTERVAL: 5
ENGINE: ENGINE {PROGRAM_ID: "HELLO_WORLD", EVENTS: EVENTS, MODULES: Array, GAME_TYPE: "NO_PLAYER", KEYBOARD: KEYBOARD, …}
GAME_MAP: function()
GLOBAL_TRANSLATE: 0
MAP: GAME_MAP {TOTAL_LEFT: 2, TOTAL_RIGHT: 4, TOTAL_UP: 2, TOTAL_DOWN: 4, LEFT: function, …}
TRANSLATE: function(x)
UPDATE: function()
UPDATE_INTERVAL: 15
```
#### Access method is : ####
```javascript
window[SYS.RUNNING_PROGRAMS[0]].ENGINE
// access for default : HELLO_WORLD.ENGINE
```
## Structure of ENGINE
```javascript
ENGINE = $2
CREATE_MODUL: function(name)
DESTROY_MODUL: function(name)
DRAW_MODULES: function(s)
ENGINE_EDITOR: true
EVENTS: EVENTS {ROOT_ENGINE: ENGINE, CALCULATE_TOUCH_OR_CLICK: function, CALCULATE_TOUCH_MOVE_OR_MOUSE_MOVE: function, CALCULATE_TOUCH_UP_OR_MOUSE_UP: function, CALCULATE_TOUCH_DOWN_OR_MOUSE_DOWN: function}
EXIT_EDIT_MODE: function()
GAME_TYPE: "NO_PLAYER"
GO_TO_EDIT_MODE: function()
GUI: {VISIBLE: false, BUTTONS: Array, CHECK_ON_START: function, GRID: Object, LIST_OF_OBJECTS: Object}
KEYBOARD: KEYBOARD {CAPTURE_CHAR: "0", CLEAR_CAPTURE_ON_PRESS_ENTER: true, LAST_CAPTURE_CHAR: "s", ENTER_PRESSED: false, SHIFT_PRESSED: false, …}
MODULES: [MODUL, MODUL] (2)
PROGRAM_ID: "HELLO_WORLD"
UPDATE_MODULES: function()
```
#### 1) Adding new game object (name will be 'GO' ): ####
```javascript
/*
x , y , w , h is percentage taken from you canvas html tag width/height
speed is movement step value
*/
HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT("GO" , x , y , w , h , speed )
HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT( "GO" , 45 , 45 , 10 , 10 , 10)
```
#### 2) Adding image or animation:
Images objects data are stored intro RESOURCE object
```javascript
/*
DRAW TYPE can be
'DRAW_FRAME' no animation , draw single image
'LOOP' playing animation
*/
// this number '1111123123' is ID can be any number
// ANIMATION ( surf ,TYPE_, FrameIndex ,source , PARENT , ID , blink_ , min_ , max_ , step , speed_ , opacity_ )
HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").GAME_OBJECTS.ACCESS("GO").CREATE_ANIMATION( SURF , "DRAW_FRAME" , 6 , RESOURCE.Tiles , 1111123123 , "no" , 1,11,1,1,1)
```
#### 3) Disable draging ####
```javascript
GO.DRAG = false;
// RESOURCE.Tiles >>> add folder "Tiles" with images in folder /res/ and run node res.js
// refresh page and you will get RESOURCE.Tiles ready for use !
// MAKE MODULE ACCESS EASY
var STARTER = HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER");
STARTER.GAME_OBJECTS.ACCESS("GO").CREATE_ANIMATION( SURF , "DRAW_FRAME" , 6 , RESOURCE.Tiles , 1111123123 , "no" , 1,11,1,1,1)
// DRAG initial value is true
GO.DRAG = false;
```
#### 3.1) Make quard shape of your game_object ####
```javascript
// setup quard height = width
GO.POSITION.DIMENSION.H = GO.POSITION.DIMENSION.W;
```
#### 4) EVENTS FOR MOUSE AND MOBILE TOUCH ####
ADD CLICK EVENT ( click also touchstart )
```
// CLICK OR TOUCH START
GO.TAP = function(){
// this make point directing to the game object instance
// this.NAME or this.ANIMATION.CURRENT_FRAME
};
```
#### ADD MOUSE DOWN or TOUCH_DOWN EVENT #####
```javascript
GO.TOUCH_DOWN = function(){
STARTER.DESTROY_OBJECT("GO")
console.log("THIS MUST BE EXECUTED ON MOUSE DOWN or TOUCH_DOWN : " + this.NAME);
// this.DESTROY_ME_AFTER_X_SECUND( 100 );
// console.log("THIS MUST BE TERMINATED ON CLICK : " + this.NAME);
};
```
#### ADD MOUSEOVER OR MOBILE TOUCH_MOVE EVENT ####
```javascript
GO.TOUCH_MOVE = function(){
console.log("HOVER ON OBJECT OR MOBILE TOUCH_MOVE : " + this.NAME);
};
```
#### ADD MOUSE_UP OR TOUCH_UP EVENT ####
```javascript
GO.TOUCH_UP = function(){
console.log("TOUCH_UP ON OBJECT OR MOBILE TOUCH_UP : " + this.NAME);
};
```
### Object SYS ###
Object SYS contains operations that are not directly related to the canvas program . They holds document staff : work with DOM elements , math objects etc.
#### Structure of SYS
```javascript
Object = $3
ARRAY_OPERATION: {REMOVE_ALL_ITEMS_WITH_VALUE: function, DEEP_COPY: Object}
BROWSER: DETECTBROWSER {NAVIGATOR: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) Ap… (KHTML, like Gecko) Version/9.1.2 Safari/601.7.7", NAME: "unknown", NOMOBILE: 1}
CAMERA: {SUPPORT: false}
DEBUG: LOG {ENABLE: true, LOG: function, WARNING: function, CRITICAL: function, NETWORK_LOG: function}
DOM: DOM {E: function, ACCESS_IFRAME: function, GOTO: function, UPLOAD_FILE: function, CREATE_SURFACE: function, …}
LOCAL_STORAGE: {}
MATH: {NUMBER_ROUND: function, RANDOM_INT_FROM_TO: function, TO_DEGREES: function, TO_RADIANS: function, OSCILLATOR: function, …}
MOUSE: {x: 383, y: 252, PRESS: false, BUTTON_PRESSED: null, ON_RIGHT_BTN_PRESSED: function, …}
READY: true
RES: {SUM_OF_LOADED_IMAGES: 99, CREATE_IMG: function}
ROOT: Window {LISTEN: function, validateEmail: function, setNoteReady: function, MODUL: function, threshold: function, …}
RUNNING_PROGRAMS: ["HELLO_WORLD"] (1)
SCRIPT: {SCRIPT_ID: 19, SINHRO_LOAD: {}, LOAD: function}
SOUND: {GEN: function, RES: AUDIO_RES}
VOICE: {SPEAK: function, LISTEN: function}
XML: {READ: function}
```
#### Access method is : ####
```javascript
SYS
```
BROWSER SubObject of SYS
SYS.BROWSER is instance of prototype class DETECT_BROWSER . No need for new instance . On startup they already exist and ready for access.
Detect browser type and device platform . For example
Access method is :
```javascript
SYS.BROWSER
// or
SYS.BROWSER.NAME
// ENUMERATORS FOR prop NAME
/*
mobile_firefox_android
mobile_firefox_android_tablet
opera_mobile_android
opera_mobile_android_tablet
safari_mobile_iphone
mobile_safari_chrome_ipad
desktop_safari
android_native
mobile_chrome_android_tablet
mobile_chrome_android
chrome_browser
firefox_desktop
opera_desktop
*/
// ENUM also can be : unknown
// other property
SYS.BROWSER.NOMOBILE
// 0 value - This is Mobile device
// 1 value - This is Desktop device
```
#### subObject SYS.DOM ####
SYS.DOM works with DOM HTML elements .
Access method is :
```javascript
SYS.DOM
```
Examples :
SYS.DOM.removeElement (parentDiv, childDiv);
or
SYS.DOM.removeElement (parentDiv);
Other procedural functions
Validate email
Name : validateEmail
Type : function return boolean
Access method is :
```javascript
// validate string for email
validateEmail(email)
```
Set localStorage value
Name : LS_SET
Type : function - no return value
Access method is :
```javascript
// Save data to the localstorage
LS_SET(name,value)
```
Get value from localStorage
Name : LS_GET
Type : function - return value from storage
Access method is :
```javascript
// Save data to the localstorage
LS_GET(name)
```
Name : SAVE
Type : function - no return value
(new feature return value pass or not)
Access method is :
```javascript
// Save Object data to the localstorage
SAVE(name , obj)
```
[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"
Application Programming Interface Documentation for Visual JS 0.5 >
GAME_OBJECT is main object in this framework.
1) Adding new game object (name will be 'GO' ):
HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT("GO" , x , y , w , h , speed )
HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT( "GO" , 45 , 45 , 10 , 10 , 10)
2) Adding image or animation :
// DRAW TYPE can be
// 'DRAW_FRAME' no animation
// 'LOOP' playing animation
// this number '1111123123' is ID can be any number
//ANIMATION ( surf ,TYPE_, FrameIndex ,source , PARENT , ID , blink_ , min_ , max_ , step , speed_ , opacity_ )
HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").GAME_OBJECTS.ACCESS("GO").CREATE_ANIMATION( SURF , "DRAW_FRAME" , 6 , RESOURCE.Tiles , 1111123123 , "no" , 1,11,1,1,1)
3)Disable draging
GO.DRAG = false;
// RESOURCE.Tiles >>> add folder "Tiles" with images in folder /res/ and run node res.js
// refresh page and you will get RESOURCE.Tiles ready for use !
// MAKE MODULE ACCESS EASY
var STARTER = HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER");
STARTER.GAME_OBJECTS.ACCESS("GO").CREATE_ANIMATION( SURF , "DRAW_FRAME" , 6 , RESOURCE.Tiles , 1111123123 , "no" , 1,11,1,1,1)
//DRAG initial value is true
GO.DRAG = false;
//setup quard height = width
GO.POSITION.DIMENSION.H = GO.POSITION.DIMENSION.W;
4) EVENTS FOR MOUSE AND MOBILE TOUCH HANDLED
//CLICK OR TOUCH START
GO.TAP = function(){
//this make point directing to the game object instance
// this.NAME or this.ANIMATION.CURRENT_FRAME
};
GO.TOUCH_DOWN = function(){
STARTER.DESTROY_OBJECT("GO")
console.log("THIS MUST BE TERMINATED ON MOUSE DOWN or TOUCH_DOWN : " + this.NAME);
//this.DESTROY_ME_AFTER_X_SECUND( 100 );
//console.log("THIS MUST BE TERMINATED ON CLICK : " + this.NAME);
};
GO.TOUCH_MOVE = function(){
console.log("HOVER ON OBJECT OR MOBILE TOUCH_MOVE : " + this.NAME);
};
GO.TOUCH_UP = function() {
console.log("TOUCH_UP ON OBJECT OR MOBILE TOUCH_UP : " + this.NAME);
};
//
### Try online - 2d canvas part of project
- Add new game Object with single image
https://jsfiddle.net/zlatnaspirala/rjf0xe0a/
- Use For loop for creating objects
https://jsfiddle.net/zlatnaspirala/noax17kz/
- Visual JS -Add Webcam to Object
https://jsfiddle.net/zlatnaspirala/xsffd9v6/
- Add webcam with motion detect
https://jsfiddle.net/zlatnaspirala/j60hh052/
- ZoomIn/ZoomOut game_object effect
https://jsfiddle.net/zlatnaspirala/pjjow5q6/
- Translate object
https://jsfiddle.net/zlatnaspirala/0tt6rmnq/
- Rotate object ( OSCILLATOR class )
https://jsfiddle.net/zlatnaspirala/1x7bq0gf/
- Add particle
https://jsfiddle.net/zlatnaspirala/hoe9auLm/
- Add textbox
https://jsfiddle.net/zlatnaspirala/0u5j1ap8/
- Webcam image manipulation (webcam - frame by frame)
https://jsfiddle.net/zlatnaspirala/u2f9wbzh/
- You can draw any native js canvas2d example in visual-js
https://jsfiddle.net/zlatnaspirala/p4n98p9n/
- Create animation paths
https://jsfiddle.net/zlatnaspirala/dpejur8y/
#### View all at
https://jsfiddle.net/user/zlatnaspirala/fiddles/