Becoming A Metaverse Developer
Learning the fundamentals of 3D (Game) Development with Unity
During the last month’s edition of #CrystalizeMyLearning article, I shared my knowledge of Python Flask, a powerful micro web framework, in a tutorial-style article.
For this month’s edition of #CrystalizeMyLearning article, I hope to explore the Metaverse and the fundamental building blocks of Metaverse by documenting my learnings on 3D (Game) Development through a simple project I’ve built for the purpose of this article.
To understand how 3D (Game) Development relates to Metaverse, continue reading on!
Introducing the 3D Platformer Game — ‘Traveller’
Traveller is a simple platform game I’ve created where the player needs to travel across the floating tiles to reach the end zone (yellow plane).
GitHub Source: https://github.com/cyberjj999/traveller
I have developed 2 versions of Traveller
- A basic version of the game that has limited camera control and a simple platform
- An advanced version of the game that has a freelook camera, friction, and a more challenging platform
Traveller (Basic Version) Video Demo
Traveller (Advanced Version) Video Demo
In this article, I will be focusing on the basic version of the game — Traveller.
Taking a different approach, I hope to write this article in a ‘DevLog’ style.
Indeed, ‘DevLog’ is becoming increasingly popular among many game developers. Through a ‘DevLog’-style article, I will share my distilled insights and learnings on Unity game engine, a game creation platform by Unity Technologies, and a strong contender as the Game Engine of choice in the world of Metaverse.
To start off, it is helpful for us to understand what is the Metaverse.
What is Metaverse?
Perhaps many people’s first brush with Metaverse is from Facebook, which recently rebranded itself into Meta. The move by Facebook to rebrand into Meta is a clear strategic push by the company toward Metaverse.
In the simplest term, the Metaverse is the virtual world (typically consisting of a range of technologies like virtual reality and augmented reality)
Of course, the Metaverse is much bigger than just AR/VR technologies. It involves numerous other technologies such as Blockchain, the Internet of Things, and Brain-Computer Interfaces.
However, AR/VR is the core fundamentals that make up the Metaverse. Just like how a frontend software engineer could become a better engineer by understanding the basics of the backend, you too can become a much more proficient Metaverse Developer if you understood 3D (Game) Development, which is the fundamentals of AR/VR technologies
AR/VR Technologies
To become a Metaverse Developer, learning 3D (Game) development is very beneficial. While there are some nuances that differ between developing a normal 3D game and a Virtual Reality app, the foundational pieces that make up the program are still fundamentally the same.
You’d still need to work with 3D models, animations, physics engines, and handling of effects and particles.
Enter Unity DevLog
In several of my past projects, I had the opportunity to pick up some skills relating to Game Development that are applicable to the development of AR/VR technologies.
Here, I will be introducing a very simple platform game — Traveller — and sharing my workflow in creating the key components which make up the game.
Note* This article is not meant to be a step-by-step tutorial, but rather, a documentation of my key learnings of core concepts of Game Development in Unity Game Engine. I’ll try to be as clear as possible by providing example images.
A 3D Platformer Game — ‘Traveller’
Traveller is a simple platform game where the player needs to travel across the floating tiles to reach the end zone (yellow plane)
The Game Logic
As game developers, it is imperative for us to determine the game logic before we even begin coding the game.
In this game, the logic is pretty self-explanatory — you need to move your character (red capsule) to the winning zone (yellow ground) by carefully jumping on different blocks.
You lose when you fall off any blocks. You win when you reach the yellow winning zone. Simple!
Downloading Unity
To get started, let us first download Unity Hub on our computer. Download link: https://unity3d.com/get-unity/download
After the installation process is completed, we can create our first 3D project.
After you’ve created your 3D project, you’ll be presented with this view.
Now, we will get started with creating our very first 3D platform game on Unity.
Let’s Get Started with The Floating Blocks
As you can see from the image above, the floating blocks make up most parts of the game.
Making a block is simple — you can simply right-click in the Hierarchy Pane> 3D Object> Cube to create a cube in Unity.
Unfortunately, the default cube looks a little dull.
Adding Materials
To make our floating block look much more interesting, we can create a material.
A material is used to change the appearance of a game object. You can make a shiny (or dull), black (or white) object using materials by tweaking a few parameters.
Just like how we created blocks, we just need a few clicks (in the Project Pane) to create a material.
Next, we can edit the color of the material in the Inspector Pane. A deep brown seems to be the best color for the ground/soil — let’s stick with this color!
After adjusting the material color, we can attach the material to our cube object by dragging the material (in our Project Pane) onto the cube object in the scene view (the middle pane).
Voilà! Your dull white color cube is now brown. The cube looks fine now, but it could use a little shine and vibrancy. Let us add a grass block on top of it!
Touching Up Our Floating Block
Similarly, create another cube and now add a green material to it to simulate a grass patch.
Great! Now you have a brown cube and a green cube.
The trick now is to make your green cube shorter, so it looks like a grass patch. To do that, we need to lower the scale on the Y-axis of the cube — i.e. lower its height.
Note* A 3D Cube has 3 dimensions accessible by the X-axis (red), Y-axis (green), and Z-axis (blue).
To lower the scale of the green cube, go to the inspector and lower the Y value on the Scale parameters. A y value of 0.2 looks about right.
Now you have a flat-looking cuboid!
Creating the ground block (by combining the soil and the grass)
To “combine” the soil and the grass, Drag and position the grass object using the pointed arrows (X, Y, and Z-axis to move accordingly) in the scene view and move it right above the brown cube.
Great! We now have our floating blocks which we will use throughout the entire game!
Housekeeping — nesting objects under parent objects
In the Hierarchy Pane, you’ll notice we have 2 cubes (I have renamed them accordingly so it is easier to identify them — you can right-click on the objects to rename them)
It is always a good practice to house related objects under the same parent. You can do so by creating an empty game object (just right-click in Hierarchy Pane > Create empty) and name your empty game object as Floating Block (or anything you like) and drag the soil cube and grass cube into the floating block.
Now your Soil Cube and Grass Cube have the Floating Block as their parent. You can now simply move the parent object and both of your child objects will follow the parent object’s position!
Introducing Prefabs
We can easily duplicate our floating block by selecting them in the Hierarchy Pane and pressing the hotkey Ctrl + D to duplicate it. And we can also drag all of them around the scene to build our platform in the game.
However, the downside of this is that we do not have control over the blocks should we decide to change our game looks and logic. What if you wanted to change all grass blocks to flaming red blocks?
You’d have to then manually drag the material to each grass cube that is nested under each floating block. It works if you have 3 blocks. But what if you have 100 blocks? What about 1000 blocks?
The desirable way to tackle this problem is to use Prefabs.
Prefabs are templates of GameObject which you can reuse in the scene. For example, you can have a Prefab of the Soil Cube and use this prefab to duplicate multiple Soil Cube objects.
Using prefabs (as compared to simple duplicating the soil cube object without a prefab), you can sync up all copies of the prefab instance. This allows you to edit 1 single prefab and apply that changes to all instance of the prefab.
To create a prefab, drag your Floating Block object in the Hierarchy Pane into your Project Pane. You’ll see a prefab being created, as indicated by a preview of your prefab in the Project Pane. In the Hierarchy Pane, your game object will also turn blue, signaling that the Game Object is a prefab.
Using Prefabs
Prefab works just like a normal game object — the benefit comes in when you need to edit them later. Here, we can delete our non-prefab game objects, and continue duplicating our floating blocks.
Platform Building
By now, you should know
- how to create simple objects.
- how to scale your object (i.e. make it shorter, etc.)
- how to move your object around the scene
- how to duplicate objects
You can go crazy and create a bunch of Floating Blocks and make an amazing platform! (Just make sure to nest them under the same empty object parent to tidy up your workspace!)
Note* If you’re wondering how I built that green plane — the process is the same as creating a cube. In Unity, you can create many different 3D objects, including a plane (i.e. a flat surface) — just remember to scale that plane on the X and Z axis to make it extremely wide!
Creating our Yellow Win Zone
Our platform is almost complete, the last thing we need is to create a yellow winning zone. This zone is simply a yellow plane that the player has to touch in order to win the game.
Similar to what we have done for our Floating Blocks, all we need to do is to create a 3D plane object, a yellow material, and move the yellow plane to where we want it to be.
Creating Our Player
Now that we have some sort of platform to work with, we need to create our player. Most professionals game developers would advise you to start with a simple object as your character instead of worrying about animations and fancy design. I definitely echo the same thoughts.
Here, we can have a simple 3D capsule object as our main character. I have also made it red using materials and added a small nose so we can tell where is the front of our player.
Note* In the basic version of Traveller, the nose may not be particularly important as we are not rotating our character — so there’s no need to know where is the front of our character.
However, in the advanced version of Traveller, there is a freelook camera that allows user to rotate their player using their mouse position, so having the nose allow the user to identify where is the front of the player.
Getting Our Player to Move — It is finally time to code!
For all budding developers and software engineers, here’s where you finally get to code!
Our player should be able to do 2 things
- Move in all directions (using the WASD or Arrow Keys)
- Jump
To do that, we need to create some scripts.
In the Project Pane, right-click create > C# Script to create a script. I named mine MyPlayer.cs
The default MyPlayer.cs Script
MyPlayer.cs (after some coding)
About MyPlayer.cs
The script above may seem daunting, but the logic is fairly straightforward. I have included comments for each key component. Here, I will briefly explain what each block of code does.
Defining Game Variables
This code block is used to specify our game variables. We have several values such as verticalInputand toJump which are used to control our game logic. The line public GameObject winPanel; represents a GameObject we can select to manipulate using our script. Here, we want to include the winPanel GameObject — which is a simple UI that shows that we’ve won the game.
Here, we want to disable/set the winPanel to be inactive. We will only activate it when the user touches our win zone so we can display the winning message to the user at the right time. To do that, simply uncheck the box at the top left of your inspector pane.
Start() Method
As the method name implies, the Start() method will run when we start our game. Here, we are merely defining our components and component value so we can manipulate them for our game logic in our code.
The RigidBody allows Unity to use its physics system on our game object. Since we would want our character to be affected by physics (i.e. gravity), we should also add a Rigidbody component to our player. While doing so, we should also freeze the rotation of the object (on all axis) as we do not want our player to topple while moving.
Update() Method
The Update() method is called once per frame. It is desirable to capture all user input in this method. Here, we are capturing our user input — from Spacebar to WASD/Arrow Keys.
Also, we are only setting toJumpto true when the user presses the spacebar and only if the user is grounded (i.e. on the ground) — this is to prevent double jumping.
FixedUpdate() Method
The FixedUpdate() method is often confusing for developers because it seems so similar to the Update() method. The difference between the Update() and FixedUpdate() method is how many times they are called in any duration.
Since the Update() method runs every frame, on a fast computer that runs at 200 frames per second, it will run 200 times per second. However, the FixedUpdate() method, as the name suggests, will only run a fixed amount of times per second. The default is set to 50 calls per second.
All that we need to know is that it is desirable for us to run our physics-related behavior in the FixedUpdate() method. Thus, the code here adds a force to the player’s rigidbody (therefore allowing it to jump) and also modifies the position of the player.
Other Methods
Here, the RestartGame() and IsGrounded() methods are pretty straightforward. We simply call the RestartGame() method when we need to restart the game, and the IsGrounded() method checks if the user is on the ground (so we can allow them to jump)
The OnCollisionEnter() method is a very important method in Unity Scripting. This method will be called every time the player collides with something (that also has a collider).
If the player collides with the Win Zone, we will set our winPanel to be active (therefore showing the winning message). If the player collides with the Lose Zone, we will restart the game.
In our collide method, you may notice that we have a line that checks the collided object’s tag (collision.gameObject.tag == "Lose"). This is necessary because our player will be colliding with the ground constantly, so we need a way to identify what object specifically is our player colliding with.
For us to identify if our player is colliding with the lose/win zone, we need tags. Back in Unity (outside of our Visual Studio scripting environment), we can set tags for our game object.
And we’re done with scripting!
The last thing to do is to drag your script to your game object to append it as a component. To do that, you can drag your MyPlayer.cs script in the Project Pane into your player game object in the Hierarchy Pane.
(You will also need to drag your player’s rigidBody into the script variables too)
You may notice something very unique about game programming as compared to your typical web development or python script programming. When scripting in Unity, you’d often need to switch between Visual Studio and Unity so you can add various components/tags so you can use them in your script.
I hope learning about this sheds some new perspectives on programming for you!
Completing our game — The last step of appending the Game Camera to Our Player
The last thing we need to do is to move our camera and make it follow our player as it moves. You can do so in the script, but it is much easier to do it in Unity
First, you should move the camera in the scene such that it is near our player. You can also play with the rotation of the camera to create a desirable view. (You can see your camera preview at the bottom right corner of your scene view)
This setting looks pretty good. Now our camera is positioned desirably. However, if you play the game now, you’ll realize that the camera won’t move as your player moves.
A nifty hack that we can use so our game camera follows our player is to simply make the camera a child of our player object.
And… we’re done!
Oh wait, we need to make some final touches after testing!
As with every project we’ve created, testing is immensely important. Here, I make some minor edits to the scene after testing the game.
I have changed the ground color to red after realizing that the original green ground makes it very difficult for us to differentiate between the floating block and the ground!
I have also moved the winning zone into the red plane so our player can reach it more easily.
Programming is after all a process of improving through iteration!
That's it! If you make it all the way here, Kudos to you!
This article ended up being lengthier than I thought. I’m positive that I may have missed out on several nuances of programming Traveller in this article. If you happen to follow along with this DevLog and faced any issues — please feel free to reach out to me! I am more than happy to help :)
If you would like to download the game and play it, please follow the instructions on Github: https://github.com/cyberjj999/traveller
I hope you learned something new in this article and enjoyed it thoroughly.
I’ll catch you in the next one. Cheers!
