Tag: Radio Flare Redux


Psychedelic Backgrounds

Journalists and players called the visuals of Radio Flare REDUX “stunning” (Macworld) and “fantastic” (cybereal). This can be partly attributed to the mind-bending, jaw-dropping, eye-popping psychedelic background effects. In this blog post I’ll explain the basics of the tech behind those backgrounds. The magic comes from linking the background effects to the music. But the code that actually draws the graphics is dead simple. Let’s get started.

Setting up shop

All backgrounds are nodes in the scene graph that stores the whole game scene. The backgrounds are flat (2D) and drawn in the background. They are semi-transparent and composed of straight & simple OpenGL. In the game, I use three different kinds of background elements: Texture-based (like the noise in the “Motor” level and the interlacing lines), PointSprite-based (like the rain and pollen in “Revolution Void”), and Vertex-based (all others, most of them based on basic shapes like lines and rectangles). Texture-based effects are the most simple: I just tile a texture over the whole screen and move it a little bit (in sync with the beat). The PointSprite-based ones are based on the Particle code I use. Comparable Open Source-code can be found in the particle class of Cocos2D. In the following paragraphs I will explain how to render Vertex-based psychedelic effects.

All vertices that will be drawn need to be stored in an array. The following code draws a waveform-like visual effect. In REDUX, it can be found in the “Motor” and the “DJ Glow” levels. Here’s a screenshot. The code here draws the striped waveform in the background.

Radio Flare REDUX: Wave Form Background

The vertices are stored in an array called _vertices. The number of vertices stored is stored in _numVertices, the absolute number of vertices that fit in the allocated memory is stored in _numElements.

A point is added with the following function:

- (void) addPoint:(SONAVector2D)point {
if (_numVertices < _numElements-1) {
_vertices[_numVertices].x = point.x;
_vertices[_numVertices].y = point.y;
_vertices[_numVertices+1].x = point.x;
_vertices[_numVertices+1].y = -point.y;

if (_numVertices >= 2) {
_indices[_numIndices+0] = _numVertices+0;
_indices[_numIndices+1] = _numVertices+1 - 2;
_indices[_numIndices+2] = _numVertices+0 - 2;
_indices[_numIndices+3] = _numVertices+1 - 2;
_indices[_numIndices+4] = _numVertices+1;
_indices[_numIndices+5] = _numVertices+0;
} else {
_indices[_numIndices+0] = _numVertices+0;
_indices[_numIndices+1] = _numVertices+1;
_indices[_numIndices+2] = _numVertices+0;
_indices[_numIndices+3] = _numVertices+0;
_indices[_numIndices+4] = _numVertices+1;
_indices[_numIndices+5] = _numVertices+0;
}

_numIndices += 6;
_numVertices += 2;
}
}

As you can see there’s a second array called _indices that stores vertex indices to be used in the glDrawElements() call later on. Indices are used because some vertices are used repeatedly in order to draw one continuous stripe. The vertices are initialized with the following function call (gSize is a 2-dimensional grid size that determines how much memory is allocated for this object):

- (void) resetPoints:(SONAGrid)gSize {
// superclass calculates _numElements (=gSize.x * gSize.y)
[super resetPoints:gSize];

// xStride is the stride between the different quads
_xStride = ((float)[_rfrState.elements.sceneManager width])/((float)_numElements/2.f - 2.f);

// allocate memory for the vertices and the indices
_vertices = (SONAVector2D *)malloc(_numElements * 2 * sizeof(SONAVector2D));
_indices = (GLushort *)malloc(_numElements * 6 * sizeof(GLushort));

// add the points. one call to addPoint adds a whole square (ugly!)
for (int i=0; i<_numElements/2.f; i++) {
[self addPoint:makeVector2D(((float)i) * _xStride, 25.0f+SONA_RANDOM_FLOAT()*50.0f)];
}
}

The squares (the wave form is composed of cubes) are moved to the left at each beat of the music. This is achieved by copying over the y vertices. The leftmost square is moved all the way to the right.

- (void) moveSquares {
_vertices[_numVertices-2].y = _vertices[0].y;
_vertices[_numVertices-1].y = _vertices[1].y;

for (int i=0; i<_numVertices-2; i++) {
_vertices[i ].y = _vertices[i+2 ].y;
}
}

The following piece of code is the callback from the sound engine. The superclass administers some variables like _updateCountdown, a countdown that is set to 1 on each beat and linearly decreases to 0 over the duration of one beat.

- (void) onBeat:(unsigned int)beat ofBar:(unsigned int)bar {
[super onBeat:beat ofBar:bar];
[self moveSquares];
}

The last — and most important — function is the drawing function. My default OpenGL state has enabled vertex and texture coordinate arrays. I need to disable texturing in order to draw plain shapes. I also store the blending settings and color mode before proceeding to the actual drawing and reset it afterwards. Before drawing, I translate vertically to the centre of the screen and translate horizontally by a fraction of _updateCountdown and _xStride to smoothly scroll the whole wave form. Then I draw the stripe in 3 passes. Each pass is scaled differently on the y-axis and has a different alpha blending. The actual vertices are only transmitted once with the glVertexPointer() call. Subsequent passes draw the same vertices and indices again.

- (void) draw {

// disable texture coordinate arrays and texturing
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
glDisable(GL_TEXTURE_2D);

// store blending settings
int blendSrc, blendDst;
glGetIntegerv(GL_BLEND_DST, &blendDst);
glGetIntegerv(GL_BLEND_SRC, &blendSrc);
glBlendFunc(GL_SRC_ALPHA, GL_ONE);

// store color mode settings
int colorMode;
glGetTexEnviv(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, &colorMode);
glTexEnvi( GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE );

// translate to the vertical centre of the screen before drawing.
glTranslatef(_xStride*_updateCountdown/2.0f - _xStride, [_rfrState.elements.sceneManager height]/2.f, 0.f);

// there are three drawing passes with different scaling on the y-axis and different transparency
glScalef(1.f, _height * (1.0f+_updateCountdown/2.0f), 0.0f);
glColor4f(_blendColour.r, _blendColour.g, _blendColour.b, _blendColour.a/4.5f);
glVertexPointer(2, GL_FLOAT, 0, _vertices);
glDrawElements(GL_TRIANGLES, _numIndices, GL_UNSIGNED_SHORT, _indices);

glScalef(1.f, _height * (1.0f+_updateCountdown/2.0f)*_factor, 0.0f);
glColor4f(_blendColour.r, _blendColour.g, _blendColour.b, _blendColour.a/8.5f);
glDrawElements(GL_TRIANGLES, _numIndices, GL_UNSIGNED_SHORT, _indices);

glScalef(1.0f, _height * (1.0f+_updateCountdown/3.0f)*_factor, 0.0f);
glColor4f(_blendColour.r, _blendColour.g, _blendColour.b, _blendColour.a/16.5f);
glDrawElements(GL_TRIANGLES, _numIndices, GL_UNSIGNED_SHORT, _indices);

// restore color mode
glTexEnvi( GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, colorMode);

// restore blend state
glBlendFunc( blendSrc, blendDst );

// re-enabled texture coordinates
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glEnable(GL_TEXTURE_2D);

}

The other backgrounds are coded slightly different but basically similar. All of them are based on arrays of vertices. I will share some more interesting pieces of code in the future, but that's it for now.

Bookmark and Share

1 comment » | Blog

REDUX HD: A rare treat for iPhone/iPad gamers

I have to share this review of REDUX HD with you. We received it from cybereal on the iPad App Store:

“This game stands as one of very few truly excellent examples of gaming on Apple’s new devices. With fantastic visuals, solid gameplay, varied challenges, and excellent soundtrack, this game reminds me of contemporary greats such as everyday shooter, PixelJunk Eden, and Ikaruga.

The original, classic edition of this game was pretty good, but the studio has really come into their own with these redux releases. The polish is remarkable, and it really adds a massive amount of joy and pure stimulation while playing. Add to that the great depth of achievement challenges, unlockables, and even a sample tracker and you have a game creative and complete enough to develop a subculture around.

With the advent of the iPad, a uniquely compelling experience presents itself. The added screen space gives a much greater feeling of immersion and interactivity with the game. I feel like I am mixing the soundtrack I am hearing as I play because of just how far my hands are traveling. And thanks to the nature of the gameplay, I don’t feel tired; the swooping, curved motions promoted by the movement patterns of the enemies leaves me with a sense of having been dancing at a rave more than one of having been working all day.

I can’t think of a single reason why I would not recommend this game. Buy it now. Enjoy it regularly. Let’s hope to see more work like this from Studio Radiolaris in the near future.”

Bookmark and Share

Comment » | Announcement

Licensing Music for Radio Flare REDUX

REDUX is out now and so I have the time to drop a few lines on how the process of licensing music for the game went. When working with licensed music you always have to clear the following rights; master rights, synchronisation rights and mechanical rights. You might be able to clear all these rights at once or you might have to work these out individually. I’ll get to that a little later on. First let’s take a closer look at what these rights are about.

Master rights denote the rights to the master recording of the song (therefore a.k.a. recording rights). These are owned either by a record label or the artists themselves and are usually cleared with a one time payment.

Synchronisation rights are the rights to distribute a song (a.k.a publishing rights). These are needed to be allowed to associate your intellectual property (the game) with the intellectual property (a song) of an artist. The term stems from the synchronisation of an image with music. Synchronisation rights are either held by a music publisher (label) or by the artists themselves. Often the same label that holds the recording rights also has a publishing department through which synchronization rights can be cleared.

Mechanical rights are the rights to reproduce a song. Although the term originates from the physical reproduction of sound media, mechanical rights also exist for digital reproduction. To clear mechanical rights you have to pay mechanical royalties. These can either be settled with a one time payment if the rights are with the artist or have to be paid on a per unit basis if the artist is registered with a collection society.

Performance rights are the rights to play a song to an audience. If you are a game producer these are usually only relevant if you use music for a video of your game that is then shown on the internet or on TV. Royalties for performance rights also are payable at fixed rates through collection societies.

When looking for music licenses for your game there are several ways to go. If you want big name artists you must be prepared to deal with the major labels and to possibly spend a lot of cash on advance payments if you can’t ensure guaranteed sale numbers.

The easiest method to get music for your games is to work with the musicians themselves. For example you could get unreleased tracks from them and thus be able to clear everything just with one person. You could also ask them for re-recordings or re-edits of their songs to circumvent paying a label for the master rights. We did that for the first Radio Flare where we worked with DJ Glow. He also contributed a track to REDUX.

For REDUX we also worked a way in between and worked with several smaller electronic music labels that feature excellent artists.

mikrowave</a>

Manchester based Mikrowave was started in 2005 by Kevin Gorman. The label has become a platform for established artists and remixers worldwide. The ethos of Mikrowave is to release music that is individual, electronic and abstract, with a strong purpose on the dancefloor.

Fumakilla is a Techno- and Houselabel, founded in 2000 by Woody and based in Berlin, Germany.

Budde Music UK was founded in October 2008 as a new member of the  Budde Music network which has a history of more than 60 years of independent publishing. Today the company has a selection of different music styles, ranging from electronic music (Zombie Nation – Kernkraft 400) to hits from the eighties (Opus -Live is Life)!

Another excellent way to license music is through specialized portals. All artists available have all necessary rights pre-cleared by the site and are available through affordable one time fees. For REDUX we had a great experience working with the following two portals:

Launched in February 2006, BeatPick is a specialized online music licensing agent that provides pre-cleared music for both commercial and non commercial multimedia projects. Approximately 250 independent artists have joined the service, from over 40 different countries.

Launched in 2009, the service was developed by jamendo.com, the world’s #1 website for free and legal music downloads under Creative Commons licenses.
On jamendo.com, you can download all the music you like for private, non commercial uses.
Jamendo PRO, on the other hand, offers the purchase of music licenses for commercial uses. Jamendo PRO remunerates the artists fairly: half of its revenue goes straight to them.

So good luck with your licensing ventures and let me know if you have any comments!
Fares

Bookmark and Share

Comment » | Blog

Radio Flare REDUX Gameplay Video

We’re completing a series of gameplay videos to pass the time until the launch. Enjoy the first one, featuring Kevin Gorman’s track “DMX”:

Bookmark and Share

Comment » | Announcement

Radio Flare REDUX Trailer

The cinematic trailer for our upcoming iPhone & iPod Touch game Radio Flare REDUX.

Bookmark and Share

Comment » | Announcement

Ready for the iPad

Apple non-surprised us all with the news of the iPad. Everyone knew it was coming. Even the specs were largely known. Some people expected a more revolutionary device. I’m personally happy with the evolutionary approach. And I’m looking forward to code for it.

Radio Flare REDUX on the iPad

Most apps from the App Store are said to run on the device in small windows or with pixel-doubling. Yet of course the iPad opens up a lot of new possibilities. The device has the same features to set it apart from “usual” gaming devices as the iPhone: It is always connected, features and accelerometer and has a multi-touch display. Yet there are some key differences to all consoles as well as the iPhone. These support very specific games:

- Form factor: The device is perfectly suited for games where you either want to give the player a good overview over a lot of things going on (strategy games, musical instruments, board games, card games) or where you want to immerse the player in intense gameplay (Radio Flare REDUX)

We Eat the World on the iPad

- Multiplayer: The iPad is intriguingly social. I see a four-player game like “We Eat the World” (the one I made with Broken Rules for the Gamma4 challenge) perfectly suited for the iPad. Play it with the whole family.

- Home use: I don’t expect the off-the-mill iPad to travel as far and frequently as the iPhone. It’ll merely stay at home in the living room. So the usual restrictions of mobile games – like that one session should be about as long as it takes until the bus arrives – don’t apply to the iPad this much.

The SDK is downloaded. The screen resolution of Radio Flare REDUX is adaptable. I’m ready to roll. No if I’d just get my hands on a device soon…

Martin

Bookmark and Share

Comment » | Blog

Radio Flare REDUX in action

Radio Flare REDUX

Bookmark and Share

Comment » | Announcement

« Previous Entries