Animation/Gaming in PowerApps using Timer Control

PowerApps is a platform for creating a custom business application for someone with very little hardcode coding skilling. It creates an application so fast that you end up having a lot of spare time. And what do you do when you have a few hours to space? You end up creating another application, just for fun. What better than create a simple game and explore the possibilities that PowerApps can do. So you can do Game Development or Animation in PowerApps.

Though PowerApps is not something you create a game with and it was never envisioned to do so. An actual software to create games should be able to provide an easy way to animate, loop, and trigger changes. Technically, we don’t have a direct feature to do that in PowerApps but we have an amazing thing called Timer control. Timer Control generates a continuous value that increases with time. This value can be mapped with the values of other objects in the PowerApp and you end up with animating objects in PowerApp.

Game Development or Animation in PowerApps

The first try, that I did with PowerApps was creating Flappy Bird. For creating a Flappy bird you will have the following objects in the canvas.

  1. Bird,
  2. Pipes, and
  3. Background

Download these gif images of these objects from the internet place it on the canvas. Additionally, you would need :

  1. Text to show scores
  2. Text to show Game Over
  3. A restart button
  4. A jump button
game development or animation in powerapps

The Animation:

The animation happens by changing the x-y coordinates based on Timer Control.

I initiated three variables: ‘varTimer’ to start and stop the timer. varJumpValue which is used in bird object to jump and TimerValue which is updated from the timer.

game development or animation in powerapps

The timer duration is set to 10ms. After 10ms the timer restarts and OnTimerStart TimerValue is increased. The same time we do the collision test to check if the bird has collided with the pipes.

game development or animation in powerapps

When the Timer starts rolling, TimerValue subtracted with varJumpValue is updated which is bind to the Y position of the bird. This will keep the bird move down with the increase in TimerValue while the varJumpValue helps to make the bird jump.

game development or animation in powerapps

When Up Button is clicked, the varJumpValue is increased that makes the bird jump.

game development or animation in powerapps

To keep the background moving, You can add the value of Timer control to the X position of the background and it starts moving.

The pipes will also start moving with the TimerValue from right to left. Once, the pipes are out of the frames, it will move back to the original position.

game development or animation in powerapps

Now, you have a jumping bird, moving background and moving pipes.

Collision Test:

To check if it collides with the pipe or goes through the narrow passage or not. You can calculate it with the normal linear function.

game development or animation in powerapps

With same collision logic and changing the positions of the objects based on the timer, ended up making another simple game I called it Superman vs Darkseid.