game-neat v0.6.8
GameNeat
A simple and lightweight library made for easier game development in JavaScript on HTML5 canvas.
NPM
npm i game-neat --save
Create new game
import Game from "game-neat";
const game = Game();
Scene API
With Scene API you can manipulate with current Scene, so far there is only one Scene.
Scene methods
- setCanvas (element: string | Element): CanvasRenderingContext2D
- setBackground (options: BackgroundOptions): void
- startRender (): void
- stopRender (): void
- onRender (callback: Function): void
setCanvas(element: string | Element)
With this method you can specify your canvasContext element as a target for Scene rendering. I recommend calling this method right after creating new game.
You can pass selector as a string or directly your canvasContext element.
Returns canvasContext context or throws TypeError exception.
const game = Game();
game.scene.setCanvas("#game");
setBackground (options: BackgroundOptions)
Sets a background image with url provided in object or background color.
You can set background scrolling speed with verticalSpeed and horizontalSpeed properties.
All those properties can be omitted, so if you want to for example just change scrolling speed you can do this pretty easily. Previous settings will be preserved.
game.scene.setBackground({
backgroundUrl: "road.svg",
verticalSpeed: 5,
horizontalSpeed: 4,
backgroundColor: "#000"
});
// elsewhere
game.scene.setBackground({ horizontalSpeed: 0 }); // only sets horizontal speed to 0
startRender()
Use this method to initiate scene rendering.
const game = Game();
game.scene.setCanvas("#game");
game.scene.setBackground({
backgroundUrl: "road.svg",
verticalSpeed: 5,
horizontalSpeed: 4,
backgroundColor: "#000"
});
game.scene.startRender();
onRender ()
Empty method, which can be easily overridden, this method will be called every frame.
game.scene.onRender = () => {
console.log("Frame was just rendered");
};
Draw API
- drawText (options: DrawTextOptions): object
- drawRectangle (options: DrawRectangleOptions): object
- clearText (textId: any): boolean
- setFontSize (fontSize: number): void
- setStrokeColor (color: string): void
- setStrokeAndFillColor (color: string): void
- setFillColor (color: string): void
- setFont (fontFamily: string): void
drawText(options: DrawTextOptions)
Draws a text on canvas with specified position, content and possibly alongside dynamic content.
game.draw.drawText({ x: 8, y: 32, content: "Static content" });
Dynamic content example
const data = { counter: 0 };
game.scene.onRender = () => {
++data.counter;
};
game.draw.drawText({ x: 8, y: 32, content: "Counter: {counter}", data });
drawRectangle (options: DrawRectangleOptions): object
Draws a rectangle with given coordinates.
game.draw.drawRectangle({
x1: 24,
y1: 24,
x2: 128,
y2: 52,
fill: true,
fillColor: "#00f017"
});
GameObjectFactory
- createObject (gameObjectId: any, overrideObject?: boolean): GameObject
GameObjectFactory contains only one method - createObject. This method creates an object which then can be instantiated, returns GameObject.
const player = game.gameObjectFactory.createObject("player");
GameObjectInstanceFactory
- createInstance (gameObjectId: any): GameObject | undefined
With GameObjectInstanceFactory you can create a new instance.
const player = game.gameObjectFactory.createObject("player");
const playerInstance = game.gameObjectInstanceFactory.createInstance("player"); // or player.id
GameObject API
- readonly isFreeXOnLeft: boolean
- readonly isFreeXOnRight: boolean
- readonly isFreeYOnBottom: boolean
- readonly isFreeYOnTop: boolean
- readonly isColliding: boolean
- setPosition (x: number, y: number): void
- setRelativePosition (x: number, y: number): void
- setSpriteDimensions (width: number, height: number)
- setSprite (imageUrl: string, spriteOptions?: SpriteOptions): HTMLImageElement
- setVerticalSpeed (speed: number): void
- setHorizontalSpeed (speed: number): void
- setSpeed (speed: number): void
- isCollidingWith (instance: GameObject | string): boolean
- onCollision (instance: GameObject): void
- onRender (instance: GameObject): void
- onClick (callback: Function): void
- onMouseMove (callback: Function): void
- onKey (key: string, callback: Function): void
- onKeyUp (key: string, callback: Function): void
setSprite (imageUrl: string, spriteOptions?: SpriteOptions)
Sets a sprite for your object alongside width and height accordingly to image size. Sprite dimensions can be manipulated through spriteOptions.
const player = game.gameObjectFactory.createObject("player");
// Object's width and height is same as image width and height
player.setSprite("player.svg");
// Sprite is resized to 80% size of the original image
player.setSprite("player.svg", { widthMultiplier: .8, heightMultiplier: .8 });
onKey (key: string, callback: Function)
OnKey has two parameters - key as a string, for example "w" and callback which will be called.
const player = game.gameObjectFactory.createObject("player");
const playerInstance = game.gameObjectInstanceFactory.createInstance("player"); // or player.id
playerInstance.onKey("w", () => playerInstance.setRelativePosition(0, -3));
GameObjectInstanceList
With GameObjectInstanceList you can manipulate with your instances. It's possible to remove single instance with destroy() method, or count() all instances. In count() or findInstancesBy() you can pass either GameObject id or GameObject itself.
- destroy (instance: GameObject): void
- count (gameObject: any | GameObject): number
- findInstancesBy (gameObject: any | GameObject): GameObjectInstanceList
Sound
- addSound (soundId: any, soundUrl: string): void
- playSound (soundId: any): void
- stopSound (soundId: any): void
- stopAllSounds (): void
Random
- nextFloat (min?: number, max?: number): number
- next (min?: number, max?: number): number