xf.js

[1.0.20] This is an experimental development built

Synopsis

a simple 2d game framework written entirely with javascript, intended for beginner programmers to get starting making games right away.

This project is inspred by macite's Swingame

• Keep it simple!
• Keep it cross platform
• Make it easy to understand

Installation

using npm

npm install xf.js
 

Features & Usage

import using require

    var xf = require('xf.js');

Core

Create a game and add a scene

    var myGame = new xf.Game();
    var scene = new xf.Scene("test","#FFF");
    myGame.scenes().set(scene);

Graphics

Creating sprites are ever so easy.

    var mario = new xf.Sprite("mario").source(["assets/mario.png"])

wants some layers to your sprites? try this

    var mario = new xf.Sprite("mario").source(["assets/mario.png","assets/mario2.png"])

Want to animate your sprites, add a spritesheet and define frames simply like this

    var tim = new Sprite("tim")
                 .animate("idle",["assets/tim/Tim_idle.png"],2,12,22,0,-1)
                 .animate("run",["assets/tim/Tim_run.png"],4,7,27,0,-1)
                 .play(-0.8)

All component functionality can be addressed directly, for instance, if you want to rotate and transfrom a sprite etc., you can do

    var tim = new xf.Sprite("tim")
                     .animate("idle",["assets/tim/Tim_idle.png"],2,12,22,0,-1)
                     .animate("run",["assets/tim/Tim_run.png"],4,7,27,0,-1)
                     .translate(200,240)
                     .transform(80,100)
                     .center()
                     .weight(10)
                     .velocity(0.8,0)
                     .torque(1)
                     .goto("run")
                     .play(0.8);

Geometry

Want just shapes to be rendered? easy,

    var arrow = new xf.Polygon([{x:10,y:0},{x:10,y:10},{x:0,y:+10},{x:30,y:30}],{fill:"red",stroke:"black"})
                           .translate(200,200)
                           .transform(60,60)
                           .torque(2)
                           .center();

or use predefined shapes

    var circle = new Circle({fill:"grey",stroke:"black"},0,0,10)
                    .translate(200,200)
                    .transform(60,60)
                    .center();

A comprehensive tutorial available here (coming soon...)

API Reference

API reference available here

Contributors

"All by myself" 🎶

License

MIT