Development Values(May 14, 2014)

A couple of years ago, with the help of a co-worker, I put together a high level list of “Development Values and Principles” for LiquidPlanner. I was re-reading them today and thought they were well worth sharing…

(P.S. we’re hiring)

Values

  • Value Quality above both Quantity, and Speed of development
  • Value Clear above Clever
  • Value Maintainability above The Quick Fix
  • Value Collaboration above Individuality
  • Value Refactoring, Iteration, and Evolution above Engineering
  • Value Just-In-Time above Just-In-Case
  • Value Automated Testing above Manual QA
  • Value Metrics above Instinct
  • Value Readable Code above Comments and Documentation
  • Value Small but Complete above Large and Unfinished
  • Value Libraries and Components above Frameworks
  • Value Containment above Inheritance
  • Value MVP above Kitchen Sink
  • Value Realism above both Optimism and Pessimism
  • Value Thought above Action but avoid Analysis Paralysis
  • Value Pragmatism above Idealism
  • Value The User above all else
Continued...

Javascript Delta(May 03, 2014)

A couple of weeks ago I started a prototype for a horizontal shoot-em-up game in the style of the old c64 classic Delta. It was just a simple weekend project (although it ended up taking 2 - naturally) to allow the player to shoot some swirly alien bad guys…

… but it is in a good enough state to publish the source and let you play now:

  • arrow keys to fly
  • space to shoot.
  • shoot aliens
  • survive!
Continued...

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...

All Articles