cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Community Champion
Community Champion

Pokemon Go game mechanics replicated

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.

Microsoft Employee
@8bitclassroom
5 REPLIES 5
Highlighted
Advocate IV
Advocate IV

Great job with this!

Confluent
Highlighted
Power Automate
Power Automate

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

 

Love it!

Audrie

Highlighted

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

Microsoft Employee
@8bitclassroom
Highlighted

@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

Highlighted

 Very much looking forward to seeing more of this

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (10,711)