- Create canvas based game engine inspired from Kaplay.js
- Implements vector functions like, unit vector, distance, cross and dot products, arithmetics, angle, rotate, etc.
- Tags from each object to implement collision
- Features like tween and interpolate functions for animations
- Supports keyboard events like keypress, keydown, and keyup
- Collision detection with functions like onCollide, onCollideStart, onCollideEnd, and onCollideUpdate.
- Color component with support of RGB and Hex color format and inter-conversion support.
- Custom random number generator using linear congurential RNG with features like seed value, random number between max and min, choose from an array, shuffle, etc.
- Anchoring origin ofelement to different positions center, top, topleft, left, right, etc.
- Support for velocity and acceleration.
- Supports transformation features like scale, and rotate.
- Supports creating rectangle with and without rounded corners, and texts with different font and size support.
import Engine from "./engine";
const k = new Engine();Here, k is used such that it functionally looks identical to the Kaplay.
- Engine can accept optional parameter including;
{
width: number,
height: number,
backgroundColor: // default white
}A game object is like one piece or component of the game. It can be created using k.add[.
The options is items of array and can be;
-
k.rec(width, height, {fill: boolean, radius}), creates a rectangle. The radius can have format;numbersame radius for all the corners,- `[topleft topright botright botleft]
-
k.pos(x, y), its position in the canvas -
k.anchor(), its origin in body can betop | bot | left | right | topleft | topright| botleft | botright. -
k.rotate(angle), rotates the object by given angle in degress. -
k.scale(sx, sy), scales the object. If only one value is givensx = sy. -
k.tag([tag1, tag2, ...]), add tags to the given object -
k.text(text, {size: number, font: fontname, maxWidth: number}), creates a text component on the canvas -
k.area()enables collision detection for the object
You can also destroy any object using
k.destroy(object);Any object with k.area() can use the following functions;
obj.checkCollision(tag), if object has collided with another object witharea()with a given tag,obj.getCollisions(), get all the objects that this object is in collision with currently,obj.onCollide(tag, callback), triggers callback function when object collide with another object with particular tag. The callback will recive a parameter that represents the object that it collided with.obj.onCollideUpdate, andobj.onCollideEndsame asonCollidebut triggers callback during the collision and at the end of collision respectively.
The engine uses Linear Congurential generation algorithm for generation of random numbers.
randSeed(number), seeds the generatorrand(lower, upper), default is between 0 and 1randi(lower, upper), same as rand but only integerchoose(array), chose one random element from the arraychooseMultiple(array, n, replacement), chooses n number of elements from the array with and without replacement.shuffle(list), shuffles the item of the list.
rgbToHex(r, g, b)converts RGB color to HEX formathexToRgb(hex)converts HEX format color to RGB format
onKeyPressed(key, callback), when key is pressedonKeyDown(key, callback), when key is pressed but not released
vec2(x, y), creates a vector with x and y componentvec.clone(), clones the vectorvec1.add(vec2), returnsvec1 + vec2- Similarly has,
.sub(),.scale(),.neg(),.unit(),.dist(),.dot(),.angleBetween(), and.rotate()
tween(from, to , duration, callback), in the givendurationcall thecallbackat every frames with value changing fromfromtoto.k.get(tag), get all the objects with the given tag,map(n, a1, b1, a2, b2), performs interpolation of n when (a1, a2) is mapped to (a2, b2).toRadian(degree)andtoDegree(radian)
All these functions are implemented from scratch during Axiom V1.