Pokemon Go game mechanics replicated

[mr-dang]

This is probably the last place you thought you would see mention of Pokemon Go--or maybe you would have hoped to not hear about it anymore 🙂

Let it be a testament to the "power" in PowerApps that it is possible to build a game like PokemonGo in PowerApps. The easy access to Acceleration, Compass, and Location functions make it possible. Here is a quick demonstration that uses Compass.Heading and Acceleration.Z to overlay an animated GIF on top of a camera control. It's pseudo-AR:

https://youtu.be/NAjE5peQlew (note: music plays about 5s in)

Steps:

1. Create two screens. Create Button1 on Screen1 and set its OnSelect property to:
   

   Navigate(Screen2,Fade,{dirstart: Compass.Heading})

   Button1 navigates to Screen2 and sets a starting direction for a desired object to appear.
   
   
2. In Screen2, create TextBox1 and set its Text property to:
   

   If(Compass.Heading>180,Compass.Heading-360,Compass.Heading)

   Normally, Compass counts from 0 to 360. This formula makes it so that it counts from 0 to +180 in the positive X direction, and from 0 to -180 in the negative X direction. This calculation is now a relative measurement. I imagine you could do without this, but it is easier to understand subsequent formulas with this change.
   
   
3. Create Camera1. This next part is tricky depending on the ratio of your camera. I set my Camera's width to 2048 to fill the screen, but it may or may not work for you. I do not know how to make this dynamically change yet. It would be great if there were a "Fill" or a "Fit" property like there is for image boxes.
   
   I made the Camera spill over the canvas to show the middle. Set its X property to the midpoint of the screen:
   

   (Parent.Width-Camera1.Width)/2

4. Create Image1. Set its X property to:
   

   (Parent.Width-Image1.Width)/2
   -Camera1.Width
   *If(TextBox1.Text-dirstart<=-180,360+TextBox1.Text-dirstart,TextBox1.Text-dirstart)
   /90

   Here's a breakdown of what's going on in this forumula:
   
   

   (Parent.Width-Image1.Width)/2
   
   This places the image in the midpoint of the screen, regardless of size.

   -Camera1.Width
   
   The Camera width will be subtracted for every 90 degrees. That explains why it is multiplied.

   *If(TextBox1.Text-dirstart<=-180,360+TextBox1.Text-dirstart,TextBox1.Text-dirstart)/90
   
   This part of the formula figures out how to keep the object in place by comparing your 
   current compass bearing to the starting direction (dirstart). Like TextBox1, this condition
   makes the Compass reading relative to zero, which is the starting location of Image1.
   
   The number 90 refers to the degrees of how often to subtract Camera1's width.

5. Set the Y property of Image1 to:
   

   (Parent.Height-Image1.Height)/2
   -Camera1.Height
   *Acceleration.Z
   /5

   This is very similar to what is done for X. The Acceleration amount did not need to be recalculated like Compass since the scale seems to be 0-10. It seems easy enough to use. For every 5 points of Acceleration in the Z direction (tilt), Camera1's height will be subtracted.

Is anyone else on this forum building games with PowerApps? I'd love to see what other work-arounds are being used to create game elements.

[EvanChaki]

Great job with this!

[Audrie-MSFT]

We have a new apps gallery coming out this week. Would love this app there if you still have it.

Love it!

Audrie

[mr-dang]

Hi @Audrie-MSFT

I'm prepping a sample app with parallax and the mechanics in this one. I do not have a barebones app with just these steps--but if you need one right away I can make that. Let me know what your timeline is.

Brian

[Audrie-MSFT]

@mr-dangYour timeline is my timeline! Whenever you have a chance, I'd love to include it in our upcoming App Gallery with your lessons learned and tips.

Thank you so very much!

Audrie

[MrB]

 Very much looking forward to seeing more of this