In games that use rhythm as its core mechanic, the most important aspect is detecting if the user executes a certain action in the correct position in time. For example, in games such as DDR, the user must step on positional arrows at certain intervals in the musical sequence in order for the game to register the input as a successful action.

In this post, I will depart some knowledge that I learned while creating a rhythm game that will hopefully help you in your journey of making a beat-tastic love adventure!

First and foremost, it definitely helps (but is not required) to have some musical background. If you haven’t had any experience, you might want to brush up on some of the musical terminology.

BPM (Beats Per Minute)

Regardless if you use a full-length song or a small sound-loop, the most important aspect of any song is calculating its BPM. If the song’s BPM is not provided, the two things that you need to calculate the BPM is the length (in seconds) and the number of beats in the song/loop. Then, to calculate the BPM, you simply use the formula:

BPM = (num beats in song) * 60 / (num secs in song)

The BPM provides a foundation on which you can start testing for user inputs.

Break It Down

In the general case, we can assume that our song is in 4/4 time (also known as common time). What 4/4 means is that the song uses four quarter-note beats per bar.

What you want to do next is figure out how accurate you want your input to be.  Using eighth note seems to provide enough accuracy for most sequences. But depending on how complicated you want your player’s input sequence to be, you might want to go all the way to sixteeth or sixty-fourth if you plan to really punish your players with Yngwie Malmsteen-style arpeggios.

Below is a depiction of how a whole note is broken down.

Musical note values

Register Correct Beats

Now, you want to create a cool button sequence that you want players to press when the song is playing. What you want to do is store all the notes in the song that you want the user to hit in an array.

For example, say thatI have a funky, 1-bar drum-loop. And say when the then song is playing, I want to user to press down on a button every first, second, and third beat in the loop.

If I am using sixteenth notes as my input sequence’s precision, I would create an array like this:

Array beats = [ 4, 8, 12 ]; // 1st, 2nd, 3rd quarter note

So for each quarter note, there are four sixteenth notes.  The array above suggests that we want to detect the first, second and third sixteenth-note of each bar, so we multiply each value (quarter note) by four to get its corresponding value in sixteenth notes.

Detecting User Input

Now that you have your input sequence laid out, you can start detecting if players correctly pressed your sequence in time.

Every time the user hits a button, you must calculate which note (or which sixteenth note in our funk drum-loop example) the input corresponds to. To calculate that, you must know when, in the local time of the song, the button was pressed. What I mean by local time is the current time in the song that your game state is currently at. Say your song loop is only 10 seconds long but the game has elapsed a total time of 14 seconds. That means the local time of the song loop is 14-10=4 seconds.

To calculate the note position given the local time in the song, you can use this formula:

nth sixteenth-note = (time in secs in song) * BPM * (1/60) * (num_vals _per_beat)

In my example, we are using sixteenth notes. Say I have a local-time of 1.5 seconds of a song with 50 BPM. Since there are 4 sixteenth notes per beat, we can calculate the nth sixteenth note:

// BPM = 50, secs = 4, num_vals_per_beat = 4
nth sixteenth-note = (1.5) * 50 * (1/60) * (4) = 5

That means we were at the 5th sixteenth note in the song/loop. Since there is no 5 in our array [4, 8, 12], that means that the user did not press the button at the correct position in time according to what we set as our input sequence.

Go Easy, Bro

We can assume that the user will not press the input button at the exact moment in time that corresponds to your beat sequence (virtually impossible). So, what I did to remedy that is to give an acceptable buffer which provides the user a range of time such that if the user presses the button within this buffer, the game will register the input as correct. For example, if the user presses the button within 0.5 beats of the target beat, the input would register as a success.

So there you have it, a way to structure your code to provide a framework for rhythm games. Now go make some sweet, musical lovin’.

Although DirectX10 (Direct3D10) already has functionality that allows users to load images directly, it might not be enough. For example, DirectX is unable to load some image types such as TARGA (.tga) files. And if you are writing a OpenGL & DirectX10 dual-renderer, you might want unite both renderers under a common image library API. Plus, DevIL has a lot of great functionality, and you want to take full advantage of it. Below, I provided the code to load an image given the filename.

#include <IL/il.h>
#include <string>
#include <assert.h>
 
// Use this macro to verify if D3D10 function succeeded
#define HV(x) if(!SUCCEEDED(x)) MessageBox(NULL, #x, "HRESULT fail", MB_OK)
 
// Creates a shader resource view given a filepath & D3D10 device
//	@filePath - String of the file path of the image file
//	@pDevice - Pointer to the D3D10 device
ID3D10ShaderResourceView* MakeSRV( const std::string& filePath, ID3D10Device* pDevice )
{
	// Will be filled and returned
	ID3D10ShaderResourceView* pSRV = NULL;
 
	// Load image from DevIL
	ILuint idImage;
	ilGenImages( 1, &idImage );
	ilBindImage( idImage );
	ilLoadImage( filePath.c_str() );
	assert ( IL_NO_ERROR == ilGetError() );
 
	// Fetch dimensions of image
	int width = ilGetInteger( IL_IMAGE_WIDTH );
	int height = ilGetInteger( IL_IMAGE_HEIGHT );
 
	// Load the data
	ilConvertImage( IL_RGBA,IL_UNSIGNED_BYTE );
	unsigned char * pData = ilGetData();
 
	// Build the texture header descriptor
	D3D10_TEXTURE2D_DESC descTex;
	descTex.Width = width;
	descTex.Height = height;
	descTex.Format = DXGI_FORMAT_R8G8B8A8_UNORM;
	descTex.Usage = D3D10_USAGE_DEFAULT;
	descTex.BindFlags = D3D10_BIND_SHADER_RESOURCE | D3D10_BIND_RENDER_TARGET;
	descTex.CPUAccessFlags = 0;
	descTex.MipLevels = 1;
	descTex.ArraySize = 1;
	descTex.SampleDesc.Count = 1;
	descTex.SampleDesc.Quality = 0;
	descTex.MiscFlags = D3D10_RESOURCE_MISC_GENERATE_MIPS;
 
	// Resource data descriptor
	D3D10_SUBRESOURCE_DATA data ;
	memset( &data, 0, sizeof(D3D10_SUBRESOURCE_DATA));
	data.pSysMem = pData;
	data.SysMemPitch = 4 * width;
 
	// Create the 2d texture from data
	ID3D10Texture2D * pTexture = NULL;
	HV( pDevice->CreateTexture2D( &descTex, &data, &pTexture ));
 
	// Create resource view descriptor
	D3D10_SHADER_RESOURCE_VIEW_DESC srvDesc;
	srvDesc.Format = descTex.Format;
	srvDesc.ViewDimension = D3D10_SRV_DIMENSION_TEXTURE2D;
	srvDesc.Texture2D.MostDetailedMip = 0;
	srvDesc.Texture2D.MipLevels = D3D10_RESOURCE_MISC_GENERATE_MIPS ;
 
	// Create the shader resource view
	HV( pDevice->CreateShaderResourceView( pTexture, &srvDesc, &pSRV ));
 
	// Delete from IL buffer after image loaded correctly
	ilDeleteImages( 1, &idImage );
	idImage = 0;
 
	return pSRV;
}

There you have it. Let me know if you got any woes getting it to work. Thanks to my bud Manny for helping with the code.

Above is a little test app I’ve created to show the deliciousness of the mass-spring damper system (also known as a harmonic oscillator). Move your mouse anywhere inside the box and it’ll swing the ball accordingly to emulate real mass-spring physics.

In this post, I will briefly explain how you can add a mass-spring damper system into your own engine to simulate cool swinging action.

Source code (Actionscript 3.0): [ MassSpringDamper.as ]

A mass-spring damper is a system where there exists a mass attached at the end of  a spring. The forces that are involved in this system are the forces generated by compression/relaxation of the spring and, of course, gravity.

Using the F=ma approach, the acceleration gained from the mass-spring is:

a = ( -cv – k(x – xo) ) / m

Where m is mass of the object, v is velocity, (x-xo) is the distance between the end of spring and the mass, c is the friction constant and k is the spring constant.

In order to prevent your system from accumulating errors and blowing up, we will try to avoid using the classic forward euler integration method. Instead, we use the safer approach, the symplectic integration method. If you didn’t understand this last part, it’s okay. Just remember that systems like these can easily accumulate errors and just go completely nuts if you don’t take special care.

Anyhow, the source code is attached. Enjoy.

One of the hobbies that I’ve been developing recently is in-home gardening. For those who have never considered it, it really puts you in a peaceful mindstate. Also, having a few plants around your house not only is scientifically proven to bring peace-of-mind, it can also make your home look less like a crackhouse.

Today, the sun was shining and the weather was sweet. So my girlfriend and I cruised over to West LA to check out this epic nursey. Oddly enough, we saw Seth Rogan there purchasing some Japanese red-leaf maple trees. But anyhow, I saw this awesome batch of baby’s tear moss (priced @ about $1.30) and decided to make myself a nice little moss garden. So after several kilojoules were expended, I took some pictures (above) as proof of concept.

This shit was so easy, homeboy. In this post, you will learn how you can give birth to your own mini moss garden for cheap.

Step 1 (Preparation)

You need to find some moss. You can buy it at your local nursery, Home Depot, or you can just look around your home/neighborhood for some. They tend to grow in shaded spots on bark or rock. I used some baby’s tear moss from the nursery.

You need a container. The container I used was this glass container that I had lying around, but you can put it any unused vases or even a wine cup. Wash it.

You need some gravel. I found some gravel right in front of my apartment. But you can really find it anywhere. Make sure to wash it clean.

You need some potting soil. The potting sound is the soil that the moss must grow and expand into. I had alot of potting soil left from my recent growing op, but you can buy it anywhere (Home Depot/Target/Walmart) in the gardening isle. It should be relatively cheap. And depending on your container, you may or may not need alot of this.

(Optional) I decorated my moss garden with some black rocks. You can use rocks, figurines, or whatever floats your boat.

Step 2 (Compilation)

First, put the gravel into the container. This layer of gravel is used for water drainage which prevents the plant from developing root rot. It also is used to indicate if you are overwatering.

Next, pad on some potting soil. Make sure to part the soil (Moses style) so that you can drop the moss in (like it’s hot!).

Put in the moss, fit it in snuggly.

(Optional) Decorate your moss garden with figurines or rocks.

Spray the plant with water until the soil appears slightly moist.

Step 3 (Care)

Moss does not like direct sunlight. So keep it indoors next to a window to absorb some of that indirect sun-love.

Moss does not need alot of water to grow. So water it sparringly (few times a week). You want the soil just slightly moist but definitely not soaked. Check the gravel layer to see if it is swiming in water. If it is at all, you are watering it too much.

That’s it. Enjoy. (Level 2)

There are plenty of ways of utilizing XML in your game. From stucturing your dialogue trees to organizing the entities in your game, XML may be your best choice for most of your game’s needs. If you Google the interwebs, you will find several ways to process XML with C++. For one, if you want read-and-write capabilities, you can use the popular Xerces-C++ XML Parser (DOM, SAX, SAX2).

But if your XML isn’t super humungous (GBs) and you only want to read in an XML file, why not consider Dan’s BXMLNode? He calls it the “simplest XML file reader in the world” because it’s just that simple. With only 500 lines of code and a liberal license (MIT), you can just plug the code right into your engine to instantly read XML files. However, I do recommend you wrap this code in a class in case you ever want to switch out the reader for some other code.

You can download the C++ version (bxmlnode.cpp), the C version (bxmlnode.c) and the Visual C++ 6.0 project version (bxmlnode.zip).

[Edit]

XML _Node Class Source Code (C++)

I attached the class that I use in my game. This class basically wraps around bxmlnode with some nice features such as searching for tags, altering the XML, saving to file, and other XMLiciousness. Sorry I have no time to document this, but feel free to email me with any questions. Also, opted to use STL vectors because I’m a lazy asian.

Download: xml_node.zip

So how do you begin implement this parallax scrolling in to your game? Well there are two ways you can go about it…

Technique 1

If your game is a simple side-scroller with the camera moving continuously causing your scene to pan from left-to-right (or vise-versa) without the camera jumping around the scene, we can do as follows:

You can start off by setting the velocity for your closest layer (in the image above, it’s the layer with foreground palm trees and path). Let signify that layer with index 1 that layer’s velocity to c. We our code so that if the camera moves, we move the objects on this layer by velocity c.:

v₁ = c;

Then, lets index the background vegetation layer (the one with dark green grass) with 2. Since it is farther away from the viewer, it “moves” slower than the first layer. Let’s say it moves half as slow..

v₂ = c/2;

After, we consider the mountain layer, which is even farther that the previous layer. Since it’s farther than the background vegetation layer, it should move at a slower velocity.

v₃ = c/3;

For more layers, we can do v₄ = c/4; v₅ = c/5; … v₁₀₀ = c/100 ;

As you can tell, the farther away the object is, the smaller the velocity becomes, all the way until the velocity converges to zero. And since the night background is way off in the distance, we can assume that it’s velocity is so negligible that we can consider it to be zero, which is why the backdrop doesn’t move.

Technique 2

So what happens if we have a scene that requires the camera to occasionally jump around in the scene, how do we handle how much of the layers to offset to still appear to have have parallax when we scroll? If we were to use technique one, the layers would just seem very off only because we expect the movement of the layers to be continuous like the camera.

As you can see from the image above, the position of the layers are affected by one central pivot point in the farthest position of the screen. So how do we calculate the position of any layer of the scene? Well, sir, we must incorporate simple trigonometry into solving this problem:

First, we must designate a central point on each of the layers. And we must also know how far away each layer is from the center pivot point (designated as y in image above). We can assume we are moving the camera in relation to the first layer (which is the foreground layer with palm trees and path).

So we first choose a layer that we want all other layers to move in relation to. Since most games have the characters/sprites on the closest layer, we set it as the first layer (in image above, layer with foreground palm trees and path). Say we move the camera 10 units left of the center axis in relation to that layer. Since we already know how how far this layer is from the center axis (designated x₁) and how distant this layer is away from the center pivot at the backdrop (designated y₁), we can use simple trigonometry to fetch the angle (designated Θ ). Calculate Θ = inverse tangent of x₁/y₁ = tan^-1 (x₁/y₁).

Now that we have Θ, we can now correctly determine the offset for the rest of the layers. For example, if we are calculating how much x to offset the 2nd layer (designated by x₂), we use x₂ = y₂ * tan(Θ), in which y₂ is how far the second layer is away from the center pivot and Θ is the angle that we calculated. The x₂ generated is how far we should offset the center of the layer from the center axis.

Now, don’t you regret dozing off in your high school trig class?