text wrapping with JavaME

Filed Under (java, programming) by Nathan Schwermann on 09-04-2009

Tagged Under : , , ,

Recently I had the pleasure of remaking Hunt the Wumpus using JavaME for a school project. I didn’t think I would run into any big challenges since it is just a text-based adventure game but never-the-less I was excited to program for mobile phones. It didn’t take long before I learned the hard way that text doesn’t automatically wrap around the screen when you draw it. Being that text is the most important part of a text-based game I had to come up with a way to dynamically wrap text around the screen.

A quick Google search for ‘text wrap midp’ and I found a nice article explaining how to do it. I found it was a good starting point, but the example did have some issues. For one, the algorithm they shared didn’t take into account whether or not it started writing on the next line in the middle of a word. Second, their code had a bug in it which would stack the first few characters on top of each other when you went to a new line.

Another issue I had to think about was if the screen was small enough the text would draw right on top of my picture for the current room. So I decided to implement a simple text box for all of my dialog to help the readability. I think that ultimately it turned out looking pretty good.

Lets get down to how it was done. I made a function that took the MIDP graphics reference, a string, and a Y value for where to draw it on the screen. Drawing the box turned out to be fairly easy, MIDP did most of the work for me, other than that I just tweaked the hard coded values till I thought it looked good.

public void drawDialog(Graphics g, String text, int Y){

  int outerX, innerX , arcValue, Boxwidth, Boxheight, outerY;
  outerX = 10; //arbitary
  innerX = 12;
  arcValue = 5;
  Boxwidth = curCanvas.getWidth() - 20;
  Boxheight = (g.getFont().stringWidth(text) / Boxwidth ) * g.getFont().getHeight() + g.getFont().getHeight();
  outerY = Y - Boxheight - 10;

  g.setColor(243, 234, 172);
  g.fillRoundRect(outerX, outerY, Boxwidth, Boxheight, arcValue, arcValue);
  g.setColor(135, 53, 53);
  g.fillRoundRect(innerX, outerY + (innerX - outerX), Boxwidth - (innerX - outerX)*2, Boxheight  - (innerX - outerX)*2, arcValue, arcValue);
  g.setColor(255, 255, 255);

Next I decided to use the StringTokenizer class to break my string up into words and use the string length to determine if it is time to draw on the next line yet, instead of characters like the article I found.

  Font font = g.getFont();
  int fontHeight = font.getHeight();
  int idx = 0;
  int width = Boxwidth;
  int lineWidth = 0;
  int wordWidth = 0;
  int y = outerY ;
  int x = innerX + 1;
  String curString;
  String words[] = new String[500];
  StringTokenizer st = new StringTokenizer(text, ' ');
  while(st.hasMoreChars()){ //break text into words
  words[idx]=st.nextToken();
  idx++;
}

for(int stct = 0; stct < idx; stct++){
  curString = words[stct];
  //measure the word to draw
  wordWidth = font.stringWidth(curString);
  lineWidth += wordWidth;
  //see if new line is needed
  if(lineWidth >= width){
    y += fontHeight;
    lineWidth = wordWidth;
    x = innerX + 1;
  }
  g.drawString(curString, x, y, Graphics.TOP | Graphics.LEFT);
  x =  lineWidth + innerX + 1;
}

This worked great, however since I am new to programming in JavaME and Java all together. I didn’t realize that you can’t use generics in JavaME, I’m not sure why NetBeans let it slide, it ran fine in the emulator, but I ran into troubles trying to deploy it to a real cell phone. In fact I couldn’t even compile my project on the Sprint SDK because of including the StringTokenizer class. So ultimately I went back to using individual characters, and I thought of a real easy way to see if I should be drawing on the next line. The only catch is I had to be mindful not to use any words larger than 10 characters, because that was the arbitrary value I chose to check for a new line. At any rate I wish I would have thought of it in the first place because it would have saved me a lot of work.

Font font = g.getFont();
int fontHeight = font.getHeight();
//change string to char data
char[] data = new char1;
text.getChars(0, text.length(), data, 0);
int width = Boxwidth;
int lineWidth = 0;
int charWidth = 0;
int y = outerY;
int x = innerX + 1;
char ch;
for(int ccnt=0; ccnt < data.length; ccnt++){
  ch = data[ccnt];
  //measure the char to draw
  charWidth = font.charWidth(ch);
  lineWidth = lineWidth + charWidth;
  //see if a new line is needed
  if (lineWidth >= (width - 10) && ch == ' '){
    y = y + fontHeight;
    lineWidth = charWidth;
    x = innerX + 1;
  }
//draw the char
  g.drawChar(ch, x, y,
  Graphics.TOP |Graphics.LEFT);
  x = lineWidth + innerX + 1;
}

All in all it was a good learning experience and I’m happy to share it with all of you. Thanks for reading.