How to build a Pokemon Go App

1. back4app.com
How to build a Pokemon Go App

2. How to Build a Pokemon Go App
• Back4app provides Parse server service to take care of your backend and APIs
development.
• Parse also provides basic application activity APIs like Login-in, push
notification, payment…etc.
• For this demonstration, we can use Parse Geo Point Service and back4app as
our backend to build a simple Pokémon-Go.
• You can read the original publication on:
http://docs.back4app.com/docs/new-parse-app/how-to-build-a-pokemon-go-
app/

3. Part 1: Setting up Back4app Parse
on your Unity3d
• Go to https://parse.com/docs/downloads
• Download Unity Blank Project (v1.7.0)
• Download https://drive.google.com/file/d/0B7k7pGQXUypGTWRqS1BqVDB
WQUU/view?usp=sharing for updated Parse SDK for Unity3d

4. Part 1: Setting up Back4app Parse
on your Unity3d
• Open Unity3d Parse Blank Project -> Click Upgrade if required.
• Replace Asset/Parse/Parse.Unity.dll to the latest one.
• Go to Asset/Scene

5. Part 1: Setting up Back4app Parse
on your Unity3d
• The Parse Initializer GameObject will miss some scripts.
• Add ParseInitializeBehaviour to it.

6. Part 1: Setting up Back4app Parse
on your Unity3d
• Type your Application ID, dotNet Key, serverUrl to a parameter from your
Back4app dashboard.

7. Part 1: Setting up Back4app Parse
on your Unity3d
• Create a GameObject and add script component to the Scene for testing.

8. Part 1: Setting up Back4app Parse
on your Unity3d
• Add following code to TestParse.cs

9. Part 1: Setting up Back4app Parse
on your Unity3d
• using UnityEngine;
• using System.Collections;
• using Parse;
• using System.Threading.Tasks;
• public class TestParse : MonoBehavio
ur {
• // Use this for initialization
• void Start () {
• ParseObject testObj = new ParseObje
ct("TestObject");
• testObj["a"] = "HI";
• testObj["b"] = "Back4app";
• Task saveTask = testObj.SaveAsync();
• }
• // Update is called once per frame
• void Update () {
• }
• }

10. Part 1: Setting up Back4app Parse
on your Unity3d
• Press Play Button on your Unity3d Editor
• Go to Back4app database dashboard to check the success or not.

11. Part 1: Setting up Back4app Parse
on your Unity3d
• It is connected with your back4app account successfully if you find your
uploaded data in the database.

12. Part 2: Integrate Google Map
to your Unity3d Project
• To generate the terrain like Pokémon-Go, we need to integrate Google map
your Unity3d Project.
• First, create Plane and Name it as “Map”, create directional light.

13. Part 2: Integrate Google Map
to your Unity3d Project
• Second, Create a script “GoogleMap” and add to Map Game object.

14. Part 2: Integrate Google Map
to your Unity3d Project
• Second, Create a script “GoogleMap” and add to Map Game object.
• You can see the original script on:
http://docs.back4app.com/docs/new-
parse-app/how-to-build-a-pokemon-
go-app/

15. Part 2: Integrate Google Map
to your Unity3d Project
• Untick the AutoLocateCenter.

16. Part 2: Integrate Google Map
to your Unity3d Project
• Type some dummy parameter to try the Google Map.

17. Part 2: Integrate Google Map
to your Unity3d Project
• If the plane shows the correct location as your parameter, the Google map is
successfully integrated.
• You can use Refresh method to refresh the Google map to change location.

18. Part 3: Integrate Character and Interacting
with GPS Data
• Create LocationManager Gameobject and add the following code.
• This code is getting the GPS Data and updating the Google Map when GPS
data is changed.
• You can see the full code on:
http://docs.back4app.com/docs/new-
parse-app/how-to-build-a-pokemon-
go-app/

19. Part 3: Integrate Character and Interacting
with GPS Data
• Let test the Google map again.
• It is successful if the Google map change when you change the GPS Data
in Runtime.

20. Part 3: Integrate Character and Interacting
with GPS Data

21. Part 3: Integrate Character and Interacting
with GPS Data
• After that, create a Capsule as a character and a Cube as Direction of the
character on top of the Google Map.
• (For me, I place the character at X:0 Y:0.07 Z:0)
• Add a compass to your character when you test with your mobile device.

22. Part 3: Integrate Character and Interacting
with GPS Data
• Make sure your character is located correctly by checking Latitude and
Longitude on Google Map.

23. Part 4: Generating Monsters on Map (Part A)
• For Generating Monsters, we need to do some calculation on placing the
monster with their longitude and latitude location.
• Because the ratio between Google map, reality and Unity3d XYZ-world is
different.
• To figure out how to calculate the relationship between them, we need
dummy data.
• For more detail : how to calculate.
http://www.movable-type.co.uk/scripts/latlong.html

24. Part 4: Generating Monsters on Map (Part A)
• First of all, we need to set initial latitude and longitude on Google Map first
(You can choose where you want) and set the Markers on the Google Map.

25. Part 4: Generating Monsters on Map (Part A)
• Press Run, You will find the label on your Google map.
• PS: The reason why we cannot use the marker to be a monster because it is
combined with the texture.
• The marker itself is a part of the texture but not a Gmeobject so we cannot
do any implementation on that.

26. Part 4: Generating Monsters on Map (Part A)
• Beside that, we will make some dummy GPS data of monster on Parse server,
later on, so we need to know the corresponding ratio on the monster game
object position.

27. Part 4: Generating Monsters on Map (Part A)
• After that, we create a cube and place on top of the label.
• Record this position.

28. Part 4: Generating Monsters on Map (Part A)
• Now, we need to find the exact distance between the player GPS location and
the marker GPS location.
• The distance between start (37.38373, -122.0133) and marker (37.384782,-
122.012893) can be calculated by this script.

29. Part 4: Generating Monsters on Map (Part A)
• And then calculate the XYZ world distance between the CUBE maker and the
Player Capsule. (-0.563,0.07,-1.915) and (0,0.07,0).
• This is a simple calculation, so I don’t list how to do it.
• After that, the ratio will be found by this equation
• Ratio = XYZ world distance / Exact Distance.

30. Part 4: Generating Monsters on Map (Part A)
• Once we have this ratio, we able to calculate how far the monster should be
placed according to the Player location.
• However, the possible location still undefined because we don’t have the
bearing between the player and monster.
• To calculate the bearing.
• We can use this code. (You can see the full code on:
http://docs.back4app.com/docs/new-parse-app/how-to-build-a-pokemon-
go-app/)

31. Part 4: Generating Monsters on Map (Part A)
• After we get the ratio and bearing, it is possible to convert Longitude Latitude
location to be XYZ-world coordination, which means we can place any
monsters with latitude longitude location to correct game world location.
• With the above code, we know the correct XYZ coordination to spawn
monster.

32. Part 5: Generating Monsters on Map (Part B)
• While we are able to convert Longitude and Latitude data to the game world,
it is time now to create some dummy monster data on Back4app parse
server.
• Go to your Parse back4app dashboard and create a class call Monster.

33. Part 5: Generating Monsters on Map (Part B)
• Add a column: Location with data type Geopoint.

34. Part 5: Generating Monsters on Map (Part B)
• Insert some monster dummy row that around you.

35. Part 5: Generating Monsters on Map (Part B)
• The dummy monsters are set, they are waiting for you to call.
• Then I create a MonsterSpawn GameObject with script Spawn.
• Drop the LocationManager GameObject to it (For getting updated GPS Data)
• M prefab monster for spawning a monster.

36. Part 5: Generating Monsters on Map (Part B)

37. Part 5: Generating Monsters on Map (Part B)
• It is time to fetch the dummy monster data from back4app to your program.

38. Part 5: Generating Monsters on Map (Part B)
• The above code gets the result one by one and converting the GeoPoint data
to be XYZ-world coordination, and then push the result to the List.
• After adding the result is fetched, spawn becomes true to allow program
spawns the monster.
• You can see the full code on:
http://docs.back4app.com/docs/new-
parse-app/how-to-build-a-pokemon-go-
app/

39. Part 5: Generating Monsters on Map (Part B)
• After the Monsters are spawned, the monsters will keep updating when the
player GPS data has updated.
• Testing. The monster is spawn at correct XYZ coordination with their Latitude
Longitude data.

40. Part 6: How to move the Player (solve google
map texture slow problem!)
• Until Part 5, the movement of the player is relied on the Google Map texture
updating. However, it is not effective to play it.
• The user experience is not good.
• To solve this problem, we “unlock” the player.
• Make player move on the map.

41. Part 6: How to move the Player (solve google
map texture slow problem!)
• The algorithm behind is similar to updating the monster.
• We apply on the capsule. compare the last GPS data and new GPS data to
calculate how should the player move in the Game world.
• As we are updating the position of the player, therefore we don’t need
monster update and google map refresh function anymore.
• What you need to do : Modify LocationMaganger.cs

42. Part 6: How to move the Player (solve google
map texture slow problem!)

43. Part 6: How to move the Player (solve google
map texture slow problem!)
• You can see the full code on:
http://docs.back4app.com/docs/new-
parse-app/how-to-build-a-pokemon-
go-app/

44. Part 6: How to move the Player (solve google
map texture slow problem!)
• Second, attach following code to you camera make your cam follow you
character ( Don’t forget to drag your capsule to inspector.

45. Part 6: How to move the Player (solve google
map texture slow problem!)
• To view source code and whole project -> Raw Unity
Project
• Issues, comments or suggestions? Let’s discuss in
our Developers Group Topic.