Sunday, 26 February 2017

Delphi Firemonkey (FMX) rendering TCanvas for Android

I'm currently working on a new game for Android using Delphi Berlin 10.1 and one of the issues I faced so far is regarding canvas rendering. I like painting my own stuff using the canvas (here is proof of it). So imagine how I felt when I deployed the game to my Android device and noticed that nothing was being displayed while the game works perfectly under Windows.

The reason behind this change is that the component TImage renders differently now and you have to paint everything on a TBitmap.canvas component and then assign it to the original TImage component so it gets displayed correctly so it requires few tweaks. 

The idea of the game is to find and match one of the 6 images shown with the image displayed below. Once you have identified the exact match you just need to tap to it to go to the next game. The game increases difficulty when you score certain number of points. You have just 10 seconds to complete the task.

The way I've built this is by using 6 TImage components and then I render there a matrix of zeros and ones that get represented into an image so the first image on the left is actually the matrix:
[1,0,0,1]
[1,0,1,0]
[1,0,0,1]
[0,1,0,0]

The numbers get randomly generated and I make sure that no duplicates are found during the randomisation.

If you see the image below, by level 20 and 50 things get complicated:



If you look at the source code below, this code tries to paint the main core of the application and it will work perfectly well on Windows but it won't work under Android (you will just get a black screen).


To overcome this issue, we need to do the rendering a bit different. Now we need to create a custom bitmap, paint in there and then assign it to the original TImage. Here is a different version of the code above that works under Windows and Android and everything gets rendered correctly.



Here is the game running on Android (just be aware that it's still under beta testing and that there are still many things to fix):


Once finished I'll place it in google play for your amusement and share the source code. Let me know if you have any questions.

I'm still using the same concepts to my Delphi Physics Engine so I can render correctly my models on Android. I'm rewriting the library so it supports FMX and from there I'll be able to render on Android without problems!.

To load bespoke fonts for Android I had to use the following article which did the treat:



Jordi
Delphi MVP.

1 comment:

  1. Thanks for this. I'm looking to create a simple 2D game using FireMonkey, and will be rendering to the Canvas. Quite new to FMX, so really appreciate these kind of posts. Thanks!

    ReplyDelete