Thursday, November 3, 2016

Whac-an-MVP - creating a PowerApp Game

PowerApps shows a lot of potential to enable power users to create line of business application for their organizations and teams. It’s cross platform, and I see a lot of good mobile use cases for form entry in the field, where data is then sent back to a central repository. The integration with Flow makes it quite powerful in terms of achieving business processes as well. I’ve dabbled a bit with iAuditor before, and I think PowerApps could solve many of the same cases.

Learning PowerApps

image

When teaching myself new technology I either need a concrete business case or something fun as the basis. Some people got a taste of that at Ignite ;-)

For PowerApps I started out with a proof-of-concept data entry app for a customer, but I cannot disclose details of it yet. In general it shows product information and allows you to visually configure product options and then send an order to a back-end system. In this instance a SharePoint list, but it could very well be some other ERP system.

The Game

image

So what about the Whac-an-MVP app then? That’s why you are reading right? It’s a game based on the old Whac-a-mole game. The app itself carries the game, while high scores and a log of who has been whacked the most is stored in SharePoint. I have added head shots of a select MVP’s (many on request) and the goal is to in 60 seconds whac as many of them as you can when they appear randomly on the screen.

Choosing data storage

There are multiple places you could store your data. I started out with Excel. Although very easy and simple to set up, it’s painstakingly slow when it comes to to read and update data. If you store the Excel file in OneDrive for Business each record you read/update will also create a new version of the document. So unless you have PowerApps plan 1 or 2 which gives you access to the Common Data Model store, going with SharePoint lists is an easy way to get started. As max 500 rows will be pulled back from a data source, using PowerApps to aggregate a lot of data is not it’s strong suite.

For my data log it could be a problem, but not the high score list as I added logic to only keep the top 20 scores.

Game screens

The game consists of 7 screens

  • Splash
  • Game
  • Game over
  • New high score
  • High score
  • Most whacked MVP stats
  • Credits

Each screen has an audio control to play a funky chip tune as background music, because games MUST have music to bring an atmosphere.

Splash

This screen holds four navigation controls, and upon loading it will also initialize an internal data store to hold the images and names of the MVP’s we’re going to whack.

image

Game

This is a bit more complex. We have a timer which is reset and starts when you enter the screen. And then we have two other times which each control show/hide of an MVP face. The reason for having two timers, is to make the game be snappier and work at a higher pace. Think of it as two parallel game loops. When a face is clicked a score variable is increased with 100 points and it triggers a sound control to play a “Whack” sound – adding to the overall game feel. When the game timer runs out, the data about who is whacked X number of times is persisted back to SharePoint. This happens asynchronously while moving over to the next screen.

There’s also plenty use of the Random() function to make faces appear random on the screen and at random intervals. Probably the simplest AI a game can implement!

image

Game over

This is an intermediate screen playing a game over sound and displaying your score. When the sound ends playing there’s evaluation to check if you made the top 20 or not. If you don’t make it you’re sent back to the home screen. If you do make it, you’re sent to the new high score entry screen.

image

New high score

This screen uses a PowerApps edit form, bound to the SharePoint high score list. Once submitted, the score is persisted in the SharePoint list, and the player is sent over to the High Score screen.

image

High score

This screen uses a gallery control to list the top 20 high scores ordered by score. Upon load the screen will also reload data from SharePoint in case multiple people are playing the game at the same time.

image

Most whacked MVP stats

Here I read the logged whack data from the SharePoint list and aggregates on MVP. This will hit a limit eventually since PowerApps pulls max 500 items from the data source. I could solve that by having a list storing only aggregates – but not a big issue.

image

Credits

Every game has a credits screen, and this one is no exception. Thanks to my fellow Puzzler’s Tarjei and Kim for helping out with the game graphics.

image

Summary

As long as you have a business case requiring some data management, PowerApps might very well be a good fit. Need help to develop a PowerApp, contact sales@puzzlepart.com.