-
Intelligent game loop handling
No need to worry about your setup anymore. G5 takes advantage of your game logic aswell as your draw functions, allowing you to easily specify the drawing order and insert new code at runtime. -
Event listening how it's supposed to be
Spend less time looking up keycodes with G5's listen() method. Simply specify your controls in string format and you're ready to go. -
Intuitive spritesheet support
G5's spritesheet class lets you slice, dye and animate your spritesheets. -
Simple cookie interface
Who can remember this weird cookie structure anyways? Setter and getter methods back you up. - .. and much more!
Methods: Game Loop
startG5.start()
Starts the game loop.
Every function registered through
We use
* See: requestAnimationFrame is not your [logic's] friend
stop Every function registered through
G5.draw
and G5.update
is iterated and executed.We use
window.requestAnimationFrame
for the draw part and window.setInterval
for the game logic.** See: requestAnimationFrame is not your [logic's] friend
G5.stop()
Pauses the game loop.
See
step See
G5.start
for more info.
G5.step([n])
n |
Amount of steps to perform, default = 1 |
Iterates the draw and game logic
n
times each call.See
G5.start
for more info.
G5.toggle()
Toggles between start and stop.
Returns
draw Returns
true
or false
indicating the new status.
G5.draw(fn [, zIndex])
fn |
Any function drawing stuff in your game |
zIndex |
Similar to CSS, the depth order in which the function should be executed (drawn) |
Registers a new draw function in the game loop and returns a reference object.
See
G5.start
for more info.
G5.update(fn)
fn |
Any function updating stuff in your game |
Registeres a new update function in the game loop and returns a reference object.
fn
is called with a parameter delta
.See
G5.start
for more info.
G5.detach(ref)
ref |
A reference returned from either G5.draw or G5.update .You can also pass multiple references at once without wrapping them in an array. (e.g. G5.disptach(ref1, ref2, ref3) )
|
Removes a function from the game loop.
Methods: Preparation
readyG5.ready(callback)
callback |
A function to execute when the DOM has loaded. |
G5.preload(data [, callback] [, opts])
data |
The data to preload, right now images and audio files are supported |
callback |
A function to execute when all data has been preloaded |
opts |
An object containing a few more options. Right now opts.ms defines the interval at which the internal preload check should be performedand opts.step a step function which is called everytime another file has been preloaded.The step function also takes the progress between 0 and 1 as the first parameter. This allows for easy loading screen setups. |
Preloads image and audio files, tracks the progress and fires a callback.
G5.include(paths [, callback])
paths |
One or multiple paths to javascript files |
callback |
A function to execute when all files have been includeed and loaded |
Includes a stack of javascript files and fires a callback.
Methods: Event-Listening
listenG5.listen(input, fn_down [, fn_up])
input |
One or multiple characters, patterns or special inputs. See below for more details. |
fn_down |
A function to call when one of the specified inputs is being pressed |
fn_up |
A function to call when one of the specified inputs is being released |
Registers eventlisteners on the fly.
The
input
parameter takes 3 different types of values, for example:abcdefg |
Registeres an eventlistener for the a, b, c, d, e, f, and g key |
a-g |
Achieves the same as above |
[special_input] |
Where [special_input] is one of the following:
They can be combined in any way. |
fn_down
and fn_up
are both called with the corresponding key as the first and the original event as the second parameter.Returns a reference object for
G5.ignore
.
G5.ignore(data)
data |
Either a reference object or a string in the same format specfied for the input parameter in G5.listen |
Removes the event listener callbacks from the specified reference or input.
Note that not using a specific reference results in removing all (multiple) callbacks attached to the specified input.
G5.is_keydown(key)
key |
The key in question |
Returns either
true
or false
depending on the key's status.
G5.is_mousedown(btn)
btn |
The button in question ("left", "right" or "middle") |
Returns either
true
or false
depending on the button's status.
Methods: Utilities
animationG5.animation(objects, [, property] [, easing] [, callback] [, options])
Description comming soon(ish).
rand G5.rand(min, max [, toFloat])
min |
The min value of the random number |
max |
The max value of the random number |
toFloat |
If set to true the random number will be of type float, default = false |
Generates a random number with a given range.
G5.clamp(val, min, max)
val |
The value to clamp |
min |
The min value val can reach |
max |
The max value val can reach |
A combination of Math.min and Math.max.
"clamps" a number between a given range.
G5.type_of(v)
v |
A variable to get the type from |
An alternative to the type_of operator.
Gives a more precise result:
typeof [] === "object"
G5.type_of([]) === "array"
G5.fullscreen(elem [, opts])
elem |
The element to display in fullscreen mode |
opts |
An object with additonal options.opts.resize Wether or not to resize the specified element. Can either be css or attribute , which defines the method used for reszing the element, default = "css".opts.aspect Whether or not to keep the aspect ratio when resizing the specified element. |
Toggles the fullscreen mode for all browsers.
Note that this function must be triggered by a user interactive event.
Object Methods
CollisionG5.Collision
Methods:
AABB( |
Returns false if no collision is present, otherwise it will return a function fix which returns a collision response in form of a velocity vector.
|
Simple 2d collision detection with collision response. Only AABB for now.
I might add an alternative per-pixel collision detection later.
G5.Cookie
Methods:
set( |
|
||||||
unset(name) |
|
||||||
get(name) |
|
A simple cookie handling object.
G5.Support
Methods:
canvas |
webgl |
websocket |
webworker |
audio |
audioContext |
Provides a bunch of test functions for common HTML5 technologies.
Returns either
true
or false
.
Constructors
TickerG5.Ticker(fn, ms)
fn |
A fuction to call every ms times.The function is also called with a parameter n which represents the number of calls remaining specified through start(n) or stop(n) .
|
ms |
The milliseconds for the ticker interval |
Methods:
start([n]) |
Starts the ticker.
|
||
stop([n]) |
Stops the ticker.
|
||
status() |
Returns the progress between 0 and 1 until the next tick is reached. |
An advanced timeout function.
G5.Scene(w, h [, context], opts)
w |
The width of the canvas element (scene) |
h |
The height of the canvas element (scene) |
context |
Specifies the context to retrieve from the canvas element, default = "2d" |
opts |
An object with additonal options.opts.zIndex defines the CSS z-index value.opts.parent defines the parent element to append the canvas to, default = document.body.
|
Creates a new canvas element, appends it to an element and returns the context.
The
canvas
property of the context also has an additional value zIndex
. It is synced with the canvas' CSS z-index property.
G5.Buffer(w, h [, context])
w |
The width of the canvas element (scene) |
h |
The height of the canvas element (scene) |
context |
Specifies the context to retrieve from the canvas element, default = "2d" |
Creates a new canvas element and returns the context.
G5.Image(src, callback)
src |
The image source path |
callback |
A function to call when the image has loaded |
It's basically the same as
new Image()
but with parameters, so we don't have to create a new line to set the source.Returns the image object.
G5.Vector2([x][, y])
x |
The x value of the vector, default = null |
y |
The y value of the vector, default = null |
Methods:
add(v) |
Basic addition with the instance vector |
subtract(v) |
Basic subtraction with the instance vector |
divide(v) |
Basic devision with the instance vector |
multiply(v) |
Basic multiplication with the instance vector |
dot(v) |
Returns the dot product from the instance vector and v |
scale(s) |
Multiplies both values of the instance vector by s |
diff(v) |
Returns the difference between the instance vector and v |
slope(v) |
Returns the slope value between the instance vector and v |
angle(v) |
Returns the angle between the instance vector and v |
length(v) |
Returns the length between the instance vector and v |
getX(v, y) |
Returns the x value in relation to y between the instance vector and v |
getY(v, x) |
Returns the y value in relation to x between the instance vector and v |
clone() |
Returns a new instance of the current instance |
G5.Spritesheet
Description comming soon(ish).
Static objects and variables
$_GETG5.$_GET
An object containing all GET parameters.
DEG2RAD G5.DEG2RAD
Math.PI / 180
Simply converts degrees to radians (deg*G5.DEG2RAD)
RAD2DEG Simply converts degrees to radians (deg*G5.DEG2RAD)
G5.RAD2DEG
180 / Math.PI
Simply converts radians to degrees (rad*G5.RAD2DEG)
Simply converts radians to degrees (rad*G5.RAD2DEG)