While searching for Firemonkey components I found this TSprite component built by Gilbert Padilla for an earlier version of Firemonkey. The TSprite component takes a spritesheet and animates it for you. Spritesheets are all of the animations of a sprite combined into a single image. The TSprite component then has a map of where each sprite image is on the spritesheet and draws it as an animation. You would usually use spritesheets (and therefore this component) when building games. Spritesheets are used in a lot of game engines to achieve a high framerate. I took the original version of TSprite and upgraded the uses clause to support Delphi XE5 Firemonkey. There are a number of different spritesheet image creators available on the web like Sprite Vortex. You can also export MovieClips from Adobe Flash as spritesheets. I tested the TSprite component in a mobile project so it should work okay on Android and IOS. Check out this blog post from Gilbert about his component. Download the original version of the component here. The built in bitmap animation component that comes with Delphi XE5 Firemonkey and is similar to TSprite is called TBitmapListAnimation.
Check out this Korean blog post on the subject with more information on how to use TSprite.
Update: Download TSprite For Delphi XE5 Firemonkey w/ Mobile Draw Fix
A developer commented (see below) that the code had problems on mobile. I’ve updated the mobile demo and patched the TSprite component to fix the problem. Basically on mobile you have to call InvalidateRect() on the rectangle to get it to redraw. I also updated the mobile demo to load the data off of the form instead of having to include files in your mobile deployment.
Procedure TSprite.DrawFrame(Number: Integer);
FFrameNumber := Number;
Width := FFrame.Width;
Height := FFrame.Height;
RectF(FrameX, FrameY, FrameX + FFrame.Width, FrameY + FFrame.Height),
RectF(0, 0, FFrame.Width , FFrame.Height), 1);
InvalidateRect(RectF(0, 0, FFrame.Width , FFrame.Height));
if FFlippedX then FFrame.FlipHorizontal;
if FFlippedY then FFrame.FlipVertical;
Update: Download the TSprite component and demos for Delphi XE6 Firemonkey.
The change I made to make it work under Delphi XE6 Firemonkey was to change it’s parent control from TControl to TRectangle. I don’t know if that is the right way to do it but it worked so I’m going with it.
Can you post your changes?
Oh, my updated Delphi XE5 Firemonkey version is linked at the bottom.
I tried to install the TSprite component. But it did not work on Android and IOS.
It worked on win32.
I updated the TSprite component with a fix and the mobile demo project. Tested it on an Android device and it works now.
Please, someone help me!
How to get width and height of the sprite set up.
Thanks in advance.
You must create a map with sprite vortex or similar tool, then read that map and extract the coordinates, see the following blogs:
Reading XML SpriteSheet Maps
Is it possible install in C++ Builder XE6?
Should be, yes. This says you have to set Options->Linker and choosing “Generate all C++ Builder Files”.
How do I use it FireMonkey mobile application? I’ve downloaded patched version, but in FireMonkey mobile application it is greyed out in components list with hint that it is only available for Win32 … Delphi XE6.
Put [ComponentPlatformsAttribute(pidWin32 or pidWin64 or pidOSX32 or pidiOSSimulator or pidiOSDevice or pidAndroid)] in the type definition before the class. Like:
[ComponentPlatformsAttribute(pidWin32 or pidWin64 or pidOSX32 or pidiOSSimulator or pidiOSDevice or pidAndroid)]
TMyComponent = class(TControl)
Ok that partially fixed the problem… now it is not greyed, but… I can’t compile dcu’s on Android platform because it says:
“[DCC Fatal Error] FireBlaze.dpk(33): E2202 Required package ‘DesignIDE’ not found”
And when I try to use those for Win32, in Mobile Application I get:
“[DCC Fatal Error] Unit1.pas(7): F2048 Bad unit format: ‘c:\program files (x86)\embarcadero\studio\14.0\lib\Android\Release\FBSprite.dcu’ – Expected version: 27.0, ARM(ARM) Found version: 27.0, Windows Unicode(x86)”
Go to Project|Options… and add the directory where your FBSprite.pas file is to the Search path.
Thank you! That worked 😉