This is the 19th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021″

Install the Cocos CREATOR

After the new download, the plug-in needs to be installed in the Editor (I initially installed the latest version, but after the new project, there is no Canvas, only Scence. Not quite the same as some of the examples on the website. The 2.x version is recommended.)

New project

In version 2.4.4, there are six templates to choose from. Choose Hello World to get started. After selecting the template, enter the project name and location for the project. 3D/2D The Canvas Canvas

  • Canvas:Node + cc.Canvas component (Design resolution + adaptation strategy)
  • MainCamera:Node+cc.Camera is used to take pictures

assetsResource files, set up different levels depending on your needs

The browser console can perform performance analysis of our game from the console

Click the stop after

You can see how long each section takes

Start my project

There are seven steps

1.Create a project2.Create a game scene3.Make a game stick4.Build the physics map and start the physics engine5.The rocker controls tank movement6.Game map scrolling7.Pack and release micro channel gamesCopy the code

Our project has been built and the folder has been built. Let’s create a game scenario:

Create a game scene

Place the required image files in the folder

If you don’t copy it in Cocos Creator, paste it in the folder.

Generating map Nodes

Drag the image to the Canvas to generate a map node. You can then change its Size by Size and change its Position by Position, where [0,0] is the center of the axis

If the background image is small, then the resulting size is large. It also has a csS-like no-repeat property: select the Type property under Sprite as TILED

Join the tank

Drag the tank under the Canvas as well

Join the analog stick

We create a new node (right-click Canvas New) to hold the outer ring of the joystick and the inner buttons.

  • After clicking Joystick, drag the green Y-axis up and down to move it up and down. Similarly, the red x axis moves left and right.

  • Since Joystick is in the lower left corner, we can click on Joystick and add the UI component

->Widget component to control its position.