Developed by: Ryan Spice
To get started, check out the documentation!
- Cross-Browser
- Lightweight
- No dependencies
####completed
- game state logic
- object inheritance
- fps and delta time calculations
- graphics handling
- advanced scaling
####in-testing
- app options
- multi-touch + mouse & keyboard input detection
- advanced drawing (blending, elements, buttons)
- double buffering
- linear and radial collision
####coming soon
- Independent Application enable the ability to instantiate multiple app canvases on a single page
- Multi-Channel Audio IE Mobile is my main testing device, and audio is a hassle, and so this is on hold
- Cookies plans to incorporate cookies is not prioritized and I am currently using [Cookies.js by Scott Hamper](https://github.com/ScottHamper/Cookies)
Before you start developing your App in SpiceJS, it is recommended to have some knowledge of Object.create and Prototype javascript notation.
SpiceJS, designed heavily on the Canvas API, has support across most popular devices and browsers. Any device which supports Request Animation Frame and Hardware Acceleration will have a nice time.
The framework is designed on providing you the most efficient way to develop a cross platform, multi touch, and multi resolution application with JavaScript.
Prior to recent times developers had to rely on functions such as setTimeout(), however, up to date browsers can support a new feature called requestAnimationFrame() which can provide a high calculation of Frame Rate. This allows developers to create extensive programs, and fully animated games.
After your <body> </body> you want to add your code into a script tag:
<script rel="prefetch" name="main" type="text/javascript" defer></script>
Note: You may load an external JavaScript file with the same code.
For you to specify options before the application begins. Every app must include an App.OnLoad override function.
App.OnLoad = function(){
//App.Init(String::title, Int::width, Int::height)
App.Init("Title", 1920, 480);
};The application won't noticeably do anything aside from positioning and scaling the canvas at this point, and so what you want to do here is simply add your game logic in the correct place, and once the application starts up, it will replace its default loop with yours.
This is what an empty App.main override function looks like.
You must have these functions in order for the application loop to function properly.
App.main = {
init:function(){},
update:function(){},
draw:function(){}
};You can access the current state of the loop by calling App.client.update.state.current, or App.getCurrent(). This returns the current state object.
Note: state shifting is implemented but disabled, support for multiple rooms/states to come
Normally you find your options object inside SpiceJS, however during App.OnLoad, you can override settings, and make underlying changes to SpiceJS before the application starts.
You can do this by calling App.options = options, App.options.* = *, or App.setOptions(options) [soon].
var options = {
//Global
mute:false,
//Paths
paths:{
data:"data/",
images:"images/",
url:""
},
//Canvas
canvas:{
//Toggle the use of options.canvas
override:false,
//Use canvas.name, canvas.buffer
name:'canvas',
buffername:'buffer',
//Toggle the use of double-buffering
buffer:false,
//Assign canvas element background colour
color:'#0000000',
//Assign canvas element position properties
position:{
position:'absolute',
top:0,
left:window.innerWidth/2,
center:true,
z:1
},
//Assign canvas size properties
size:{
width:320,
height:480
}
}An example of the above essential functions used to create a basic SpiceJS App.
<!DOCTYPE html>
<html >
<head>
<script rel=prefetch type="application/x-javascript" src="spice.js"></script>
<script rel=prefetch name="main" type="text/javascript" defer>
App.OnLoad = function(){
App.init("sb",1920,480);
}
App.main = {
name:"Menu",
init:function() {
return true;
},
update:function() {
return true;
},
draw:function() {
return true;
}
};
</script>
</head>
<body></body>
</html>Note: Stylesheet loads block script execution, so if you have a <script> after a <link rel="stylesheet" ...>, the page will not finish parsing - and DOMContentLoaded will not fire - until the stylesheet is loaded.
#####Documentation You can read the Documentation and more on SpiceJS and how to create SpiceJS apps here.
This example provides a glimpse at creating particle factories to use with SpiceJS. In combination with Object.create methods you can create fast and flexible particle systems on the fly.
teaching points: transparent background, vector line drawing
Vector Math, Object.create(), Object Creation Patterns
This example uses a number of images to compile an animation. I've included two versions: One which includes [Blitting] images to create the animations, and another for animations without Blitting. (Warning: non-blitting techniques are not recommended for use in games or applications with a number of animations)
teaching points: sprites, blitting, animations
LayersToSpriteSheet.js (script for photoshop)
A small example previewing what it's like to use multiple backgrounds on a parallaxing path.
teaching points: external files, loading screen, parallaxing
Using multiple arrays to store map background and object data. This example previews scaling and panning an isometric randomly generated map.
teaching points: sprites, blitting, viewport, drawing and working with isometric data
JavaScript Comma Operator, Object.create(), Object Creation Patterns