Hello Blog

It's been a while since my last post, so here's some stuff

Treon was released!

I released Treon for Android in the Play store back in September. It was mostly an experiment to see what was involved in publishing an app, and to see how much interest it would get. The only 'advertising' was a few tweets when I first released it. Within the first month, the stats looked like this

I'm not too fussed about it, I got to show it to my friends and I'm pretty proud of the polish that went to it.

If you want to get it (it's free) you can go to the Google Play store

VR Project

So the main thing that has been taking up my time was the virtual reality game, built for Google Cardboard.

It's been going well, and I've been posting about it a lot on Tumblr but a recent change (bug) in Chrome for Android means that it will no longer work. It's not only limited to Dart (plain js fails too) but here's an example:

Element myElement = querySelector('#orientation-display');

window.addEventListener("deviceorientation", (DeviceOrientationEvent event) {
    myElement.innerHtml = 'A: ${event.alpha}, B: ${event.beta}, G: ${event.gamma}';

Instead of displaying the phone/device's orientation, it does nothing. I've followed the MDN guide but it seems like the events never fire from the browser. Firefox for Android works (yay) however my fullscreen code does not (boo).

Once it is fixed, I'll start working on it again. I may also look into getting it to work with Firefox

VR Adventure

I've played around with VR before, using WebGL and dart, but the project got messy and I eventually gave up on it. I was hoping to write an actual Android app in the near future, but thanks to a very inconsistent emulator development is slowed down so much that it's driving my crazy.

This game is once again written in Dart, however it supports:

  • Actuall fullscreen control (no onscreen buttons etc.)
  • Pitch, yaw and now... roll!

Models are being made in Blender and exported as Collada files. I've written a quick tool to convert it into a more VBO friendly (and javascript/dart friendly) format, rather than using OBJ files or making a Blender plugin. The textures are 'baked' within Blender and saved to pngs. I've added a hue ramp in this screenshot, but I'm not sure what I'll do in the final thing.

The plan for the gameplay is to make a simple choose-your-own-adventure type game. Choices are made by looking at things for a few seconds. Usable items will be highlightes somehow, and the player will move along as you play the story.


Treon, that's the name of my first Android app.

It's a combination of  the words "Triangle" and "Neon".

This game should look familiar, I've posted about it before, back when it was a Java Applet. I decided that it would be one of the quickest games of mine to port. I've posted about it here, here, here and here, and also on tumblr.

I finished porting the game as-is to Android a few weeks back, but it wasn't enough.

First I had to tackle touch-screen controls. On the keyboard you used up, down, left and right, but on a touchscreen I could make a 3-directional 'thumbstick' (depending on the orientation of the triangle).

Next, it needed a menu, a way to select levels and change settings. Jumping from the game 'Activity' to a 'Settings' activity was tricky to get working, but that's all good now.

The game was good, but missing another game mechanic. There was nothing time-based in the game at this stage, so I implemented an NPC. One moves clockwise, and the other moves randomly when it reaches a wall. They can only pass through walls that are the same colour as you. With this addition I was able to come up with many more combinations of game mechanics to make some interesting levels.

Finally there was the problem of replayability. Once you complete a level, why would you go back? To answer this, the game will now track your best score (least number of moves) for each level. I might take this a little further and give you a rating based on how close you were to the optimal solution.

Right now the game is in alpha, and only a few people are invited to test it. The Android developer console takes care of alpha and beta testing and the whole thing has been a fun experience. I hope to finish it up an make it available to the public (for free of course) very soon.

Here's the alpha store listing

Procedural tile map generator



Progress on my procedural map generator for version 2 of my ski-free remake (or anything really).
Each type of tile has a set of possible tiles that it can go around it, those with less choices are processed first. If it gets to a point where there are no valid choices, then it deletes the 5x5 area around it and tries again.
In the animations, grey tiles show unassigned tiles, red indicates tiles with limited options, and green indicates tiles with many options

Delving into VR

A few weeks ago I purchased my Google Cardboard virtual reality 'kit' for my Nexus 5.

Not much stood out in the app store for Cardboard, so I thought I'd work on something of my own.

I had a go at developing an Android app, but it seems that the emulator didn't work with OpenGL. Without the emulator, the dev-deply-test cycle takes way too long, so I decided to whip something up in Dart.

The rough demo basically uses two glViewports, and slightly offset. I modelled part of the scene based on this area of Utrecht.

If you're looking at it on a phone it uses the accellerometer/compass data available to the browser. On the PC it will just spin around the scene. (The resolution is fixed at 1080x1920 so you might have to pan/zoom around to align it)

C++ Procedural Maps

The bomberman game is near completion, so as expected I'm struggling with the last 5%

I've also started a new project in c++ where I'm setting up a simple framework so I can make something like this Polygonal Map Generation thing, and then perhaps make a game with it. It's been quite a while since the last c++  project, so it has taken a while to get into it. The feature list includes simple stuff like:

  • Shader loading
  • Mesh loading
  • Texture loading
  • Window management
  • Controls

I plan to get back to the bomberman project soon.. eventually

Bomberman Progress

I've made some progress since the last post. The most notable is the menu.

In the menu you can customise your hair, eyes, accessories and clothing/skin colour, as well as your name. Once you start the game, it connects to the server and the infinite bomberman-style game begins immediately.

I'm still messing around with the perspective as it looks a bit flat at the moment. It's difficult to get a more interesting angle without obscuring your view in one way or another. Its a bit unfortunate that you don't get to see much of the character you created.

What's next? death! Well, you can die in this version, but it just teleports you to a new location. The player needs to be pinished a little, by interrupting their gameplay with some sort of death animation. At the moment I'm thinking about fading out the level and the other players, and zooming in.

Touch controls aren't in yet, but I have worked them out. The main hassle is loading it up on my phone each time to test. Chrome/Chromium can do some cool mobile/touch emulation, but it just can't do multi touch.

I'd like to have this game up and playable soon, so I can at least justify my purchase of a VPS

Bomberman is coming together

Development of my bomberman-clone is coming together well. There's quite a bit left to do, but the networking code is solid, and it does work.


A lot of the art is still placeholder, even if it is the second or third iteration. One of the things I'm interested in is character customization, I made a basic model, and some optional extras; These include different eyes, hair and a skirt. The colours are also switchable, with 32 current palletes. Here are two configurations

More on Tumblr


There are a lot of 'bugs', but nothing that seems difficult at this stage. I need to update it to have the same rules as the original bomberman, where you can't walk through bombs, and where explosions can start chain reactions

Touch Controls

I plan to make this work in mobile browsers, which required some research about touch controls. I've blogged about it, but I'm still yet to integrate it into the game. The development and test cycle is much faster on the PC, so I'll focus on it until the game mechanics are all in.

Other Things

I started making a  mind map of things to do, and it's a bit daunting. You can view it here. It's been about 5 weeks of on-and-off development, and I think it's still on track.

Touch Controls in Dart

A few weeks ago I tweeted about making a bomber-man type game, and was asked if it worked on the phone

I looked around for some resources in Dart without much luck, so I took up upon myself to write this, to help future developers devlop for touch screens.

Im this example, the left half of the screen controls the players 'action' (like jumping) and the right half works like a thumbstick on a conventional controller.

If you just want to see the code, without explaination, you can see it here on Bitbucket and try the demo here

Step 1, Detecting the touch events on a canvas

Here in out main method, we find the canvas element (with the id "canvas") using querySelector(). Using that element, we listen for a bunch of touch events. In this case, touchEnd, touchCancel and touchLeave are treated as the same.

The controls object is where we will implement the handling of these events.

CanvasElement canvas;

void main() {
  canvas = querySelector("#canvas");


Step 2, Touch Start

The start method takes the first touch from the changedTouches list and calculates its position (pt) within the canvas.

If the position is in the right half of the canvas: we record the ID of the touch, and set the start and end points of the touch to the current position.

If the position is on the left half of the canvas: _action is set to true.

e.preventDefault() stops the touch from being interpreted as a scrolling motion.

class TouchControls {

  bool _action;
  int _touchId = -1;
  Point _endPoint;
  Point _startPoint;

  start(TouchEvent e) {
    Touch touch = e.changedTouches.first;
    Point pt = touch.client - canvas.getBoundingClientRect().topLeft;
    // Right Half
    if (pt.x >= canvas.width ~/ 2) {
      _touchId = touch.identifier;
      _startPoint = pt;
      _endPoint = pt;
    } else {
      _action = true;

Step 3, Touch End

When the user stops touching the screen, we need to stop moving the character.

e.touches contains a list of all current touches (which doesn't include the touch that just ended in this event). We use the where() method to get a list of all current touches with the id we recorded in _touchId.

If touches no longer contains the touch we are tracking, then we reset the touch id to -1 (assuming this id is always positive). We also reset the _direction that we will be using to record the direction given by the user. The possible values of direction are 0-4, the static constants NONE, LEFT, RIGHT, UP and DOWN

class TouchControls {
  int _direction = 0; // none, left, right, up, down
  static const int NONE = 0;
  static const int LEFT = 1;
  static const int RIGHT = 2;
  static const int UP = 3;
  static const int DOWN = 4;

  end(TouchEvent e) {
    List t = e.touches.where((Touch tt) => tt.identifier == _touchId);
    if (t.length == 0) {
      // identified touch isnt it the touches list any more
      _touchId = -1;
      _direction = 0;

Step 4, Touch Move

We are only interested in the touch with the id _touchId (captured in the start() method), so using a where() again, we get a list (of 0 or 1) touches with the given identifier. If it's empty, then this event is ignored.

As in the start() method, we calculate the position on the canvas, and we make sure it is still in the right half. If it is, then we set the _endPoint and make a cal to calculateDirection(), where we calculate the direction of movement based on the start and end points.

class TouchControls {

  move(TouchEvent event) {
    List t = event.changedTouches.where((tt) => tt.identifier == _touchId);
    if (t.length == 0) {

    Point pt = t.first.client - canvas.getBoundingClientRect().topLeft;

    // Right half
    if (pt.x >= canvas.width ~/ 2) {
      _endPoint = pt;


Step 4, Calculate the Direction

Now that we have a start and end point, we can  calculate the direction. We also introduce a "dead-zone", a small circle near the start of the touch that does not have any direction, much like the default position of a thumbstick on a conventional controller.

The variable vec is the difference between the end and start points, and is used to calculate whick quadrant (starting at 45 degrees) the user has dragged.

The constructor for TouchControls has a single parameter where you set the dead zone.

class TouchControls {
  double _deadZoneRadius;


  calculateDirection() {
    Point vec = _endPoint - _startPoint;

    if (vec.magnitude < _deadZoneRadius) {
      _direction = NONE;
    } else if (vec.x < -vec.y.abs()) {
      _direction = LEFT;
    } else if (vec.x > vec.y.abs()) {
      _direction = RIGHT;
    } else if (vec.y < 0) {
      _direction = UP;
    } else {
      _direction = DOWN;

Step 5, the Getters

Getters are simple in Dart. Most here are one liners, except for get action, which resets the value to false for next time.

class TouchControls {
  get direction => _direction;
  get startPoint => _startPoint;
  get endPoint => _endPoint;
  get action {
    bool tmp = _action;
    _action = false;
    return tmp;

Step 6, Using TouchControls

How you use this class is up to you. In my example I render a box on the canvas using the 2D context. If you want, you can use WebGL, or you could even just use html elements, moving around the screen.

For me, I'm using this to control the player in my bomberman-type game, and the action 'button' will place the bomb.

If you want to take it further, you can add buttons in the left half of the screen, or record the direction as an angle, instead of the 4 compass directions

Once again, you can find it all here (along with the rendering code) on Bitbucket. The live demo is here

Boring legal stuff: I'm sharing this under the MIT license, basically do what you want with it :)


I started a small side-project with websockets because I recently purchased a VPS that I can host the server on.

Multiplayer game development is something that I don't have much experience in, part from Chair Simulator which wasn't really real-time anyway.

Explosions, walking, colliding all work now with multiple people. Now I just have to make it into a game, with scores etc. Usually this is where I choke and give up.

I hope to release this soon, even without scoring. The interest in Chair Simulator motivated me to 'finish' it, and if the same thing happens with this project, then I may finish it too.

Seth Ladd's blog is a good resource. His name is all over dart resources. If you interested in Dart, then you should probably follow him on twitter too.


I'm still working on the level creation of the space game in the background. Some if it's in game already, but some only exists on paper.

Recent Posts

Random Posts