Mobile games development

It’s time for new effects!

Today we’ll see how to implement and and use text that changes multiple colors with a fading effect. You can see it in action here: J2ME text color fade effect in action.

So, let’s start defining our ColorFadeText class.

The code

We start defining the necessary properties:

//will hold the colors to fade
int[] colors = null;
 
//duration of a single fade
int fadeDuration = 0;
 
//effect start time
long startTime = 0;
 
//property used to check if effect has started
public boolean started = false;
 
//the text to be drawn
String text = null;

Now, we define the main constructor, that will accept the following arguments:

• the text to be drawn
• an int[] array containing the colors to fade into
• the duration of a single fade

public ColorFadeText(String text, int[] colors, int fadeDuration)
{
	if(colors.length == 0)
	{
		throw new IllegalArgumentException("You must define at least 1 color");
	}
	this.text = text;
	this.colors = colors;
	this.fadeDuration = fadeDuration;
}

The effect start() method will simply set the startTime value to current time and the started property to true

public void start()
{
	startTime = System.currentTimeMillis();
 
	started = true;
}

Then, we have the paint() method, that will be used to paint the text on the given Graphics instance:

public void paint(Graphics g, int x, int y, int anchor)
{
	if(started)
	{
		long diff = System.currentTimeMillis() - startTime;
 
		int module = (int)(diff % fadeDuration);
 
		int colorIndex = (int)(diff / fadeDuration) % colors.length;
 
		int midColor = midColor(
			colors[(colorIndex + 1) % colors.length],
			colors[colorIndex],
			module,
			fadeDuration
		);
 
		g.setColor(midColor);
	}
	else
	{
		g.setColor(colors[0]);
	}
 
	g.drawString(text, x, y, anchor);
}

The following utility method will be the one actually used to get the current text color:

static int midColor(int color1, int color2, int prop, int max)
{
	int red =
		(((color1 >> 16) & 0xff) * prop +
		((color2 >> 16) & 0xff) * (max - prop)) / max;
 
	int green =
		(((color1 >> 8) & 0xff) * prop +
		((color2 >> 8) & 0xff) * (max - prop)) / max;
 
	int blue =
		(((color1 >> 0) & 0xff) * prop +
		((color2 >> 0) & 0xff) * (max - prop)) / max;
 
	int color = red << 16 | green << 8 | blue;
 
	return color;
}

How to use it?

Using the ColorFadeText object is quite simple, since it’ll be very similar to use a common String. Just follow this plain steps.

1. Create a ColorFadeText instance

ColorFadeText text = new ColorFadeText(
	"I'M A FADING TEXT!",
	new int[]{0xff0000, 0x00ff00, 0x0000ff, 0xff00ff},
	1000
);

2. Start it…

text.start();

3. And then, in your Canvas paint() method, paint it, using the same arguments used by Graphics drawString() method (adding a reference to the Graphics instance of course):

text.paint(g,
	getWidth() / 2,
	2,
	Graphics.HCENTER | Graphics.TOP
);

Just a side note: since it’s an animated effect, you’ll need to repaint it quite frequently, so, for example, you can use a Thread to periodically call Canvas repaint() method.

Source code download

You can download source code of ColorFadeText, and of a sample Canvas that makes use of it:

• ColorFadeText.java: main class source code
• AnimatedTextCanvas.java: a Canvas using the ColorFadeText object

This article is also available on Forum Nokia Wiki: How to create a color fading text in Java ME.

After two tutorials on Image animations in J2ME, I’ve finally decided to put together a library to easily integrate Image effects in a Java ME application. This first release is very very early, and is intended to be tested and to allow developers to give their feedbacks about it, so It’d be possible to modify and improve it.

Currently supported effects are visible on the emulator page, and are:

• BlindsFx
• ExplodeFx
• PuzzleFx
• ShakeFx
• SlideFx
• SpiralFx
• WaveFx
• WipeFx

How to use it?

Let’s start from a simple usage example. We start creating an Image, and then using it to create an AnimatedImage instance:

Image baseImage = Image.createImage("/base.png");
 
AnimatedImage animated = new AnimatedImage(baseImage);

Now, we have created an AnimatedImage, that is the base class that will allow us to apply effects to Images.

Now, we can create an effect (that will be a subclass of ImageFx) and apply it to our AnimatedImage:

ImageFx fx = new PuzzleFx(8, 8, ImageFx.TYPE_IN);
 
animated.setFx(fx);

In this example, we have chosen a PuzzleFx effect, that will show (or hide, depending on Fx type) our image piece by piece. As you can check on JavaDocs page for PuzzleFx class, first 2 arguments represent the horizontal and vertical pieces to split the Image into, while the last one is the type of the Fx itself.

Now, our AnimatedImage is ready to be animated. To start the animation, simply call the AnimatedImage start() method, passing as argument the effect duration in milliseconds:

animated.start(3000L);

About painting, you’ll simply have to call the paint() method, in a way that is really similar to Graphics drawImage():

animated.paint(g, 100, 100, Graphics.TOP | Graphics.LEFT);

Now, to begin using this library, you don’t really need any more infos. Just to point out some methods you can find useful in your app:

//stop() method will immediatly stop the FX
fx.stop();
 
//isRunning() method tells if the FX is running or not
fx.isRunning();
 
//isEnded() method tells if the FX animation is ended
fx.isEnded()
 
//and, if you want a looping effect, you can use
fx.setLooping(true);

Further information

You can library JAR file here: ImageFx.jar. Current version requires MIDP 2.0 and CLDC 1.1 to be used (a version compatible with CLDC 1.0 will be released as soon as I’ve got time :)).

Full API JavaDocs (still in early phase too :)) are also available here.