Xf.js NPM | npm.io

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...)