Nine-patches and text rendering

by admin

I promised I’d post more often and I guess I’m keeping my promise by posting… twice a month!

For the past week-and-a-half I’ve been focusing on the interface of my game, I have been doing research and searching other gaming websites to get more clues on the needs of the game, take a look at the interface of this casino games, they are wildly popular. Because I’m targeting such an old platform, I pretty much have to implement everything myself. But that’s okay, because it’s fun! Although I can’t use it directly, I’m using the Gameplay engine as inspiration and also blatantly steal the bits I like.

The reason I’m putting the focus on my interface is because it looks like this:

I can render text and some buttons, but that’s pretty much it. Moving on, I’ll have to put in some more engine work in order to support all the features I want. For example, I want to be able to load my entire interface from a text file and connect the events (button clicked, text entered, etc.) to my game logic. To learn more about modern games, visit

Additionally, I want the ability to specify a margin, border and padding for my controls. This is known as the box model and it comes from HTML. It’s really easy to explain too:

  • Everything element on the screen is put into a box.
  • Boxes are placed together as closely as possible without overlapping.
  • Boxes can be placed inside other boxes.
  • The distance between boxes is known as the margin.
  • The inside of the box is known as the content.
  • The edges around the box is known as the border.
  • The distance between the border and the content is known as the padding

Using these simple rules, you can build pretty much any interface you want!

The next thing on my wishlist was the nine-patch. This is a box with a border in which the corners don’t deform when you stretch the content area.

The most difficult part was figuring out how I was going to store all this information. Ultimately I looked at how gameplay does it and copied that. The result:

Terrible programming art aside, it works! Next up, I attacked the text rendering. It’s a small change, but I can now center the text horizontally and vertically:

I also cleaned up the rendering in general. I am now able to draw text with multiple lines (!) and the code is general enough to fit in the base “Engine” project instead of the Windows Mobile 6-specific renderer. Unfortunately, working for yourself means you have to be tough. So the old text rendering code is still in there, but will be removed “eventually”.

This post has gotten too damn long again. I’m doing so much exciting stuff, I need to talk about it more!