Aniframes.js - A minimal animation / game framework. Useful as a base for your own projects. #microlibrary

README.md

Aniframes.js

Aniframes.js is a quick library I have put together to help you create animations and / or games in javascript.

Note that the updater runs before the renderer.

Usage

var myGame = new aniframes(),
	canvas = document.querySelector("canvas");
myGame.set_canvas(canvas);
myGame.set_renderer(function(aniframes, canvas, context) {
	//todo add rendering code here....
});
myGame.set_updater(function(aniframes) {
	//todo add updaing code here....
});
myGame.start();

Reference

Creating a new instance

var myGame = new aniframes();

Methods

set_canvas

myGame.set_canvas(canvas);

Sets the canvas that aniframes will operate on.

set_updater

myGame.set_updater(function(myGame) {
	//todo canvas state updating code here...
});

Sets the function that updates the canvas state.

set_renderer

myGame.set_renderer(function(myGame, canvas, context) {
	//todo canvas rendering code here...
});

Sets the function that renders the canvas state.

start()

myGame.start();

Starts the rendering loop (using requestAnimationFrame()).

stop()

myGame.stop();

Stops the rendering loop after the next frame has been rendered.

Properties

events

events.load = function(event) {
	//todo onload code here...
});
events.keyup = function(event) {
	//todo onkeyup code here...

An object that should contain your events that you want binding.

env

Contains various environmental variables. You can put other things in here too.

• env.canvas - The canvas aniframes is operating on.
• env.context - The canvas context aniframes is operating on.
• env.mouse.x - The current x position of the user's cursor. Doesn't update yet.
• env.mouse.y - The current y position of the user's cursor. Doesn't update yet.
• env.stop - A boolean value that if true, tells the rendering loop to stop on the next frame.

Todo

• Update this.env.mouse.x and this.env.mouse.y when the mouse moves
• Test it :)

Credits

aniframes.js was built by Starbeamrainbowlabs in Brackets

aniframes.js

function aniframes()
{
	this.env = {
		canvas: document.createElement("canvas"),
		context: this.env.canvas.getContext("2d"),
		mouse: {
			x: 0,
			y: 0
		},
		stop: false, //whether we should stop the rendering loop
	};
	this.methods = {};
	
	/*
	 * @summary Sets the canvas that aniframes should operate on.
	 * @param {HTMLCanvasElement} canvas - The canvas we should operate on.
	 */
	this.set_canvas = function(canvas) {
		this.env.canvas = canvas;
		this.env.context = canvas.getContext("2d");
	};
	
	/*
	 * @summary Adds a function to `this.methods`.
	 * @param {string} key - The key to store the function under in the object.
	 * @param {function} func - The function to add.
	 */
	this.add_function = function(key, func) {
		this.methods[key] = func;
	};
	/*
	 * @summary Sets the rendering function.
	 * @param {function} func - The function that should to the updating
	 */
	this.set_updater = function(func) {
		this.add_function("update", func);
	};
	/*
	 * @summary Sets the rendering function.
	 * @param {function} func - The function that should do the rendering.
	 */
	this.set_renderer = function(func) {
		this.add_function("render", func);
	};
	
	/*
	 * @summary Starts the rendering loop.
	 */
	this.start = function() {
		this.env.stop = false;
		this.frame(true);
	};
	
	/*
	 * @summary Stops the rendering loop.
	 */
	this.stop = function() {
		this.env.stop = true;
	};
	
	/*
	 * @summary Draw the next frame
	 * 
	 * @param {bool} schedule_next - Whether to schedule the drawing of the next frame.
	 */
	this.frame = function(schedule_next) {
		this.methods.update(this);
		this.methods.render(this, this.env.canvas, this.env.context);
		
		if(schedule_next && !this.env.stop)
		{
			requestAnimationFrame(this.frame);
		}
	};
	
	
	/* Object to hold events */
	this.events = {};
	/* 
	 * @summary Bind all the functions in `this.events` to their events on the canvas.
	 */
	this.bind_events = function() {
		this.bind_events_to(this.canvas);
	};
	/*
	 * @suummary Bind all the functions in `this.events` to their events on a specified element.
	 * @param thing - The thing to bind the events to.
	 */
	this.bind_events_to = function(thing) {
		Object.keys(this.events).forEach(function(event_name) {
			thing.addEventListener(event_name, this.events[event_name]);
		});
	};
}

aniframes.min.js

function aniframes(){this.env={canvas:document.createElement("canvas"),context:this.env.canvas.getContext("2d"),mouse:{x:0,y:0},stop:false};this.methods={};this.set_canvas=function(e){this.env.canvas=e;this.env.context=e.getContext("2d")};this.add_function=function(e,t){this.methods[e]=t};this.set_updater=function(e){this.add_function("update",e)};this.set_renderer=function(e){this.add_function("render",e)};this.start=function(){this.env.stop=false;this.frame(true)};this.stop=function(){this.env.stop=true};this.frame=function(e){this.methods.update(this);this.methods.render(this,this.env.canvas,this.env.context);if(e&&!this.env.stop){requestAnimationFrame(this.frame)}};this.events={};this.bind_events=function(){this.bind_events_to(this.canvas)};this.bind_events_to=function(e){Object.keys(this.events).forEach(function(t){e.addEventListener(t,this.events[t])})}}