Build a 3D Running Game | Egretia Pro Tutorial

Published in

Egretia

7 min readSep 23, 2020

Preparation

Please note that developers should use EgretiapPro at Version 1.6 or above and Egretia2d engine at Version 5.3.7 or above

Create a project

Firstly, open EgretiaPro, then click Project>Library Project>Create

After the creation, EgretiaPro will automatically open the library project RunningGame which was just created. Then create a RunningScene under the directory of resource/scenes and double-click to open the scene in the scene editor. As shown below:

Create tracks

The track is spliced by three entity Cubes, and the track needs to roll up as the protagonist runs forward. Here we create the track dynamically through components. Use Vscode to open the project you just created, then create a folder game under the src directory to store our component code, and then create the RoadController.ts file in the game directory.

Then add the RoadController component to the Root entity of the scene.

Now click the preview (built-in) (or preview browser) button, and you can see the following effect.

If it looks a bit weird, you can adjust the position and angle of the camera by debugging the camera’s TransForm parameters in the running interface to make the picture look more comfortable.

Add protagonist

Add the protagonist to the scene and let him run forward, as follows:

The first step is to copy the game material BakedAnimation to the project directory resource/assets/a nimations.

In the second step, open the resource/assets/animations/BakedAni mation/Boy_standby_out directory in the EgretiaPro editor explorer, drag and drop the Boy_standby.gltf.prefab.json file into the scene.

The third step is to play the running animation of the protagonist. There are two ways: Method 1: Directly operate in the pro editor. details as follows:

Method 2: Uncheck autoPlay in the pro editor and implement it through scripts. Create a PlayerController file under the game directory; (Remember to hang the PlayerController component on the protagonist entity).

As of now, the protagonist is running on the track. But the player is supposed to move forward. As such, we need to constantly update the position of the protagonist in the onUpdate function and meanwhile make the camera move along with the protagonist at the same speed. Otherwise you will find that your protagonist runs further and further on your screen, getting smaller and smaller.

As the protagonist moves forward, we find that the track under his feet is gone. What we need to do now is to open RoadController.ts component then continue to pave the road while the protagonist moves forward.

Then use the left mouse button to control the protagonist’s movement direction. To change the position of the protagonist by the onUpdate function according to the movement of the mouse.

Add coins

A prefab is a collection of game objects and their components. The purpose is to enable game objects and resources to be reused. The same game object can be created through a prefab. This process can be understood as instantiation. Since the gold coins in the game are scattered all over the runway, it is perfect to make gold coins by prefabs!

How to create a prefab:

1. Open (or create) the resource/perfab directory, and then right-click — “Create prefab coin.perfab.json in the resource manager module;

2. Double-click the prefab just created, right-click in the hierarchy bar → 3D →Sphere;

3. Select the sphere you just created, and select the material item in the property bar, select coin.mat.json.

First, let’s get started with a coin component Coin.ts

Our gold coins are scattered on the runway, so every time we create a runway, we randomly create some gold coins on the runway. The number of gold coins and location are random. Next, you need to add the following logic code to the RoadController.ts component:

Now a lot of gold coins are scattered on the road. But it’s necessary to build a gold coin pool to collect gold coins instead of creating gold coins all the time. So Next we will create a gold coin buffer pool. Add a CoinPool class to the Coin.ts file.

When the gold coin leaves the rendering range of the camera, we should put the gold coin into the buffer pool, and the gold coin entity is not participating in the rendering, so that the gold coin is in a dormant state. We put these processing of gold coins in the system class to do. The system is a tool to handle a collection of entities with one or more identical characteristic components, which only have behavior (that is, there is no state in the system). How to get all the gold coins in our system class？The entity matcher is used to define the rules of a set of entities with certain component characteristics. A clear set of rules can be defined through an instance of the matcher.

In our cases, we first create a gold coin system class CoinSystem.ts in which all the gold coins are collected, and then check whether the gold coins are thrown behind by the player and no need to render in each frame, then those will be returned to the gold coin pool. Look specifically at the following code:

The system does not work like a component directly added to the entity so we need to register the system with the component. Next, add the following two lines of code in PlayerController

We will consider getting them from the buffer pool first when it comes to the creation of gold coins. Modify the crea teCoins() function in RoadController.ts.

The collision

Next, what we must do is to deal with the collision between the gold coin and the protagonist. We need to check each gold coin. If there is a collision with the protagonist, then the gold coin will have an easing animation and then disappear. Thus we still put the behavior of dealing with the collision between gold coins and the protagonist in the CoinSystem.ts system class.

Add UI interface

As of now, 3D scene is complete. Next, we need to add a UI interface to the case, that is, to add some 2d content. Here is an explanation of how to add a UI interface in a 3d scene. The integration of Egretia2d and EgretiaPro. Firstly, to export the 3d scene into a third-party library pro-library; Secondly, to create a 2d project and add the third library pro-library to the 2d project; Thirdly, to upgrade the 2D project and modify index.html.

Lastly, the scene in EgretiaPro is rendered as an Egretia.Texture object. Add Egretia.Texture to the Bitmap object so as to render to the stage through Egretia engine.

After the first three steps, the project directory is as follows:

Then we click the start button to add a parkour scene. See the Main.ts file for details.

But at this time, you may find that the protagonist could not move towards left or right side. What we need to do now is to pass on the 2d touch event to the 3d scene. Then you need to complete the communication through Egretia.pro