Sprite Sheet Animation Component For Delphi XE5 Firemonkey On Android And IOS

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);
begin
SetFrameSize(Number);
FFrameNumber := Number;
Width := FFrame.Width;
Height := FFrame.Height;
FFrame.Clear(clanull);
FFrame.Canvas.BeginScene;
FFrame.Canvas.DrawBitmap(FSpriteSheet,
RectF(FrameX, FrameY, FrameX + FFrame.Width, FrameY + FFrame.Height),
RectF(0, 0, FFrame.Width , FFrame.Height), 1);
FFrame.Canvas.EndScene;
{$IFDEF POSIX}
InvalidateRect(RectF(0, 0, FFrame.Width , FFrame.Height));
{$ENDIF}
if FFlippedX then FFrame.FlipHorizontal;
if FFlippedY then FFrame.FlipVertical;
Repaint;
end;
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.