Tutorial: Cocos Creator: Giving A 2D Look For Your 3D Game

The interesting gameplay of the camera’s perspective, to achieve the same visual performance of “Don’t Starve”

We highly recommend watching the video as you read this tutorial to get a full understanding of the tutorial.

Introduction

The visual presentation of the game of Octopath Traveler and Don’t Starve is very interesting. You can clearly know that it is a 2D material, but it presents a feeling of a 3D world. This kind of 2D and 3D mixed game has appeared very early in the history of the game. , Such as Xuanyuan Fu Demon Record, Trajectory of the Sky, Legend of Wonderland, etc.

In fact, the implementation principle is not complicated. It is a production method to achieve 3D 2D material in the game world. Of course, the reverse is also possible. Therefore, as long as the game engine supports 2D and 3D rendering, the same three-dimensional effect can be achieved.

At present, this effect cannot be achieved very easily in Cocos Creator 3.x. But I found a way after some testing. I hope to be able to draw from this many ideas and discover more interesting gameplay.

The effect is as follows:

1d5a7a1c9c810845cbe413ad8f6f3c39dc85f4f3

Store address

Cocos Store Address - Chinese Only

Implementation ideas

According to the normal thinking routine, the material should be imported into the project, and then 2D sprites should be used to 3D, but this method is not feasible, to prove through this example, put a picture into the Creator project, then create a new Canvas, and drag the picture into it Canvas, we can see this sprite in 3D space. Ordinarily, this sprite should be rendered in 3D space, but unfortunately, it cannot appear in 3D space. It can only be rendered in Canvas. Let’s try it You know, directly on the canvas, perform 3D X-axis rotation, you will find that the model of the image has been transformed, but the picture of the image is still 2D

Therefore, this solution is not feasible, so it can only be solved in other ways. The most cumbersome way is to make all the 2D materials in the form of textures into various materials, and then paste them on a square grid. As I am now

56141e48671ad2f8291cdc149d2480a3d991da21

Although it can be displayed in the 3D space, you will find that this is too cumbersome. It is necessary to create materials for all the materials, and it is also troublesome to adapt and produce animations. Therefore, we will use the 2D rendering asset types supported by Creator. That is the solution of Spine, Keel, and Tiledmap, because, in my various experiments, there are only these 3 types of assets, and the transformation of each axis in 3D space can be carried out on the canvas, and the image will change accordingly, not like a Sprite image. Same, there will be no 3D space changes

9dcd388938d2b69b039191fc96da6b6a09c41ac8

That being the case, then we use keel to achieve 2D character animation and object material rendering. I used keel software and after some operations, I realized a walking animation of a villain, an asset of a tree, and about the ground, I prepared A mosaic map of the plot is directly placed in the project assets

Create project

Now in the new project, create a new scene, create a Canvas, drag a sprite on the ground, and use the tiling characteristics of the sprite to generate a map that you think is big enough. Of course, you can also use tiledmap to draw the ground. Here I will Just one node is done

Open the constraint control setting in the upper right and set the constraint to the width and height of your plot. My plot is 80. This feature is newly added in Creator 3.3. When I took inventory, I said this improvement was very useful. , This will not be used right away, because of the coordinate control constraints, it is very comfortable to place various objects on the map

98a2ead8de7c24d9316d04e7baee610086eb91e4

After the setting is completed, we add a node layer on the map, name it environment, and then plant a tree on this node. The operation of planting a tree depends on personal preference. The tree placed is the one we implemented with the keel. , In fact, Spine is also good. After planting the tree, put the villain in the environment node

0c2d9d68a3e3f0853193de9dd6ee5ec7a0039728

Please implement the walking of the character first. This script is relatively simple, but you need to implement a button monitoring, process x, y input, first implement the processing of the wasd button, and implement the logic of the character’s movement in Update, you can use You are familiar with script implementation

The walking script in my project is PlayerController.ts


// Please download the code from Store

// https://store.cocos.com/app/detail/3373

// or see follow-up posts

A Visual

Now the highlight is coming. Let’s change the camera to make the world a 3D environment. Click on the angle switch in the upper right corner to switch to 3D mode. You will see that Canvas is actually a patch grid, which is itself In the 3D space, create a new camera now, and use the Main camera to modify the past. First, turn off the Canvas camera, and let’s talk about the UI later. Rotate the X-axis of the camera by 45 degrees and adjust it to the protagonist. We can see the 3D style in the camera

At this time, try, modify the tree and the protagonist, you will see that by modifying the value of the X-axis, you can make them “stand up” in the 2D picture, and this is the secret of achieving the same effect from the Don’t Starve perspective. At this stage, In fact, you can directly place the 3D environment in the 2D screen, but there are too many objects, simply write a script EnvManager.ts.


// Please download the code from Store

// https://store.cocos.com/app/detail/3373

// or see follow-up posts

In this script, let all environment sub-objects rotate according to the orientation of the camera. By the way, the sorting of environment objects is completed. According to the painter’s algorithm, let the Y-axis sort nodes to achieve the effect of blocking the distance from near, add this script Go to the environment object node group and add a reference to the camera, and then run, you will see all the child objects in the environment group, all “stand up”,

b1eb1093ea8fdad80507c88b74662acddc02a0bc

Of course, looking at it this way, there is still no obvious effect because the camera hasn’t moved

The following is to implement the camera following and the transformation of the perspective. The following is based on the position of the protagonist. Since the camera is already in the 3D world, the set coordinates are not easy to determine. Here we adopt a control point approach, which is in the protagonist’s At the same location, there is a control node that has been synchronizing the coordinates of the protagonist, and the camera is hung on this node. This node moves and the camera also moves. To achieve world rotation, you only need to rotate it, because the camera has been In its sub-coordinate system

The script is: CameraController.ts


// Please download the code from Store

// https://store.cocos.com/app/detail/3373

// or see follow-up posts

In this component script, you need to specify a target, calculate the offset at the beginning, and then in Update, keep setting its coordinates.

Perspective rotation

In Don’t Starve, the angle of view can be rotated at a certain angle, we will implement a script that presses Q and E to rotate the camera left and right.

The CameraController.ts script listens to the KeyDown event and implements a rotation method. This method is called when QE is pressed. In order to prevent the rotation from being called again during the execution of the rotation, we use a variable to lock the judgment, and then use Tween to handle the rotation. First, take out your own angle, and then do the easing behavior of to. After success, remove the locked variable, OK! Called in the key event, they are -45 and +45, the specific code is in CameraController.ts

Since the rotation of the camera follows the control point, in the environment object management script, it is also necessary to make a modification so that the angle change follows the control point refresh

EnvManager.ts


// Please download the code from Store

// https://store.cocos.com/app/detail/3373

// or see follow-up posts

Save it back to Creator, add CameraController to the control point of the camera, and run it to see the effect.

The solution of two major defects

But so far, there are still two problems:

  • The first is to control the movement after rotation, or follow the previous 2D direction, and not adjust according to the rotation of the camera, which is very awkward

  • The second problem is that the painter’s algorithm has incorrect support for the rotated picture, and you will find that the occlusion relationship of the characters is wrong

About the relative movement of the camera

A mathematical operation is required. In the update of the protagonist’s script, the calculated inputX is multiplied by its corresponding right direction vector, and inputY is multiplied by its own Up direction vector. The resulting scalar is rotated and corresponds to the screen. The input of x and y is changed. Because the protagonist is rotating with the camera, the corresponding direction has also changed. If your protagonist is not like this, please pay attention to the calculation method, otherwise, it may be wrong.

Core code:


const right = this.node.right.clone().multiplyScalar(inputx);

const up = this.node.up.clone().multiplyScalar(inputy);

const newInputXY = right.add(up).normalize();

About the drawing order of 2.5D space

The second problem is that after the angle of view is rotated, the objects are rendered incorrectly. This is solved by distance calculation, which means that the farther away from the camera, the first to draw, so that the closer ones are ranked behind, and the occlusion relationship is correct. In the environment objects In the manager-script, we need to calculate the world coordinate distance between the object and the camera, and then calculate it in the sorting to get a new order

Core code:


let d1:Vec3 = v3(),d2:Vec3 = v3();

const worldPosition = this.camera.node.worldPosition;

this.node.children.sort((a,b)=>{

Vec3.subtract(this.d1,a.worldPosition,worldPosition);

Vec3.subtract(this.d2,b.worldPosition,worldPosition);

return this.d2.length()-this.d1.length();

})

Concluding remarks

At this point, the DEMO with the same perspective of Don’t Starve has been completed. If you want a more refined effect, you need more art resource support, and even shader, post-processing, and other cooperation. For now, the interesting gameplay of Creator is not yet available. Completely dig it out, looking forward to more developers finding interesting technical ideas

I hope this video is helpful to you. See you next time!

About the author

I’m Nowpeper, a dad in the game industry. I like to study all kinds of interesting gameplay.

Resources to study (Chinese only)

Raycast ray realizes 3D world interaction, how to realize stereo interface UI

Use RenderTexture to achieve Sprite version of the small map and cool portal

Fun formation code, the magical team arrangement surprises constantly and completely can’t stop

Three detailed tutorials about Bundle, lobby + sub-game mode from entry to advanced

Cocos3D “Virus Spread Simulator” game version 1 development log and summary

Case Development Four-Picture Guessing Words Part1~4 Complete Works Tutorial

2 Likes

Very good tutorial, thank you!
How can I download the code if I’m not from china?

Sorry, This asset is only available in Chinese and doesn’t have an English version.