Playing with FireMonkey

First of all, Delphi development is great fun. The best way to learn how to build mobile apps is to start by creating a few small apps. In this chapter, we are going to build a simple Game of Memory application using primitive components such as layouts, shapes, effects, and animations. We are also going to learn how to deliver an advanced mobile user experience with touch, multi-touch, and gestures.

This chapter will cover the following topics:

• Drawing in code
• Get moving with timers
• The power of parenting
• Touching the screen
• Game of Memory
• Working with images
• Designing the user interface
• Building the game’s main form

The objective of this chapter is to learn the basics of FireMonkey programming. To do so, we’ll build a simple but complete game in the last part of this chapter.

Technical requirements

The examples in this chapter work in any version of Delphi. The complete source is available at https://github.com/PacktPublishing/Expert-Delphi_Second-edition.

Drawing in code

The key to FireMonkey’s cross-platform support is its rendering architecture. When you create a new multi-device project with Delphi, on the first page of the wizard, you can choose an application type. Effectively, this selects the type of the first form to add to a new app. For this, you can choose Blank Application. This will add a form inherited from TForm to the project, which is a basic two-dimensional form. The second choice is 3D Application. This will add a form inherited from TForm3D. All other choices give you a TForm descendant with some additional controls already added.

If you decide to add more forms to the project, then you’ll come across the real choice: HD Form or 3D Form. Here, HD stands for high-definition and is just a different name for 2D. Depending on the chosen platform, FireMonkey forms are rendered using different graphics APIs, such as OpenGL or DirectX. These are the same APIs that many developers use to implement graphically...

Get moving with timers

Let’s go a step further – instead of having a static scene, we’ll add some animation. It is a normal thing for the Sun to ascend in the morning. To achieve the effect of sunrise, the form must be repainted. We are going to change the Y coordinate that is used for painting the Sun’s circle and rays. To do this, we’ll add a private member called FSunPosY: double to our TFormSun class that will store the current vertical position of the Sun.

The simplest way to change our scene over time is with the TTimer component. To do so, drop a timer on the form. It has only one event, OnTimer. The frequency of this event is controlled by the Interval property, which specifies the number of milliseconds between firing the OnTimer event. The default value of the Interval property is 1000, which means that the timer fires its event every second. For a smooth animation, this is too slow. Change the Interval property to 20 and double-click...

The power of parenting

One of the nicest things about FireMonkey’s architecture is parenting. Essentially, any FireMonkey component can contain or “be a parent” to other components. What’s cool about this is that all children inherit different properties of their parents, such as position, scale, and rotation. This also provides a lot of possibilities when it comes to building user interfaces since we can create composite controls without having to declare completely new classes.

Shapes

A lot of low-level drawing code can be avoided by using different controls from the Shape category on the palette. There are lines, circles, ellipses, rectangles, pies, paths, and more. They encapsulate drawings on the canvas, so you don’t need to write much code.

Let’s try to recreate our Sun visualization with shapes to better compare these two possible approaches to drawing. Add a new Form HD element to the project. Drop a TRectangle component on...

Touching the screen

FireMonkey forms provide support for handling simple touch, multi-touch, and gesture events. You can use standard and interactive gestures, such as zoom and rotation, to make your apps more dynamic and interactive.

Touch

FireMonkey forms are used for building both mobile and desktop applications. It is just a matter of changing the selected Target Platform and recompiling the project. Certain concepts exist on desktops that do not exist on mobile platforms and vice versa. For example, on mobile devices, there is no concept of a mouse, but this exists on desktops. FireMonkey forms provide different mouse events that are fired in response to simple touch events on mobile platforms. When the end user touches the screen, the OnMouseDown event is fired. Other events, such as OnMouseUp and OnMouseMove, are fired when the user stops touching the screen, or when the touch point changes. For individual controls, there are also two additional events, OnMouseEnter and...

Game of Memory

Let’s put together what we have learned about the FireMonkey architecture so far and build a complete but simple game. In the process, we will look at how to handle images with the TImageList component and some basics of building FireMonkey 2D user interfaces.

Designing the game

Game of Memory is a board game. A player is presented with a grid of tiles. Every tile has an image on it, but all images are initially hidden. When a user touches a tile, its image is revealed. When the next tile is touched, the image of the currently visible tile is made hidden again, and the image of the new tile is shown. This means that at any one moment during the game, only one image is shown. The number of tiles has to be even because every image is used twice. The objective of the game is to remove all the tiles in the shortest possible time by touching tiles with the same image one after another. If a user touches another tile with the same image as the currently visible...

Working with images

The key assets in our game are the images to be used on the back of every tile. There will be at least as many images as the number of pairs at the highest difficulty level, plus two additional images. The first image in the list will be completely white and will be used for tiles that have been removed. The second special image will be used as a cover for every hidden tile. Before every new game is started, we are going to randomly assign image pairs to tiles. This will ensure that the game is different every time the user plays it.

FireMonkey comes with the TImageList component, which has been designed to efficiently manage all images that are used across the whole app. It is good practice to put images and all other global game assets on the dedicated data module. In this way, we can easily access them from all app forms, or even reuse them across different projects.

Add a new data module to the game project. Save the file as uDMGameOfMem and change its...

Designing the user interface

We now have a set of images ready to be used in the visual part of the app. In this section, we’ll start building the main form for Game of Memory. This is where the end user will be spending most of their time un-hiding tiles and removing them from the grid.

Designing for multi-device

The key consideration in building mobile user interfaces with FireMonkey is the fact that our app can be compiled for different targets and it should run properly on displays with different sizes and orientations. There are different strategies to handle different screen sizes. The most powerful approach is to organize different visual controls on the form in such a way that they always work properly on screens of all possible sizes, from small mobile phones to large tablets.

Aligning, anchoring, and margins

We have already used the Align property a lot. Regardless of a given control size, we can instruct it to align itself with a portion or the whole area...

Building the main form of the game

In our game, we have a visual grid of tiles. The most natural component to use in this context is the TGridLayout component. Drop it on the main form of our app, change its Name property to GridLayoutTiles, and align it with Client so that it occupies the whole screen of the main form under the toolbar. Now, we can add other visual controls to the grid layout. The size of each item in the grid layout can be controlled with its ItemHeight and ItemWidth properties.

We are going to use the TGlyph component to display bitmaps from our image list in the data module. There is also the TImage component, which we could have used, but in this case, we would need to load bitmaps directly to every TImage, which is not as effective as using just one set of bitmaps. Let’s get started:

1. Change the background color of the main form to white. Expand Fill, then change Color to White and Kind to Solid.
2. Add the uDMGameOfMem unit to the uses clause...

Summary

In this chapter, we learned some of the fundamentals of FireMonkey 2D programming. Starting from writing low-level code for drawing on the canvas, we quickly learned the fundamentals of rapid app development with reusable shapes, animations, and timers. This is where Delphi shines! At this point, you are on your way to becoming a developer superhero who writes less code to achieve better results.

In the next chapter, we are going to add an additional dimension to what we have seen so far and dive into the realm of FireMonkey 3D.