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

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

$3

Create a game and add a scene

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

$3


Creating sprites are ever so easy.


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

wants some layers to your sprites? try this

`javascript
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



`javascript
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


`javascript
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);
`

$3

Want just shapes to be rendered? easy,

`javascript
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

`javascript
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