In this post, I will show you how to develop a simple 2D game to add an offline capability/ functionality for Canvas Apps in PowerApps. We will use the already available resources in Canvas Apps and develop a game like the dinosaur game that pops up in the Google Chrome browser tab when there is no internet connectivity.
I have created this as a component and it can be easily integrated with any Canvas App. This functionality works only on mobile and tablet devices. Let's look at the step-by-step process of developing the component and implementing it on the Canvas App.
Let's Get Started!
Step 1: This is a timer control responsible for controlling the movement of the path, obstacle creation, jumping of emoji, score calculation and collision detection. Expression used on the "OnTimerStart" property of this control is: Expression: If(Connection.Connected,Set(IsConnected,true);Set(Xforfirst,Component1.Width); Set(XforSecond,Component1.Width+250);Set(Xforthird,Component1.Width+550);Set(Xforfourth,Component1.Width + 850); Set(YForEmoji,Component1.Height /2 - 10 - Icon1.Height);Set(XForEmoji,100); Set(OfflineCounter,0);Set(Score,0);Set(DecreaseXIcon2,false);Set(XforIcon2,Component1.Width);ClearCollect(Obstacles,{Value:Round(Rand(),0)});Set(Conflict,false);Set(DecreaseXIcon2,true); Set(XforIcon2,Component1.Width),Set(IsConnected,false));
If(IsConnected = false && Conflict = false, Set(OfflineCounter, OfflineCounter+1);Set(Score,Score + 1);If(Xforfirst<1, Set(Xforfirst,Component1.Width),Set(Xforfirst,Xforfirst-50)); If(XforSecond<1, Set(XforSecond,Component1.Width),Set(XforSecond,XforSecond-50)); If(Xforthird<1, Set(Xforthird,Component1.Width),Set(Xforthird,Xforthird-50)); If(Xforfourth<1, Set(Xforfourth,Component1.Width),Set(Xforfourth,Xforfourth-50)); If(OfflineCounter = 70,Set(OfflineCounter,0);ClearCollect(Obstacles,{Value:Round(Rand(),0)}); Set(DecreaseXIcon2,true);Set(XforIcon2,Component1.Width)));
If(IsConnected = false && Conflict = false && DisableButton = true,If(CountIteration = 6,Set(GoingUpward,false)); If(GoingUpward,Set(YForEmoji,YForEmoji-15); Set(CountIteration,CountIteration+1),Set(YForEmoji,YForEmoji+15); Set(CountIteration,CountIteration-1)); Set(XForEmoji,XForEmoji+5); If(YForEmoji=Rectangle1.Y - Icon1.Height,Set(DisableButton, false)));
If(IsConnected = false && Conflict = false && XForEmoji >= Component1.Width/2 && YForEmoji = Rectangle1.Y - Icon1.Height,Set(DecreaseMode,"Emoji");Set(DecreaseX,true)); If(IsConnected = false && Conflict = false && Icon1.X + Icon1.Width>= Icon2.X && Icon1.X+ Icon1.Width <= Icon2.X + Icon2.Width && Icon1.Y + Icon1.Height >= Icon2.Y && Icon1.Y+ Icon1.Height <= Icon2.Y + Icon2.Height, Set(Conflict,true);Set(DecreaseXIcon2,false);Set(DecreaseX,false))
Explanation: Here, IsConnected is a boolean variable to check if the internet connection is connected or not. Xforfirst, XforSecond, Xforthird and Xforfourth are X coordinates of the four points that move along with the path to create the visual effect. YforEmoji and XforEmoji control the Y and X coordinates of the emoji icon. The score variable records the score. Obstacle is a collection to check if the obstacle will be a building or the 3D icon.
This majorly have five parts, First part: Check if the internet connection is connected and if it is not, then display all the other controls and if connected, set the initial coordinates/configuration for all the other controls. Second Part: This increases the score and displays a new obstacle every 7 seconds and moves it along the path. This sets the coordinates of all the four points below path.
Third Part: This sets the X and Y coordinates when the button is pressed to make the emoji jump.
Fourth part: This triggers the timer when emoji has crossed more than half of the screen. Fifth Part: This checks if there is any overlap between the emoji and the obstacle. If so, this will stop everything.
Step 2: This is an emoji icon that jumps on press of the Button 1.
Step 3: There are 4 points created to move along a path based on the timer control. This movement creates a visual effect for the game.
Step 4: This is an icon that displays the obstacle for the game. Expression used on the "Icon" property of this control is: Expression: Icon -> If(First(Obstacles).Value = 0, Icon.Printing3D,Icon.OfficeBuilding)
Explanation: This displays the 3D icon or the building icon based on a random number (which can either be 0 or 1). This collection refreshes every 7 seconds so a new icon is displayed based on the random number generated using the "CheckConnection" timer control.
Step 5: This is a text label to display the current score.
Step 6: This is a button control that is spread throughout the bottom of the screen and triggers the emoji to jump. Expression used on the "OnSelect" property of this control is: Expression: Set(DisableButton,true);Set(GoingUpward,true);Set(CountIteration,0) Explanation: This set the variable to move the emoji in a projectile motion.
Step 7: This is a timer control responsible for reducing the X coordinate of the emoji in case the emoji has crossed more than half of the screen. Expression used on the "OnTimerStart" property of this control is: Expression: If(DecreaseMode = "Emoji",(If(XForEmoji<=100,Set(XforEmoki,100); Set(DecreaseX,false),Set(XForEmoji,XForEmoji-50)))) Explanation: This decreases the X coordinate of emoji by 50 every 1/10th of a second.
Step 8: This is a timer control that is responsible for reducing the X coordinate for the movement of the obstacle on the path. Expression used on the "OnTimerStart" property of this control is:
Expression: If(XforIcon2 < 1,Set(XforIcon2,-50);Set(DecreaseXIcon2,false),Set(XforIcon2,XforIcon2-50))
Explanation: This reduces the X coordinate of obstacle by 50, every 1/10 of a second.
Step 9: This is a custom input property for the component that allows users to set the colors for the emoji and the obstacle.
Step 10: This is a reload icon that restarts the game by resetting the configuration of all the controls in the component. Expression used on the "OnSelect" property of this control is:
Expression: Set(Xforfirst,Component1.Width); Set(XforSecond,Component1.Width+250); Set(Xforthird,Component1.Width+550); Set(Xforfourth,Component1.Width + 850); Set(YForEmoji,Component1.Height /2 - 10 - Icon1.Height);Set(XForEmoji,100); Set(OfflineCounter,0); Set(Score,0); Set(DecreaseXIcon2,false); Set(XforIcon2,Component1.Width); ClearCollect(Obstacles,{Value:Round(Rand(),0)}); Set(Conflict,false); Set(DecreaseXIcon2,true); Set(XforIcon2,Component1.Width)
Implementation
In this section let's implement the above created component on the canvas app.
Step 1: Import the component to your canvas app and insert it from the Insert tab. You should now be able to see the component in the Screen view.
Note: The component arrangement should be on the top of the screen. (Right click and select "Reorder" -> select "Bring to Front").
Step 2: Use the expression below on the "Visible" property of the component.
Expression: !Connection.Connected
Explanation: This checks the status of the internet connection on the device and toggles the visibility of the component on the screen.
Setup in Action
In this article, we saw how to create a simple functionality game for Canvas Apps on mobile devices when there is no internet connectivity (or the user gets disconnected from the internet). This was inspired from the dinosaur game of the Google Chrome browser. This game was developed as a re-usable canvas component and can be downloaded from here.
I hope you found this interesting and it helped you!