Forging Forgecraft: Integrating CSS3 Transitions with Javascript

britg — Sun, 15 Jan 2012 16:01:01 +0000

Forgecraft is a game currently in development using Ruby on Rails, Backbone.js, and all sorts of HTML5 buzzwords. Read an introduction here, and play the demo here.

With Forgecraft, and any game really, there are usually quite a few animations running concurrently. I found these moments to be choppy, unresponsive and frustrating when they were implemented in javascript (especially on lower CPU environments like the iPad) and needed another solution. CSS3 transitions were an obvious choice to check out, as they’ve been shown to be a great way to add a little pizzazz to a modern web app and can be executed natively (and even GPU accelerated).

But, can they provide the technical underpinnings for an interactive gamely element? To be effective in this context, they’d have to be:

responsive, consistent and reliable
noticeably smoother than their javascript counterparts
simple to integrate with scripting

Regarding the first 2 points, CSS3 transitions’ effectiveness will really depend on your particular use-case. With Forgecraft they were definitely response, reliable, and smoother than javascript and I decided early on to use them in lieu of javascript wherever I could. But, I won’t go into the benchmarks and A/B comparisons in this article… perhaps later. Let’s just skip straight to the useful part:

Product Intergortion obscure 30 Rock reference →

Integrating CSS3 transitions with the game’s scripting is pretty straight forward:

Define transitions in CSS on your master element
Define classes with resulting properties changed
Trigger a class change using javascript
Listen for the transition-end event with javascript

Of course, there are a few pitfalls with each of these steps that I’ll go into here. Let’s take an example from Forgecraft: the Bonus Strike event. Randomly while forging the player will see a bar pop-up like this:

The bar moves from left-to-right and the player’s goal is to click the icon when the moving bar is directly under the target (large white) bar. The moving bar is animated with CSS3 transitions.

Defining the CSS:

We have a bar that needs an initial negative offset (the start position) that transitions to its final position. Simple enough: we define the base CSS on the #bar element and give it two classes (.new and .activated) defining each of its states. We also define the transition between the two states:

One pitfall you may run into: for the animations to work in Firefox, you have to explicitly define the initial state for whatever property you are transitioning. In this example we are transitioning the left property of the #bar element. You normally wouldn’t define left: 0; — that’s the default! But Firefox requires this to trigger the transition when that property changes.

Triggering the Animation in Javascript

Using jQuery, we simply apply the classes that we defined in the CSS when we want to trigger the transition.

Listening for the transition-end event

CSS3 Transitions would be useless if we couldn’t get their context from within our scripting. Luckily, a series of events are fired in javascript while the transitions are running, just like you’d expect in a javascript-based animation. The primary event we care about is when the transition ends as you’ll most likely want to trigger callbacks.

Unfortunately, each browser vendor has decided to name these events differently… typical huh. Modernizr to the rescue! (If you’re not using Modernizr, you should be. But that’s another blog post altogether).

There’s a hidden gem in the comments in the source code of Modernizr that explains how to use its .prefixed() API to make a simple wrapper around the browser-specific transition event names. Here’s how I implemented it for the transition-end event. Feel free to use this wherever you need it:

Bam, now we can use one simple event binding to handle all browsers:

Stopping a Transition Early

When the player hits the hammer-and-anvil icon during the Bonus Strike event, I needed to stop the animation early. The easiest way I found to do this, was to just set the animating property to its current value. The transition delta becomes 0, so the animation stops:

Transition: End

You may find that integrating CSS3 Transitions into your game makes your interactions smoother and more responsive, and with a simple API for scripting against transition events, developing against them should look and feel a lot like working in pure javascript.

More Forging Forgecraft:

How To Apply Full CSS Reset on an Arbitrary Selector with Compass

britg — Sat, 30 May 2009 23:42:10 +0000

Compass comes with a very handy utility for completely resetting the styling accross all browsers. In the author’s own words on the github wiki:

The Reset module provides mixins that allow you to reset your html so that every element has browser-supplied no styling

The default compass stylesheet comes with this module included, i.e. the @import compass/reset.sass you see at the top, and spits out the reset styles into the global namespace.

But, lets say you have a separate stylesheet that is to be included on a third party domain and that is namespaced under a selector. You can still take advantage of the Compass reset styling through the following method:

@import compass/utilities/general/reset.sass

#hh
  +global-reset

The result is the complete resetting of every child element of your namespace, i.e:

...
  #hh div, #hh span, #hh object, #hh iframe, #hh h1, #hh h2, #hh h3, #hh h4, #hh h5, #hh h6, #hh p,
  #hh pre, #hh a, #hh abbr, #hh acronym, #hh address, #hh code, #hh del, #hh dfn, #hh em, #hh img,
  #hh dl, #hh dt, #hh dd, #hh ol, #hh ul, #hh li, #hh fieldset, #hh form, #hh label, #hh legend, #hh caption, #hh tbody, #hh tfoot, #hh thead, #hh tr {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline; }

...

Brit Gardner » html/css