Rect Engine 5 (RE-5) - is the object-oriented engine-framework made by Black Square Studios for 2D games development with JavaScript. Graphic engine in RE-5 is based on WebGL2 (browser adaptation of OpenGL3.0). Engine is suitable for small and big multiplayer games development as well. Engine has a flexible plugin system that expands its functionality. More lessons and guides to RE-5 you can find following this link.

• Install any local server or just use our small local server on Node.js
• Create project directory on the server
• Unpack this repository into that folder
• When you just open it in browser you sould see the tinged square rotating around and the caption "Rect Engine 5"

WARNING! You can use any comfortable to you code editor, cause there's no native IDE for the engine yet.

• Engine (engine files)
  • Shaders (shaders)
    • fragment-shader.glsl (fragment shader)
    • vertex-shader.glsl (vertex shader)
  • collision.js (collision detection)
  • engine.js (engine logic, program interface)
  • renderer.js (graphics engine shall)
  • renderCore.js (graphics engine core)
  • matrix.js (matrix maths)
  • vert.js (object vertices)
• Plugins (plugins)
• Scene (scenes)
  • new (scene files)
    • end.js (runs when the scene ends)
    • init.js (runs after the scene is initialized)
    • start.js (runs every time when the scene starts)
• Scripts (scripts)
  • assets.js (for setting up assets)
  • config.js (for setting up configurations and settings)
  • families.js (for families initializing)
  • sources.js (for source loading)
• Sources (sources)
  • audio (audio files)
  • images (textures, tilemaps)
  • json (JSON files)
  • glsl (shaders)
• index.html (runs engine.js and main.js)
• main.js (engine initialization)

In the main.js file there's the engine initializing, including all scripts from Scripts falder, creating scenes, scripts from the Scenes/scene name folder attaching to the scenes, switching to the certain scene.

In the config.js script there's all project and engine settings.

In the families.js script there's all families initializations

In the sources.js script there's all needed sources loading (textures, sounds, fonts...)

In the assets.js script there's all assets initializations.

You can add your own scripts in Scripts folder or in the folders of the scenes and include it wherever and whenever you want.

In the every folder of the scene there's 3 files:

• init.js - the script runs only at ones after the scene is initialized, there you have to create cameras, layers, most of the game objects, game loop for the scene and initialize all needed event listeners.
• start.js - the script runs every single time when the scene starts, here the game switches to the necessary camera, the engine settings change, the level starts, for example enemy takes their places on the level.
• end.js - the script runs every single time when the scene ends, game engine settings turns back to normal, the game progress could be saved.

• new RectJS()
• require()
• RectJS.Script()
• new RectJS.Scene()
• Scene.set()
• Scene.update()

• new RectJS.Vector2()
• Vector2.toString()
• Vector2.fromString()
• Vector2.len
• Vector2.angle
• Vector2.add()
• Vector2.sub()
• Vector2.mult()
• Vector2.div()
• Vector2.dot()
• Vector2.norm()
• Vector2.rot()
• Vector2.abs()
• vec2()
• rgb()
• rgba()
• colorRGB.toString()
• colorRGBA.toString()
• colorRGBA.toStringCSS()
• count()
• copy()
• log()
• RectJS.isObject()
• RectJS.checkSourceLoaded()

• new RectJS.Camera()
• Camera.set()
• new RectJS.Layer()
• new RectJS.Group()
• Group.isset()
• Group.add()
• Group.set()
• Group.remove()

• new RectJS.Polygon()
• new RectJS.Sprite()
• new RectJS.Text()
• Object.destroy()
• Object.setLayer()
• Object.getPoint()
• Object.update()

• new RectJS.GameLoop()
• Loop.start()
• Loop.stop()
• new RectJS.Interval()
• new RectJS.Wait()

• new RectJS.Texture
• RectJS.Image
• new RectJS.Tiled()
• new RectJS.Crop()
• new RectJS.Animation()
• RectJS.loadFont()
• RectJS.Font()
• RectJS.JSON()
• new RectJS.Sound()
• RectJS.Audio()
• Sound.play()
• Sound.stop()
• Sound.reset()
• Sound.restart()
• Sound.getDuration()
• Sound.setTime()
• Sound.getTime()
• Sound.setVolume()
• Sound.getVolume()
• Sound.bindObject
• Sound.unbindObject()

• new RectJS.Shader()
• new RectJS.Program()

• VS attribute vertex
• VS attribute UV
• VS attribute matrix
• VS attribute color
• VS varying vColor
• VS varying vUV
• VS uniform colorMode
• VS uniform uColor

• FS uniform tex
• FS varying vColor
• FS varying vUV

• new RectJS.Click()
• new RectJS.RightClick()
• new RectJS.MouseDown()
• new RectJS.MouseUp()
• new RectJS.MouseRightDown()
• new RectJS.MouseRightUp()
• new RectJS.MouseWheelDown()
• new RectJS.MouseWheelUp()
• new RectJS.MouseMove()
• new RectJS.Wheel()
• new RectJS.WheelUp()
• new RectJS.WheelDown()
• new RectJS.MousePress()
• new RectJS.TouchStart()
• new RectJS.TouchEnd()
• new RectJS.TouchMove()
• new RectJS.KeyDown()
• new RectJS.KeyUp()
• new RectJS.KeyPress()
• Event.start()
• Event.stop()
• RectJS.KeyPressed()
• new RectJS.Mouse()
• Mouse.get()
• new RectJS.Touch()
• Touch[index].get()

• new RectJS.Family()
• Family.get()
• Family.getByIndex()
• Family.isset()
• Family.for()
• Family.forNearTo()
• Family.count()
• Family.add()
• Family.remove()
• new RectJS.Asset()
• new Asset()

• RectJS.Collision()
• RectJS.getBoundingBox()
• RectJS.AABB()
• RectJS.MouseOver()

• RectJS.sourceHOST
• RectJS.engineSource
• RectJS.pluginSource
• RectJS.Path
• RectJS.scenePath
• RectJS.scriptPath
• RectJS.jsonPath
• RectJS.imagePath
• RectJS.audioPath
• RectJS.fontPath
• RectJS.container
• RectJS.WebGL_Canvas
• RectJS.ctx2D_Canvas
• RectJS.eventDetector
• RectJS.gl
• RectJS.ctx
• RectJS.client.w
• RectJS.client.h
• RectJS.resolution.w
• RectJS.resolution.h
• RectJS.canvas_width
• RectJS.canvas_height
• RectJS.con_width
• RectJS.con_height
• RectJS.CLEAR_COLOR
• RectJS.BG_COLOR
• RectJS.scenes
• RectJS.currentScene
• RectJS.layers
• RectJS.sources
• RectJS.images
• RectJS.textures
• RectJS.LOADER_MODE
• RectJS.sourceLoaded
• RectJS.timeStep
• RectJS.animations
• RectJS.cameras
• RectJS.currentCamera
• RectJS.waits
• RectJS.gameLoops
• RectJS.CUT_FPS
• RectJS.MAX_FPS
• RectJS.SFRM
• RectJS.events
• RectJS.MousePressed
• RectJS.RightMousePressed
• RectJS.families
• RectJS.FPS
• RectJS.render
• RectJS.renderCore
• RectJS.renderer
• RectJS.renderer.ACTIVE
• RectJS.renderer.DRAWING_MODE
• RectJS.renderer.DCPF
• RectJS.renderer.DEBUG_MODE
• RectJS.renderer.DEBUG_CONSOLE_MODE

• new RectJS.Plugin()

• callback <function> - this function takes the game engine instance as an argument
• sourceHOST <string> Default: "" - the realtive path from the index.html to main.js, engine and project folders.
• engineSource <string> Default: "Engine/" - the path from the folder set up in sourceHOST to the engine folder.
• pluginSource <string> Default: "Plugins/" - the path from the folder set up in sourceHOST to the plugins folder.
• eventDetector <object> Default: null - DOM element on the page to which all mouse event listeners is bound. If equal null, it sets by default to RectJS.eventDetector.

Engine initialization

• src <string> - relative path to the file
• type <string> Default: "JS" - file type
  • "JS" - JavaScript. The method returns an arrow function from the script.
  • "JSON" - JSON file. The method returns JavaScript-object from the JSON file.
  • "TEXT" - Simple text. The method returns a text from the file as a string.

Loading an external script. Returns a function.

WARNING! All available scripts actually are the arrow functions:

(params) => {
	// code here
}

or the function taken in the brackets:

(function (params) {
	// code here
})

WARNING! If you want variable to be accessible form all of the scripts it need to be global. There's 3 ways to do that:

• declare the variable missing the keyword ('const', 'let' or 'var') (recommended) variable = 1;
• declare the variable as a property of the window window.variable = 1;
• declare the variable beyound the "onload" event listener in the main.js script

let variable = 1;

window.addEventListener('load', e => {
...

• src <string> - path to the script relative to scripts folder (RectJS.scriptPath, Scripts/ by default)

Loading external script. Returns a function.

• name <string> - a name of the folder with scene files in the scenes folder (RectJS.scenePath, Scenes/ by default)
• initOnload <boolean> Default: true
  • true - initialization script runs emmidiately after the scene is declared
  • false - initialization script runs right before the first scene start
• id <string> Default: "scene_{scene number}" - scene indentifier

Scene initializer. Returns the scene instance.

!!!WARNING!!! To create a new scene you need to make a new folder with the name of the scene in Scenes/ directory and put 3 script files there:

• init.js - runs after the scene was initialized
• start.js - runs when the player go to the scene
• end.js - runs when the player leave the scene

These files will load automaticaly.

The init.js script example:

(scene) => {
	
	// create a camera
	
	// create some layers
	
	// objects, loops, listeners and game logics
	
}

The start.js or end.js script example:

(scene, params) => {
	
	// some code
	
}

• startParams <object> - parameters passes to the start.js script of the scene
• endParams <object> - parameters passes to the end.js script of a scene

Switching to the scene

• x <number> | <string> Default: 0 - x coordinate of the vector
• y <number> | <string> Default: 0 - y coordinate of the vector

2D vector creation. Returns the Vector2 object.

Converting the vector into a string. "v{X coordinate};{Y coordinate}"

new rjs.Vector2(1, 3).toString() = "v1;3";

• v <string> - vector in the form of string

Converting vector from string into a Vector2 object.

Vector2.fromString("v1;3") = new rjs.Vector2(1; 3);

Returns the length of the vector.

Returns the angle between source vector and X+ axis.

• v <object> (<Vector2>) - vector
• x <number> Default: 0 - x coordinate
• y <number> Default: x - y coordinate

Returns the total of the vectors.

• v <object> (<Vector2>) - vector
• x <number> Default: 0 - x coordinate
• y <number> Default: x - y coordinate

Returns the difference of the vectors.

• v <object> (<Vector2>) - vector
• x <number> Default: 0 - x coordinate
• y <number> Default: x - y coordinate

Returns the product of the vectors.

• v <object> (<Vector2>) - vector
• x <number> Default: 0 - x coordinate
• y <number> Default: x - y coordinate

Returns the division of the vectors.

• v <object> (<Vector2>) - vector
• x <number> Default: 0 - x coordinate
• y <number> Default: x - y coordinate

Returns a dot product of the vectors.

Returns the normalized vector.

• a <number> - angle in degrees

Returns the source vector rotated on a given angle.

Returns the vector with positive values of x and y

2D vector creation. Returns new RectJS.Vector2(x, y).

• r <number> - red channel (0-255)
• g <number> - green channel (0-255)
• b <number> - blue channel (0-255)

Returns the colorRGB object.

• r <number> - red channel (0-255)
• g <number> - green channel (0-255)
• b <number> - blue channel (0-255)
• a <number> Default: 255 - alpha channel (0-255)

Returns the colorRGBA object.

Returns the color as a string.

const color = rgb(255, 255, 255);
console.log(color.toString());
// "rgb(255, 255, 255)"

const color = rgba(255, 255, 255, 255);
console.log(color.toString());
// "rgba(255, 255, 255, 255)"

Returns the color converted to a string in CSS color type, where alpha channel is between 0 and 1.

const color = rgba(255, 255, 255, 255);
console.log(color.toStringCSS());
// "rgba(255, 255, 255, 1)"

• object <array> | <object> - an array or an object

Returns the amount of filled slots in the given object.

• object <object> (<object> | <RectJS.Vector2>) - JavaScript-object

Returns the copy of a 1D JavaScript-object or RectJS.Vector2.

THe reference to console.log().

• object <object> - JavaScript-object

Returns true if the argument is a game object.

In loader mode RectJS.LOADER_MODE checks for sources that wasn't loaded yet. If they are - RectJS.sourceLoaded sets to false, otherwise - true.

• options <object> Default: new Object()
  • pos <object> (<RectJS.Vector2 | <RectJS.vec2>) Default: new RectJS.Vector2(0, 0) - a camera position on a scene
  • id <string> Default: "camera_{camera number}" - camera identifier

Returns the Camera object.

Switching to the camera.

• scene <object> (<RectJS.Scene>) - the layer scene
• paralalx <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(100, 100) - percentage of the layer parallax
• scale <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(1, 1) - the layer scaling
• id <string> Default: "layer_{номер слоя}" - layer identifier
• options <object> Default: new Object()
  • visible <boolean> Default: true - layer visibility

Returns a Layer object. WARNING! The RE-5 renderer draw all the layers in order of their initialization.

• layer - the layer of the group
• id Default: "group_{group number}"

Returns a rendering group. Rendering groups can help you to increase the performance by reducing unnecessary draw calls. If you have lost of different object on the layer you can add the objects with similar appearences to the render group, to optimize the rendering order. Pay attention to the following properties:

• Textures
• Shaders
• Vertices
• Colors
• Color modes

!!!WARNING!!! If you move the object from one layer to another in runtime, make sure that you've removed it from all of the render groups. Mistakes like that can couse serious rendering bugs.

• o <object> (<RectJS.Sprite> | <RectJS.Polygon>) - a game object

Returns true if the game object is apart of the group, otherwise it returns false.

• o <object> (<RectJS.Sprite> | <RectJS.Polygon>) - a game object

Adds an object to the group.

!!!WARNING!!! Use this method only if you want object to be rendered several times on a single frame. Make sure you know what are you doing.

• o <object> (<RectJS.Sprite> | <RectJS.Polygon>) - a game object

Adds an object to the group and removes it from all of its current groups.

• o <object> (<RectJS.Sprite> | <RectJS.Polygon>) - a game object

Removes an object from the group.

• options <object>
  • pos <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(0, 0) - position on the scene
  • vertices <array> [<RectJS.Vector2>, ...] Default: new Array() - array of the vertices
  • scale <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(1, 1) - object scaling
  • angle <number> Default: 0 - angle (degrees)
  • origin <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(0, 0) - origin offset
  • points <array> [<RectJS.Vector2>, ...] Default: new Array() - bounding points
  • texture <object> (RectJS.Texture) Default: null - texture
  • color <arrat> (<rgb> | <rgba>) Default: rgb(255, 255, 255) - color
  • colors <array> [<rgb> | <rgba>, ...] Default: [...this.color] - Array with color of every single vertex. Works only if colorMode = "VERTEX"!
  • colorMode <string> Default: SINGLE - Color mode. Theres're 3 modes:
    • "SINGLE" - the object is entirely filled with one single color. Amount of objects with different colors doesn't affect on the performance.
    • "UNIFORM" - useful in case when there are a lot of objects with the same color, on a large scale increases the performance.
    • "VERTEX" - works almost like "SINGLE", but allows to color every single vertex (colors set in the colors property)
  • filters <array> [<rgb> | <rgba>, ...] Default: new Array() - array with color filters
  • opacity <number> Default: 100 - percentage of the opacity
  • render <boolean> Default: true - object visibility
  • layer <object> (<RectJS.Layer>) - object layer
  • id <string> Default: "object_{object number}" - object unique identifier
  • textOverlap <boolean> Default: false - texts overlapping
  • families <array> [<RectJS.Family>, ...] Default: new Array() - object families
  • program <object> (<RectJS.Program>) Default: RectJS.renderer.programs["DEFAULT"] - shader program (large amount of different shaders on the scene decreases the performane)
  • private <object> Default: new Object() - object with custom properties and methods.
    • init <function> Default: undefined - runs after the object created

Polygon object creation. Returns the game Object.

var object = new rjs.Polygon({
	...
	private: {
		test: 123,
		init: function () {
			console.log(this.text);
			// "123"
		}
	}
});

console.log(object.test);
// "123"

You can access any parameter of an object (except of private) as it's property using point. Parameters and methods from private object become regular object properties (check the code above).

• options <object>
  • pos <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(0, 0) - position on the scene
  • size <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(0, 0) - size of the sprite
  • scale <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(1, 1) - object scaling
  • angle <number> Default: 0 - angle (degrees)
  • origin <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(0, 0) - origin offset
  • points <array> [<RectJS.Vector2>, ...] Default: new Array() - bounding points
  • texture <object> (RectJS.Texture) Default: null - texture
  • color <arrat> (<rgb> | <rgba>) Default: rgb(255, 255, 255) - color
  • colors <array> [<rgb> | <rgba>, ...] Default: [...this.color] - Array with color of every single vertex. Works only if colorMode = "VERTEX"!
  • colorMode <string> Default: SINGLE - Color mode. Theres're 3 modes:
    • "SINGLE" - the object is entirely filled with one single color. Amount of objects with different colors doesn't affect on the performance.
    • "UNIFORM" - useful in case when there are a lot of objects with the same color, on a large scale increases the performance.
    • "VERTEX" - works almost like "SINGLE", but allows to color every single vertex (colors set in the colors property)
  • filters <array> [<rgb> | <rgba>, ...] Default: new Array() - array with color filters
  • opacity <number> Default: 100 - percentage of the opacity
  • render <boolean> Default: true - object visibility
  • layer <object> (<RectJS.Layer>) - object layer
  • id <string> Default: "object_{object number}" - object unique identifier
  • textOverlap <boolean> Default: false - texts overlapping
  • families <array> [<RectJS.Family>, ...] Default: new Array() - object families
  • program <object> (<RectJS.Program>) Default: RectJS.renderer.programs["DEFAULT"] - shader program (large amount of different shaders on the scene decreases the performane)
  • private <object> Default: new Object() - object with custom properties and methods.
    • init <function> Default: undefined - runs after the object created

Rectangle shaped object (Sprite) creation. Returns a game Object.

• options <object>
  • pos <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(0, 0) - position on the scene
  • size <number> - text size
  • scale <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(1, 1) - object scaling
  • angle <number> Default: 0 - angle (degrees)
  • origin <string> Default: "center-middle" - text align
  • points <array> [<RectJS.Vector2>, ...] Default: new Array() - bounding points
  • font <string> - text font
  • text <string> - text content
  • color <arrat> (<rgb> | <rgba>) Default: rgb(255, 255, 255) - color
  • filters <array> [<rgb> | <rgba>, ...] Default: new Array() - array with color filters
  • opacity <number> Default: 100 - percentage of the opacity
  • render <boolean> Default: true - object visibility
  • layer <object> (<RectJS.Layer>) - object layer
  • id <string> Default: "object_{object number}" - object unique identifier
  • families <array> [<RectJS.Family>, ...] Default: new Array() - object families
  • private <object> Default: new Object() - object with custom properties and methods.
    • init <function> Default: undefined - runs after the object created

Text creation. Returns a game Object.

Destroying the object.

• layer <object> (<RectJS.Layer>) - new object layer

Changing a layer of the object

• id <number> - bounding point index in the array Object.points

Returns the vector of bounding point position on the scene (according to it's transformations).

• callback <function> - callback function
• active <boolean> Default: true - loop status
• scene <object> (<RectJS.Scene>) Default: null - the loop works only on this scene. If = null - loop works on every scene in the game
• absl <boolean> Default: false - if true the loop works even in loader mode.

Game loop creation. Returns a loop object. Loop.callback runs synchronously before every single frame (if the is active of course)

Enable game loop.

Disable game loop.

• callback <function> - interval callback
• timeout <number> - interval in milliseconds
• active <boolean> Default: true - interval status
• scene <object> (<RectJS.Scene>) Default: null - the interval works only on this scene. If = null - the interval works on every scene in the game

Creation of the loop with given interval. Runs asynchronously.

• callback <function> - callback runs when the time is up
• delay <number> Default: 0 - delay in game ticks (~60/sec)
• active <boolean> Default: true - active status
• scene <object> (<RectJS.Scene>) Default: null -the delay works only on this scene. Если = null - the delay works on every scene in the game
• absl <boolean> Default: false - if true the delay works even in loader mode.

Crating a delay. Using that you can run some after the given delay set in milliseconds. Runs synchronously after all the loops and right before the scene rendering.

• src <string> - relative path to the image file
• scale <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(1, 1) - source texture scaling, affects on the resolution of the texture
• custom_size <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(0, 0) - absolute size of source texture, affects on the resolution of the texture. If = 0 - size will be set to the source image size automatically

Texture loading. Returns a source texture object.

• src <string> - relative path from the images directory (RectJS.imagePath, Sources/images/ by default) to the image file
• scale <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(1, 1) - source texture scaling, affects on the resolution of the texture
• custom_size <object> (<RectJS.Vector2>) Default: new RectJS.Vector2(0, 0) - absolute size of source texture, affects on the resolution of the texture. If = 0 - size will be set to the source image size automatically

Texture loading. Returns a source texture object.

• origin <object> (RectJS.Texture) - source texture
• size <object> (<RectJS.Vector2>) - size of every single tile

Creation of the repeating texture. Returns a texture object.

• origin <object> (RectJS.Texture) - source texture
• pos <object> (<RectJS.Vector2>) - origin of the cropping area (its left-top corner)
• size <object> (<RectJS.Vector2>) - size of the cropping area

Cropping a texture, one tiel from a tilemap for example. Returns a texture object.

• options <object>
  • frames <array> [<RectJS.Texture>, ...] Default: new Array() - an array includes all of the frames
  • speed <number> Default: 60 - amount of animation frames per 60 game ticks
  • id <string> Default "animation_{animation number}" - animation indentifier

Animation creation. Returns an animation object.

You can access the index of the current frame using a .currentIndex property, you can set a certain frame by changing this property. The speed of the animation can be accessed with .speed property, you can stop the animation, change its framerate or start it again by changing this property.

WARNING! Animations in RE-5 aren't finished yet. All objects with a common animation will be animated at the time.

• name <string> - unique name of the font
• src <string> - path to the .ttf file

Loading a custom .ttf font. Returns the unique name of the font, you can pass it to the font property of a text object.

• name <string> - unique name of the font
• src <string> - relative path to the .ttf file from the fonts library (RectJS.fontPath, Sources/fonts/ by default)

Loading a custom .ttf font. Returns the unique name of the font, you can pass it to the font property of a text object.

• src <string> - relative path to the JSON file from the fonts library (RectJS.jsonPath, Sources/json/ by default)

Loading a JSON file. Returns an object with content of the JSON.

• src <string> - path to the audio file
• distance <number> Default 100 - valume multiplier if the sound is bound to an object

Loading an external sound. Returns a sound object.

• src <string> - relative path to the audio file from the fonts library (RectJS.audioPath, Sources/audio/ by default)
• distance <number> Default 100 - valume multiplier if the sound is bound to an object

Loading an external sound. Returns a sound object.

Start or resume the sound.

Pause the sound.

Stops the sound playing and reset the time.

Restart the sound from the very beginning.

Returns the sound duration (in milliseconds)

• time <number> - time (in milliseconds)

Sets playing current time.

Returns current playing time (in milliseconds)

• volume <number> - volume percentage (0-100)

Sets the sound volume.

Returns the volume percentage.

• object <object> (<RectJS.Polygon> | <RectJS.Sprite> | <RectJS.Text>) - game object

Binds the sound to an object.

• object <object> (<RectJS.Polygon> | <RectJS.Sprite> | <RectJS.Text>) - game object

Unbinds the sound from an object

• type <string> - shader type "VERTEX" - vertex shader "FRAGMENT" - fragment shader
• src <string> - path to the .glsl file
• id <string> - identifier

Don't use identifier "DEFAULT" if you aren't aware of what you are doing.

Loading and compilation of the custom shader script.

• options <object> - settings
  • vertex <object> | <string> (<RectJS.Shader> | <RectJS.Shader.id>) - vertex shader, if you wanna add default shader to this program set this to "DEFAULT"
  • fragment <object> | <string> (<RectJS.Shader> | <RectJS.Shader.id>) - fragment shader, if you wanna add default shader to this program set this to "DEFAULT"
  • id <string> - program identifier. Set it to "DEFAULT" if you wanna make this program default for all game objects.

Creates a custom shader program.

Shaders in RE-5 works on GLSL

Take vertex coordinates

Takes texture coords of a vertex

Takes a transformation matrix

Takes a color filter (if RectJS.Object.colorMode = "SINGLE" | "VERTEX")

If RectJS.Object.colorMode = "UNIFORM" - takes true, otherwise - false

Takes a color filter (if RectJS.Object.colorMode = "UNIFORM")

Passes the necessary color filter to the fragment shader

Passes the texture coords to the fragment shader

Takes a texture

Takes a color filter

Takes texture coords

Left click event

Right click event

Event of pressing down the left mouse button

Left mouse button release event

Event of pressing down the right mouse button

Right mouse button release event

Event of pressing down the middle mouse button (wheel)

Middle mouse button (wheel) release event

Event of mouse movement

Mouse wheel scrolling event

Mouse wheel scrolling up event

Mouse wheel scrolling down event

• callback <function> - callback, takes the default event event object as a parameter
• active <boolean> Defaut: true - event listener status
• scene <object> (<RectJS.Scene>) Defaut: null - the scene of the listener. If = null - listener works on every scene.
• target <DOM> Defaut: RectJS.eventDetector - DOM-element which handles the listener

Left mouse button holding event.

• callback <function> - callback, takes the default event event object as a parameter
• active <boolean> Defaut: true - event listener status
• scene <object> (<RectJS.Scene>) Defaut: null - the scene of the listener. If = null - listener works on every scene.

Touch start event

Touch end event

Touch move event

• callback <function> - callback, takes the default event event object as a parameter
• id <number> Defaut: null - touch index. If = null - listener responds on all the touches
• active <boolean> Defaut: true - event listener status
• scene <object> (<RectJS.Scene>) Defaut: null - the scene of the listener. If = null - listener works on every scene.
• target <DOM> Defaut: RectJS.eventDetector - DOM-element which handles the listener

Key down event

Key up event

• callback <function> - callback, takes the default event event object as a parameter
• key <number> Defaut: null - event.keyCode of the key. If = null - listener responds on all the keys
• active <boolean> Defaut: true - event listener status
• scene <object> (<RectJS.Scene>) Defaut: null - the scene of the listener. If = null - listener works on every scene.
• target <DOM> Defaut: RectJS.eventDetector - DOM-element which handles the listener

Key press event

• callback <function> - callback, takes the default event event object as a parameter
• key <number> Defaut: null - event.keyCode of the key. If = null - listener responds on all the keys
• active <boolean> Defaut: true - event listener status
• scene <object> (<RectJS.Scene>) Defaut: null - the scene of the listener. If = null - listener works on every scene.

WARNING! All the constructors above return a RectJS.Event object.

Properties of RectJS.Event:

• fnc <function> - listener callback
• active <boolean> - listener status
• scene <object> (<RectJS.Scene>) - the scene of the listener. If = null - listener works on every scene.
• event <eventListener> - javascript event listener

Starts the listener.

Stops the listener.

• key <number> Defaut: null - event.keyCode of the key. If = null - method responds of all the keys

Returns true if the given key is pressed.

Returns the mouse object.

Properties of RectJS.Mouse:

• x <number> - x position on the screen
• y <number> - y position on the screen

• layer <obejct> (<RectJS.Layer>) - layer to get the parallax and scaling values
• scale <object> (<RectJS.Vector2>) Defaut: layer.scale - scaling
• parallax <object> (<RectJS.Vector2>) Defaut: layer.parallax - percentage of parallax (0-100)

Returns the mouse position on a scene as a RectJS.Vector2 (according to camera offset, layer parallax and scaling values).

Returns the reference to an array with all the touches.

Properties of a touch (RectJS.Touch)[index]:

• x <number> - x position on the screen
• y <number> - y position on the screen

• layer <obejct> (<RectJS.Layer>) - слой

Returns the touch point on a scene as a RectJS.Vector2 (according to camera offset, layer parallax and scaling values).

WARNING! Event system in RE-5 isn't finished yet, some of the methods about could work not correctly.

Creation of an objects family.

• id <string> - object id

Returns an object from the family.

• index <number> - object index in the family (in order of addition)

Returns an object from the family by its index.

• o <object> (<RectJS.Polygon> | <RectJS.Sprite> | <RectJS.Text>) - game object

Checks if the object belongs to family.

• callback <function> - callback, takes an object as a parameter

Runs the callback for every single object in the family

• pos <object> (<RectJS.Vector2>) - point
• callback <function> - callback, takes an object as a parameter
• dist <number> Default: 100 - radius of a area around the point

Runs the callback for every object within a certain radius around the given point.

Returns amount of objects in the family

• object <object> (<RectJS.Polygon> | <RectJS.Sprite> | <RectJS.Text>) - game object

Adds an object to the family

• object <object> (<RectJS.Polygon> | <RectJS.Sprite> | <RectJS.Text>) - game object

Removes an object from the family

• options <obejct> - settings
  • type <string> - object type (constructor)
    • "Polygon" || rjs.Polygon - polygon
    • "Sprite || rjs.Sprite" - tinged rectangle or sprite
    • "Text" || rjs.Text - text object
    • <rjs.Asset> - you can make an asset based on the other one
  • the rest of parameters are the same as in object constructor with the given type

Returns the object constructor with the given settings:

• options <object> - set of options as it is in default object constructor

WARNING! Properties given to the constructor overwrite asset's ones WARNING! When specifying colors or vectors in the asset there are only references in the object instance, so changing some properties of the vector or colors of one single object you can cause the same changes in all of the instances of this asset. To avoid this problem you can overwrite vectors or color when you change them.

Asset using example

// creation of an asset
const BOX = new rjs.Asset({
	type: rjs.Sprite,
	size: vec2(256, 256),
	color: rgb(100, 50, 255),
	private: {
		init: function () {
			// object's gonna rotate on 0 to 90 degrees after it's initialized
			this.angle = Math.random()*90;
		},
		name: "John"
	}
});

// create an object
const box1 = new BOX({
	pos: vec2(0, 0),
	layer: new_main
});

// create the second one
const box2 = new BOX({
	pos: vec2(500, 0),
	layer: new_main,
	private: {
		// specify another name
		name: "Jack"
	}
});

// change a property "x" of vector-typed parameter "size" of the second object
box2.size.x = 128;

log(box1.name);
// will get "John" (as it was in asset)

log(box2.name);
// will get "Jack" (as it was in instance)

log(box1.size.x);
// instead of default 256, we'll get 128,
// because we've changed a property of a vector attached to both "box1" and "box2"

log(box2.size.x);
// will get 128

• a <object> (<RectJS.Polygon> | <RectJS.Sprite> | <RectJS.Text>) - game object
• b <object> (<RectJS.Polygon> | <RectJS.Sprite> | <RectJS.Text>) - game object

Returns false if objects aren't collided, otherwise it returns an object with overlapping parameters

• object <object> (<RectJS.Polygon> | <RectJS.Sprite> | <RectJS.Text>) - game object
• calc_angle <boolean> Default: true - considering an angle of the object

Returns a simplified bounding box as an plain javascript object either considering an angle nor not.

• a <object> (RectJS.getBoundingBox) - first bounding box
• b <object> (RectJS.getBoundingBox) - second bounding box

Returns true if bounding boxes are collided

• object <object> (<RectJS.Polygon> | <RectJS.Sprite> | <RectJS.Text>) - game object

Returns true if mouse cursor is over the given object

<string> Default: "" - relative path to index.html, main.js, to engine and project folders

<string> Default: "Engine/" - path from RectJS.sourceHOST directory to the engine folder

<string> Default: "Plugins/" - path from RectJS.sourceHOST directory to the plugins folder

<string> Default: "Scenes/" - path from RectJS.sourceHOST directory tp the scenes folder

<string> Default: "Scripts/" - path from RectJS.sourceHOST directory to the scrips folder

<string> Default: "Sources/images/" - path from RectJS.sourceHOST directory to the images folder

<string> Default: "Sources/json/" - path from RectJS.sourceHOST directory to the JSON folder

<string> Default: "Sources/fonts/" - path from RectJS.sourceHOST directory to the fonts folder

<string> Default: "Sources/audio/" - path from RectJS.sourceHOST directory tp the audio folder

<DOM> - div wich contain all the rendering canvases and event handlers

<DOM> - canvas for the WebGL graphics for sprites and polygons rendering

<DOM> - canvas for rendering text using CanvasRenderingContext2D

<DOM> - div which is located on top of canvases and handles all the mouse and touch events

<object> - WebGL2RenderingContext

<object> - CanvasRenderingContext2D

<number> Default: 1920 - width of the viewport in units, which you can use to set the positions and sizes of game objects

<number> Default: 1080 - height of the viewport in units, which you can use to set the positions and sizes of game objects

<number> Default: 1536 - horizontal distance from the middle of canvas to its edge in real pixels

<number> Default: 864 - vertical distance from the middle of canvas to its edge in real pixels

<number> - current width of the canvases

<number> - current height of the canvases

<number> - current width of the container

<number> - current height of the container

<object> (<rgba>) - background color of the canvas

<object> (<rgba>) - background color of the page

<object> - object contains all the scenes

<object> (<RectJS.Scene>) - reference to the current scene

<object> - object, contains all the layers of every scene

<object> - object, contains all external sources (except of fonts)

<object> - object, contains all primary images

<object> - object, contains all the primary, secondary textures (created by cropping or looping the primery ones) and animations as well

<boolean> Default: false - loading screen mode

<boolean> - absence of sources still unloaded

<number> (<integer>) Default: 1 - integer which represents amount of ticks per each requestAnimationFrame()

<object> - object, contains all the animations

<object> - object, contains all the cameras

<object> (<RectJS.camera>) - reference to the current camera

<array> - an array contains all the waits

<array> - an array contains all the game loops

<boolean> Default: false - FPS limitation mode (not recomended)

<number> (<integer>) Default: 60 - mazimum FPS (in FPS limitation mode)

Single Frame Reqest Mode <boolean> Default: true - Single frame rendering request mode. If turn it off the rendering will run separately from main requestAnimationFrame. In rare cases it could increase the performance, but usually it decreases it and can couse some bugs.

<array> - an array contains all the event listeners

<boolean> - represents the status of left mouse button

<boolean> - represents the status of right mouse button

<array> - an array contains all the families

<array> - an array contains all the sounds

<number> - current FPS

<function> - rendering function of graphic engine

<object> - class contains all the core methods of graphic engine

For compatibility with old plugins there's an old reference: RectJS.renderTools

<object> - interface of graphics engine

<string> Default: "mipmap" - texture interpolation mode

• mipmap - mipmapping, generates loads automatically (lower performance)
• linear - bilinear interpolation (recomended for higher performance)
• pixel - without any interpolation (for pixelart projects)

Draw Call Per Frame <number> - amount of draw call per frame (text rendering doesn't count)

<boolean> Default: false - rendering debug mode. Allows you to see how the rendering works step by step in purpose of making optimization

<boolean> Default: "false - this mode allows you to switch the frames with devTools

To work correctly the plugin should be in Plugins/plugin_name.rjs folder. Plugin consist at least of 2 files:

• package.json - JSON with plugin settings and some important information about it.

{
	"name": "plugin_name",
	"version": "1.0.0",
	"main": "plugin.js",
	"settings": {
		
	}
}

• plugin.js - its code.

(plugin) => {

	
	const exports = plugin.exports = {}; // plugin interface
	const rjs = plugin.engine; // reference to the engine (`RectJS`)
	const pack = plugin.pack; // object converted from package.json
	const sets = plugin.pack.settings; // settings from the package.json
	const params = plugin.params; // plugin initialization parameters
	const global = plugin.global; // properties of this object become global methods after its initialization
	const code = plugin.code; // function from file plugin.js (this code)
	
	// here's gotta be some plugin code

}

• name <string> - a plugins name set in package.json
• ...params - plugin initialization parameters. Described in its documentation.

Including a plugin. Returns an interface of the plugin plugin.exports.

WARNING! All the plugins should be included in the callback function of engine initializer if there's no different instructions in plugin's docs.

You can make plugin yourself or download already existing one on our website.

© GameDev United