https://github.com/xxfast/xf.js
a simple 2d game engine written entirely with javascript
https://github.com/xxfast/xf.js
2d-game-engine framework games javascript
Last synced: 11 months ago
JSON representation
a simple 2d game engine written entirely with javascript
- Host: GitHub
- URL: https://github.com/xxfast/xf.js
- Owner: xxfast
- Created: 2017-02-11T09:30:33.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-16T10:35:34.000Z (over 8 years ago)
- Last Synced: 2025-04-20T08:04:39.106Z (11 months ago)
- Topics: 2d-game-engine, framework, games, javascript
- Language: JavaScript
- Size: 197 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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');
```
### Core
Create a game and add a scene
```javascript
var myGame = new xf.Game();
var scene = new xf.Scene("test","#FFF");
myGame.scenes().set(scene);
```
### Graphics
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);
```
### Geometry
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](https://github.com/xxfast/xf.js/tutorial) (coming soon...)
## API Reference
API reference available [here](https://github.com/xxfast/xf.js/wiki)
## Contributors
"All by myself" 🎶
## License
MIT