[applet] come and develop your first wechat game (detailed process)

🥳 author ： Bozinan
Firmly believe that ： Better to scribble than to remember , It is much joyful to share the joy than enjoy alone.
Personal home page ：https://blog.csdn.net/qq_34577234?spm=1010.2135.3001.5421
If you think the blogger's article is good , Please support the third company ！ If you need my support , Please send me a private message ！

This paper develops a simple game , To lead you to practice the basic process of developing small games

1️⃣ Registered account

First, you need to register a small game account , Copy open right link ‍*️ [https://mp.weixin.qq.com/wxopen/waregister?action=step1]

️ Fill in the basic information

Verify email

• Click on Login mailbox Button to open mailbox
  
• Check the unread email with the title 《 Wechat applet account activation 》 The mail , Click the verification link to activate the account
  

Information registration

• Small game development needs legal compliance , Therefore, information registration is required .
  
  - Fill in the relevant information and click continue Prompt success . Click on Go to applet Button
  

🦴 Set the basic information of small games

The development of small games has a prescribed release process , It needs to be operated according to the process .

️ Fill in the basic information of the small game

• First fill in the basic information of the applet
  
• Fill in the small game name 、 Avatar and introduction （ Introduction requires compliance , No illegal words ）
  Fill it out and click Submit
  

Set small game category information

Then set the category of small games ：

• Add categories and Choose the game -> Casual games
  
• In this way, the first step of the release process of our small game is done ！

The next step is to develop ！ We choose to develop by ourselves

🧶 Download and install IDE

Don't worry yet , The so-called sharpening a knife does not miss the woodcutter .

To help developers develop and debug simply and efficiently ,
Wechat applet wechat official is based on the original official account web page debugging tool ,
A brand new WeChat developer tools ,
It integrates two modes of official account web debugging and small program debugging. .

• First of all, we need Download and install wechat developer tools
  [https://developers.weixin.qq.com/minigame/dev/devtools/download.html]
  Developer tools are divided into small program version and small game version , here It is recommended to download the small game version .（ There is a problem with the development of small games in the applet version ）
  
• After downloading and installing, wechat scan QR code to log in
• After landing , The interface is as follows ：
  

‍*️ New projects

After downloading and installing the developer tools , Open and create a new project .

• Select the small game and select the first blank item .
  

️ Fill in the basic information of the project

• among AppID succeed in inviting sb. Applet management page , View, copy and fill in the above
  

First time to know IDE Interface

After creating the blank item , You can see IDE Scenario as follows ：
At present, we are most concerned with the three marked in the red box , Namely ：1. Scene resource directory ; 2. Scene view ; 3. Project directory

The newly opened project creates a 3D scene （Scene）

For the scene view , We can :
1. Use the left mouse button Conduct Drag to see ,
2. Using the mouse wheel Conduct Zoom in and out

️ Create a cube

• In the scene resource directory , choice Main Camera, The right choice - establish 3D node ->Mesh->Cube.
  

• So we create a cube in the scene （ If you can't see it, try zooming out with the mouse wheel in the scene view ）
  

• In the scene resource directory choice Cube resources Cube_2 and double-click , It can be on the right Inspector window notice Cube_2 Specific information .

• The parameters here can be edited on demand , In order to see the cube in the subsequent demonstration , We Edit the parameters on the right position.z=5.
  

Save the scene

• then ctrl+s Save this scene first
  
• You can see that a new scene File format , double-click demo.scene file , You can reopen the scene view .
  

Add some scripts to make the cube move

Small game framework is recommended TypeScript To write small game logic .

New script

• We add a script file in the project directory ：
  
• Name and select the file , You can see on the right Inspector window Shows the script contents
  

Binding scripts

• Right click and drag the script demo.ts To cube Cube_2, You can bind the script
  
• double-click Cube_2, You can see the binding script information on the right
  

Edit script

• Select the just created demo.ts, The right choice Built in editor open
  
• This is more convenient for our editors
  
  You can see that the script has three main methods onAwake,onUpdate,onDestroy
• We modify the onUpdate The method is as follows , and ctrl+s preservation

public onUpdate(dt) {
    
  this.entity.transform.rotate(engine.Vector3.createFromNumber(15*dt, 30* dt, 45 * dt), true, false)
}

• Then close the editor , And switch to the previous window , double-click demo.js, You can view the modified script in the right window
  At this time, we need to ctrl+s preservation
  
• If... Is not shown on the right , You can turn it off first Inspector label , Then reopen （ Do the following ）, It feels like a bug
  
  
  

Preview effect

• There is a Play button , After clicking, the tool starts to initialize the small game container , When finished, you can preview
  
• At this time, you can see the cube moving ！！！
  
• Click on Stop button You can stop previewing , Return to the editing state

Compiling and constructing

After returning to the editing status , Let's start editing and building

• as follows , choice Construction Engineering open Build window
  
• stay Build window , Click on Selection task
  
• then Check The game we are editing engineering , And click the Begin to build
  
• Fill in the basic build information , And click OK
  
• For all pop-up information after confirmation , Click ok . The process is time consuming , Please be patient
• At the end of the day Building a successful
  
• You can choose to click Local debugging , View in your local browser
  
  

Real machine debugging

• stay Building panels in , Yes Real machine debugging Button
  
• Click to load Preview QR code
  

Please use wechat client to scan and open

• First of all, you will see the familiar small game interface on the mobile phone
  
• also PC The real machine debugging window will pop up at the end （ Much like browser developers youmu ）
  
• After loading the mobile terminal , You can see it ！
  

Come with me ？

  * Here we have finished our first little game ！！！ Is it simple ！*
  * Recently, I am learning how to develop small games , Next, I will continue to study and spend the first time in CSDN Update blog .*
   If you are also interested in small game development , Pay attention to me , Follow the blogger's Small game development column , Experience the fun of small game development together ！！！

Learning content plan ：

• Small game development application process
• Small game development environment construction and tool use
• Principle and foundation of small game development
• Small games are often used API
• Small game development practice