In this section we will familiarize ourselves with the game’s production tools, which will be the basis for all subsequent tutorials.

Wechat mini game production tool official website: gamemaker.weixin.qq.com/

Open the official website, click “Experience now” on the page, and use wechat to scan the QR code to log in.

After registering, go to the home page of the tool and click “New Work” in the upper right corner.

Select “Empty Project” and click New.

An empty project is created. Let’s focus on the components of a development tool.

Note: The new version of the development tool has changed the location of the ASSET environment management area and the hierarchy management area

1- Scene scenic spot: All scenes in the game will be listed here. Click on the corresponding scene directly to select the scene. Remember in the last section we compared the scene to a room in a house? A complex game may have many scenes, and a simple game sometimes only needs one scene.

2- Resource Management area: This lists all the resources used in the game, including images, sounds, and functions (functions are also considered resources here).

3- Hierarchy management area: all sprites in the current scene are displayed here. The hierarchy of the picture can be adjusted by adjusting the position of the Sprite picture. There will be a separate section behind the Sprite and hierarchy to explain.

4- Edit area: here you can select different objects in the game, adjust position, zoom, rotate and so on, all the operations are WYSIWYG, that is, in the edit area, what is displayed in the final game.

5- Building Block area: Building blocks are carried out here, that is, writing the script logic of the game. All operations related to the game logic are carried out in this area.

6- Attribute area: Each resource has its own attribute, such as image resource has position, size, rotation, transparency and other attributes. Different types of resources have different attributes.

7- Data area: All data used in the game is displayed here. For example, the player’s score in the game, health, etc.

8- Functional area: includes project Settings, plug-in additions and preview scenes, etc. Currently, we only focus on preview scenes.

Next, starting with a classic example of “Hello world”, we will add a background of space and then add a line of text “Hello mini-game” to the background.

In the Layer Management area of Scene 1, click background, then select Edit Background in the properties area on the right.

In the style editing window that pops up, click the “Replace Background” button.

Select the starry sky as the background of the colorful airplane battle footage in the stock library.

Click “Finish” to see if the background in the edit area has been changed to a starry sky.

Next, we add the text by clicking the “Add Stories” button in Explorer.

Select the “Building block Y” in the material library, then select the “Basic Text” resource and click Import.

Once the base text is imported, it changes in four areas.

  • Added “Basic text” resources to resource Management area.

  • Added a “basic text” level to the “Hierarchy Management Area”.

  • Default Text appears in the Edit area.

  • The properties for the current text appear in the Properties area.

The default color of the text is black and a little small, so we adjusted the text properties in the properties area to make it look better.

We adjusted the text size, display color, and content. Then adjust the display position of the text in the “Edit area”.

Finally, click the “Preview scene” button in the ribbon.

You can see the game in action.

Click the “Preview & Share” button in the “function area” and scan the QR code on the pop-up dialog box with wechat to preview the game on your phone.

That’s it for this section, to summarize:

We familiarized ourselves with the tools for making mini-games, learned about the different areas of the development tools and their functions, and made our first “Hello mini-games” example.

You can play around with the tool, add images or sound effects to the scene, click on different resources, view the properties of different resources, and the more you know about the tool, the more comfortable it will be.

If you are interested in micro channel game development, welcome to pay attention to my micro channel public number: small ant game development. Learn more about game development.