In this game we will use only three layers (groups):

These layers help us to draw the game objects in the correct order, draw only the ones needed for a certain game mode, and also reduce the amount of objects to be checked during collision detection.

The title screen of our little game is an image with the title written on it and with a a button to start the game. As the button is already drawn on it, we will utilize a new feature of the fantomEngine, a Zone object. You can use a zone object to detect collisions on it and also check for touch events.

The game background screen will cover the whole canvas of the device. In addition, there are two buttons drawn on it that let us exit the game and restart it. Beside the actual play field, there is also a header area where the game score and the current FPS (frames per second) value are displayed.

Finally, our main game object! The player has to touch one of the atom tiles; it then depends on its kind, rotation, and also the neighboring atoms as to whether a chain reaction is started. The atom tiles are drawn on one sprite sheet for the different types of atoms' elements. Each tile comes in four different variations that are used for the sprite animation.

While in game mode, the player will be provided with two fields of information in text form. One is the game score and the other will be the current FPS value. It will indicate how many times your device is able to draw the whole game screen in the last second. Anything less than 20 FPS becomes sloppy animation-wise. It is better to have it at around 30 FPS or higher.