Mark Cooke’s G-Mixer

The recent Prescription for Sleep (“P4S”) project I programmed was envisioned from the beginning as a music visualizer that assisted the user in relaxation before bed. Because graphical sequences are tied directly to musical events – for example, a piano note – or thematically to changes in song progression it was obvious to me that this should be implemented with a data driven scripting system. That way, events like “draw a star shape on screen at time 37.2 seconds in position 100, 120 and scaled down by half” would be easy to write and tune. I’m sure this is similar to how old-school demos were setup.

Before I discuss that system in more detail let me give some background cocos2d-iPhone. It is a piece of open source middleware for the iPhone (originally created for Python but the iPhone branch is much more active) and as of version 0.7 it includes the following main functionality that was useful for P4S:

• Manages and renders a scene graph with parent -> child relationships
• Easy to use and powerful sequencing system, supports actions over time – “tweening” in Flash terminology
• Some UI elements for menus and text boxes
• Particle system support
• Utility class for texture loading (compressed textures, etc.) and management

Given the above functionality it was an obvious choice for the P4S project.

Hardcoding the visualizers would have been a nightmare so I quickly created a simple XML schema for defining cocos2d InstantAction and IntervalAction sequences to move objects around the screen. The XML supported the following features:

• Specify what textures are used in the visualizer so they can be pre-loaded
• Every sequence element has a time associated with it so it can be tied to the music
• Add and remove objects from the scene graph at specific depth levels
• Apply the following actions to objects that live in the scene graph both instantaneously and over time:
  • Move – both MoveTo specific positions and MoveBy an offset
  • Rotate – both RotateTo a specific rotation and RotateBy an offset
  • Scale – both ScaleTo a specific scale and ScaleBy an offset
  • TintTo – texture tinting
  • SetAlpha – “opacity” in cocos2d, change alpha blending amount
• The above commands could also all be automatically reversed or repeated, or both in combination. This made it easy to sequence long strings of repetitive actions that were timed with things like rhythmic bass
• Utility commands
  • GridEffect – create a cocos2d grid effect and apply it to an object in the scene graph (renders object into a texture with a grid of verts then applies transformations on the verts)
  • ChangeBlendMode – change alpha blending function

In my next post I’ll show how all of this came together and explain the final feature of the XML scripting schema which allowed subroutines to be defined and called within the XML itself.

This entry was posted on Thursday, March 12th, 2009 at 8:29 pm and is filed under game development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.