Friday, May 10, 2013

Kittehfy

Some of my coworkers in the Bay Area are going to the Oakland Internet Cat Video Festival this weekend which reminded me of an entertaining JavaScript trick I saw last week.

Brandon Satrom gave a great talk at the May 2013 JavaScript Austin Meetup on The Secrets of Awesome API Design. He is giving the same talk at the O'Reilly Fluent Conference. One slide of the talk has a Kittehfy jQuery plugin that has been converted to a bookmarklet below with the jQuery dependency removed.

Drag the Kittehfy box to the bookmarks bar in your web browser, then click the Kittehfy bookmark while viewing your favorite web pages.


Saturday, June 2, 2012

Canvas with EaselJS and TweenJS

This article explains how to use the EaselJS and TweenJS libraries to display images and animations on a browser canvas. EaselJS was first published to GitHub by Grant Skinner in January of 2011 and was recently released as part of the CreateJS suite of libraries for doing flash-like development using HTML5.

The following examples are provided:

  • Setting up the canvas and displaying an image using Stage and Bitmap
  • Treating multiple images as one object using Container
  • Cell animation using Spritesheet & BitmapAnimation
  • Moving images around the screen using Tween

Zolo's Escape

The examples in this article are taken from a browser based video game prototype I developed to experiment with writing applications in JavaScript. The game is called Zolo's Escape and is inspired by the 1984 game Spy vs. Spy for the 8-bit NES. The object of the game is to escape with four items that are initially hidden in different rooms of a building before your opponent can do the same or time runs out. While searching for the items, players set traps for one another and try to avoid or disable the traps set by the opponent. All the source code for Zolo's Escape is available on GitHub.

JSFiddle

All the examples in this article are displayed with JSFiddle which allows you to view the JavaScript, HTML, CSS, and a functioning demonstration in separate tabs. You can also open each example in a new window and experiment with the code yourself.

Setting up the canvas and displaying an image using Stage and Bitmap

Start by setting up a canvas object. Although no Flash development experience is needed, many of the concepts and terms used in EaselJS are based on their Flash equivalents so the canvas is represented by a Stage. Add Bitmap objects to the stage to display images. Bitmaps can be initialized by passing in a URL or a reference to an HTML image element.

Treating multiple images as one object using Container

In Zolo's Adventure the characters carry items around in their hands. The character and the item they are carrying are separate images that are grouped together and treated as a single object using a container so they can be hidden or moved using the properties of the container.

player.png key.png
These two images are grouped in the code sample below.

Cell animation using SpriteSheet & BitmapAnimation

The cell animation in the next example appears in the game when the character dies after triggering a trap. The sequence of images used in the animation are displayed below. Although each image in the sequence could be in a separate file, images are frequently combined into a single file called a sprite sheet.

Sprite sheet used for animation sequence when player dies

To display the animation with Easel, construct a new SpriteSheet using the image. Specify how the sheet is divided into individual cells and where animation sequences begin and end. Then pass the sprite sheet to a BitmapAnimation object. Add the bitmap to the stage and use it to play animations from the sprite sheet. Provide a callback function to "respawn" the player when the animation is over.

Moving images around the screen using Tween

The final example uses the TweenJS library to make a player walk around the screen. The sprite sheet used for walking has a separate set of images for when the player is facing left and right. You could create a sprite sheet with images of the player facing in only one direction and then use canvas/easel to flip the image. I don't know how computing intensive it is to flip the image but having a sequence for each direction allows us to skip that step at run time.

Sprite sheet used for player walking around the screen

There are two factors to consider when animating and tweening. For animation you must decide how long each frame will be displayed and specify that as the number of frames per second (FPS). For tweening you must specify how long it will take to move the object to it's destination. In the example below, the player should move at a constant speed regardless of how far they need to travel. The example adds two functions to the DisplayObject in EaselJS so you can specify the speed of an object and calculate the duration for a given tween based on that speed.

Since the player will be animated while they are moving, construct a sprite sheet and bitmap animation similar to the one in the previous example. A few additional properties are added to the player such as the cell height, width, and the direction the player is facing. When the stage is clicked start the animation that shows the player walking in the direction of the click. Then use the Tween object to move the player to the location that was clicked. When the player reaches the destination switch to a frame of them standing still.

Special Thanks to Wayne

All of the artwork in Zolo's Escape was created by Wayne Denier who is a talented artist and colleague. Wayne is graduating from the Full Sail Online game development bachelors program in August of 2012. In addition to the images and animations, he also suggested a number of improvements to the mechanics and game play so people could use a mouse instead of a console controller. Visit Wayne's blog at http://rightbrainleft.net.

Sunday, April 15, 2012

Node.js After Hello World

Here are some useful things to know when you start developing web apps with node.js.

Developing with Eclipse

You can download a version of Eclipse for JavaScript Web Developers

If you already have a version of Eclipse installed for Java or some other type of development, it's recommended that you download this version separately as opposed to adding the JavaScript development plug-in to your current installation. Unlike some IDEs, developers are intended to have multiple installations of Eclipse on a single machine where each one is tailored to a type of development.

Debugging with Eclipse

Install Google Chrome Developer Tools plug-in for Eclipse. See the setup instructions on the Joyent github wiki.

Launch a node server in debug mode

node --debug your-app.js

Launch a node server that waits at the main script for the debugger to attach (for debugging things that happen during the initialization process too quickly to attach the debugger)

node --debug-brk your-app.js

It's annoying that you have to put break points in the files of the 'node debug' project instead of the original files in your own Eclipse project. And the breakpoints in the node debug project do not persist across debug sessions (arg!) If there is a way to do this, please let me know.

Node package manager - npm

The node package manager is called npm and is available at npmjs.org. Follow the instructions there to download and install.

Modules, Middleware, and Frameworks

The plain install of node offers low-level libraries for working with http and file i/o. There are a number of modules you can install to provide common functionality for a web application. These range from simple things such as serving files over http and compressing http responses, to robust MVC frameworks similar to Rails.

The Joyent wiki has a list of node modules and the npm site hosts a searchable registry of node modules.

When building a web app with node.js, developers decide which modules to use based on the usual dependency trade-offs of time saved writing code vs. time spent working with third-party code. I chose to start with Express because it offered extremely common features, but is less restrictive than the frameworks built on top of it.

Here is a simple list that shows where Express sits in a stack:

  • [Many web-app/mvc/rails-like frameworks]
  • Express - basic web-app features such as request routing, view rendering, and content negotiation
  • Connect - middleware for features such as logging, compression, and serving files
  • Node - low-level network and file i/o

Template engines

I'm using the Jade template engine. Template engines allow developers to mix application code with static mark-up and often have a way of abbreviating HTML syntax, e.g. Haml. Here's a list of some other templating options with reasons why I chose Jade:

  • Haml - I like Haml and Jade is intended to be an improved Haml specifically for node.js
  • EJS (Embedded JavaScript) - Uses "bumble bee" tags, e.g. Welcome to <%= place %>
  • CoffeeKup - CoffeeScript based

Auto-reload

Manually restarting node.js to reload code changes during development is a pain. Use node-supervisor to auto-restart the node process if it crashes or when files have changed.

[sudo] npm install node-supervisor

supervisor --watch [comma sep dirs] [your-app.js]
supervisor --watch .,routes,app/controllers,app/models app.js

nodemon is an auto-reload alternative to node-supervisor.