Power Apps Game tutorial — part 1/2

This is a first part of the tutorial how to build a game on Power Apps platform. The second part is available here: https://medium.com/@andrew.grischenko/power-apps-game-tutorial-part-2-2-15233ad4bc4e

I love making games.

I started programming back then because I wanted to create a game. Since then I’ve made a few — either myself or with the teams.

Here today I want to show you how you may have some fun too with a “boring” business applications platform. Creating games is NOT the purpose of this platform, but this exercise will help you understand some of its capabilities and show off at the end to your friends or family.

If you haven’t even heard what Power Apps are, you can find heaps of info here, but my short blurb to help you get the head around it.

Power Platform is Microsoft’s technology which provides low code solutions in creating business applications (Power Apps), process automation aka “robotics” (Rower Automate, previously known ad Flow), metadata-driven database (Common Data Services, CDS), analytics and reporting (Power BI) and a bot assistant (Power Assistant). It’s purpose to enable business create useful application quickly, without lots of time and money investment and low to none programming involved.

While Power Apps themselves can be of the different types — canvas apps, model-driven apps and portals — we’ll explore today just one of them, the Canvas apps.

Before we start, have a look at this one minute video — this is what you’ll build.

The art of the game produced by Nastya Volchenko (Настя Волченко).

Ready to go? Great, let’s do it!

Prepare

If you don’t get Office 365 now, just follow these instructions on how to sign up for 30 days free trial of Power Apps: https://docs.microsoft.com/en-us/powerapps/maker/signup-for-powerapps

Now download the content files from here:

• background.png
• background-blurred.png
• elf_open.png
• elf_box.png
• Kling Glîckchen.mp3

Add first images and the counter

From the left-side menu click on Create then pick up Canvas app from blank. Name your game in the App name to “Little Helper” (or any other name you want it to be) and select Tablet screen orientation (which is a landscape orientation), then click Create.

Before we proceed further, just a few areas to get familiar with what you see on the screen now:

1. Main menu to add new components on the page.
2. Formula bar with the property selector (2a) and actual formula value entry (2b) — we’ll use it mostly to enter properties values.
3. Left side object selector panel — here it’s useful to see and select components.
4. Main area of app canvas — this is where you put and arrange the game components.
5. Right side properties panel — we’ll use it to add images and media and some properties.
6. Health checker — pay attention when it displays some errors.
7. Play button to run the app in preview mode.

Let’s set the background for the main screen. Select Screen1 and notice the panel with properties on the right. Change the name from Screen1 into GameScreen, then add the new image by clicking “+ Add an image file” in the Background image property on the right panel and choose file for the background background.png.

Insert the first image of an elf. In the top menu panel select Insert, then Media and then Image. It will place an empty image placeholder, so we will find the property Image dropdown on the right panel, select “Add an image file” and both choose “elf_open.png” and “elf_box.png” to add. Select the default image to be for now elf_open. Move the image to align with a chimney in the first row and stretch, something like below. Rename it into Elf_1_1.

Add the action on clicking or tapping on the elf. Here we will start using top formula bar to set the properties instead of the right panel. In the leftmost drop-down find the OnSelect property and enter the formula Set(Score, Score + 50). What it does — it gets the current value of the variable Score, adds 50 to it and stores it back to the Score variable.

Copy the elf image to make the second elf: select the first elf image element and press Ctrl+C, then press Ctrl+V and place the elf over another chimney in the first row. Rename it into Elf_1_2.

Now let’s add the score counter. In the Insert menu select Text and then Label. Position the text label in the centre of the screen, set the Font size to 48, set Colour to Amber (or any you like). Set the Text property as Score Please make sure you don't use the quotes, it's not a string, but a variable name.

This is the example of how development in Power Apps is different from conventional programming. Instead of setting a value of a text property something like “Label.Text = Score” or “Label.Text(Score)”, we use the name of the variable Score to be referred in the Text property. Pretty much as in Excel.

Let’s test what we’ve done so far. Click the Play icon in the top right to preview the app. Click on either elf to see the counter increasing by 50 every time. Well done so far!

Exit the preview mode and save the app: in the top menu File select Save and make sure it’s selected “The cloud” as the destination.

Make the elves appear and disappear

For each row of the chimneys and elves, we will have a separate timer which determines the frequency of elves appearance and how long they stay visible.

So, let’s add the first timer: in the Insert menu select Input and then Timer (you may not see this option in menu straight away, so you need to scroll down — bad UI design, Microsoft!). Rename it into Row1Timer and set the properties:

• Duration: 2000 (this is milliseconds, so equal 2 seconds cycle)
• Repeat: On
• Auto start: On
• Visible: Off

In the OnTimerStart property set the formula: Set(Row_1_State,Round(Rand()*4, 0)) This formula will evaluate every 2 seconds generates a random number in the range from 0 to 4 and stores it in the variable Row_1_State.

Now let’s make the elves appear and disappear based on a timer. Select one elf (e.g. Elf_1_1) and set the property Visible to Row_1_State = 1 This will evaluate to true when the random number generated by the timer equals value 1 which will happen in 1 out of 5 times.

Similarly, set the Visible property for another elf (Elf_1_2) to Row_1_State = 2 This will make this elf to appear at another time when the random number is equal to 2.

Try the game by clicking the Play button.

While it all looks good, one thing you should notice is that a player can click multiple times on the elf and get the score multiple times, which is not fair! We want the elf to disappear once the player clocked it, so let’s do it.

Select both elves by clicking in the left panel on Elf_1_1, holding Shift button on the keyboard and clicking Elf_1_2 in that list. (Multiple selections may be handy later, so it’s time to learn it.) Set the OnSelect property to Set(Score, Score + 50); Set(Row_1_State, Row_1_State * -1); This will apply to both elves and as you can see it will invert the value for Row_1_State which controls the visibility of the elves and they’ll disappear (review the Visible property if not sure why!). We will use this trick to also display another state of elves in Part 2.

Click Play to preview the app. See elves appearing and disappearing. Click on them to see the counter growing. You may notice that the Score counter (and the variable behind it) doesn't reset — this is the behaviour of the preview mode. It will not happen when played a published app on a device and we will take care of it more in the Part II.

Exit the play mode, save the app by pressing Ctrl+S.

Make the game more challenging

You may feel that the game is too simple and basic yet — you can catch any elf appearing and it’s just 2 of them. Let’s make it more interesting in adding more elves with other frequency of visibility.

Add the second row of elves

Add another timer for row #2 of chimneys and elves: in the Insert menu select Input then Timer (scroll down!). Rename it into Row2Timer and set the properties:

• Duration: 1000 (notice that the timer will fire every 1 sec)
• Repeat: On
• Auto start: On
• Visible: Off

Set OnTimerStart to the formula Set(Row_2_State, Round(Rand()*10,0)); Here you can see the range of random values will be from 0 to 10.

Make a third copy of an elf — select Elf_1_1, press Ctrl+C and then Ctrl+V and place the elf over another chimney in the second row. Reduce it’s size slightly so it looks in perspective and it’s more challenging to catch it!

Rename it to Elf_2_1 (row 2, elf #1) and set:

• Visible: Row_2_State = 1
• OnSelect: Set(Score, Score + 100); Set(Row_2_State, Row_2_State * -1);

Notice that the score given for the catch is higher as we expect it will be a bit more challenging than the elves in the first row.

Make another 2 copies of that elf and locate them across other two chimneys in the second row. Rename them to Elf_2_2 and Elf_2_3 respectively and set Visible property to Row_2_State = 2 for the second elf and Row_2_state = 3 for the third elf.

Click Play to preview the app and check that all elves appear and disappear and the counter works correctly. Save the app by pressing Ctrl+S.

Add the third row of elves

Let’s step up the game by adding another level of elves. Add a new timer as you did before, Insert then Input then Timer. Rename it into Row3Timer and set the properties:

• Duration: 800 (yes, 0.8 second!)
• Repeat: On
• Auto start: On
• Visible: Off.

Set OnTimerStart as Set(Row_3_State, Round(Rand()*10,0)) (notice the new variable Row_3_State used there).

Make a third copy of an elf from any other by pressing Ctrl+C and Ctrl+V and place the elf over another chimney in the third row. Reduce its size slightly. Rename it in Elf_3_1 and set the properties of the new elf:

• Visible: Row_3_State = 1
• OnSelect: Set(Score, Score + 200); Set(Row_3_State, Row_3_State * -1);

Please notice that here we give even more score points and using the new variable Row_3_State to control the visibility.

Let’s do more copy-paste and make another three copies of that elf. Rename them into Elf_3_2, Elf_3_3 and Elf_3_4. Set the Visibility property to Row_3_State = 2 for Elf_3_2, Row_3_State = 3 for Elf_3_3 and Row_3_State = 4 for Elf_3_4.

Click Play to preview the app and check that all elves appear and disappear and the counter works correctly. Save the app by pressing Ctrl+S.

Let’s add some music and publish the game!

We’re almost done for this part, but we’re missing just a bit of Christmas spirit. So let’s add some nice music.

Add Audio component from the Insert menu select Media and then Audio.

In the right properties panel in the Media click “+ Add media file” and use the file Kling Glîckchen.mp3
Set the properties of the new component:

• Loop: On
• Auto start: On
• Visible: Off

Now you are almost ready to show the creation to your friends or family. When saved the game (Ctrl+S), click the Publish button. Now install the Power Apps app from Microsoft on your mobile device — phone or tablet, Apple or Android based. Launch the installed app and login with your credentials you created or used in the beginning of this tutorial and you should see your game appear on the list. Tap on it and happy playing!

Should something doesn’t work as expected or you are lost, double check that the properties are set as summarised in the table below for the timers:

…and elves:

This is it for this part. The game process is playable and you can show off to your friends or family. At the same time, a few things can be added to make the game even more engaging — and this is the limited play session time and high scores. Let’s do this in Part II — already released.