Cocos creator 3D | thumb shooting | 3D project entry practice

Time:2020-1-21

What’s your hit rate? Try it at the bottom of the article!

Cocos creator 3D | thumb shooting | 3D project entry practice

Effect preview

Cocos creator 3D | thumb shooting | 3D project entry practice

Configuration environment:

Cocos Creator 3D v1.0.1

How to play:

Touch the screen, slide up and shoot! Notice that rebounds move! See what your hit rate is!

Realization principle

In order to achieve a good shooting effect, we found a shooting machine parameters on the Internet, roughly set the basket size, the size of the ball, and the position of the basket according to the actual parameters.

Cocos creator 3D | thumb shooting | 3D project entry practice

Collider:

Rebounds directly use box collider component, while basketball uses sphere collider component.

Cocos creator 3D | thumb shooting | 3D project entry practice

Cocos creator 3D | thumb shooting | 3D project entry practice

Because there is no ring collider component, there are many ball collider components for the basketball frame to achieve collision detection.

Cocos creator 3D | thumb shooting | 3D project entry practice

Ball trajectory:

Due to the complete use of physical engine calculation, to make the trajectory of the ball as we expected, we have to follow the physical principles. The knowledge needed here is the relationship between displacement and acceleration, speed and time.

Cocos creator 3D | thumb shooting | 3D project entry practice

We can consider it in three directions, and we need to calculate the initial velocities v_zand v_y. In the z-axis direction, it can be regarded as a uniform motion, and in the y-axis direction, it is a uniform acceleration motion. We have set the displacement of Z-axis and y-axis. We only need to set the throwing time t to calculate the initial velocity. Note that the end velocity of Y axis should be opposite to the initial velocity to achieve the parabola effect in the figure. The reference calculation is as follows:

const CONST_H = 1.25;
const CONST_S = 2.3;
const CONST_G = -10;
const CONST_T = 0.8;
const CONST_V_Z = CONST_S / CONST_T;
const CONST_V_Y = CONST_H / CONST_T - CONST_G * CONST_T / 2;

The initial speed v ﹤ x can be obtained by multiplying the difference between the position x at the beginning of the touch and the position x at the end of the touch by a coefficient.

Goal judgment:

I added a collider detection under the basketball box. The switch of collider is controlled by grouping and mask. Before launching, turn on collision detection. When throwing, turn off collision detection and let the ball fall down.

Cocos creator 3D | thumb shooting | 3D project entry practice

Collision detection is performed as long as the following conditions are true.

(GroupA & MaskB) && (GroupB & MaskA)

After testing, it is found that the default mask is – 1 (that is, each bit is 1), and the default group is 1. So as long as maskb is set to 2 (that is, only the second bit is 1, and the rest is 0), the impactor switch can be controlled by controlling the second bit of GroupA. The reference code is as follows:

const PHY_GROUP = {
    Group1: 1 << 1
}

//Set up the basket collider mask
this.colliderComponent_goal.setMask(PHY_GROUP.Group1)

//Turn on collision and set the ball's group
this.colliderComponent_basketball.addGroup(PHY_GROUP.Group1)

//Turn off collision and set the ball's group
this.colliderComponent_basketball.removeGroup(PHY_GROUP.Group1)

Summary

The trajectory of the ball through the analysis of basic physical knowledge to get the initial speed! The score judgment uses the collider detection, and controls its detection switch to let the ball continue to move. If you have better methods or ideas, welcome to share!

The above is the main technical sharing of the project of “thumb shooting” developed by white jade ice free using cocos creator 3D. Welcome to pay attention to the company of white jade ice free. The complete code can be obtained by replying to [thumb shooting] within the company number.


This article uses the picture material to come from the network! The copyright belongs to the original author. If there is any infringement, please contact!

Online trial
Source code acquisition

Recommended Today

Summary: NPM common commands and operations

The full name of NPM is (node package manager), which is a package management and distribution tool installed with nodejs. It is very convenient for JavaScript developersDownload, install, upload and manage installed packages。 First of all, the following variables will be used: < name > | < PKG > module name < version > version […]