e. Animated Bitmap Example

<< Click to Display Table of Contents >>

Navigation:  Tutorials > Tutorial 03 - Displaying Bitmaps & Icons >

e. Animated Bitmap Example

This section shows how to add animation effects to the bitmap images. The location (x, y) is manipulated to create the illusion of ball moving on the screen, using an image file (ball.png file).



Command Prototype:


uint16_t Bitmap( int16_t Handle, int X, int Y);





returns value from LoadImageFile() commmand


x coordinate value


y coordinate value






int screenWidth = 800, screenHeight = 480;

int ballMaxX = screenWidth - 50, ballMaxY = screenHeight - 50;

int ballX = ballMaxX / 2, ballY = 0;

bool flagX = false, flagY = false;

int deltaX = 1, deltaY = 5;

int16_t handle;


void setup()


/* Initialize CleO - needs to be done only once */



/* Get the handle by loading bitmap */

 handle = CleO.LoadImageFile("@Pictures/ball.png", 0);;




void loop()


/* Start building a screen frame */



/* draw a bitmap at (x, y) coordinate */

 CleO.Bitmap(handle, ballX, ballY);


/* When ball hits the height boundaries */

 if (ballY >= ballMaxY || ballY <= 0)

   flagY = !flagY;


/* When ball hits the side boundaries */

 if (ballX >= ballMaxX || ballX <= 0)

   flagX = !flagX;


/* Update ball x-coordinate */

 if (flagX)

   ballX += deltaX;


   ballX -= deltaX;


/* Update ball y-coordinate */

 if (flagY)

   ballY += deltaY;


   ballY -= deltaY;


/* Display completed screen frame */







In the above code snippet, the Setup() routine begins with the initialization of CleO.

The bitmap file (ball.png) is then loaded, and the screen background is set to white color.

By loading the bitmap file, a handle of the bitmap file is passed instead of drawing the bitmap on the screen.

The Loop() routine constructs a frame between the Start() and Show() methods.

The bitmap (ball)  is drawn at the initial location (x,y) and then keeps on moving its location (ballX, ballY).

It checks for the vertical screen boundaries, and if the ball has reached the bottom or top of the screen, it alternates the direction of the bitmap by updating flagY and ballY values.

Similarly, it checks the horizontal screen boundaries conditions and updates deltaX and ballX values. Thus, in each frame, the bitmap location is changed providing an animation of a ball moving on the screen.

The values of deltaX and deltaY can be modified to see different animation effects.

Use the @ symbol only when performing the file operation from the eFlash and not from the SD Card.





Click on the video clip to view the output that is displayed upon executing the above code snippet -


Animated Bitmap