Sprite Factory 1.6.0(March 16, 2014)

I have released a minor update (v1.6.0) to the sprite-factory ruby gem. This version adds 2 small features:


Direct support for ImageMagick

You can now use ImageMagick directly, without needing to install the RMagick gem dependency

Simply specify image_magick as the library, either using the command line tool:

$ sf icons --library image_magick

… or using the Ruby API directly:

SpriteFactory.run!('icons', :library => :image_magick)

Thanks to @willglynn for implementing this feature!


Added padding/margin support in the command line tool

The padding & margin options have been exposed in the command line tool:

$ sf icons --padding 2 --margin 3

Thanks to @miguelgonz for implementing this feature!


Installation

As usual, installation is just a gem away:

$ gem install sprite-factory

And detailed instructions can be found in the README.

Nothing fancy, just a minor update. Let me know if you have any problems/feedback.

Enjoy!


I took a little time out today to clean up a few loose ends and publish a tiny point-release to my javascript state machine library. The code, as usual, is available on github.

The release includes:

  • nodejs support
  • bower support
  • requirejs/amd support


And now that I’ve (finally) added nodejs support, you can run the tests without a browser:

$ cd javascript-state-machine
$ npm install
$ node test/runner.js

The Future

Continued...

Ten Essential Foundations of Javascript Game Development

  1. A Web Server and a Module Strategy
  2. Loading Assets
  3. The Game Loop
  4. Player Input
  5. Math
  6. DOM
  7. Rendering
  8. Sound
  9. State Management
  10. Juiciness

Juiciness

I’m going to assume that your game is awesome, that it has some brilliant, unique, and interesting game mechanic, that your assets are all in place, your game loop is smooth, your player input is intuitive, your math is correct, your rendering is pretty, and your sound is harmonious…

This last article is going to be short and sweet, and encourage you to really polish, and juice up your game. And I think the best way to understand what that means is to watch this 15 minute talk by Martin Jonasson & Petri Purho:

… and play this short interactive presentation by Jan Willem Nijman:

They really sum up the idea of ‘juiciness’ better than any words I might write here. Which means I don’t have to write any more words here, huzzah!


Good luck with your javascript games!


Ten Essential Foundations of Javascript Game Development

  1. A Web Server and a Module Strategy
  2. Loading Assets
  3. The Game Loop
  4. Player Input
  5. Math
  6. DOM
  7. Rendering
  8. Sound
  9. State Management
  10. Juiciness

State Management

As our games get more complex, we look for ways to structure our projects to avoid the dreaded spaghetti code or the big ball of mud. In the first article we talked about breaking up our code into a sensible module structure, but that alone is not enough. We still have to be careful to avoid having too many dependencies between those modules/classes.

There are a number of patterns that we can use to improve our code architecture, and the two that we will primarily be concerned with in this article are:

Continued...

Ten Essential Foundations of Javascript Game Development

  1. A Web Server and a Module Strategy
  2. Loading Assets
  3. The Game Loop
  4. Player Input
  5. Math
  6. DOM
  7. Rendering
  8. Sound
  9. State Management
  10. Juiciness

Sound

In the early stages of making a new game, the sound requirements are easily forgotten, and I’m particularly guilt of this. But sound is an important component of a video game, whether it’s the ambient background music, dynamic music tracks, or interactive sound effects, it all plays a critical role in the game players experience.

To play music, or a sound effect we use the HTML5 <audio> element:

If our game has serious interactive sound requirements (e.g. we need to filter or synthesize audio at run-time instead of just playing back pre-recorded files), then we can use the more advanced HTML5 Web Audio API:

The remainder of this article will focus on the former HTML5 Audio approach.

Continued...

Ten Essential Foundations of Javascript Game Development

  1. A Web Server and a Module Strategy
  2. Loading Assets
  3. The Game Loop
  4. Player Input
  5. Math
  6. DOM
  7. Rendering
  8. Sound
  9. State Management
  10. Juiciness

Rendering

It’s hard to imagine a video game with no visuals. It might be an interesting challenge to create an audio-only game, but in most games we’re going to need to draw stuff, and for browser based javascript games we are going to draw on an HTML5 <canvas> element.

Continued...

Ten Essential Foundations of Javascript Game Development

  1. A Web Server and a Module Strategy
  2. Loading Assets
  3. The Game Loop
  4. Player Input
  5. Math
  6. DOM
  7. Rendering
  8. Sound
  9. State Management
  10. Juiciness

The Browser DOM

If you are making a javascript game for the browser, its quite likely that most of your game lives within an HTML5 <canvas> element. However it still makes sense to take advantage of the strengths of the browser DOM - displaying styled text and images - for example:

  • Show the current score
  • Show the high score
  • Show lives remaining
  • Show collected items
  • Show help text
  • Show game credits
  • Provide a game menu
  • etc

Positioning, Rendering, and interacting with text in a canvas requires a lot of effort, so taking advantage of DOM layout, CSS, and event handling can save us a fair amount of work.

Continued...

Ten Essential Foundations of Javascript Game Development

  1. A Web Server and a Module Strategy
  2. Loading Assets
  3. The Game Loop
  4. Player Input
  5. Math
  6. DOM
  7. Rendering
  8. Sound
  9. State Management
  10. Juiciness

Math

Sorry, but it’s inevitable that all game programmers will eventually need to do math. Just as night follows day, sure as eggs is eggs, just like every odd-numbered Star Trek movie is s**t (ref)

The kind of math we will need is going to depend entirely on the type of game we are making. Are there moving objects? accelerating objects? falling objects? Do we need collision detection? Are we making a 3d game?

Continued...

Ten Essential Foundations of Javascript Game Development

  1. A Web Server and a Module Strategy
  2. Loading Assets
  3. The Game Loop
  4. Player Input
  5. Math
  6. DOM
  7. Rendering
  8. Sound
  9. State Management
  10. Juiciness

Player Input

Games are interactive. Without input from a player, they would be stories.

Input via the keyboard and mouse is the most common method for games that run on desktop or laptop computers, ← ↑ → ↓, W,A,S,D,<ENTER>,<SPACE>, mouse-look, etc.

Input via a touch screen is added for games that run on mobile devices.

Continued...

Ten Essential Foundations of Javascript Game Development

  1. A Web Server and a Module Strategy
  2. Loading Assets
  3. The Game Loop
  4. Player Input
  5. Math
  6. DOM
  7. Rendering
  8. Sound
  9. State Management
  10. Juiciness

The Game Loop

In board games, card games, and text-adventure games, the game updates only in response to player input, but in most video games the state updates continuously over time. Entities move, scores increase, health decreases, and objects fall, speed up, and slow down.

Therefore we need a game loop that can update() and render() our game world.

When running in the browser, all javascript code is executed in a single thread, the UI thread (not counting WebWorkers). Which means we can’t run a naive infinite game loop:

  while(true) {  // UH OH! - blocks UI thread
    update();
    render();
  }

This would block the UI thread, making the browser unresponsive. Not good.

Continued...

All Articles