My first game using Unity as a Web developer!

Tareq Rafed
5 min readDec 4, 2020

I had a long crush on Games, and really wanted to create a game, so I started learn more about unity and game development in general.

mobile platform was chosen, since mobile games in general are much simpler, and because I’m familiar more with mobile apps, and never wanted that side project take much time.

First thing came to my mind, WHAT GAME ENGINE SHOULD I USE?

Picked Unity (Obviously) over Unreal for various reasons, most importantly that it is a better fit for mobile games, and because it is much simpler than Unreal which offers many options for high-end pc’s that I don’t need for a mobile game.

meme about using c# with Unity

Unity supports JavaScript, C# and Boo (similar to python) , clearly JavaScript would be easier for a web developer, but when I read more about JavaScript in Unity, it turned out that JavaScript isn’t really supported, it was just a similar syntax scripting language that made up by unity that doesn’t have the dynamic features in JavaScript, also it is not documented as much as C#.

So, I started to learn more about C#, which is much similar to Java and Dart, and won’t really take time if you know any of them.

My game idea, was Inspired by a game I saw on YouTube, it’s just a StickyBall that you have to swipe it, aim then release to jump and stick on other objects, and all you have to do is reaching the finish line.

First, I started a 2d project, made just a random objects around the screen and added a 3d mesh of a ball!

adding a circle collider which allows your object to interact with other objects and rigid body to make the ball affected by gravity was the first step!

then adding a C# script to add movement!

Once you create script you will find a function called Update, which is a function that is called every frame, usually game logic, Inputs, should be handled here.

and since you are importing Unity Engine aka “Using UnityEngine;” on the top of your file, you will access one the of the most used classes: Input.

By using Input you can handle the controls in a really easy way

Official documentation

in this game we are considering mouse inputs only, and by default, mouse simulation with touches is enabled but not vice versa, so we don’t need to handle touch inputs, we need only the mouse inputs.

First we want to declare two Vector2 variables,

A Vector has magnitude (size) and direction

think of it just like an arrow, points in a direction, and it’s length is just it’s magnitude.

Public variables can be declared and change it’s value from it’s script component

public RigidBody2d player; // our ball
public float force;

then in update function:

private Vector2 touchStartPosition, touchEndPosition;void Update(){  if (Input.GetMouseButtonDown(0))  {
touchStartPosition = Input.mousePosition;
}
if (Input.GetMouseButtonUp(0)) {
touchEndPosition = Input.mousePosition;
}
}

after storing these two Vector2, we can know at what direction player is swiping and how long the swipe was.

So I created another function called that handles the movement,

by taking the delta of On mouse down and On mouse up we simply get the direction of the jump,

while distance between them is how fast the ball should jump.

private void HandleJump(){// or Vector2 Delta =touchEndPosition - TouchStartPosition;
x = touchEndPosition.x - touchStartPosition.x;
y = touchEndPosition.y - touchStartPosition.y;
float distance = Vector2.Distance(touchStartPosition, touchEndPosition);// using normalized makes it only directional (making magnitude 1)
// second mode the force mode Impulse makes instantly (just like //explosions')
player.AddForce(new Vector2(x, y).normalized * force , ForceMode2D.Impulse);}

Now we need to call our function in Update function

void Update(){if (Input.GetMouseButtonDown(0)){
touchStartPosition = Input.mousePosition;
}
if (Input.GetMouseButtonUp(0)){
touchEndPosition = Input.mousePosition;
HandleJump();
}

a little bug here, that we are not checking if user is draging, so to get the result we want we will add a function called OnMouseDrag , which is a function inherited from MonoBehaviour that is called whenever the mouse is draging

so we will add

bool isDragging= false;
private void OnMouseDrag()
{
isDragging=true;}

editing Update function

void Update(){if (Input.GetMouseButtonDown(0)){
touchStartPosition = Input.mousePosition;
}
if (Input.GetMouseButtonUp(0)){
touchEndPosition = Input.mousePosition;
if(isDragging){
HandleJump();
isDragging = false;
}
}

and now we want to make sure that ball can jump only if it is on a surface!

by using the function OnCollisionEnter2D, which is called if the object collided with another object.

bool onSurface = false;private void OnCollisionEnter2D(Collision2D other) {  onSurface = true;}

again implement that in our update function

void Update(){if (Input.GetMouseButtonDown(0)){
touchStartPosition = Input.mousePosition;
}
if (Input.GetMouseButtonUp(0)){
touchEndPosition = Input.mousePosition;
if(isDragging && onSurface){
HandleJump();
isDragging = false;
onSurface = false;
}
}

finally let’s make it sticky, and to do that we need to add a fixedJoint on collision and destroy it whenever the ball jumps,

so we will create two functions to handle that

FixedJoint2D fixedJoint;
private void CreateJoint(Collision2D other)
{ if (gameObject.GetComponent<FixedJoint2D>() == null) { fixedJoint = gameObject.AddComponent<FixedJoint2D>(); fixedJoint.connectedBody = other.rigidbody; } }public void DestroyJoint(){ Destroy(fixedJoint);}

gameObject refers to the object that this script is mounted to, then we check if ball has a FixedJoint2d if not we simply create a joint and attach it to the body with collided with,

Destroy is a function that just removes a gameObject or component in the first argument

finally we add createJoint in OnCollisionEnter and DestroyJoint in our Update function…

private void OnCollisionEnter2D(Collision2D other) {CreateJoint(other);onSurface = true;}void Update(){if (Input.GetMouseButtonDown(0)){
touchStartPosition = Input.mousePosition;
}
if (Input.GetMouseButtonUp(0)){
touchEndPosition = Input.mousePosition;
if(isDragging && onSurface){
HandleJump();
isDragging = false;
onSurface = false;
DestroyJoint();
}
}

and that was the main Mechanism of the game!

You can download the game StickyBall (Play Store only)

also you can follow me on Twitter

--

--

Tareq Rafed
0 Followers

A software Engineer, published some projects, using ReactJs, Django, Flutter and Unity!