Tutorial 8 - A Skinnable Directional Pad (dPad) Class

A virtual dPad is handy if you have a game which moves something on the screen. It also looks a bit more polished than just having four buttons. I have whipped up a simple skinnable class (http://codeatuts.blogspot.com.au/2012/07/tutorial-8-directional-pad-dpad-class.html) with 5 downloadable sample skins for folks to play with. It extends @Vega’s mesh button class.

This is version 1.0 so it is very basic. It only uses CENTER alignment at the moment and sprites for the skin. At some point I will have a go at a version which just uses meshes (unless some mesh guru does it first…)

Fell free to use, hack, improve, comment or otherwise dismember the code.

Hi @Reefwing,

Nice tut, lots of learning there for me. Only comment - pad’s seem a little big, I’m assuming you can scale them OK?

I’ve made a couple of skins myself, which I’ll publish later in an app.

Armed with this there must be a wave of new apps in the near future to look forward to.

Thanks again,



Hi @Bri_G - Thanks, I’m not sure about scaling I haven’t tried it. It wouldn’t be hard to make a smaller version.

Hi @Reefwing,

Try to put the following in a draw() function:

    sprite("Planet Cute:Chest Closed", 300,300)
    sprite("Planet Cute:Chest Closed", 100,100, 50, 80)  

Works fine and very useful at times.



Very nice skins on those example D-pads. Awesome tutorial!

Thanks @Simeon - Codea is very addictive. I do feel using sprites is cheating a bit but that is the beauty of Codea, fast prototyping.

Thanks everyone for the retweets as well - much appreciated.