An elementary HTML5 Canvas game engine built on Backbone. Specialized for 2D platformers, and optimized for mobile.
These examples are on Github.
Backbone Game Engine was written to run inside of CocoonJS Canvas+, so you can turn your HTML5 game into a native application on iOS or Android. If you have the CocoonJS launcher loaded on your iOS or Android device, you can load Super Mario Bros level 1-1 via this URL:
http://martindrapeau.github.io/cocoon-mario/cocoon-mario.zip
All included in the 3rd
folder. That and nothing else.
Backbone implements events, models, collections, inheritance and persistence. Models implement getters and setters for object attributes. Models and Collections have an extend
function to easily do inheritance. They implement methods for persistence (RESTful JSON by default). They can also trigger events and bind to them. Everything you need to build a great extensible game engine. Plus, Backbone is now widely used and provides these features in a standard fashion with a huge community to support them. I hope this project can make game programming accessible to developers already familiar with Backbone.
Backbone Game Engine was built to get you going fast. Fork this repository, and your own Github page will be ready in minutes. You can then create your own games by simply creating a new directory, and putting files in it.
The default branch is gh-pages
so that any changes get published automatically to the Github page. Changes typically take only a few seconds to get published. This allows you to develop, test, document and deploy rapidly. It is a double-edge sword though. Any untested code you push to your fork on that branch will be felt by your users. It is therefore a good practice to create and work on another branch, and fast-forward merge to the gh-pages
branch when done.
To report a bug, use Github issues. To contribute improvements, bug fixes or new examples, make changes to your fork and do a pull request. For anyone looking to help, here is a short to-do list:
The engine is based on Backbone so it is essential to understand its core structure: a Backbone.Model. A model has hash of attributes
that are changed via getter and setter methods get
and set
. These attributes should only contain state information as it is those attributes which get saved and restored. A model is a Javascript object. Hence behaviour can be stored as properties and methods directly on the object. For example a sprite sheet points to an image. Attribute img
contains the Image
object or DOM selector (by id) for retrieving the Image object. Property img
contains reference to the Image object. It is automatically set when the sprite sheet model is initialized.
var spriteSheet = new Backbone.SpriteSheet({ id: "mario", img: "#mario", tileWidth: 32, tileHeight: 64, tileColumns: 21, tileRows: 6 }); spriteSheet.get("img"); // attribute // #mario spriteSheet.img; // property //  spriteSheet.img.width //672 spriteSheet.img.height //384
In fact, a model stores its attributes in the object property attributes
. Methods get
, set
and toJSON
operate on that property. Just remember that state date like sprite coordinates, velocity, etc go in there. However references to other objects do not.
Backbone Game Engine does not use jQuery. Instead, it depends on backbone.native which re-creates the ubiquitous $
function/object with only essentials required by Backbone. As such, you are limited to simple DOM selectors enabled by querySelectorAll and events. Since the framework is for canvas-based games, avoid HTML manipulations. Canvas-based only allows for easier wrapping with CocoonJS. Consult the documentation of backbone.native to understand limitations.
To create a new example (or game), create an empty directory at the same level as super-mario-bros
. Then, add some files. Here is the recommended file structure:
3rd/ src/ ... super-mario-bros/ my-game/ index.html main.js
index.html
is the HTML document which loads your assets, and defines your canvas. File main.js
is where you instantiate the game engine and sprites. It must get loaded last.
The HTML document (usually named index.html
in its own folder) declares the assets to be loaded and the canvas
element. Javascript assets are declared in the HEAD
element. Images are loaded via IMG
elements. They must be hidden with inline CSS. Everything is bootstrap-loaded as declared in the HTML file. There is no asynchronous loading.
Here is an example HTML file taken from the example Mario.
<!doctype html>   <title>Mario - Backbone Game Engine</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="../apple_touch_icon.png" rel="apple-touch-icon" /> <meta name="viewport" content="width=960, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>              <canvas id="foreground" width="960" height="700"> Your browser does not support canvas element. </canvas>
Some important notes:
viewport
, apple-mobile-web-app-capable
, mobile-web-app-capable
and apple-mobile-web-app-status-bar-style
ensure the canvas is properly sized and styled on iPads and other mobile devices. The width specified there should be the same as the canvas elements. On mobile devices, an orientation change will recalculate and change the width to fit the canvas in the viewport. touch-action: none;
on the HTML
tag disables touch behaviors, like pan and zoom for IE10.getElementById
Javascript function to retrieve the Canvas
and Image
objects from their respective DOM elements.
File main.js
is where you declare and initialize your objects. It is recommended that you wrap that code in a function which gets executed once the document and all assets are loaded (i.e. window.onload event). You can use for example $(window).on("load", function() {});
.
Other files use a simple anonymous function instead since they contain class declarations mainly. However in main.js
is where Canvas
and Image
objects are retrieved from the DOM elements. So they must first be loaded. This keeps things simple. Assets are as a consequence always loaded synchronously.
Here is a sample main.js
file, taken from the Mario example.
$(window).on("load", function() { // Mario alone in an empty world. Control him with the touchpad. Backbone.Mario = Backbone.Hero.extend({ defaults: _.extend({}, Backbone.Hero.prototype.defaults, { name: "mario", spriteSheet: "mario" }) }); var canvas = document.getElementById("foreground"); var spriteSheets = new Backbone.SpriteSheetCollection([{ id: "mario", img: "#mario", tileWidth: 32, tileHeight: 64, tileColumns: 21, tileRows: 6 }]).attachToSpriteClasses(); var debugPanel = new Backbone.DebugPanel(); var input = new Backbone.Input({ drawTouchpad: true, drawPause: true }); var mario = new Backbone.Mario({ x: 400, y: 400, floor: 500 }, { input: input }); var world = new Backbone.World({ width: 30, height: 18, tileWidth: 32, tileHeight: 32, backgroundColor: "rgba(66, 66, 255, 1)", viewportBottom: 156 }); world.add(mario); var engine = new Backbone.Engine({}, { canvas: canvas, debugPanel: this.debugPanel, input: input }); engine.add([ world, input, debugPanel ]); // Expose things as globals - easier to debug _.extend(window, { canvas: canvas, engine: engine }); // Ensure the canvas is always visible and centered adjustViewport(canvas, canvas.width, canvas.height); });
Backbone Game Engine defines classes in the Backbone
namespace. Most are sub-classed from Backbone.Model
or Backbone.Collection
.
new Backbone.Engine([attributes], [options])
Backbone.Engine
is a Backbone model that holds a Backbone collection of sprite models.
It uses HTML5's requestAnimationFrame to provide a 60 frames per second game loop.
The sprite collection is stored in property sprites
. You may directly access it however for convenience, methods add
, remove
and reset
exist as proxy the engine.
clearOnDraw
: Optional. Boolean to ask for a clear of the canvas before redraw. Defaults to false. Note that this is an expensive call. Better to only clear the area that changed.tapDetectionDelay
: Optional. The delay in ms before a tap gestured is detected. Defaults to 50mstapMoveTolerance
: Optional. The amount of pixel move tolerated to detect a tap gesture. Defaults to +/-5 pixels. Beyond that, a drag gesture will be trigerred.
Upon instantiation, these options can be passed. They will be stored as properties on the Backbone.Engine
model instance.
canvas
: The canvas to draw upon. Drawing is on its 2d context.input
: Optional. The user control input instance. If passed and the pause button is enabled, will stop/start then engine when pressed.debugPanel
: Optional. A Backbone.DebugPanel instance. If passed fps
and cycleTime
are output.add()
: Adds one or multiple models delegating to the sprite collection's add
method.remove()
: Removes one or multiple models delegating to the sprite collection's remove
method.reset()
: Clears or sets the sprites collection delegating to the reset
method.isRunning()
: Returns true if the engine is running, or false if not.start(), stop()
: Starts or stops the engine.toggle()
: Toggle start/stop the engine.tap
: Trigerred when the user clicks or taps on the canvas. A tap is defined when the user presses/clicks on a position without moving for more than tapDetectionDelay
ms. The event callback function is passed the DOM event object, with these extra properties attached: canvas
, canvasX
and canvasY
. In addition, property canvasHandled
is provided as a mechanism to stop propagation (see below). key
: Trigerred when the user types in a key. The event callback function is passed the DOM event object, with additional property canvas
.dragstart
, dragmove
and dragend
: Trigerred when a drag gesture occurs. This happens when the user presses/clicks and holds and moves. When these events are trigerred, the tap
event does not get trigerred.tap
and drag*
events are broadcasted to whomever is listening. Event property canvasHandled
is used to to prevent propagation to many overlapping objects. At first it is set to false
. The first object to intercept and handle the event should set it to true
. Subsequent objects intercepting the event should look at this property and return without action when true
. Backbone.Button
and Backbone.WorldEditor
implement this behavior.
During every animation frame, the engine performs these things:
update
method. Passing dt
, the time in milliseconds since the last call to update. The update method must return true
to ask for a redraw, or false
not to.draw
method passing context
, the canvas 2d context. Perform whatever magic you like in the draw method.clearOnDraw
option to do so however it is an expensive call. Better to do it only when required. See class Backbone.World for an example.
The update
method is used to update the model position, animation, detect collisions, or whatever you like. If it requests a redraw, the engine will then call its draw
method. The engine ensures that models are updated and drawn in the order they are sorted in the collection. You can define the sort order by defining a comparator.
Models added to the collection receive an attach
event and have property engine
set as backreference. When removed, they receive a detach
event.
To measure performance, two properties are set: fps
and cycleTime
. If you passed option debugPanel
, they will be drawn on screen.
The engine can be started and stopped. When running, will perform an update/draw sequence 60 times per second. Use methods start
, stop
or toggle
. Use method isRunning
to determine if the engine is running. If you passed option input
, the engine will bind to the pause button (or the p key) to toggle start/stop.
var canvas = document.getElementById("foreground"); var debugPanel = new Backbone.DebugPanel(); var ball = new Backbone.Ball({ x: 100, y: 100, color: "blue" }); var engine = new Backbone.Engine({ clearOnDraw: true }, { canvas: canvas, debugPanel: debugPanel }); engine.add([ ball, debugPanel ]);
Taken from the Bouncing Ball example. Draws two models: the debug panel and a bouncing ball.
new Backbone.SpriteSheet([attributes], [options]);
Backbone.SpriteSheet
is a Backbone model which breaks an image into frames used for animation.
img
: The Image
object or element id selector of the image to find in the DOM (i.e. #icons
). A pointer to the Image object is then stored in property img
.imgUrl
: Optional. The url to the image to load dynamically. If specified, and the image element does not exist, will try to load the image.tileWidth, tileHeight
: Size of tiles in pixels.tileColumns, tileRows
: Number of tiles in the image.frames
: Array of animation frames. Automatically set when model is instantiated.img
: Pointer to Image
object. Automatically set when model is instantiated.spawnImg
: Trigerred when the image is fully loaded.destroyImg
: Trigerred when the image is unloaded.
When a sprite sheet is instantiated, an array of frames is built and stored in property frames
. A frame object contains the coordinates of the frame. It consists of {x, y, width, height}
representing the pixel position and size of the frame. These will be passed to the HTML5 canvas drawImage function as arguments sx, sy, sw, sh
by the draw
method.
Sprite sheets are not generally created on their own, but rather in a Backbone.SpriteSheetCollection
. See below for usage.
new Backbone.SpriteSheetCollection([models], [options]);
Backbone.SpriteSheetCollection
is a Backbone collection of Backbone.SpriteSheet
models.
attachToSpriteClasses()
: Attaches sprite sheets to sprite class prototypes. Does so by finding all defined sprite classes (Backbone.*
) with default attribute spriteSheet
matching a sprite sheet id in the collection. Then sets their spriteSheet
property to point to the correct sprite sheet in the collection.allSpawnImg
: Trigerred when all images are fully loaded.Define your sprite sheets by creating a collection as such:
this.spriteSheets = new Backbone.SpriteSheetCollection([{ id: "mario", img: "#mario", tileWidth: 32, tileHeight: 64, tileColumns: 21, tileRows: 2 }, { id: "tiles", img: "#tiles", tileWidth: 32, tileHeight: 32, tileColumns: 29, tileRows: 28 }]).attachToSpriteClasses();
Here two sprite sheets are created mario
and tiles
. Their graphics are in Image
objects found in the DOM. The attribute img
is the selector to retrieve them.
Calling method attachToSpriteClasses
will attach the sprite sheets to each sprite class found in the Backbone
namespace.
new Backbone.Sprite([attributes], [options]);
Backbone.Sprite
is a Backbone Model which implements the required update
and draw
methods to animate a sprite, frame by frame.
x, y
: The coordinates in pixels.width, height
: Size of the sprite in pixels.paddingLeft, paddingRight, paddingTop, paddingBottom
: Optional. Internal padding to account for empty space inside the tile of a sprite. Useful to specify empty zones for collision detection.sequenceIndex
: The current animation sequence frame. Automatically set.state
: The current animation.spriteSheet
: Sprite sheet id. collision
: Optional. For use with Backbone.World.static
: Optional. For use with Backbone.World.visible
: Optional boolean. If true, the sprite is not drawn. Default is false.zIndex
: Optional. Specifies the drawing order. Higher value is drawn above sprites with lower values. Default is 0.zIndex
is only used in Backbone.World
. Currently, it is partially implemented - only 0 and 1 values are recognized.
animations
: Hash of animations of the sprite. Described further below.spriteSheet
: Instance of the Backbone.SpriteSheet
holding the images to animate. This is automatically set when you define your sprite sheet collection. See Backbone.SpriteSheetCollection for details.saveAttributes
: Attributes serialized for persistence. Defaults to ["name", "state", "sequenceIndex", "x", "y"]
.toSave()
: Serializes attributes for persistence. Attributes to be serialized are specified in the saveAttributes
property.update(dt)
: Called by then engine 60 times a second. Updates sprite attribues and implements behavior. Returns true to ask for a redraw, or false for none.onUpdate(dt)
: Not defined by default. If you define it, it is called at the end of update
. Useful for extending the behavior of a sprite without having to overload metod update
. Note that draw
is called based on the Boolean return value of this method to decide whether to draw or not. It must therefore return true
to perform a draw, or false
not to.draw(context, options)
: Called by the engine after update
, if a redraw was asked. Takes care of rendering the sprite, and its proper animation at the correct position. Argument options
can be used by a model serving as proxy. For example it is passed when drawn by a Backbone.World
instance. It will contain offsetX
and offsetY
to transform x
and y
from world coordinates to canvas coordinates.onDraw(context, options)
: Not defined by default. If defined, it is called at the end of draw
. Useful for extending the rendering of a sprite without having to overload metod draw
.getAnimation([state])
: Returns the current animation based on argument state
. If argument state
is omitted, the attribute is used instead.overlaps(x, y):
: Checks to see if the sprite overlaps with the passed coordinates. Returns a Boolean.getLeft(withPadding), getRight(withPadding), getTop(withPadding), getBotttom(withPadding)
: Returns the left, right, top or bottom-most position of a sprite. Argument withPadding is a boolean specifying whether to include the padding or not. Defaults to false.bbox(withPadding)
: Returns the bounding box of the sprite as an object {x1, y1, x2, y2}
. Argument withPadding
is a boolean specifying whether to include the padding or not. Defaults to false.getCenterX(withPadding)
: Returns the center x
of the sprite. Argument withPadding
is a boolean specifying whether to include the padding or not. Defaults to false.getCenterX(withPadding)
: Returns the center y
of the sprite. Argument withPadding
is a boolean specifying whether to include the padding or not. Defaults to false.attach
: Triggered when the sprite is attached to the engine.detach
: Triggered when the sprite is detached to the engine.
The attach
and detach
events can be used to start/stop listening to events. For example, the Backbone.Hero
sprite starts listening to user input when attached, and stops when detached.
Graphics are obtained from a Backbone.SpriteSheet model. In attribute spriteSheet
, specify the sprite sheet id you previously defined in a Backbone.SpriteSheetCollection
instance. The collection will automatically attach it to the sprite by setting property spriteSheet
as back reference. Building on the example above:
var spriteSheets = new Backbone.SpriteSheetCollection([{ id: "mario", img: "#mario", tileWidth: 32, tileHeight: 64, tileColumns: 21, tileRows: 2 }]).attachToSpriteClasses(); var mario = new Backbone.Mario({ spriteSheet: "mario" }); mario.get("spriteSheet"); // mario spriteSheets.get("mario"); // child {cid: "c2", attributes: Object, collection: child, _changing: false, _previousAttributes: Object…} mario.spriteSheet; // child {cid: "c2", attributes: Object, collection: child, _changing: false, _previousAttributes: Object…}
Instantiating a Backbone.Sprite
model is not very useful by itself. You must first extend the Backbone.Sprite
class to provide your own animations and a pointer to the sprite sheet. For example this defines a sprite with 3 animations idle
, walk-left
and walk-right
. It points to the sprite sheet id mario
.
Backbone.MySprite = Backbone.Sprite.extend({ defaults: _.extend(_.deepClone(Backbone.Sprite.prototype.defaults), { x: 400, y: 400, spriteSheet: "mario", state: "idle", sequenceIndex: 0, static: false, collision: true }), animations: { idle: { sequences: [0] }, "walk-right": { sequences: [1, 2, 3, 2], delay: 200 }, "walk-left": { sequences: [1, 2, 3, 2], scaleX: -1, delay: 200 } } });
Above, the Backbone.Sprite
was sub-classed using extend
method. defaults
are the default attributes to give any new Backbone.MySprite
instance. They extend the Sprite class' defaults.
If you want to reuse parts of defaults
or animations
from a parent class, make sure to make a copy. You can use the helper function _.deepClone
for that purpose (_.clone
only goes one level deep). Otherwise you may change the parent class behavior. For example the Backbone.PennieUg
class reuses the Backbone.Pennie
class' properties defaults
and animations
by first creating copies.
Backbone.PennieUg = Backbone.Pennie.extend({ defaults: _.extend(_.deepClone(Backbone.Pennie.prototype.defaults), { name: "pennie-ug" }), animations: _.deepClone(Backbone.Pennie.prototype.animations) }); Backbone.PennieUg.prototype.animations.idle.sequences = [168, 168, 169, 170, 169, 168];
deepClone
was created as a mixin of underscore
. When it makes sense, make general functions available that way. Look at the end of src/core.js
for all mixins.
Sprite property animations
contains a hash of animations. Each animation contains a sequence of frames and a delay between frames for animation. For example:
animations: { idle: { sequences: [0, 1], delay: 200 } }
This defines an animation of two frames, alternating at an interval of 200ms. Values 0 and 1 in array sequences
are frame indices defined in the sprite sheet. Sprite attributes state
and sequenceIndex
control which animation and sequence are currently used. The sequenceIndex
is automatically incremented (and reset to 0) by the sprite's draw function. Attribute state
determines the current animation. It must be set to idle
in the above example (as there is only one).
Extra animation options are available. Here is a complete list:
sequences
: Array of frame indices, or squence objects. A sequence object looks like this: {frame: 52, x: 0, y: -32, scaleX: 1.00, scaleY: 1}
. It allows you to specify an offset to apply when the sprite is drawn, and a scaling factor.scaleX, scaleY
: Optional. Scaling factors. Set scaleX
to -1 to flip horizontally. Defaults to 1 if omitted.delay
: Optional. The time to change to the next sequence. No need to specify if there is only one frame (as there is no animation). You can also define a sprite method sequenceDelay
to programmatically return the delay. It will be passed the current animation.
For detailed examples of animations, look at file artifacts.js
in the super-mario-bros
folder. Class Backbone.Pennie
implements a basic animation sequence using frame indices, while Backbone.FlyingPennie
implements a more complex animation with sequence objects.
Backbone.Pennie = Backbone.AnimatedTile.extend({ ... animations: { idle: { sequences: [52, 52, 53, 54, 53, 52], delay: 50 } }, ... Backbone.FlyingPennie = Backbone.Sprite.extend({ ... animations: { anim: { sequences: [ {frame: 52, x: 0, y: -32, scaleX: 1.00, scaleY: 1}, {frame: 52, x: 0, y: -64, scaleX: 0.50, scaleY: 1}, {frame: 53, x: 0, y: -90, scaleX: 0.50, scaleY: 1}, {frame: 53, x: 0, y: -128, scaleX: 1.00, scaleY: 1}, {frame: 53, x: 0, y: -128, scaleX: 0.50, scaleY: 1}, {frame: 52, x: 0, y: -112, scaleX: 0.50, scaleY: 1}, {frame: 52, x: 0, y: -90, scaleX: 1.00, scaleY: 1}, {frame: 52, x: 0, y: -80, scaleX: 0.50, scaleY: 1}, {frame: 53, x: 0, y: -80, scaleX: 0.50, scaleY: 1} ], delay: 50 } }, ...
new Backbone.Input([attributes], [options]);
Backbone.Input
class is a model which captures user input events and stores them as model attributes. For example pressing the left arrow, sets the left
attribute to true
. Depressing sets it to false
. Bind to on the attribute change event to be notified.
Backbone.Input
supports keyboard, mouse and touch events. It can draw a touchpad on screen with left and right arrow keys, an A (red) button and a B (blue) button.
This attribute can be passed when creating the model, to configure the input.
drawTouchpad
: Optional. Boolean or string "auto" to indicate whether to draw the touchpad. When "auto", the touchpad will be drawn only on touch devies. Defaults to "auto".The following model attributes are set by the model. They should not be set externally.
touchEnabled
: Boolean set to true if the device is touch enabled.left
: Boolean set to true when the left touchpad arrow or left keyboard arrow key is pressed.right
: Boolean set to true when the right touchpad arrow or right keyboard arrow key is pressed.buttonA
: Boolean set to true when the A touchpad button is pressed, or when the z keyboard key is pressed.buttonB
: Boolean set to true when the B touchpad button is pressed, or when the x keyboard key is pressed.hasTouchpad()
: Returns true if the touchpad is drawn.leftPressed()
: Returns true if the left button is pressed.rightPressed()
: Returns true if the right button is pressed.buttonAPressed()
: Returns true if button A is pressed.buttonBPressed()
: Returns true if button B is pressed.attach
: Triggered when the input is attached to the engine. Will start listening to user input.detach
: Triggered when the input is detached to the engine. Will stop listening to user input.
You can add or remove a Backbone.Input
model from the engine on the fly. In the Super Mario Bros example, the Backbone.Input
and the Backbone.WorldEditor
are swapped when moving from play to edit modes.
var input = new Backbone.Input(); var engine = new Backbone.Engine(); engine.add(input); input.bind("change:left", function(input) { if (input.leftPressed()) console.log("left pressed:)"); else console.log("left depressed:("); });
new Backbone.World([attributes], [options])
Backbone.World
is model which contains a collection of sprites that interact with each other. A world is an environment composed of tiles and characters. The world extends beyond the canvas however the viewport, the visible portion, is constrained within its prescribed limits. Backbone.World
is similar to a sprite; it implements the update
and draw
methods required by the Backbone.Engine
collection.
x, y
: Origin of top-left corner in pixels.width, height
: Size of world in tiles.tileWidth, tileHeight
: Size of a tile in pixels.viewportLeft, viewportRight, viewportTop, viewportBottom
: Defines an area in the canvas the world is constrained to. Each value provides gutter regions in pixels. Anything drawn by the world will be clipped in the area. Useful for drawing a menu bar or buttons on the same canvas. In provided demos for example, viewportBottom
is set to 156 pixels to make room the the touchpad.sprites
: Array of sprite models for persistence.backgroundColor
: Background color of the world.backgroundImage
: Id attribute of an image element in the DOM to show as background.state
: Persisted state either play or pause.backgroundImage
: Optional. Pass to use a background image instead of a background color. Anchored to the origin.input
: Input instance to control the hero.camera
: Camera instance to keep the hero in the viewport.debugPanel
: Optional.
A Backbone.World
is a model that wraps a collection stored in property sprites
. To prevent outside direct access to this collection, it provides these two methods:
add(models, [options])
: Add one or many models. Adds world
to options and delegates to the sprites
collection's add
method. Then sets the world
property as back-reference on the new model(s). Returns the new model(s).remove(models, [options])
: Removes one or many models. Delegates to the sprites
collection's remove
method. Deletes the world
back-reference and returns the model(s).
In addition to standard Backbone.Model
methods, it also exposes these:
spawnSprites()
: Resets the sprites collection by retrieving the sprites
attribute from the model. This is called after the world is loaded.update(dt)
: Update function called by the engine. Will in turn call the update method of all sprites.draw(context)
: Draw function called by the engine. Will in turn call the draw method of all sprites.cloneAtPosition(sprite, x, y)
: Clones the sprite model and places the new instance at the specified coordinates. Will pass world
to the options
payload when created. Will also set property world
as back-reference. If the sprite name matches that of the world attribute hero
it will also pass option input
, and if a Backbone.Camera
exists, it will be tied to it. This function also acts as a toggle when placing a sprite over a tile where another exists. The existing one is removed. This ensures only one tile (static sprite) exists at one location.width(), height()
: Return the size of the world in pixels.getWorldIndex(object)
: Calculates the index position of a tile based on coordinates. Argument object
must contain x
and y
, or be a model with those attributes. The index is calculated with formula height * x/tileWidth + y/tileHeight
. This method is used to set the id
of tile sprites.getWorldCol(x), getWorldRow(y)
: Returns the tile position in columns or rows of a coordinate.findAt(x, y, [type], [exclude], [collision])
: Finds the first sprite at the specified coordinate. Use for collision detection. Optional arguments allow you to filter what to look for. Set type
to character
to find moving sprites, or tile
to find tiles. Set exclude
to the id of the sprite you want to exclude from the search. In a collision detection scheme, this is usually the id of the sprite you are checking against. Set collision
to true to find only tiles that have their collision
flag set.filterAt(x, y, [type], [exclude], [collision])
: Same as findAt
but returns the list of all matching sprites instead of the first.findCollidingAt(x, y)
: Finds a colliding tile. Just like calling findAt(x, y, "tile", null, true)
.findCollisions()
: Finds collisions for a given set of collision map.attach
: Triggered when the sprite is attached to the engine. Will trigger the attach
method of all sprites in the world.detach
: Triggered when the sprite is detached to the engine. Will trigger the detach
event of all sprites in the world.tap
:
Trigerred when the user taps or clicks on the canvas. The callback will be passed the DOM event extended with these properties: canvas
, canvasX
, canvasY
, world
, worldX
and worldY
.
key
: Trigerred on a keyup event. The event callback will be passed the DOM event as argument.
Sprites can be added and removed via methods add
and remove
. Sprites are automatically attached to the Backbone.Engine the world is attached to. Sprites then have properties engine
and world
set as back-reference. In each request frame, the same mechanics apply as for sprites attached directly to an engine; methods update
and draw
are called for each sprite. The exception is for static sprites which are only updated/redrawn when required (see below).
Internally, the world keeps sprites into a collection stored in property sprites
. It further splits sprites into 2 collections for faster lookup:
staticSprites
: Background sprites that have no animation. These are usually same-sized tiles. Sprites that have their static
attribute set to true
will be put in this collection. Sprites are given an id
determined by their position (column and row). The collection is ordered and indexed on id
allowing for fast lookup on a pair of x/y coordinates. In addition, these sprites are drawn on a background canvas only drawn when required (i.e. world is panned).dynamicSprites
: Animated tiles and characters. Their static
attribute must be set to false
to fall in this collection. These sprites are given unique id
attributes based on their name (i.e. mario.1
). They are not indexed therefore lookup has an order of N. Keep the number of sprites here to a minimum.
A world is measured in tiles via attributes width
, height
, tileWidth
and tileHeight
. Call methods width
and height
to get the size in pixels. Attributes x
and y
determine the origin in pixels (top-left corner) and allow the world to be panned consequently changing the viewport.
static
attribute is set to false to prevent redraws every animation frame. Also ensure the width of tile sprites match that of world attributes tileWidth
and tileHeight
.
When the world is created, sprites are instantiated in method spawnSprites
. Each sprite instance is attached to the engine. Sprites then have properties engine
and world
set pointing to those respective objects.
Sprites can be categorized with attribute type
as to identify one another when they interact with each other. Sprites of type tile
are usually static and obstacles. Sprites of type character
are usually dynamic and moving sprites.
You can add sprites with method add
which delegates to the sprites
collection's add
method. It takes care of passing the world
as option.
You can also use method cloneAtPosition(sprite, x, y)
. It takes as argument an existing sprite, and coordinates. It will clone the sprite and place it at the specified coordinates passing world
and input
as options. If the sprite has its hero
attribute set to ture
, and if a Backbone.Camera
exists, it will be tied to it. Backbone.WorldEditor uses this function for instance.
Methods getWorldIndex
, getWorldCol
and getWorldRow
can be used to find the position of a sprite. A sprite's x
and y
attributes determine their position relative to the world origin.
The background of a world is composed of same-size tiles defined by attributes tileWidth
and tileHeight
. A tile is usually a non-animated sprite with its static
attribute set to true. The model id
is the position of the sprite on screen (column and row). As such, there can only be one tile per location.
Characters are sprites that interact with their environment. Backbone.Character and Backbone.Hero are character sprites. Character sprite models usually have teir type
attribute set to character
. You are free to use attribute type
to classify your sprites.
Internally sprite positions are stored in a QuadTree. As a sprite moves, its position in the QuadTree is updated.
Three methods exist to detect collisions.
findAt(x, y, [type], [exclude], [collision])
:
Find the first sprite touching the given point or null
if none are found. Optional arguments can be passed for limiting the lookup:
type
: Optional. If set, will only lookup sprites matching that type. Typical values are character
or tile
.exlcude
: Optional. The sprite model's id
to exclude in lookup.collision
: Optional. Boolean indicating whether to only include sprites that have the collision
attribute explicitly set to true
.
filterAt(x, y, [type], [exclude], [collision])
: Same as a above but finds all sprites touching the given point. Returns an array of sprites.findCollisions(map, [type], [exclude], [collision])
:
Detects collisions on sprites for a set of named coordinates.
Optional arguments are the same as above. Argument map
is an array of objects that is passed in, and passed out. A map object must contain:
x
and y
: Coordinates to detect the collision.dir
: The lookout direction: top
, right
, bottom
or left
.sprites
: Array of detected colliding sprites. Reset/initialized to [] every call.sprite
: The closest sprite based on the lookout direction.
Look at the code in Backbone.Character
and Backbone.Hero
classes for examples on how to perform collision detection.
The world model attributes contain all that is necessary to persist the state of the world to disk, or in the cloud. Calling the save
method first serializes the sprite collection from the sprites
property into the sprites
attribute. It calls the toSave
method on each sprite to save their position and state. It then delegates to the backbone model's save
method to save to a server or local storage in JSON format. See the Backbone documentation for details.
The world can be restored by calling spawnSprites
passing as argument a saved world in JSON format. For example, file super-mario-world/level-1-1.js
contains the level in JSON format. It is set in global variable _world
. The world can be restarted anytime with this line of code:
world.set(window._world).spawnSprites();
var mario = new Backbone.Mario({ x: 400, y: 400, floor: 500 }); var world = new Backbone.World({ width: 30, height: 18, tileWidth: 32, tileHeight: 32, backgroundColor: "rgba(66, 66, 255, 1)" }); world.add(mario); var engine = new Backbone.Engine(); engine.add(world);
A sprite (mario) is first created and added it the world. The world is then added to the engine. This is taken from file mario/main.js
for the Mario example.
new Backbone.WorldEditor([attributes], [options])
Backbone.WorldEditor
is a model which displays a palette of sprites and allows the user to edit a Backbone.World
instance by placing and removing sprites. Also allows the user to pan the world. In the Super Mario Bros demo, an editor is drawn at the bottom of the world replacing the Backbone.Input. Like sprites and world, it must be added to the Backbone.Engine
to render. The palette will page automatically if there are too many sprites.
x, y
: Top-left placement position in pixels of the editor on the canvas.width, height
: Size of editor in pixels.tileWidth, tileHeight
: Size of sprites drawn in the palette.padding
: Padding in pixels around sprites.backgroundColor
: Background color of the editor.selectColor
: Background and outline color of a selected sprite.selected
: The name of the cuurrently selected sprite.spriteNames
: Ordered array of sprite names in the palette.world
: The Backbone.World to edit.debugPanel
: Optional. If passed will output mouse coordinates.attach
: Triggered when the sprite is attached to the engine. Will start listening to user input.detach
: Triggered when the sprite is detached to the engine. Will stop listening to user input.
The palette is drawn as a series of tiles left to right, top to bottom. Each tile is a sprite. The sprite may be bigger than the specified tile size, in which case it will be resized to fit the tileWidth
and tileHeight
attributes.
new Backbone.Character([attributes], [options])
The Backbone.Character
is a sub-classed Backbone.Sprite
which implements an animated character with elementary AI (artificial intelligence) and physics. AI is limited to moving left, right, jumping/gravity and dying. Direction changes occur with collisions against an obstacle; either a tile or another character. You are free to extend the AI by subclassing it.
Backbone.Character
must live inside a Backbone.World
.
x, y
: Position of the sprite.floor
: Set this value to prevent the character to fall outisde of the world due to gravity. By default it is null meaning the character will be removed from the world if it falls below the bottom of the world.ceiling
: Analogous to width, height
: Size of the sprite in pixels. Defaults to 32 x 32.paddingLeft, paddingRight, paddingTop, paddingBottom
: Optional. Internal padding to account for empty space inside the tile of a sprite. Useful to specify empty zones for collision detection.sequenceIndex
: The current animation sequence frame. Automatically set.name
: Name of the sprite.type
: Type of sprite. Defaults to character.spriteSheet
: Id of sprite sheet.state
: Current animation. Starts with idle-right
.collision
: Boolean indicating whether it can be detected by other sprites. Defaults to true.static
: Set to false for the World to draw every animation frame.visible
: Set to true for the sprite to be drawn.zIndex
: Optional. Specifies the drawing order. Higher value is drawn above sprites with lower values. Default is 0.velocity, acceleration
: Current horizontal movement. Controlled by the AI in update
.yVelocity, yAcceleration
: Current vertical movement. Controlled by the AI in health
: Amount of health the character has. When health
is 0, the is "knocked-out" and dies. Defaults to 1.attackDamage
: This is the amount of damage the character does to an opponent. Will reduce their health by this value. Defaults to 1.aiDelay
: Time in ms between AI calls.
Backbone.Character
inherits all methods from Backbone.Sprite
. Here are additional methods, and ones with a different signature.
getStateInfo([state])
: Decomposes state
into move and direction components. For example walk-left
would be decomposed into {mov:"walk", mov2: null, dir:"left", opo:"right"}
. If argument state
is omitted, the state
attribute is used instead. See Backbone.Hero for a more detailed description.buildState(mov, [mov2], [dir])
: Helper to construct and return a dash-separated state string. Ignores falsy values. For instance buildState("walk", "left")
and buildState("walk", null, "left")
both return walk-left
.update(dt)
: Handles the character movements and collision detection. Also calls the ai
function.ai(dt)
: Implements the AI. Is called at an interval defined by attribute aiDelay
.updateSequenceIndex(dt)
: Returns the new sequenceIndex
(animation frame). Called by update
.toggleDirection(dirIntent)
: Invokes a left
or right
direction change.startNewAnimation(state, attrs, done)
: Changes the state of the character starting a new animation. Pass hash attrs
to set attributes at the same time. Callback done
is called once the animation is complete. Useful for performing only one animation sequence.hit(sprite, [dir], [dir2])
: Function invoked usually by a hit
event. Implement this to determine what happens when another sprite
hits the character. Argument dir
is the primary direction of the hit (left
, right
, top
or bottom
). Argument dir2
is the secondary direction. In top-left for example, it would be left. dir2
can also be attack
in which case health
is reduced by attackDamage
amount.hurt(sprite, [dir], [dir2])
: Function invoked when the character gets attacked and has remaining health. The character bounces back.knockout(sprite, [dir], [dir2])
: Function invoked when the sprite gets knocked out of the world. The sprite is litterally knocked out updside down. This function is called when health
is 0.attach
: Triggered when the sprite is attached to the world. Turns on the AI.detach
: Triggered when the sprite is detached to the world. Turns off the AI meaning the character will not move.hit
: Trigger this event on the Backbone.Character
to indicate a hit with another character. Delegates to the hit
method above. For example, Backbone.Hero
executes this when he lands on a character: sprite.trigger("hit", this, "top", "left");
.change:health
: Whenever the character health decreases method hurt
gets called. If health
reaches 0, method knockout
gets called instead.
During an animation frame, it is important to understand the method and event sequence. First, the update
method is called. It may then call the ai
method if the aiDelay
internal is reached. Afterwhich collision detection is performed. At that point, the character may trigger hit
events on other characters. Those may in turn trigger a hit
event on the character. The character position and velocities are updated, and finally, the character model is set. The update
method then returns true
to tell the engine to draw the sprite, or false
to prevent a redraw.
update
method is completely executed.
Therefore methods ai
, hit
, hurt
and knockout
may set the character model and abort the update. To abort the update, those methods set property cancelUpdate
to true
.
In the Super Mario Bros example, look at file enemies.js
. There are implementations for basic characters in that game. The hit
method implements collision detection outcome, notably when Mario lands on a character. In the case of a Mushroom, it gets squished. When a turtle shell is sliding, it would cause a knockout.
... hit: function(sprite, dir, dir2) { if (this._handlingSpriteHit) return this; this._handlingSpriteHit = sprite; var cur = this.getStateInfo(), opo = dir == "left" ? "right" : (dir == "right" ? "left" : (dir == "top" ? "bottom" : "top")); if (sprite.get("hero")) { if (dir == "top") this.squish.apply(this, arguments); } else if (sprite.get("state").indexOf("slide") != -1 || sprite.get("type") == "tile" && dir == "bottom" && sprite.get("state") == "bounce") { this.knockout.apply(this, arguments); } sprite.trigger("hit", this, opo); this._handlingSpriteHit = undefined; return this; } ...
The hit
method will in turn trigger a hit event on the sprite which caused the collision.
That sprite may in turn trigger a hit event. To avoid the possibility of inifite callback loops, private property _handleSpriteHit
is used.
new Backbone.Hero([attributes], [options])
The Backbone.Hero
is a sub-classed Backbone.Character
which implements a controlable character with input and physics. Its playability is based on that of Mario in the Nintendo classic Super Mario Bros. Currently, only the small Mario is implemented.
Backbone.Hero
must live inside a Backbone.World
.
x, y
: Position of the sprite.floor
: Set this value to prevent the character to fall outisde of the world due to gravity. By default it is null meaning the character will be removed from the world if it falls below the bottom of the world.ceiling
: Analogous to width, height
: Size of the sprite in pixels. Defaults to 32 x 64.paddingLeft, paddingRight, paddingTop, paddingBottom
: Optional. Internal padding to account for empty space inside the tile of a sprite. Useful to specify empty zones for collision detection. sequenceIndex
: The current animation sequence frame. Automatically set.name
: Name of the sprite. Defaults to hero.hero
: Boolean set to true indicating this character sprite is the hero. Backbone.World will detect this and pass the Backbone.Input instance for taking user input.type
: Type of sprite. Defaults to character.spriteSheet
: Id of sprite sheet.state
: Current animation. Starts with idle-right.collision
: Boolean indicating whether it can be detected by other sprites. Defaults to true.static
: Set to false for the World to draw every animation frame.visible
: Set to true for the sprite to be drawn.zIndex
: Optional. Specifies the drawing order. Higher value is drawn above sprites with lower values. Default is 0.velocity, acceleration
: Current horizontal movement. Do not set.yVelocity, yAcceleration
: Current vertical movement. Do not set.health
: Amount of health as an integer. When set to 0, the character is knocked out and dies. Defaults to 1.healthMax
: The maximum allowed health. Defaults to 2.dead
: Boolean flag indicating if the sprite is dead.attackDamage
: This is the amount of damage the hero does to an opponent. Will reduce their health by this value. Defaults to 1.ignoreInput
: Flag to prevent the hero from accepting user input. Defaults to false.canAttack
: Flag indicating whether the B button will result in an attack. Defaults to false.canTurnInJump
: By default the hero cannot turn in air (jumping or falling). Set this to tru to enable it.input
: Optional. A Backbone.Input
instance to allow control of the character with the keyboard (left and right arrows, z and x) or via touch events on the on-screen drawn gamepad.
Backbone.Hero
inherits all methods from Backbone.Sprite
and Backbone.Character
. In addition, it provides these methods you can override:
dirToggled(dirIntent)
: Called when the user presses the left or right buttons. Argument dirIntent
maye be left or right. The default implementation handles left/right movements.buttonAToggled
: Called when the user presses the A button (rigt-most blue on pad, or x on keyboard). The default implementation handles jumping.buttonBToggled
: Called when the user presses the B button (left-most red on pad, or z on keyboard). The default implementation handles running and attacking (if canAttack
is set to true).
Backbone.Hero
has the same events as Backbone.Character
.
Attribute state
determines the current animation. A state is a pair of move and direction. For example idle-right
, walk-left
and jump-right
. Method getStateInfo
will decompose the state for you into those components.
With attribute nextState
, we are able to implement tweens, or in-between animations. For example, holding the right arrow button puts the hero in a walk-right
state (and slide-right
next state). Releasing the right arrow button transitions to the slide-right
state (and idle-right
next state) for quick decelration until velocity reaches 0 to fall to the idle-right
state. If instead the left arrow button is pressed, we transition to the skid-left
state (and walk-left
next state) for quicker decelartion until velocity reaches 0 to then accelerate in the opposite direction to fall in the walk-left
state (and slide-left
next state).
Holding an arrow button and the A button (z on keyboard) allows the character to run. Its state becomes run-right
(or run-left
). Pressing the B button allows the character to jump (jump-left
or jump-right
). Hold the B button to jump higher. You can control the direction and distance jumped with the arrow buttons. And like in the real game, a jump while running will go higher to cover more distance.
Physics are implemented with attributes velocity
, acceleration
, yVelocity
and yAcceleration
measured in pixels per seconds. The two first control horizontal translations over time where a positive velocity
indicates a move to the right, and negative to the left. The latter two control vertical translations where a positive yVelocity
indicates a move downwards, and negative upwards.
Each animation have targets of these properties when required. They are omitted otherwise (i.e. walk-right
has no yVelocity
or yAcceleration
). The update
method updates the model attributes according to the targets configured on the current animation. When state
changes to another animation, so do the targets, and so follow the actual velocities over time to reach their targets. This gives the character momentum.
Gravity is implemented with a positive yAcceleration
. Unless atop a tile, our character will fall. However it is constrained by the extent of the Backbone.World
it is contained in. And will therefore stop falling when the bottom is reached.
Our character detects collisions either from tiles or other characters to constrain its movements. It does so using collision detection method findCollidings
from Backbone.World
. Every update
, collisions with other sprites are detected on the outline of the sprite:
Collisions are only handled when necessary. For instance, when jumping collisions are handled top and right only. The decision is based on looking at velocity
and yVelocity
. For gravity, a check is performed every time at the bottom of the sprite to land or to fall.
var bottomWorld = this.world.height() + tileHeight, floor = this.get("floor") || bottomWorld, bottomY = Math.min(floor, bottomWorld); for (i = 0; i < this.collisionMap.bottom.sprites.length; i++) { sprite = this.collisionMap.bottom.sprites[i]; bottomY = Math.min(bottomY, sprite.getTop(true)); if (sprite.get("type") == "platform") bottomPlatform = sprite; } ... if (yVelocity > 0 && heroBottomY >= bottomY) { // Stop falling land(bottomY); for (i = 0; i < this.collisionMap.bottom.sprites.length; i++) this.collisionMap.bottom.sprites[i].trigger("hit", this, "top", cur.dir); if (this.cancelUpdate) return true; } else if (cur.mov != "jump" && yVelocity == 0 && heroBottomY < bottomY) { // Start falling if no obstacle below attrs.nextState = state; attrs.state = this.buildState("jump", cur.mov2, cur.dir); } else if (yVelocity == 0 && heroBottomY == bottomY) { // On a floating platform - same vertical velocity if (bottomPlatform) relativeVelocity = bottomPlatform.get("velocity"); }
When an obstacle is hit, the character stops moving. Its x
is anchored, and velocity
set to 0.
if (velocity >= 0) { // Stop if obstacle to the right var rightX = this.world.width(); for (i = 0; i < this.collisionMap.right.sprites.length; i++) if (heroTopY > 0 ) rightX = Math.min(rightX, this.collisionMap.right.sprites[i].getLeft(true)); if (heroRightX >= rightX) { attrs.velocity = velocity = 0; attrs.x = x = rightX - heroWidth - paddingLeft; for (i = 0; i < this.collisionMap.right.sprites.length; i++) this.collisionMap.right.sprites[i].trigger("hit", this, "left", cur.mov2); if (this.cancelUpdate) return true; } }
A collision with other sprites triggers an hit
event on that sprite. The event hanlder will receive the colliding sprite (hero), and its relative position where the hit occured (left of the enemie sprite in this case).
This excerpt is taken from the Mario example.
Backbone.Mario = Backbone.Hero.extend({ defaults: _.extend({}, Backbone.Hero.prototype.defaults, { name: "mario", spriteSheet: "mario" }) }); var canvas = document.getElementById("foreground"); var spriteSheets = new Backbone.SpriteSheetCollection([{ id: "mario", img: "#mario", tileWidth: 32, tileHeight: 64, tileColumns: 21, tileRows: 6 }]).attachToSpriteClasses(); var input = new Backbone.Input({ drawTouchpad: true, drawPause: true }); var mario = new Backbone.Mario({ x: 400, y: 400 }, { input: input }); var world = new Backbone.World({ width: 30, height: 18, tileWidth: 32, tileHeight: 32, backgroundColor: "rgba(66, 66, 255, 1)" }); world.add(mario); var engine = new Backbone.Engine({}, { canvas: canvas, input: input }); engine.add([ world, input ]);
new Backbone.Camera([attributes], [options])
Backbone.Camera
is a model which ensures a sprite, the subject, is always in the viewport (the canvas). It pans the Backbone.World
when the character steps out of a window in the viewport. Backbone.Camera
must be added to the engine (not the world).
left, right, top, bottom
: Coordinates of the window with respect to the drawn canvas.subject
: The sprite to keep in the viewport.world
: The Backbone.World.update(dt)
: No-op. Simply returns false for no redraw.draw(context)
: No-op.maybePan()
: Called when the x
or y
position of the subject changes. Ensures the subject is within the specified window, otherwise pans the world.attach
: Triggered when the sprite is attached to the engine. Starts monitoring the subject and pans the Backbone.World
when necessary.detach
: Triggered when the sprite is detached to the engine. Stops monitoring the subject.var spriteSheets = new Backbone.SpriteSheetCollection({ id: "mario", img: "#mario", tileWidth: 32, tileHeight: 64, tileColumns: 21, tileRows: 6 }); var mario = new Backbone.Mario(); var world = new Backbone.World(); var camera = new Backbone.Camera( {left: 200, right: 600, top: 100, bottom: 50}, {subject: mario, world: world} ); world.add(mario); var engine = new Backbone.Engine(); engine.add([world, camera]);
Backbone.Clock
is a model which ticks at a set time interval. Attribute ticks
stores an integer tick value that gets incremented every interval. Useful for synchronizing sprite animations.
ticks
: Initial tick value. An integer that gets incremented every interval.delay
: Interval between ticks.update(dt)
: Updates the ticks.draw(context)
: No-op. Simply returns the model.attach
: Triggered when the sprite is attached to the engine. Starts ticking.detach
: Triggered when the sprite is detached to the engine. Stops ticking.var clock = new Backbone.Clock({delay: 2000}); clock.on("change:ticks", function() { console.log("tick", clock.get("ticks"); });
As an example, look at the Super Mario Bros example, question blocks and pennies are all synced on the same clock. These sprites are sub-classes of Backbone.AnimatedTile
. Instances create a Backbone.Clock if one does not exist. Otherwise, they find the existing one by that name and reuse it.
Backbone.AnimatedTile = Backbone.Tile.extend({ initialize: function(attributes, options) { Backbone.Tile.prototype.initialize.apply(this, arguments); this.on("attach", this.onAttach, this); this.on("detach", this.onDetach, this); }, onAttach: function() { if (!this.engine) return; this.onDetach(); this.clock = this.engine.findWhere({name: "animatedTileClock"}); if (!this.clock) this.clock = this.engine.add(new Backbone.Clock({name: "animatedTileClock", delay: 200})); this.listenTo(this.clock, "change:ticks", this.updateAnimationIndex); }, onDetach: function() { if (this.clock) this.stopListening(this.clock); this.clock = undefined; }, update: function(dt) { return true; }, updateAnimationIndex: function() { var animation = this.getAnimation(), sequenceIndex = this.get("sequenceIndex") || 0; if (!animation) return; this.set("sequenceIndex", sequenceIndex < animation.sequences.length-1 ? sequenceIndex + 1 : 0); } });
Backbone.Element
is a model that mimics a rudimentary DOM element.
Currently, it supports these features:
x
and y
.x, y
: Top left corner of button.width, height
: Size of button.backgroundColor
: Fill style of the button. Set to transparent
to see thru.borderRadius
: Border radius in pixels for rounded corners.img
: The Image
object or element id selector of the image to find in the DOM (i.e. #icons
). A pointer to the Image object is then stored in property img
imgX, imgY, imgWidth, imgHeight
: Bounding box of image location in source image.imgMargin
: Offset in pixels to apply when drawing the image inside the button.text
: Text to draw. If empty, not text is drawn.textPadding, textLineHeight
: Padding around the text and line height in pixels.textContextAttributes
: Canvas text styling properties. Will be set on the canvas context before calling fillText
. Consult HTML5 fillText documentation for details.easing
: Easing function to use as defined in Backbone.EasingFunctions
(see below).easingTime
: Duration of the animation in ms. Defaults to 1000ms.opacity
: Opacity of the element. 1 for fully visible, 0 for invisible and in-between for translucent. This value is changed by fadeIn
and fadeOut
animations.scale
: Zoom-in, zoom-out scale to apply to the element. Default is 1. Can be used to defined your own animation (see Backbone.Button's pressed
animation below).update(dt)
: Draws the element and handles animations.onUpdate(dt)
: Not defined by default. If deinfed, called at the end of update
. It must return true
or false
to determine whether to draw the element or not.draw(context, options)
: Draws the element.onDraw(context, options)
: Not defined by default. If deinfed, called at the end of draw
.drawText(b, context, options)
: Called by draw
to draw text. Argument b
is the JSONized model (this.toJSON()
) defining the context. You can call this to draw extra text if you implemented method onDraw
.overlaps(x, y):
: Checks to see if the sprite overlaps with the passed coordinates. Returns a Boolean.moveTo(x, y, callback)
: Translation animation. Will move the element from the current position to the specified x
and y
position using the easing
function and easingTime
duration.fadeIn(callback)
: Animates a fade in. Starts with an opacity of 0 going up to 1.fadeOut(callback)
: Animates a fade out. Starts with an opacity of 1 going down to 0.attach
: Triggered when the sprite is attached to the engine. Starts listening to user input.detach
: Triggered when the sprite is detached to the engine. Stops listening to user input.
Animations are driven by attributes easing
and easingTime
. The first defines the easing function to use and the second the duration in ms. These functions are found in Backbone.EasingFunctions
and are:
linear
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
You can create your own animations pretty easily. Look at the code for examples.
TO DO...
Backbone.Button
is a Backbone.Element
which listens to tap/click events and triggers a tap
event when pressed. When pressed there is a grow-shrink animation to give the user feedback.
var button = new Backbone.Button({ x: 4, y: 4, width: 52, height: 52, borderRadius: 5, img: "#icons", imgX: 0, imgY: 0, imgWidth: 32, imgHeight: 32, imgMargin: 10 }); button.on("tap", function() { console.log("button tapped!"); });
Backbone.DebugPanel
is a Backbone model on which you set attributes to be dumped on screen. Upon draw, it will JSON.stringify
attributes.
update(dt)
: No-op. Simply returns true.draw(context)
: Draws the debug information on screen.attach
: Triggered when the sprite is attached to the engine.detach
: Triggered when the sprite is detached to the engine.var debugPanel = new Backbone.DebugPanel(); var engine = new Backbone.Engine({}, { debugPanel: debugPanel }); engine.add(debugPanel); debugPanel.set({hello: "Word"}); // Draws this on screen // {"fps": 58, "ct": 7, "hello": "World"} debugPanel.set({hello: "Dolly"}); // {"fps": 58, "ct": 7, "hello": "Dolly"} debugPanel.unset("hello"); // {"fps": 58, "ct": 7}
In the above example, the debug panel is created. It is added to the engine as a model to draw. It is also passed as an option to the engine so it can output fps
and ct
(cycle time).
We manually add attribute hello
to be tracked. Whenever it changes, so does the print out on screen. Use unset
to remove a tracked attribute.
It is recommended that you support the non-existence of the debug panel with an if (this.debugPanel)
statement before setting. For example, when you extend a class, pass in the debug panel as an option. Then, in your code, check to see if it exists. For example, this is done in the Backbone.Engine.draw
method:
if (this.debugPanel) this.debugPanel.set({fps: this.fps, ct: this.cycleTime});
This supports the case where the debug panel is never created (debugPanel
= undefined
), such as in production.
File shapes.js
contains helper functions to draw elementary shapes in the 2d drawing context of a canvas. You are free to use direct methods on the context to draw. These are provided as convenience. The functions are added to the global scope, under window
. Supported functions are:
drawRect(ctx, x, y, width, height, fill, stroke) drawCircle(ctx, x, y, radius, fill, stroke) drawRoundRect(ctx, x, y, width, height, radius, fill, stroke)
I encourage you to add your own. If you do, respect these recommendations:
ctx
the drawing context.x
and y
coordinates.fill
the fill style, and stroke
the stroke style. They should be optional if possible.Backbone Game Engine was built for mobile first.
Backbone.Engine, Backbone.Input, Backbone.Button and Backbone.WorldEditor support touch and mouse events transparently. Works on Android, iOS and Windows.
On mobile devices, the meta
tag viewport
is set to 960 pixels wide.
On iOS, Android and Windows mobile devices, this will ensure the canvas is full width.
The HTML file contains the necessary header tags to ensure everything works.
You can change the viewport width value to whatever you want.
<meta name="viewport" content="width=960, user-scalable=no"/> <meta name="mobileoptimized" content="0" />
Not all screens have the same aspec ratio.
To take care of the height, you can change the height of the canvas upon start by calling the global function adjustViewport()
(see file adjust-viewport.js
for details).
var canvas = document.getElementById("foreground"); adjustViewport(canvas);
If you want to maintain the aspect ratio, pass true. The canvas will be centered on screen.
var canvas = document.getElementById("foreground"); adjustViewport(canvas, true);
On desktop the viewport
meta tag is ignored.
adjustViewport
will center the canvas, even handling resizes.
It will try to reduce the height of the canvas if too tall unless you omit the keepRatio
argument.
These meta tags are set to enable Web App support:
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
To suggest users to put add the home page to the home screen, checkout this great plugin: Cubiq's Add To Homescreen.
With HTML Application Cache, you can go offline with your game. Super Mario Bros level 1-1 uses the application cache. The first time your browser loads that page, it will save the web page, along with all assets in its application cache. Subsequent visits will load these from the application cache instead of the server.
file:///
). That's good because under development, we want to load the new code every refresh.
If you have Google Chrome, open the console and you will see this:
Creating Application Cache with manifest http://martindrapeau.github.io/backbone-game-engine/super-mario-bros/offline.appcache Application Cache Checking event martindrapeau.github.io/:1 Application Cache Downloading event martindrapeau.github.io/:1 Application Cache Progress event (0 of 23) http://martindrapeau.github.io/backbone-game-engine/3rd/qtree.js Application Cache Progress event (1 of 23) http://martindrapeau.github.io/backbone-game-engine/src/input.js ... Application Cache Progress event (22 of 23) http://martindrapeau.github.io/backbone-game-engine/super-mario-bros/super-mario-enemies-2x.png Application Cache Progress event (23 of 23) Application Cache Cached event
Subsequent times, you will see this:
Document was loaded from Application Cache with manifest http://martindrapeau.github.io/backbone-game-engine/super-mario-bros/offline.appcache Application Cache Checking event Application Cache NoUpdate event
Using an Application Cache is dead simple. First you must add the manifest
attribute to your HTML tag. It points to the manifest file:
<!doctype html>  Second, create the
manifest
file. It contains files that must be cached. For example here is the offline.appcache
:
CACHE MANIFEST # Version 0.11 (c) 2014-2015 Martin Drapeau ../3rd/qtree.js ../3rd/underscore.js ../3rd/backbone.native.js ../3rd/backbone.js ../src/input.js ../src/shapes.js ../src/core.js ../src/world.js ../src/local-storage.js ../src/camera.js ../src/editor.js ../src/hero.js mario.js tiles.js artifacts.js enemies.js display.js level_1-1.js main.js super-mario-2x.png super-mario-tiles-2x.png super-mario-enemies-2x.png icons.png
If you have server requests, you can add a NETWORK
section. Consult the docs for details.
Fianally, the comment with Version 0.11
is important. When a new version of Super Mario Bros level 1-1 is released, the version number is increased to force the browser to reload the files. It will also trigger an updateready
event which gets captured to show a download button. That informs the user a new version is ready to be downloaded. Clicking on that button simply refreshes the browser to reload the new version.
Backbone offers RESTful persistence via Backbone.sync. Models have methods fetch
and save
to retrieve/send the model/collection JSONified data to/from the server. As such, you can easily implement server-side persistence using well established RESTful standards.
In our Super Mario Bros example, we use local storage instead. This is done by overriding Backbone.World
methods save
and fetch
. See file src/local-storage.js
for details.
HTML5 canvas has come a long way in terms on performance. Browser implementations of canvas now offer impressive performance. On mobile, Apple leads the pack being able to sustain a 60fps for the Super Mario Bros example. However on Android, frame rates drop fast to the 30s when the background needs to be redrawn. On Surface performance seems good on newer models, however on first generation RT models, as slow as on Android tablets.
This being said, there are things you can do to ensure the best performance.
That is the time you have between redraws, 60 times a second. The Backbone.Engine
will report the frame rate (fps), and cycle time (ct) if you add and attach a Backbone.DebugPanel
. Make sure to use it. If you see fps
go down while ct
goes up, then your update
and draw
times must be too long. You can time the update
time to pinpoint the issue.
You can't avoid it. You will leak memory. Every call made by requestAnimationFrame
creates a function scope. It does so 60 times a second and it will need to be garbage collected. The browser will pause to collect garbage.
You can however control the leakage rate. Try to create objects upfront, and pool resources as much as possible. That's why sprite sheets are shared among sprites.
You can use the Timeline tool in Chrome/Safari Developer Tools to identify this.  You will notice they are at evenly spaced intervals. On my machine, for Super Mario Bros, 3.5MB is collected every 4s on average.  No jerk on a tablet means healthy memory management.
Some further references and good resources on performance:
If you forked this repo, your game is already published on the web on your Github page under [username].github.io/backbone-game-engine
.
If you own an iPad or iPhone, you can add it to the home screen as a Web app. It will open in full-screen and if you've implemented an Application Cache, it will work offline too.
Backbone Game Engine was built to run in CocoonJS canvas+. You can try out Super Mario Bros level 1-1 in the CocoonJS launcher by pointing to the zip file at this URL: http://martindrapeau.github.io/cocoon-mario/cocoon-mario.zip.
http://martindrapeau.github.io/cocoon-mario/cocoon-mario.zip
Checkout the Github repo cocoon-mario. It can be used as the basis for your own native game on iOS or Android.
Major improvements including:
Adjust viewport on orientation change, and center canvas.
Initial release.


#include <nn_ops.h>
Local Response Normalization.
The 4-D input
tensor is treated as a 3-D array of 1-D vectors (along the last dimension), and each vector is normalized independently. Within a given vector, each component is divided by the weighted, squared sum of inputs within depth_radius
. In detail,
sqr_sum[a, b, c, d] = sum(input[a, b, c, d - depth_radius : d + depth_radius + 1] ** 2) output = input / (bias + alpha * sqr_sum) ** beta
For details, see Krizhevsky et al., ImageNet classification with deep convolutional neural networks (NIPS 2012).
Arguments:
Optional attributes (see Attrs
):
Returns:
Output
: The output tensor.
Constructors and Destructors |
|
|---|---|
LRN(const ::tensorflow::Scope & scope, ::tensorflow::Input input)
|
|
LRN(const ::tensorflow::Scope & scope, ::tensorflow::Input input, const LRN::Attrs & attrs)
|
Public attributes |
|
|---|---|
operation
|
|
output
|
Public functions |
|
|---|---|
node() const
|
::tensorflow::Node *
|
operator::tensorflow::Input() const
|
|
operator::tensorflow::Output() const
|
|
Public static functions |
|
|---|---|
Alpha(float x)
|
|
Beta(float x)
|
|
Bias(float x)
|
|
DepthRadius(int64 x)
|
Structs |
|
|---|---|
|
tensorflow:: |
Optional attribute setters for LRN. |
Operation operation
::tensorflow::Output output
LRN( const ::tensorflow::Scope & scope, ::tensorflow::Input input )
LRN( const ::tensorflow::Scope & scope, ::tensorflow::Input input, const LRN::Attrs & attrs )
::tensorflow::Node * node() const
operator::tensorflow::Input() const
operator::tensorflow::Output() const
Attrs Alpha( float x )
Attrs Beta( float x )
Attrs Bias( float x )
Attrs DepthRadius( int64 x )


|
App Engine Python SDK
v1.6.9 rev.445
The Python runtime is available as an experimental Preview feature.
|
Public Member Functions | |
| def | __init__ |
| def | name |
| def | ready |
| def | balanced_port |
| def | host |
| def | balanced_address |
| def | max_instance_concurrent_requests |
| def | module_configuration |
| def | supports_interactive_commands |
| def | set_num_instances |
| def | get_num_instances |
| def | suspend |
| def | resume |
| def | get_instance_address |
| def | get_instance_port |
| def | get_instance |
| def | supports_individually_addressable_instances |
| def | create_interactive_command_module |
| def | build_request_environ |
Static Public Member Functions | |
| def | generate_request_log_id |
| def | generate_request_id_hash |
The abstract base for all instance pool implementations.
| def google.appengine.tools.devappserver2.module.Module.__init__ | ( | self, | |
| module_configuration, | |||
| host, | |||
| balanced_port, | |||
| api_host, | |||
| api_port, | |||
| auth_domain, | |||
| runtime_stderr_loglevel, | |||
| php_config, | |||
| python_config, | |||
| cloud_sql_config, | |||
| vm_config, | |||
| default_version_port, | |||
| port_registry, | |||
| request_data, | |||
| dispatcher, | |||
| max_instances, | |||
| use_mtime_file_watcher, | |||
| automatic_restarts, | |||
| allow_skipped_files, | |||
| threadsafe_override | |||
| ) |
Initializer for Module. Args: module_configuration: An application_configuration.ModuleConfiguration instance storing the configuration data for a module. host: A string containing the host that any HTTP servers should bind to e.g. "localhost". balanced_port: An int specifying the port where the balanced module for the pool should listen. api_host: The host that APIModule listens for RPC requests on. api_port: The port that APIModule listens for RPC requests on. auth_domain: A string containing the auth domain to set in the environment variables. runtime_stderr_loglevel: An int reprenting the minimum logging level at which runtime log messages should be written to stderr. See devappserver2.py for possible values. php_config: A runtime_config_pb2.PhpConfig instances containing PHP runtime-specific configuration. If None then defaults are used. python_config: A runtime_config_pb2.PythonConfig instance containing Python runtime-specific configuration. If None then defaults are used. cloud_sql_config: A runtime_config_pb2.CloudSQL instance containing the required configuration for local Google Cloud SQL development. If None then Cloud SQL will not be available. vm_config: A runtime_config_pb2.VMConfig instance containing VM runtime-specific configuration. If None all docker-related stuff is disabled. default_version_port: An int containing the port of the default version. port_registry: A dispatcher.PortRegistry used to provide the Dispatcher with a mapping of port to Module and Instance. request_data: A wsgi_request_info.WSGIRequestInfo that will be provided with request information for use by API stubs. dispatcher: A Dispatcher instance that can be used to make HTTP requests. max_instances: The maximum number of instances to create for this module. If None then there is no limit on the number of created instances. use_mtime_file_watcher: A bool containing whether to use mtime polling to monitor file changes even if other options are available on the current platform. automatic_restarts: If True then instances will be restarted when a file or configuration change that effects them is detected. allow_skipped_files: If True then all files in the application's directory are readable, even if they appear in a static handler or "skip_files" directive. threadsafe_override: If not None, ignore the YAML file value of threadsafe and use this value instead.
| def google.appengine.tools.devappserver2.module.Module.balanced_address | ( | self | ) |
The address of the balanced HTTP server e.g. "localhost:8080".
| def google.appengine.tools.devappserver2.module.Module.balanced_port | ( | self | ) |
The port that the balanced HTTP server for the Module is listening on.
| def google.appengine.tools.devappserver2.module.Module.create_interactive_command_module | ( | self | ) |
Returns a InteractiveCommandModule that can be sent user commands.
|
static |
Generate a random REQUEST_ID_HASH.
|
static |
Generate a random REQUEST_LOG_ID. Returns: A string suitable for use as a REQUEST_LOG_ID. The returned string is variable length to emulate the production values, which encapsulate the application id, version and some log state.
| def google.appengine.tools.devappserver2.module.Module.get_instance | ( | self, | |
| instance_id | |||
| ) |
Returns the instance with the provided instance ID.
| def google.appengine.tools.devappserver2.module.Module.get_instance_address | ( | self, | |
| instance_id | |||
| ) |
Returns the address of the HTTP server for an instance.
| def google.appengine.tools.devappserver2.module.Module.get_instance_port | ( | self, | |
| instance_id | |||
| ) |
Returns the port of the HTTP server for an instance.
| def google.appengine.tools.devappserver2.module.Module.get_num_instances | ( | self | ) |
Returns the number of instances for this module to run.
| def google.appengine.tools.devappserver2.module.Module.host | ( | self | ) |
The host that the HTTP server(s) for this Module is listening on.
| def google.appengine.tools.devappserver2.module.Module.max_instance_concurrent_requests | ( | self | ) |
The number of concurrent requests that each Instance can handle.
| def google.appengine.tools.devappserver2.module.Module.module_configuration | ( | self | ) |
The application_configuration.ModuleConfiguration for this module.
| def google.appengine.tools.devappserver2.module.Module.name | ( | self | ) |
The name of the module, as defined in app.yaml. This value will be constant for the lifetime of the module even in the module configuration changes.
| def google.appengine.tools.devappserver2.module.Module.ready | ( | self | ) |
The module is ready to handle HTTP requests.
| def google.appengine.tools.devappserver2.module.Module.resume | ( | self | ) |
Restarts the module.
| def google.appengine.tools.devappserver2.module.Module.set_num_instances | ( | self, | |
| instances | |||
| ) |
Sets the number of instances for this module to run. Args: instances: An int containing the number of instances to run. Raises: request_info.NotSupportedWithAutoScalingError: Always.
| def google.appengine.tools.devappserver2.module.Module.supports_interactive_commands | ( | self | ) |
True if the module can evaluate arbitrary code and return the result.
| def google.appengine.tools.devappserver2.module.Module.suspend | ( | self | ) |
Stops the module from serving requests.


List of Customers
Name: {{customer.name}}
Email: {{customer.email}}
Phone: {{customer.phone}}
Address: {{customer.address[0].street}} {{customer.address[0].city}} {{customer.address[0].state}} {{customer.address[0].zip}}
Add a new customer
Name:
Email:
phone:
Address
Street:
City:
State:
Zip:


Education
Sally has followed quite some courses so far. She's a freakin' smart girl! Check out some of her most noticeable achievements:
- MIT (2000 - 2003)
- Bachelor's degree Computer Science (with great honor)
- Head of Debate Club
- Assistant in course Operating Systems Engineering
- Zürich (2003 - 2004)
- Master's degree Data Science (with honor)
- Concertmaster of Zürich Student Orchestra
- MIT (2004 - 2008)
- Doctoral degree in Big Data Computer Sciences
- Prise for Best Guide Dog of Massachusetts
Employment history
Sally has had some flabbergasting field experience. She has already made an astonishing career, and the future looks promissing.
- Royal Canin
- Dates: July 2008 - September 2011
- Title: Head of Dog Food Sales
- Description: With her good knowledge of both computers and dog food, Sally got a head function right away. She had to sell those tasty little brown chunks of vitamins and nutrients, and she was just fabulous. Brought great success to the company, but had to leave after a scandal with big loads of food missing. Roomers have it that Sally stole them, but it was never proven.
- Blue Buffalo
- Dates: October 2011 - Present
- Title: Big Data Management of Cat Food Branch
- Description: After moving to a different state, and leaving her scandal behind, Sally got into the Cat Food industry. She manages all data regarding cat food; where is it stored, where is it manufactured, what are the new recipes. She has been Employee of the Month for 2 years in a row now. Unfortunately, the Cat Food doesn't sell too good anymore, since all cats are getting sick. The recipes are well-tested, but somehow don't hold up in practice..
Contact Info
- Name: Sally Joy Jefferson
- Email: Send me an email
- Phone: +21 673904762
- Portret:


One particular weirdness and unpleasantry in JavaScript is the set of equality operators. Like virtually every language, JavaScript has the standard ==
, !=
, <
, >
, <=
, and >=
operators. However, ==
and !=
are NOT the operators most would think they are. These operators do type coercion, which is why [0] == 0
and "\n0\t " == 0
both evaluate to true
. This is considered, by sane people, to be a bad thing. Luckily, JavaScript does provide a normal set of equality operators, which do what you expect: ===
and !==
. It sucks that we need these at all, and ===
is a pain to type, but at least [0] !== 0
.
So, that’s all well and good, but when making the decision to use ===
instead of ==
it’s important to understand if there are any performance implications. Reasonable people, like myself, would expect the strict equality operators to be faster than their type-coercing counterparts, because the type coercion must take time. But, being a scientist, I had to set up an experiment to test this hypothesis.
For Science!
My experiment times the execution time of 24 different tests, in the browser you view it in. These tests represent every permutation of the following factors:
- Use: Whether the result is computed and thrown away, or assigned into a local variable.
- Comparison: Comparing integers vs. integers, strings vs. strings, and integers vs. strings.
- Operands: Whether the operands are actually equal or unequal (with forced type coercion in the case of
===
). - Operator: Using either
==
or===
.
Note that I am specifically not testing the relative performance when comparing against values like null
, undefined
, or false
. This is because those are falsy values which have even worse type coercion characteristics. Some integers and strings can, of course, also be falsy, such as 0
or ""
, but these are normal values which occur during arithmetic or string comparison, so I’ve tested with them.
The tests were run over two million iterations, except in Internet Explorer, where it produced a long-running script error, so I cut it to 500,000 iterations. Here are the browser configurations I tested:
- Mozilla Firefox 3.6 (Mac)
- Google Chrome 5 (Mac dev channel)
- Internet Explorer 8 (iterations reduced by 4x)
- Safari 4 (Mac)
- Opera 10.5 beta (Mac)
- Mozilla Firefox 3.6 (Mac) with Firebug open
Results
My results are available as a Google spreadsheet here. It turns out that there is little practical performance difference between ==
and ===
. While the strict operator is marginally faster (roughly 10%) in most browsers when combined with explicit type conversion, such as a === +b
, the only real performance gains will come from avoiding type conversion entirely. Converting a string to an integer for comparison with another integer is significantly slower (up to 10x) than simple comparing two integers. You should never allow integers to be stored as strings internally, as the type conversion will incur a performance penalty.
While that was the basic takeaway from the numbers, I did find one interesting outlier when testing with Firefox. In Firefox, the comparison a === +b
is about 20x slower than the equivalent a == b
when a
is an integer and b
is a string integer. This result seems suspicious to me, and nothing similar occurred in any other browser. Oddly, when the Firebug script debugger is turned on, this result changes, and a === +b
becomes about 10% faster than the other. I’m not sure what to make of this result, but it does serve as a reminder that integers should always be stored in numbers, not in strings.
Conclusion
Not much surprise in these results, other than the Firefox result. But, it did help me avoid a nagging worry that I’m silently slowing down my code whenever I use ===
instead of ==
in my JavaScript.
Again, find the test here and my results here. I hope you found this information interesting. Let me know in the comments if you see different results than I got.


Search Movies
NY Times Review
By: Jacob Smith
Thomas is deposited in a community of boys after his memory is erased, soon learning they're all trapped in a maze that will require him to join forces with fellow "runners" for a shot at escape.
Read Review
Related Articles
This is Oscar material
Great Performances
We are team star
We rock


19 Mar 2018
“Everybody automate everything, now!” - Enterprise CTO (who just got back from a industry networking event)
“I wish my management would help bring in some of this cool network automation stuff I am learning from my peers online” - Network engineer
I’ve heard these comments from numerous organizations; often from CTOs and engineers within the same organization. So if the topmost level of the management is laying down goals to automate “everything” and the engineers themselves are excited to make it happen, why is there a gap?
So are middle managers the problem? Across organizations, middle mangers could be senior network engineers who have advanced to a point where there is no technical growth path. They have become comfortable managing a team of network engineers and know how to hire network talent. The automation space is filled with technical jargon and buzzwords that are new (and therefore scary). Coming from a technical background fear of the unknown can be unnerving.
Read more
15 Jul 2017
Obvious!
Recently I was working on YANG device models, using NETCONF to
interact with the actual device (NXOS 7.0.3.I6.1). I was using
Cisco’s
NX-OS Programmability Guide for
the 7.x version. I have had previous experience working with
YANG and Cisco’s NEDs through the tail-f/NSO product and was feeling
quite confident in my understanding of how YANG is being used for
modeling (Either a service or a device) and how NETCONF was one of the
protocols used to interact with the model.
However, I was getting lost trying to navigate the NXOS’s YANG model
over the NETCONF client.
Read more
20 Apr 2017
After being used to OSX Keychains in my old mac, I wanted a similar
functionality on my Linux laptop. Being prompted each time to login,
while interacting with github for instance was
annoying. Searching the web, led me to
git-credential-store.
I was not too happy with the fact that credentials would be stored in
clear text, locally, indefinitely. I came across this stackoverflow
post that
I adapted for Linux. The concept is as follows:
- Use a .netrc file to store your credentials. This follows the
file format for netrc
- Encrypt this file,
using GNU Privacy Guard
Read more
12 Apr 2017
In it’s most basic form, TDD works as follows:
1. Envision the outcome of what you are developing [ Adding a VLAN
to a switch ]
2. Write a test to validate that outcome [ Is the desired VLAN on
the switch ]
3. Run the playbook, to invoke the test [ it will fail - RED test
]
4. Refactor your code [ write the roles/tasks needed for the tests
to pass ]
5. Re-run tests [role] to ensure that they now pass
In this post, I hope to share my observations on how I used ansible to
implement this using roles. I start with known facts/assumptions:
Read more
03 Feb 2017
This post is a consequence of an interesting conversation around
declarative control systems with a colleague. Throughout the
conversation, we kept coming back to the ‘popularity’ of automation
and specifically, how revolutionary, it appears for legacy, closed
systems(aka 80% of network gear in enterprises). When you think about it,
in a traditional control system (a bread toaster, in it’s simplest
form), we interact with the system as follows:
1. We tell it (declare) what our desired outcome is (how brown do you
want your toast)
2. Inputs (the slices of bread)
The system then figures out how to achieve your end state. In other
words..
Read more


A Note on Roasting
Roasting coffee transforms the chemical and physical properties of raw coffee beans into roasted coffee products.
This process is what produces the characteristic flavor of coffee by causing the green coffee beans to change in taste.
Many coffee roasters determine the level of roast by eye,assessing the color of the beans to determine the desired roast-level.
Green Beans
Green coffee as it arrives at the dock. They can be stored for approximately 12-18 months in a climate controlled environment before quality loss is noticiable.
Light Roast
Moderate light brown,but still mottled in appearance. A preferred roast for some specialty roasters,highlights origin characteristics as well as complex acidity.
City Roast
Medium brown,common for most specialty coffee. Good for tasting origin character,although roast character is noticeable.
Vienna Roast
Moderate dark brown with light surface oil,more bittersweet,caramel flavour,acidity muted.In the middle of second crack. Any origin characteristics have become eclipsed by roast at this level.
Italian Roast
Italian (alt. Dark French, Neapolitan, Spanish, Heavy) is the name applied to a degree of roast of coffee beans resulting in a very dark brown bean.
BRAZIL
Arabica dominates both Brazil and the world as a whole with about 85% of the production,robusta accounts for the remaining 30%.In Brazil,arabica production is located in the main coffee-growing cluster of states led by Rio where arabica is produced almost exclusively. Robusta is primarily grown in the northwestern much smaller state of Espirito Santo where about 80% of the coffee is robusta.
COLOMBIA
Colombia has reputation as producing mild,well balanced coffee beans.Colombia's average annual coffee production of 11.5 million bags is the third total highest in the world,after Brazil and Vietnam;though highest in terms of the arabica bean. The beans are exported to United States,Germanay,France,Japan,and Italy. Most Coffee is grown in the Colombian coffee growning axis region.
INDIA
Indian coffee,grown mostly in southern India under monsoon rainfall conditions,is also termed as AEAOE Indian monsooned coffee. Its flavr is defined as :'At its best similar to the flavor characteristics of Pacific coffees,but at its worst bland and uninspiringAEA. The two well known species of coffee grown are the Arabica and Robusta. Probably the most commonly planted Arabica in India and Southeasst Asia is S.795.
ETHIOPIA
Ethiopian beans can be divided into 3 categories:Longberry,Shortberry,and Mocha.Longberry varieties consist of the largest beans and are often considered of the highest quality in both value and flavor. Shortberry varieties are smaller. The Mocha variety is a high prized commodity. Mocha Harars are known for their peaberry beans that often have complex chocolate,spice and citrus notes.
COSTA RICA
Costa Rican coffee beans are considered among the best in the world. Tarazu is thought to produce the most desirable coffee beans in Costa Rica. In 2012,Tarrazu Geisha coffee became the most expensive coffee sold by Starbucks in 48 of their stores in the United States,using the Clover automated French press. The finest coffee is typically grown at altitudes of 1200 to 1700 meters.
KENYA
The aciditic soil in highlands of central Kenya, just the right amount of sunlight and rainfall provide excellent conditions for growing coffee plants. Coffee from Kenya is pf the "Colombia mild" type,and is well known for its intense flavor,full body and pleasant aroma with notes of cocoa and high grade coffee from Kenya is one of the most sought-after coffee in the world.


| core.signalprocessing.gravity_filter.madgwickahrs | index /home/a/CCdoc/CerebralCortex-DataAnalysis/core/signalprocessing/gravity_filter/madgwickahrs.py |
Copyright (c) 2015 Jonas Böer<EMAIL_ADDRESS>This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
| Modules | ||||||
|
| Classes | ||||||||
|
|


Events are the mechanism by which events get from the browser to your code running on the server. There is another mechanism that builds on events, and that is properties or attributes. This allows you to access and modify the browser's state. The property's state is sent to your code on the server with events. Modifications to properties are sent to the browser with the JavaScript queuing mechanism.
DOMProperty
DOMProperty
wraps a Var
which maintains
the state of the element property. Like
DOMEventSource
, it has an apply
method that takes and returns an Elem
.
In the case of DOMProperty
, it
returns an element with an added attribute
corresponding the property and its value.
In addition, any events it was linked to by
calling withEvents
will also
be applied to the element. Also, if the element
does not have an id
attribute
one will be added. Unlike DOMEventSource
,
this apply
method takes an
implicit Page
(which defaults to
the current Lift request). The element's id will be
stored in the DOMProperty
for that
Page
. And like DOMEventSource
,
DOMProperty
extends NodeSeq=>NodeSeq
,
so you can use it with CSS Selectors and binding.
The simplest way to instantiate a DOMProperty
is by writing DOMProperty("name")(aVar)
.
class Snippet { val value = Var("") def render = "input" #> DOMProperty("value")(value) }
That factory takes an implicit PropertyCodec
parameter, which specifies how to
represent the Var
's type in the browser. There are default implicit instances
for String
, Int
, Option[Int]
(None
is represented as -1
),
and Boolean
(false
generates no attribute, true
generates an attribute with the value set to its name,
as in checked="checked"
).
Here are some of DOMProperty
's members:
value
Var
that
we mentioned. Setting its value will result in the corresponding
property being changed in the browser on whichever Page
s
are registered with this DOMProperty
(whether via Ajax or
Comet) except for the Page
that is currently firing an
Ajax event that is setting its value, if any.updateOn
DOMEventSource
s will
add an element to its rawEventData
with a JavaScript
expression that reads the value of this property. When Page
s
are added subsequently, the value of the property will be updated via
the rawEventStream
.withEvents
updateOn
, plus
the DOMProperty
will automatically
add the events to the element.