Pasi Manninen keeps testing KunerLite plugins and report to the community. Kuneri have done 11 nice plugins to extend Flash Lite applications and Pasi went out to test some of them. This article he covers the taking, playing and sending video to a remote server. Read more »

Pasi Manninen decided to test KunerLite plugins and report to the community. Kuneri have done 11 nice plugins to extend Flash Lite applications and Pasi went out to test some of them.
Read more »

In this article I will give you some helpful tips on how to decrease your JAR files, and will also introduce you to a tool we developed and use at OrangePixel: PNGSplitter. The magical tool that will strip kilobytes of your jar files!
Read more »

Michael Aykut  from Bizi explains his approach of using A.I. to solve the porting problem.

Read more »

In a previous article I explained how to draw some cool balloon/box/dialog type of things. Now one question I see many times on forums is “how do I write a text wrapping function”. Well guess what? Here is some code to get you started and probably more than that.

The Avatar

One of the special stuff build into this function, is the capability of drawing avatar/character or icon images next to the text. This can further more be controlled by the text itself. For this we obviously need an image like the one below:

Figure 1.1 – Avatars

Note that we only place 4 images on a row, this is what our functions depends on to get the correct images. Also the top-left image has an index value of 1 (one).

Now we also need some container for our text (fairly important) as we will feed this to our wrapping function, so make sure we have a variable and load in the images used by the text function and create the text containers:

[raw]

	public static StringBuffer[] alltext= new StringBuffer[16];
	public static Image avatars;
	public static Font mainFont;

	mainFont=Font.getDefaultFont();

	try {
		 avatars=Image.createImage(“/avatars.png”);
	}catch(IOException e) {
		System.out.println(“oops!”);
	}

The alltext is a StringBuffer of any size you want, every element in the array will contain it’s own text, so you could actually do with just one StringBuffer but we want the array to keep our function more flexible (explained later, trust me!). The mainfont is required to actually draw letters onto the screen and find the right height and width values of the font.

Where required you can of course move the initialization of these variables to the correct part of your midlet.

Let’s wrap it up!

So now that we have our avatar images ready, let’s show you what you came for: The amazingly cool drawing function

public final static int drawInstructions(int ptx,int ty, int txt,int width,
                                int height, int startChar,int rpgCharacter) {
					gd.setClip(0,0,displayW,displayH);

					// top left position
					int topY=ty+4;
					int tx=ptx;

					// length of full string
					int lx=alltext[txt].length()-1;

					// used for display images
					int imgIndex;

					char[] nextword=new char[32];

					int i=startChar;	// letter counter
					int count=i;
					boolean done=false;

					// display an RPG character image?
					// they are 24x24 in size
					// place max 4 characters next to each other in your image
					if (rpgCharacter!=0) {
						gd.setClip(tx-24,ty+4,24,24);
						gd.drawImage(avatars,(tx-24)-((rpgCharacter & 3)*24),
                                    ty+4-((rpgCharacter >> 2) * 24),GT);
						gd.setClip(0,0,displayW,displayH);
					}

					// start the text drawing
					while (!done)  {
						// find next word
						while ((i<lx) && (alltext[txt].charAt(i)!=32)
                                      && (alltext[txt].charAt(i)!=59)
                                      && (alltext[txt].charAt(i)!=37)) i++;

						if ((alltext[txt].charAt(i)!=59) &&
                            (alltext[txt].charAt(i)!=37) && (i> 2) * 24),GT);
							gd.setClip(0,0,displayW,displayH);
						} else {

							// start word on a new line?
							if (tx+mainFont.charsWidth(nextword,0,(i-count))>ptx+width) {
								ty+=mainFont.getHeight();
								tx=ptx;
							}

							// if it still fits, draw the word
							if (ty+mainFont.getHeight()<=topY+height) {
								gd.drawChars(nextword,0,(i-count),tx,ty,GT);
								tx+=mainFont.charsWidth(nextword,0,(i-count));
							} else {
								// else it means our page is full
								i=count-1;
								done=true;
							}
						}

						// new line?
						if ((i<lx) && (alltext[txt].charAt(i)==59)) {
							tx=ptx;
							ty+=mainFont.getHeight();
							if (i<lx) i++;
						}

						// new page?
						if ((i<lx) && (alltext[txt].charAt(i)==37)) {
							if (itopY+height) || (i>=lx)) done=true;
						count=i;
					}

					if (i>=lx) return -1;
					else return i;
}

Let’s do a quick run through the parameters we have to supply:

ptx – the left position of the “text box” we have to draw in. Although we leave the drawing to other functions, we still need to define our box size to know where to wrap our text in.

ty - the top position of the “text box”

txt – the index-value pointing to the correct string in the alltext array we defined earlier

width – the width of the “text box”

height – the height of the “text box”

startChar – the start position in the current text (we might want to start displaying at line 4 instead of line 0)

rpgCharacter – optionally we can draw a default Avatar next to our text, if you leave this to 0 no avatar is drawn.

Special characters

The basic workings of the function aren’t really interesting to talk about, you can either look through it to understand it, or just take it as it is: working. However there are some very important things you do need to know, your text can contain control characters!

I think it’s best to first list all the characters to use, and then give you some example text-lines to use them:

#0..9 - A # followed by a digit (from 0 to 9) can be used to display the specific Avatar defined by that number. Make sure the digit is followed by a space. So: #0 blabla and not #0blabla

; - the semi column is used to end a line

% - used for page-end

So as example, here is the help text I used in the latest OrangePixel game Firby:

#0 Firby;The Lost Keys;;#8 The good Witch Shaba has a little problem. All the monsters she took care off are roaming freely and she has lost all the keys to lock them back in their cages.;Luckily Firby the small and friendly ghost will help her find all the keys%#2 Collect the key to open the door to the next level. Some levels have multiple keys, collect them all!%#1 Collect as much fruit as possible, fruit is everywhere and will give you 10 points%#3 Diamonds will reward you with 25 points%#4 The flowers are mostly found in later levels and reward you with 50 points%#5 Collect potions for extra skills. The gray potions give you a shield;;#6 The red potion makes you able to fly%#7 Controls;;Move left with 4, move right with 6, and jump with 2;Jump diagonally with 1 or 3%(c)2007; orangepixel.net

You can see the avatars I use (the Avatars.png file supplied with this article is also from Firby), the line-endings and page-endings that all define the instruction text.

Using it, and using it well

Only one more thing to explain now is how to actually use this code. As you can see, besides the parameters the function also returns an integer value. This return value is the character-position in the text that has to be drawn on the next go (in case of page-endings).

So from with your game loop you can do something like this:

NextCharacter=drawInstructions(balloonCorners[4]+28,balloonCorners[5]+4,TextIndex,
             (balloonCorners[6]-32),balloonCorners[7]-12,CurrentCharacter,8);

Where TextIndex points to the index of the alltext StringBuffer array. The CurrentCharacter has to be set to 0 before calling the first time, since you most likely want to start at the first character of the text.

After calling this and effectively drawing the instructions, you can wait for the user to press fire and after that do:

CurrentCharacter=NextCharacter

And do the drawInstructions() call again as specified above until nextcharacter < 0. One thing to remember is that you set the canvas color before calling drawInstructions() else the text might not show up because of having the same color as the background.

Finally

So if you combine all the above stuff, and even combine it with the code from the Balloon article I wrote, you should get something like this. Note that the images and text are the ones I included in this article, together with the balloon code and images from the previous article it makes for a pretty picture:

Figure 1.2 – Full blown example

Gerhard Völkl shares a screenshot from NOPA , his under development project physics API. How about sharing YOUR development screenshots? Email your shots to news-at-mobilegd.com !

Read more »

Pascal Bestebroer gives you some functions to handle the drawing of some funky dialog and information boxes.

Read more »

Gibson Tang shows you how to have your JavaME applications send and receive data from your web server. From high-score posting to web chats and more. Sample source code included.
Read more »

Read more »

Read more »