DEV Community: Prashanth Vamanan Srinivasan

How I made my first endless runner game in 7 days - Part I (Introduction and Basic Concepts)

Prashanth Vamanan Srinivasan — Fri, 28 May 2021 15:30:30 +0000

Introduction

In this post and the upcoming series of posts, I am going to share the technical concepts and development process behind my first Unity2D game which is an endless runner.

A sneak peek into the game

In this game, the objective of the player character is to jump over the spawning obstacles without crashing into them. If the player collides with the obstacles, his health gets reduced by 10% and eventually, the player dies when his health reaches zero.

The ultimate goal behind the game is to survive for as long as possible without dying.

Gameplay

Let's now take a sneak peek into our game before we proceed further.

Gathering the Assets

The game as mentioned is an infinite runner. It consists of a character selection screen at the beginning. To make this game we need the following assets:

Two-Character Sprites - Boy Sprite and Girl Sprite
Background Sprites - Forest Sprites
Ground Sprite and Buttons - Fahir From Awesome Tuts
Health Bar Assets - Assets Owned By Brackeys
Obstacle Sprites - Set 1 and Set 2

Fundamental Concepts

Now that we have the required assets, we need to understand a few fundamental concepts in Unity to further proceed to make our game.

Game Objects
Components
Rigid bodies
Colliders
Sprites
Prefabs

Game Objects

Each entity in our game is called a game object. These are fundamental objects in Unity that can represent pretty much anything ranging from characters, props to the scenery. They can also act as containers for other game objects or components.

Examples:

When we drag and drop a sprite (a graphical image) into our scene a game object is automatically created which represents this sprite.
We may have a ground sprite that is very small in width and we might need to place several of these ground sprites next to each other to form the ground for our game.

In such cases, a parent empty game object is created and all these ground game objects are nested within this parent game object which acts as a container in this case.

Components

Unity is a component-based system. The idea here is that we can attach components to the game objects in our scene to affect both their state (properties) and their behaviour (what they do).

An example is the Transform component which comes by default with every game object. This transform component has Position, Rotation and Scale properties which can be tweaked as per our needs.

Similarly, we have a lot of in-built components in Unity such as AudioSource, Colliders, Rigidbodies, Audio Listener etc. some of which we will see as we build our game.

We can also create our own custom components by writing C# scripts in Unity. Since Unity treats C# scripts also as components, they can be attached to any game object as we would normally do with other components.

A Real-World Example of Components and Game Objects

Television is a game object whose job is to perform visual display. The stereo system and speakers of a TV are game objects themselves individually.

Our stereo system is further composed of components such as Amplifier, radio tuner etc. These components function together inside a single game object (in this case our TV) to do its job.

Rigid Bodies

A rigid body is a component which when attached to a game object enables fundamental physics behaviours on it such as force, acceleration, gravity among many others. It is a component that allows the game object to be controlled by physics.

Types of Rigid Bodies

Static: When the body type is static the game object will neither be affected by physics forces nor due to gravity.
Kinematic: When we want the game object to be affected only by forces but not by gravity then we select the body type as Kinematic.
Dynamic: When we want the game object to be affected by both force and gravity then we select Dynamic as the body type.

Rigid bodies also allow us to control the mass of the game object, its angular drag a few of the important properties.

Colliders

Colliders are the game objects that enable us to detect collisions between game objects and also decide how to resolve these collisions (i.e) what should happen when a collision occurs.

There are various types of collider components available in Unity such as BoxCollider, EdgeCollider, PolygonCollider, CircleCollider, CapsuleCollider etc. What collider to use for a game object depends upon the geometry of it.

Types of Collisions

Collisions can be broadly classified into two categories:

Trigger Collisions - There might be situations in our game where we want to detect collisions between two game objects but we want the colliding game object to be able to pass through the game object being collided with.

In such cases, we use trigger collisions. To enable such a collision we need to check the Is Trigger checkbox shown in the above image.

Examples of Trigger Collisions :

When the player collects a coin, we might need the player to pass through the coin but at the same time detect that he has collided with the coin so that it can be destroyed
When the player passes through a door, we might want the boss of that level to appear. In this case, also we need to detect the collision of the player with the door but allow the player to pass through the door

Solid Collisions - This is the default behaviour we get whenever we attach a collider component to a game object. In this type of collision, the colliding game object will be stopped from passing through by the game object being collided with.

Examples of Solid Collision:

Player colliding with obstacles in the game area
Player colliding with enemies as a result of which the player's health gets reduced.

C# Methods used to detect Collisions

Unity Engine's API provides us with two separate methods (note: these methods will be covered in detail in the next series of posts) to detect the two types of collisions we discussed above

Trigger Collisions - OnTriggerEnter2D()
Solid Collisions - OnCollisionEnter2D()

Sprites

Sprites are graphical assets or images that we include in our game.
A sprite can be a single image or single frame or a set of images or frames (sprite sheets or sprite strips). If it is a set of images or frames then usually they are used to create the animations as well.
Sprites in our games are rendered using the SpriteRenderer2D component.

It is generally recommended to have sprite sheets rather than having individual images to represent the different states of the game object (such as walking, running etc.) since this is efficient both in terms of memory and performance.

Prefabs

A prefab is a prefabricated game object. In other words, a game object which we have configured the way we want it.
This is useful because once a game object is configured with all of its necessary components such as colliders, rigid bodies, sprite renderers, custom scripts etc. it is easier to add instances of these game objects directly in our game.
This is done by just dragging and dropping the prefab into the scene to create a new instance of it rather than going through the process of attaching all of these components again to create a new instance of this game object.

Example of Prefab

We might want to spawn multiple instances of enemies in our game at repeated intervals. Rather than creating an enemy each time from scratch by attaching all the required components manually, we can create this enemy once and make it a prefab.

Then whenever we need to create an instance of the enemy we can just instantiate this prefab so that the enemy is spawned in the scene.

Conclusion

In this post, we have seen the required assets to make our game. We also learnt about the basic concepts in Unity needed to make our game.

In the next post we will dive into the development of our game starting with the Player characters, their movement, jumping, animations as well as spawning obstacles.

Until next time, stay safe and cheers :)

If you would like to follow me on Twitter please feel free to do so. I write about web development, game development and football ;)

JavaScript Internals - Part I (Execution Context)

Prashanth Vamanan Srinivasan — Thu, 28 Jan 2021 16:01:04 +0000

Introduction

In this series, we will be looking at some of the tricky topics and take a deep dive into the core fundamentals of the JavaScript language.

What happens when we execute JavaScript code ?

Whenever we execute any JavaScript code, the JavaScript engine behind the scenes creates what is known as an execution context.

Execution Context

Assume we have a big vertical carton box in-front of us.

An execution context can be thought of like this. It is a big box inside which the JavaScript Engine executes all of our JavaScript code.

It is also known as the Global Execution Context (GEC).

Note:

Whenever a function is invoked the JS engine creates a brand new execution context (more on this in the upcoming posts).

This new execution context resides within the execution context which was created when the JS program was first executed.

Hence the execution context which is created first is known as the global execution context (since all other execution contexts created will reside within this).

What does the execution context contain ?

The execution context is divided into two major components namely,

The Memory Component (or) Variable Environment
The Code Component (or) Thread of Execution

JS Program Execution with an Example

Let us now see how the execution context along with its two major components comes into play with a simple example.

We have a very simple JavaScript program where there is a variable a initialised with the value 10 and we have a function named greetUser which logs "Hello World" to the console.

When this program is executed by the JavaScript engine, first a global execution context is created.

In any execution context there are two steps which are followed:

Memory creation phase
Code execution phase

Memory creation phase

During the memory creation phase the JavaScript engine allocates memory to all the variables in the program and gives them a spatial or temporary value of undefined.

Whenever JavaScript engine sees any functions in the program during this phase the entire code inside the function is stored as such.

Both the variables and functions are stored as key-value pairs.

Taking our example the memory component of our execution context looks like below:

Now the JavaScript engine sees that it has no more code to scan through to allocate memory and thus it proceeds to the code execution phase.

Note : In the memory creation phase only the memory is allocated to the variables and functions are allocated and none of the code is executed. Hence line number 7 in the example will not be executed yet.

Code execution phase

In this phase, the JavaScript engine starts to execute our code line by line. Let us trace this through our example :

Line 1 is encountered and the JS engine updates the value of the variable a from undefined to 10.
Lines 2 to 6 have nothing to be executed and hence JS engine proceeds to the next line.

Current state of the execution context

Line 7 involves function invocation. Whenever a function invocation happens a new execution context is created.
JS engine creates a new execution context inside the current execution context. It goes through the memory creation phase for this execution context as well.
It sees that there are no variables or functions within our greetUser function and hence it proceeds to the code execution phase.
In the code execution phase, it logs "Hello world" to the console.

Final Steps

Now the JS engine sees that there is no more code to be executed for the function greetUser and hence it clears the execution context allocated for it.

Now it resumes back to the global execution context and sees that there is no more code to be executed here also and hence clears the global execution context as well.

Now the program execution is complete.

Conclusion and Upcoming Post

In this post we saw how JavaScript engine executes our program internally.
In the next post we will see more such examples and I will explain the line by line execution of these examples.
Huge thanks to Akshay Saini (An engineer at Uber) for inspiring me to write this post. This series of posts his based on his playlist Namaste JavaScript in his youtube channel. Do check it out.
Until the next post, cheers and keep coding :)

JavaScriptmas Advent Calendar 2020

Prashanth Vamanan Srinivasan — Tue, 22 Dec 2020 08:37:44 +0000

Hi all programmers out there !

At the start of this month, Scrimba started a fun yet thoughtful series of programming challenges using JavaScript known as JavaScriptmas.

Those who aren't aware of what Scrimba is, it is an online platform teaching front-end development related technologies.

The really cool thing about Scrimba is that you can edit the instructor's code as they are typing and make tweaks and see it live, which I believe is a great way of active learning or learning by doing

Javascriptmas is a 24-day challenge launched by Scrimba which gives a challenge to be solved each day using JavaScript. I am a junior developer in a startup and I use javascript based technologies there on a daily basis.

These series of challenges enabled me to solidify my javascript skills and also exposed me to newer ways of thinking and multiple ways of solving the same problem.

So here are my solutions for each day of the Javascriptmas challenge

(These are not the best solutions, just the ones which I thought were suited for the given problem)

Conclusion

Taking part in such a challenge and solving a coding problem daily has taught me how to be consistent at something. Also this improves our thinking and enables us to come up with better and optimised solutions for future problems.

If you haven't yet attempted JavaScriptmas, I strongly recommend you to do so as it is a lot of fun and at the same time you can win a lot of cool prizes and be part of an amazing community of like minded individuals.

Until we meet next time, Happy Coding :)

Beginner's Guide To Asynchronous JavaScript - Part 2

Prashanth Vamanan Srinivasan — Thu, 03 Dec 2020 07:36:09 +0000

Recap

In the last post of this series we saw what is the difference between synchronous and asynchronous code and how JavaScript handles both of them.

What's in this post?

In this article we will:

Simulate asynchronous behaviour in JavaScript using setTimeout() method.
Learn about HTTP requests and HTTP verbs
APIs and API endpoints

Asynchronous code simulation

Assume we have the following code in a file named sandbox.js

Since the setTimeout() call is asynchronous it is executed in a separate part of the browser and does not block the remaining statements.

Once the 3 seconds has passed, the callback function is invoked printing the message inside the setTimeout() call.

Note: The handling internals of the setTimeout() call and where it is executed will be discussed in the upcoming posts.

Output:

HTTP Requests

HTTP is a protocol which allows us to fetch resources from external sources. (This is the simplest possible definition).

This protocol defines a set of request methods which denotes the specified action to be performed to obtain the resource.

They are also known as request verbs and there are four major ones - GET, POST, PATCH and DELETE

GET - GET requests are used for retrieving a specific resource.
POST - POST requests are used for submitting data to an external server (such as signup, login etc.)
PATCH - PATCH requests are used when we want to modify only certain attributes of a specific resource.
DELETE - DELETE request is used to DELETE a specified resource.

Why it is useful?

Whenever we develop any real-world application we might need to fetch data from external sources. The way we reach out to these external sources is by making a HTTP request.

Depending upon the type of HTTP verb used, the appropriate resource action (as mentioned above) will be performed.

API's and API Endpoints

We make an HTTP request to something known as an API endpoint.

An API (Application Programming Interface) in simplest terms allows applications to communicate with one another (as an example your application to communicate with google' servers for logging in through gmail).

This external server (google in this case) exposes to the public what is known as an API endpoint. These are URLs that a particular API or server exposes to us which we can use to get data from these servers.

Illustration - HTTP request to an API endpoint

Example API endpoint - https://jsonplaceholder.typicode.com/todos/1

Usually most of the API's return response in a format known as JSON(JavaScript Object Notation - which will be covered later).

Response data from the above request:

Typically whenever we request data from an external server we use a HTTP GET request.

Conclusion and Next Steps

In this post we have seen how to simulate asynchronous code in JavaScript using setTimeout(). We also briefly touched upon the HTTP protocol, HTTP verbs, APIs and API endpoints.

In the next part we will see a practical demo of how to make an HTTP request using JavaScript and discuss about the various response codes associated with HTTP requests.

Thanks for reading this post and feel free to connect with me on Twitter for more such content. Have a nice day :)

Beginner's Guide To Asynchronous JavaScript - Part 1

Prashanth Vamanan Srinivasan — Wed, 02 Dec 2020 07:38:41 +0000

What is Asynchronous Programming?

The term asynchronous in programming means that a particular section or block of code can execute independently of other sections of code.

Use cases

Asynchronous programming is generally useful to perform operations which consume a certain amount of time such as fetching data from a third party REST API or getting data from our own local database.

We can think of asynchronous code as "Starting a task now and finishing it some time later"

Synchronous vs Asynchronous

JavaScript by design is Synchronous in nature.

This means that it can execute only one statement at any given time, meaning that the rest of the other statements need to wait before the completion of the previous statement.

Hence synchronous code is also known as blocking code.

This is in contrast to asynchronous code where other sections of code need not wait for the asynchronous piece of code to finish execution.

Hence, Asynchronous code is also known as non-blocking code.

Synchronous Code - Illustration

Assume we have a JavaScript file which contains some simple console.log() statements (printing to the console) and some statement making a network request (though we won't get into the actual asynchronous syntax just yet).

 console.log("Hello world!");   // Statement 1

 console.log("Print some random stuff") // Statement 2

 //Statement 3 - Making a network request

 console.log("Printing again") // Statement 4

Considering the normal flow of execution in JavaScript, Statement 1 will be executed printing "Hello world!" to the console. Only when this has been completed Statement 2 will be executed.

Since Statement 3 is a network request, it will take some time to complete and assuming the synchronous model is followed here, Statement 4 has to wait for the entire network request to complete before it can execute.

Statement 3 stalls or blocks the execution of Statement 4. This is the downfall of synchronous code and hence it is known as blocking code as mentioned above. This is where asynchronous code comes into the picture.

Asynchronous Code - Illustration

Instead of the statement 3 being a synchronous function to request data, let it be an asynchronous function (we will learn how to write asynchronous functions in the upcoming posts).

Now what this means is that this function can start its execution and finish later whenever the requested data is sent back from its source.

Once the asynchronous function completes its execution, it notifies that it has completed its task through a callback function (assume it is a function which notifies completion, though we will learn about callbacks in the upcoming posts).

How does this help ?

JavaScript by nature is single-threaded which means that only one instruction can be executed at a given time (essentially the same thing as synchronous).

Whenever JavaScript sees an asynchronous function call, it takes out the asynchronous call out of the single thread environment and runs it in a different part of the browser.

This means that the rest of the statements can now execute without being blocked.

Once the asynchronous call completes, it notifies the JavaScript engine with the response data (if any) and the application can then proceed to perform any operations with the data.

Conclusion

In this post, we have seen both synchronous and asynchronous programming models. We also have seen how JavaScript handles synchronous and asynchronous blocks of code.

In the upcoming posts of this series, we will talk more about asynchronous programming including the techniques used in JavaScript to achieve asynchronous programming along with a complete project.

If you find this post helpful, please connect with me on Twitter for more such interesting content.

Thanks for checking out my post and have a happy day ahead :)