Top Banner
back4app.com Create a Pokemon Go Game
45

Create a Pokemon Go APP

Jan 22, 2018

Download

Technology

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Create a Pokemon Go APP

back4app.comCreate a Pokemon Go Game

Page 2: Create a Pokemon Go APP

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/

Page 3: Create a Pokemon Go APP

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/0B7k7pGQXUypGTWRqS1BqVDBWQUU/view?usp=sharing for updated Parse SDK for Unity3d

Page 4: Create a Pokemon Go APP

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

Page 5: Create a Pokemon Go APP

Part 1: Setting up Back4app Parse

on your Unity3d

• The Parse Initializer GameObject will miss some scripts.

• Add ParseInitializeBehaviour to it.

Page 6: Create a Pokemon Go APP

Part 1: Setting up Back4app Parse

on your Unity3d

• Type your Application ID, dotNet Key, serverUrl to a parameter from your Back4app dashboard.

Page 7: Create a Pokemon Go APP

Part 1: Setting up Back4app Parse

on your Unity3d

• Create a GameObject and add script component to the Scene for testing.

Page 8: Create a Pokemon Go APP

Part 1: Setting up Back4app Parse

on your Unity3d

• Add following code to TestParse.cs

Page 9: Create a Pokemon Go APP

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 () {• }• }

Page 10: Create a Pokemon Go APP

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.

Page 11: Create a Pokemon Go APP

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.

Page 12: Create a Pokemon Go APP

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.

Page 13: Create a Pokemon Go APP

Part 2: Integrate Google Map

to your Unity3d Project

• Second, Create a script “GoogleMap” and add to Map Game object.

Page 14: Create a Pokemon Go APP

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/

Page 15: Create a Pokemon Go APP

Part 2: Integrate Google Map

to your Unity3d Project

• Untick the AutoLocateCenter.

Page 16: Create a Pokemon Go APP

Part 2: Integrate Google Map

to your Unity3d Project

• Type some dummy parameter to try the Google Map.

Page 17: Create a Pokemon Go APP

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.

Page 18: Create a Pokemon Go APP

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/

Page 19: Create a Pokemon Go APP

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.

Page 20: Create a Pokemon Go APP

Part 3: Integrate Character and Interacting

with GPS Data

Page 21: Create a Pokemon Go APP

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.

Page 22: Create a Pokemon Go APP

Part 3: Integrate Character and Interacting

with GPS Data

• Make sure your character is located correctly by checking Latitude and Longitude on Google Map.

Page 23: Create a Pokemon Go APP

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

Page 24: Create a Pokemon Go APP

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.

Page 25: Create a Pokemon Go APP

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.

Page 26: Create a Pokemon Go APP

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.

Page 27: Create a Pokemon Go APP

Part 4: Generating Monsters on Map (Part A)

• After that, we create a cube and place on top of the label.

• Record this position.

Page 28: Create a Pokemon Go APP

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.

Page 29: Create a Pokemon Go APP

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.

Page 30: Create a Pokemon Go APP

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/)

Page 31: Create a Pokemon Go APP

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.

Page 32: Create a Pokemon Go APP

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.

Page 33: Create a Pokemon Go APP

Part 5: Generating Monsters on Map (Part B)

• Add a column: Location with data type Geopoint.

Page 34: Create a Pokemon Go APP

Part 5: Generating Monsters on Map (Part B)

• Insert some monster dummy row that around you.

Page 35: Create a Pokemon Go APP

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.

Page 36: Create a Pokemon Go APP

Part 5: Generating Monsters on Map (Part B)

Page 37: Create a Pokemon Go APP

Part 5: Generating Monsters on Map (Part B)

• It is time to fetch the dummy monster data from back4app to your program.

Page 38: Create a Pokemon Go APP

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/

Page 39: Create a Pokemon Go APP

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.

Page 40: Create a Pokemon Go APP

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.

Page 41: Create a Pokemon Go APP

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

Page 42: Create a Pokemon Go APP

Part 6: How to move the Player (solve google

map texture slow problem!)

Page 43: Create a Pokemon Go APP

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/

Page 44: Create a Pokemon Go APP

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.

Page 45: Create a Pokemon Go APP

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.