How to create multiplayer card game similar to Clash Royale

Here I will show you the 3 basic move of Blender, which is how to rotate, zoom and move object

1. Download Blender3d from www.blender.org

2. Delete camera and light 

3. Select 4 line on the cube then subdivide them

4. Select half of the cube and delete it

5. Press A to select all then add modifier -> mirror -> y axis

Note: mirror is important so you only need to do the arm, leg one times instead of two time

6. drag the cube around so it look like a body

7. Click the knife and draw the head on the top of the giant body then extrude the head out(press E to extrude)

8. Click the knife and draw the arm on side of the giant body then extrude the arm out

9. Click the knife and draw the leg on bottom of the giant body then extrude the leg out

1. On object mode, press apply the mirror modifier

2. On object mode, Add -> Amature -> single bone, then drag it to the center of the giant

3. In armature tab , press x-ray to show the bone

4. In edit mode, press E to extrude the head bone, on left hand side , tick Armature option -> X-Axis Mirror , then Shift - E to extrude both left and right arm bone for your giant

5. Select both the arm bone then press Alt -P to separate from the main bone 

6. Select bottom tip of the main bone, Shift -E for both leg bone, Alt-P to disconnect the main bone, R to rotate, G to grab and move it to correct position, S to scale

7. Select tip of the leg bone, E to extrude lower leg bone, E to extrude toe bone

8. Add inverse kinematic for both lower leg and both lower arm

9. Select both armature and cube, press CTRL-P to combine them 

1. Go to animation tab, frame set to 1 to 20

2. Choose Action editor on the bottom bar, then click new action "walk" press F to save

3. On the dope sheet, go to frame 1, then on the pose mode, make your giant post for first frame then insert keyframe

4. Go to frame 20, then insert keyframe again

5. Go to frame 10, then modify the giant post then insert keyframe

6. Click play button to see your animation

7. Click new action "punch" then repeat step 3 to step 6 for new action "punch"

1. Create new project, delete camera and delete light

2. In edit mode, show transparent, select 4 line on the cube, subdivide, select 4 point then press x to delete, then select everything add mirror

3. Make the body of the shooter slim and tall

4. Take a knife and cut the head out from the cube and press E to extrude

5.  Use a knife to cut a hat for the shooter as well

6. Use a knife to cut the arm and leg out and press E to extrude

7. Make a weapon out of the shooter hand by pressing E to extrude

8. Color the hat with purple and color the gun with black

1. Under object -> Add -> Armature -> single bone

2. On armature tab, on the X-ray so you can see your bone

3. In edit mode, press E to extrude the head bone, on left hand side , tick Armature option -> X-Axis Mirror , then Shift - E to extrude both left and right arm bone for your giant

4. Select both the arm bone then press Alt -P to separate from the main bone 

5. Select bottom tip of the main bone, Shift -E for both leg bone, Alt-P to disconnect the main bone, R to rotate, G to grab and move it to correct position, S to scale

6. Select tip of the leg bone, E to extrude lower leg bone, E to extrude toe bone

7. Add inverse kinematic for both lower leg and both lower arm

8. Select both armature and cube, press CTRL-P to combine them 

1. Go to animation tab, frame set to 1 to 20

2. Choose Action editor on the bottom bar, then click new action "walk" press F to save

3. On the dope sheet, go to frame 1, then on the pose mode, make your shooter post for first frame then insert keyframe

4. Go to frame 20, then insert keyframe again

5. Go to frame 10, then modify the shooter post then insert keyframe

6. Click play button to see your animation

7. Click new action "shoot" then repeat step 3 to step 6 for new action "shoot"

1. Remove the camera and lamp

2. In edit mode, on transparent, choose the 4 line, subdivide, then delete half of the cube, select all, apply modifier mirror -> y axis

3. Adjust the body of the skeleton, then use a knife to cut an arm, press E to extrude

4. On the bottom side of the body, use the knife to cut a leg and press E to extrude

5. In object mode, apply mirror, then add a uv sphere as the head of the skeleton, the uv sphere with segment = 8, ring = 8 for low poly skeleton head

6. move the head to the skeleton body and use a knife to cut a sword from the arm and E to extrude

1. Open Unity3D

2. Create a new project

3. Download 2 zip file and extract them into your project folder

- 6 script file into your script folder

- fox_pivot3.fbx into your animal folder

4. Create a plane and make it green

5. Create obstacle and make them red

6. Add new layer "unwalkable" and assign them to the obstacle

1. Create empty object name it A*

2. Attach 3 script into the A* object (Grid.cs, Pathfinding.cs, PathRequestManager.cs)

3. Tick the Display Grid Gizmo on Grid(script), set the world size x = 30, y = 30, radius = 0.5

4. Set unwalkable mask to your new layer "unwalkable"

Note:

If you want higher resolution for your grid, you can set the radius smaller

Example, if you set radius = 1, it will be total 15 box on X and 15 box on y

if you set radius = 0.5, it will be total 30 box on X and 30 box on y

1. Create a new cube position set at 0,0,0, scale it to 3,3,3

2. Drag the fox under the cube, adjust the fox position so that it is in the middle of the cube

3. Untick the cube mesh renderer so the cube become transparent

4. Create a new animator controller name it fox controller

5. Double click open the fox controller, drag the "Armature|run" from the fox into the fox controller

6. Drag your fox controller into your fox(on the scene) -> animator -> controller

7. Click run and make sure your fox run on the screen

8. Create a new Capsule call target

9. Drag unit.cs script into your fox on the scene

10. Drag target into fox on the scene -> unit.cs(script) -> target

11. Run the game and the fox will find a path to the target, to see the path make sure you click "scene tab"

1. Scale the fox under the cube to 0.5,0.5,0.5

2. Scale the fox cube to 1,1,1

3. You can always off the Display grid gizmo so that it will not show the grid

1. Grid let you specify the world size and set how big is each node and how many node inside the world, in my tutorial I specify my grid size to be 30 x 30 where each node diameter is 1(radius is 0.5)

2. Each node have 9 variable

3. gcost is how far the current node from the target

4. hcost is how far the current node from the starting point

5. fcost is gcost + hcost

6. parent is from which node you come from

1. Node diameter = Node radius * 2

2. On the function CreateGrid(), it will loop every box on the grid and instantiate a new node

3. You calculate the worldbottomleft base on your A* location 

4. Then you calculate the node world position base on the worldbottomleft

5. When doing the calculation, computer will always do the multiply and division first, before doing the adding and subtract

1. On GetNeighbours() function, it will loop 9 times to scan for all 8 neighbour node and if they are inside the Gridsize it will include them into neighbours list

PURPOSE OF HEAP:

FIND THE SMALLEST/BIGGEST VALUE FASTER

EXAMPLE:

Let say you have 1000 node, 

if 1 node take 1 milliseconds, 

normal for loop:

you need 1000 milliseconds to get the smallest value because you need to loop 1000 times

heap:

you only need 1 millisecond to get the smallest/biggest value

why?

Because you already sorted them when you add new node into the tree structure of heap

PURPOSE OF IComparable<T>

SO YOU CAN COMPARE 2 OBJECT USING FUNCTION CompareTo

Everytime you add a new item into Heap, it will add it into the bottom of the heap tree, so you need to use the "Sort up" function to sort it up, comparing it with its parent, if it is smaller than its parent, it will swap the position with its parent

Heap Sort Down Function

When you remove the first item from Heap, you will need to find the next smallest number to be the first item for the heap, you do this by using the "sort down" function

Sort down function will compare the left child vs right child, and choose the smallest one to be the first item, if for example after it choose the left child to be the first item, it need to go to its left child and sort down again until it reach the bottom of the tree

How do other script use the Heap ?

Heap<Node> openset = new Heap<Node> (grid.Maxsize);    //instantiate a new heap

openset.add(Node1);    //add a node into the heap

openset.RemoveFirst();   //get the first item from the heap, which is the smallest number among all

1. You need to attach unit.cs script to the fox or any character that want to find path and follow path

2. You can set the target by dragging the target into the target column 

3. You can also set the running speed and rotation speed for your fox or character

4. Vector3 [] path will store all the waypoint for the fox to follow, the fox will follow from waypoint1 until the target

5. On the update function, the fox will check if the target change its location every seconds and update its waypoint accordingly

1. The purpose of using StartCoroutine is so that all 3 fox will not reach the target in one seconds but you move fox1 for one step, then you move fox2 for one step then you move fox3 for one step

2. IEnumerator and yield return null is used together with StartCoroutine, you need them both for it to work

3. If you remove the yield return null you will see that all fox reach the target in 1 seconds

4. OnDrawGizmo function will draw the waypoint on the map for you to see

Purpose of using Path Request Manager

You want to queue the path request

Purpose of using Queue

You want the list to be first in first out

Purpose of using struct

It helps you to make a single variable hold related data of various data types.

STRUCT VS CLASS

Use STRUCT if instances of the type are small, its cheaper than CLASS on memory usage

1. On PathRequest() function, you enqueue a new path request into the path request manager queue

2. On TryProcessNext() function, you provide path start and path end to the pathfinding class, you get the waypoint back

3. FinishProcessingPath() function will be called by pathfinding class once the waypoint have been found, then it will call the TryProcessNext() function

Purpose of PathFinding

Give input parameter (startpath, endpath), return output Vector3 [] Path

Purpose of Heap

Return the lowest fcost in 1 miliseconds

Purpose of Hashset

An unordered collection for you to quickly check if item is inside the set

QUEUE VS LIST VS HASHSET VS HEAP

QUEUE = FIRST IN FIRST OUT

LIST = CAN BE ACCESSED BY INDEX, SLOW

HASHSET = CAN CHECK IF ITEM INSIDE THE SET, FAST

HEAP = INSERT COST INTO TREE STRUCTURE, GET LOWEST COST IMMEDIATELY

1. Add start node into the open set

2. Get the smallest fcost node from the open set and assign as current node, remove currentnode from open set and add into close set

3. Check if current node reach target, if not, get all neighbour of current node

4. For each neighbour, calculate the gcost, hcost and fcost

5. Add all neighbour to the openset

6. repeat from step 2 until target reach

Note:

gcost = cost from start, hcost = cost to target

Horizontal distance = 10, Diagonal distance = 14

1. Here I will simulate how the program find the nearest path by writing down the gcost, hcost and fcost for each node the program examine

2. Node that have been examined will be put into closed set

3. Neighbour of current node that have not been examined and not in closed set will be put into open set

Here I show you how the program navigating from node to node, setting the parent node = the node it came from

Here I continue simulating how the program work

Finally when the current node = target node, it will jump out from the while loop and call the RetracePath() function

RetracePath() function will retrace the path from the target all the way back to the starting point and store the waypoint inside the List<Node>path then return it all the way to the Unit.cs

SimplifyPath() function will remove the waypoint if the waypoint is in the same direction in order to reduce the number of waypoint

1. Create New Unity Project

2. Layout change to "tall" and drag the gamescreen to the middle

3. Create a new plane, scale x=10,y=1,z=18

4. Camera set position x=0,y=50,z=-46, set rotation x=45,y=0,z=0

5. Camera set projection = Orthographics, size = 90

6. Create 2 new cube as the land for each side of the plane

7. Create 2 bridge to connect the 2 land

8. Drag the 2 land, 2 bridge into empty object background

1. Create a Canvas, Render mode set to "Screenspace Camera", then drag the camera into the render camera

2. Create Image under the canvas, scale x=1,y=0.675,z=1, drag it to the bottom of the canvas

3. Download Image1.zip and drag it into your Asset->Image folder, unzip it

4. Change both image texture type to "sprite"

5. Change the image under canvas to the new image you downloaded

6. Add text under the image so you can name the card

7. Duplicate the card so you have 4 card in the game

1. Create a new script, drag.cs

2. Type in the code according to the video

3. Attach the drag.cs script to your image in the canvas

4. Drag the camera, and 2 sprite image into the script that you attached

5. Make sure all 4 card also have attached the script

6. Play the game and make sure you can drag the card around the game

1. Export your creation from Blender into .fbx and put them inside your unity project asset->object folder

2. If you lazy to create yourself you can download the one I made "3character.zip" and unzip it into your folder

3. Create a cylinder inside the game, scale it to x=10,y=10,z=10

4. Drag your giant into the game then put it under the cylinder

Additional explaination:

The reason why we want to put the giant inside the cylinder is because later we can control the size of the collider by just resizing the cylinder, and later we need to put a lot of script , health , tag under the cylinder also so it make sense to have a cylinder containing the giant

1. Download and unzip the 6 source script into your game folder

2. Create an empty object and name it "A*", set position to x=0,y=10,z=0

3. Attached 3 script to the A*, which are PathFinding.cs, PathRequestManager.cs, Grid.cs

4. Inside A*, set Grid world size x = 100, y = 180, node radius = 3

(bigger node radius have lower resolution, but run faster)

5. Attach Unit.cs script to your giant

6. Create a new cylinder and name it target, drag the cylinder into your giant -> Unit -> target

7. Run the game and you can see your giant will move to the target

8. Change the speed of the giant inside Giant -> unit.cs property

9. Create a new animator controller, drag the giant walking animation into it

10. Make sure the walking animation is looping by ticking the loop

11. Drag the animator controller into giant -> animator -> controller

1. Inside animator controller, drag punching animation into it

2. Inside animator controller, create a new parameter "attack"

3. Inside animator controller, drag the transition between 2 animation and set their transition base on the parameter "attack"

4. Inside Unit.cs script, create new variable Animator anim, then GetComponentInChildren in the start() function 

5. Inside Unit.cs script, under the while(true), check if the giant very near the target, then anim.setBool("attack",true)

6. To make an uncrossable river, create a transparent cube, and set the layer to "unwalkable"

7. In A*, set the unwalkable mask to "unwalkable"

8. Test the game and make sure your giant will not cross the river, will only cross the bridge and once reach the target it will punch the target

1. Add rigidbody to your giant so that it wont walk into the building

2. Create an empty object and name it "r1"

3. Create a cube scale it to x=20,y=20,z=20, name it "building" and drag it inside the "r1"

4. Set the building box collider size x=1,y=1,z=0.5, center position x=0,y=0,z=0.25

5. Add capsule collider to the "r1", set radius = 0.2, height = 2

6. Drag the building around "r1" so that capsule collider is just in front of the building box collider

7. Test the game by putting 1 self building and 1 enemy building make sure the giant will avoid your own building and walk to the target enemy building and punch it

8. To see the path of the giant take, play the game, click the scene tab, on the A*, dont display grid gizmo

Explanation of why

1. According to our path find rule, both the unit and the target must be on walkable, if any of them is on unwalkable, path find will not work

2. The reason why we cannot use whole cube with box collider is because we want the cube to be unwalkable layer, so that blue giant will try to walk around the blue building instead of crashing into the building

3. If you put the whole cube as unwalkable layer you cannot let the cube be the target, because according to path find rule, target must be on walkable

4. So the solution will be we let "r1" to be walkable but the "building" inside "r1" is unwalkable

1. Create a cube set size x=25,y=3,z=3, name it "health", make it red and drag under your building

2. Create a new building script building.cs and attach it to the building

3. Inside building.cs, create 4 variable life, maxlife, mybuilding, lifebar

4. Inside building.cs, create a function public void gethit(float getdamage)

5. Inside unit.cs, modify the update() function so that when anim.getBool("attack") is true, you call the target gethit() function

1. Duplicate the health of the building and drag it under the giant

2. Scale the health to x=1.5,y=0.3,z=0.3

3. Create a new folder "Resources" and drag the giant under that folder

(You must use this name "Resources" because later on multiplayer mode can only instantiate from this folder)

4. In drag.cs script, instantiate the giant after you release the mouse button

5. Make sure you drag the giant from the "Resources" folder into the Canvas->image->drag->pre1

1. Under "r1", create 2 new empty name it "tag1" and "tag2"

2.  Tag the "tag1" as building and "tag2" as red 

(Note: you can have as many tag as you want)

3. In Unit.cs script, add a new variable enemy which is a List of transform

(Note: List can contain multiple item)

4. In Unit.cs script, create a new function AddAllEnemy(), inside the function, use FindGameObjectsWithTag("building") to find all object with the tag "building" then add it into the enemy list

5. In Unit.cs script, create a new function SortTargetByDistance() which will sort the enemy list base on their distance

6. In Unit.cs script, create a new function targetEnemy() which will take the nearest enemy from the enemy list and put it into variable "target"

7. In drag.cs script,  when you instantiate the giant, make sure the height is correct, in our case y = 20f

(note: giant who been released on the unwalkable mask will not path find because according to our path find rule, both unit and target must be on walkable only path find will work)

1. In drag.cs , in the OnEndDrag function, add a checking to make sure giant is not instantiate on top of the unwalkable mask

2. In drag.cs, in the OnEndDrag function, also add a checking to make sure giant is not instantiate across the river on opposite site

3. Add empty object "tag1" to the giant

4. In Unit.cs, add team to the giant, and also declare mytag variable

5. Drag "tag1" of giant into the giant->unit.cs ->mytag

6. In drag.cs, when instantiate the giant, assign team and color to the giant, also give tag to the giant

(Make sure all the tag you assign to your giant already declared outside)

1. Copy all the target enemy code from unit.cs into building.cs

2. Create a new sphere scale it to x=5,y=5,z=5, rename it as "cannon"

3. Drag the cannon into the resource folder then delete it from the scene

4. Create an empty object "spawn point" and place it under the building, this will act as the spawning point of the cannon

5. In building.cs script, when target is found, instantiate the cannon every 1 seconds

6. Create a new script "cannon.cs" and attach it to the cannon

7. Inside cannon.cs script, add a code to move the cannon to the target

8. Inside building.cs script, make sure after you instantiate the cannon, you need to assign a target to the cannon

9. Inside cannon.cs script, add code to check collision of the cannon and call the giant get hit function when hitting giant

10. Add health to giant, add health code to unit.cs

1. Scale the red building to x=16,y=16,z=16

2. Clone the building so you have 3 red building on top, rename them to r1,r2,r3 respectively

3. Do the same to create 3 blue building on the bottom and rename them to b1,b2,b3 respectively

4. In the building.cs script, add code to check to make sure target is within range only you shoot the bullet

5. Add team to the building.cs script so that you can assign 3 blue building team as team1 and red as team2

6. In the building.cs script, if you are team1, only shoot red target, if you are team 2 only shoot blue target

1. Make sure all 3 blue building have "building1" tag and 3 red building have "building2" tag

2. In Unit.cs script, create a checking condition where if unit is team1 he will attack "building2" and if unit is team2 he will attack "building1"

3. In Building.cs script, make sure if the target is too far, you need to readd new target every seconds and sort them base on the distance

4. In cannon.cs script, make sure if target is null you destroy yourself

1. In Grid.cs, copy the CreateGrid function and paste it as RefreshGrid function

2. Create a new C# script call controlcenter.cs, attach it to the A* object in the scene

3. In building.cs, create gameobject a that reference to A* , then when building die, update the A*-> controlcenter -> refreshgrid = true

4. The control center will run the RefreshGrid function in Grid.cs after 2 seconds

5. Make sure you drag the A* object to all 6 building -> building script -> a

6. In Unit.cs, change the code so that if target is null, you retarget enemy

1. Duplicate 4 card and drag them up so that it show on top of the screen

2. In drag.cs script, add integer team so you can assign bottom 4 card as team 1 and top 4 card as team 2

3. In drag.cs script, base on the team, make sure you cannot drag the unit across the river

1. Create a new cylinder, size x=5,y=5,z=5, rename as skeleton

2. Drag the skeleton object into the scene with size x=2,y=2,z=2

3. Drag the skeleton under the cylinder, then off the mesh renderer on the cylinder to make it transparent

4. Copy health bar and tag from building to your skeleton

5. Create a new animation controller, rename as skeleton

6. Drag skeleton walk and attack animation into the skeleton animation controller, 

7. Inside skeleton animation controller, create attack boolean parameter then make the logic between walking and attack animation

8. Finally make sure you drag the skeleton animation controller to the skeleton -> animator -> controller

9. Also make sure both walking and attack animation loop

10. Create a new C# script, rename it skeleton.cs, then copy all the code from Unit.cs into skeleton.cs

11. Attach the skeleton.cs script to your skeleton

12. To fix the skeleton floating in the air issue, you need to set the skeleton y= 20 because that is where the grid y is , then you adjust your skeleton so that it do not float

1. Drag the skeleton to the resource folder and delete it from the scene

2. Under drag.cs script, create a new integer type to differentiate each type of card

3. Under drag.cs script, add the code that if type=1, instantiate giant, if type =2, instantiate skeleton

4. Make sure for each card, you drag the giant and skeleton to the correct spot(example pre1 or pre2) so that the drag.cs script can reference the correct object

1. Under cannon.cs script, make sure on the OnCollision function, you can detect both giant and skeleton

2. Change the skeleton life to 10 instead of 100

3. Add rigid body to the skeleton so that it wont clamp together, freeze position y, freeze rotation x, and z

4. To further fix the clamp issue, you can reduce the capsule collider radius to 0.1 instead of 0.5 

5. Make sure the health bar of the skeleton dont have collider so that it not blocking each other

6. Under skeleton.cs script, change the code such that if you are team1 you attack unit with tag red and if you are team2 you attack unit with tag blue

7. Under skeleton.cs script, also make sure skeleton can attack building, giant and skeleton instead of only building

1. In controlcenter.cs script, add a new boolean newunit 

2. When you release a new card into the game, set controlcenter-> newunit = true, so that all the skeleton that scan the controlcenter know that there is a new unit release into the game and will retarget it if it is nearerest to them

3. In skeleton.cs , create a new gameobject "a" that reference the a* so that it can scan the controlcenter

4. In skeleton.cs script, make a change so that if skeleton have target but not attack yet, keep checking the controlcenter make sure if got new unit release into the game, you need to retarget the new unit

5. In drag.cs script, modify so that everytime you drag a new unit into the game, you set controlcenter -> newunit = true

1. To solve the blocking issue, you need to make the giant and skeleton capsule collider radius to 0.1

2. You also need to off the box collider on the "health" of the giant and skeleton

3. You also need to off the box collider on the health of the building to make sure it do not block any unit

1. Create a new cylinder size x=10,y=10,z=10, rename it to shooter

2. Drag shooter from object folder into the scene change the size to x=6,y=6,z=6

3. Drag the shooter and place it under the cylinder, make sure their position is the same

4. Off the cylinder mesh renderer so that it become transparent

5. Cylinder capsule collider radius make it 0.1 so that it wont block others

6. Duplicate the tag, health and spawnpoint from building into the shooter

7. Under object folder shooter, make sure all animation loop time is tick so that the animation is loop forever

8. Create new animation controller for the shooter, changing the state between walking to shooting using a boolean variable "attack"

9. Create a new C# script call "shooter.cs" then copy skeleton.cs script content and paste into the shooter.cs script

10. Finally attach the shooter.cs script to your shooter

1. Make sure you drag the tag to shooter -> mytag

2. Set the shooter life to 60, on outside and also inside shooter.cs script

3. Inside shooter.cs script, make sure the lifebar set correctly

4. move the shooter to the resource folder and remove the shooter from the scene

5. Inside drag.cs script, add GameObject pre3 , so on the outside you can drag shooter to the card->pre3

6. Inside drag.cs script, add code so that type=3, instantiate shooter on the game

7. Make the shooter speed to 6, rotation speed to 6

8. In cannon.cs script, quickly add the shooter to be able to get detected and be killed

9. In shooter.cs script, add GameObject cannon so that it can instantiate cannon when the shooter is ready to shoot

10. In shooter.cs script, change the code so that when target is in the range of 40, you can start shooting by setting animation attack = true12. 

11. in cannon.cs script, quickly add building to be able to be detected by cannon and be killed

1. In shooter.cs script, change the code so that when shooter is attacking, stop moving to the target

2. In cannon.cs script, adjust the cannon damage to match your need

3. Make sure the building spawn point is far enough that it do not damage itself

4. In shooter.cs script, change the script so that when attacking, always rotate to the direction of the target so that it always face the target 

1. In drag.cs script, if team=2, you should rotate the unit 180 degree 

2.  For each of the red team card, make sure you set the type correct and drag the correct object to the correct pre1,pre2,pre3 or pre3, example type1 is giant, type2 is skeleton, type3 is shooter, type4 is fireball

3. In drag.cs script, make sure if team 1, then only instantiate if the cursor is z<10, if team 2, then only instantiate if the cursor is z>10 

1. On the top menu, select Asset -> Import Package -> Particle System, import all

2. Once the import is done, you can drag the explosion to the scene to see how it work

3. Adjust the explosion radius to 10, and add rigid body to the explosion

4. Drag the explosion to your resource folder so you can instantiate it later, and delete it from the scene

5. Create a new C# script call fireball.cs

6. Inside fireball.cs, add void OnCollisionEnter() function to detect what object you hit, you can copy the function from the cannon.cs script

7. Attach the fireball.cs script to your explosion

8. In drag.cs script, add GameObject pre4 and if card type=4, instantiate pre4 object

9. Drag the fireball prefab to the pre4 on the fourth card

10. Make sure in fireball.cs script, do not destroy(gameobject) because if you do this you cannot see the explosion animation

(note: you can download all the single player script here or the full project)

1. Backup your single player game by copy paste the folder "clash1"

2. Give your new folder "clash2"

3. Open your game in new folder "clash2"

4. On top menu, Window -> Asset Store , search for "Photon Unity Networking Free" and download it

5. After you download you can import it into your game

6. Go to www.photonengine.com and create a new free account

7. Login to your photonengine account and create a new app, copy the app_id

8. Put your app_id into photon server setting inside your unity project

9. Make sure you choose UDP and auto join lobby

Note:

UDP might lose data but no lag, TCP will not lose data but might lag

1. On your scene, create empty object "networking"

2. Under your script folder, create a new C# script name it networking.cs then drag it into your empty object "networking"

3. In networking.cs script, create a connect() function to connect to the server

4. In networking.cs script, use the OnGUI() function to display status on the screen

5. The sequence for joining the game is Connect server -> Join lobby -> Join Room

6. In networking.cs script, make it so that if player2 then rotate the camera 

7. Build the game into test1.exe then test to see it in multiplayer mode, player 1 should see blue bottom top red, player 2 should see bottom red top blue

1. In build setting, make sure you tick the "resizable window"

2. Under Resource folder, choose your giant and add photonview script to your giant

3. Under script folder, create new C# script "network_giant.cs"

4. Under network_giant.cs script, add OnPhotonSerializeView function to send info to others if giant belong to you, and received info from others if giant belong to other player

5. Under network_giant.cs, add Update() function to update the position and rotation of the giant if the giant belong to other player

6. Add the network_giant.cs script to your giant then drag the network_giant.cs into your giant -> photonview -> observed component

Explanation:

let say we have 2 player, player 1 giant is blue, player 2 giant is red, in player1 computer, we sending player1 giant information to player2 and we received player2 giant information and update the red giant position and rotation

1. Under drag.cs script, change the normal instantiate to PhotonNetwork.Instantiate so that the giant is multiplayer mode and will appear in both player1 screen and player 2 screen

2. Under Unit.cs script, the thing under start() function will not work for other people giant because other people giant only run the update() function, so we need to copy the thing from the start() function to the network_giant.cs

3. Under network_giant.cs, check if team1, make the giant blue and tag blue, if team2, make the giant red and tag red

Important note:

You must put the unit you want to instantiate under Resources folder else it will not work

1. In build setting change the width to 750 an height to 1334 and disable the resolution dialog

2. Untick the image4,5,6,7 to disable the upper 4 card

3. In drag.cs script, change "if team1" to "if photonnetwork.ismasterclient" so that we can share the same 4 card on bottom screen for both player 1 and player 2

4. In drag.cs script, check if player2 then the orix and oriy of the card need to be negative because the rotation of the camera making player 2 look at the card differently

1. Under resource folder, choose your skeleton and add photonview to your skeleton

2. Under Script folder, create a new C# script, name it network_skeleton.cs

3. Copy everything from network_giant.cs into network_skeleton.cs

4. Fix the network_skeleton.cs script such that GetComponent<Unit> change to GetComponent<skeleton> because our skeleton have skeleton script instead of unit script

5. In skeleton.cs script, change the anim to public so other place can access it

6. Drag the network_skeleton.cs to your skeleton first, then drag to the skeleton -> photonnetwork -> observed component

7. In drag.cs script, change the Instantiate to PhotonNetwork.Instantiate for the skeleton

1. In Unit.cs script and also skeleton.cs script, change the destroy to PhotonNetwork.Destroy so that player 1 and player 2 screen is sync if the giant or the skeleton is dead 

2. If the giant or skeleton belong to other player, we should not find path anymore but just follow other player position, so we need to change the script 

3. In Unit.cs script and also skeleton.cs script, add a checking if photonView.ismine then only you findpath 

4. To check if this work, make sure you cannot see the path line if the giant belong to other player, and can only see the path line if the giant belong to you

Additional explaination:

Player 1 should control blue giant and find path, player 2 should control red giant and find path, player1 should not find path for red giant, otherwise the red giant is confuse who to follow order from

This lecture will fix the problem where player2 red skeleton is killing its own red building

1. This is due to when red skeleton appear on the player1 screen by default it is assign as team 0 so it will kill team 2 red building, to fix this you need to by default put giant and skeleton as team 2 "red team"

2. Go to Resource folder, choose your giant, make the default value team=2, do the same for the skeleton

Explaination:

Let say you are player1, when you instantiate the giant you tell computer to change the team to 1 and tag as blue in the unit.cs start function, but when you instantiate the other player giant "red giant" the computer will use the default value but not read from the start function, so you must by default set the team for giant as 2

1. In drag.cs script, convert the shooter instantiate to PhotonNetwork.Instantiate

2. Under Script folder, create new C# script "network_shooter.cs"

3. Copy paste all the code from network_skeleton.cs to the network_shooter.cs script then modify the code accordingly

4. In shooter.cs script, modify the script so that if you own the shooter only you control the movement

5. Under Resource folder, add photonview to your shooter and also add "network_shooter.cs" to your shooter, then drag the network_shooter to  your shooter -> photonview -> observed component

6. In shooter.cs script, also modify Destroy(gameObject) to PhotonNetwork.Destroy(gameObject) so that when shooter die, all player will see it die

1. Make sure the shooter tag by default is untag 

2. In drag.cs script, convert the fireball instantiate to PhotonNetwork.Instantiate

3. Under Resource folder, find your fireball and add photonview to it, then drag the transform to your fireball->photonview->observed component

1. Add photonview to all 6 building in the game, and drag the transform to the photonview -> observed component

2. In building.cs script, convert the Destroy(gameObject) to PhotonNetwork.Destroy, however only player1 can run this script so we need to check to make sure only player1 running this PhotonNetwork.Destroy

3. In building.cs script, we also need to add a PUNRPC destroy() function so that player2 can call this function to notify player1 to destroy the buillding

Extra explanation:

1. Building is special because its not instantiate by the script, its already there when the game start, so the PhotonNetwork.Destroy can only be run by player1 but not player2, so player2 need to use the PUNRPC trick to signal player1 to destroy the building

(note: you can download all the multiplayer script here)