This is the “micro channel small game development actual combat” series of the fourth, this series we will start from 0, make a 1010 game.

If you don’t have any experience in game development, you can read my “Anyone Can Make Games” series, which will guide you hand in hand to make your first wechat game.

The small game development tool used in the tutorial is wechat official small game production tool: wechat small game production tool

In the “Fine 1010” game, we need to drag and drop the bottom graphics onto the top grid, like below.

As shown in the figure below, when the finger clicks on the graph below, the graph will enter a draggable state. It should be able to follow the finger across the screen, and when the finger is released, it should be placed in a new position.

First, let’s get familiar with an important building block.

The “When a Sprite is xx” block handles all events related to Sprite clicks in the game. Click the drop-down to see that you can receive five events.

  • Click: press and then release, called a click, that is to say, click operation actually contains “press” and “release” two processes.

  • Press down: The moment your finger touches the Sprite on the screen, it is a press down and only triggers once.

  • Release: The moment the finger leaves the Sprite on the screen is a release and only triggers once.

  • Press and hold: The finger is triggered when pressing the Sprite on the screen. This will trigger continuously. For example, in a shooter game, press and hold the shoot button and fire bullets repeatedly, which can be handled in the press and hold event.

  • Double click: contains the process of two clicks.

Here, we use “press” and “release” two events together to achieve the drag function of the graph.

As shown in the picture, four squares are used to assemble a figure and put it in a container. We put the drag logic on the container.

Select “container-1” and add a local variable “dragable” to it to determine whether the current graph is in a dragable state. If the value is 1, the graph will follow the finger to move. If the value is 0, it will not move.

Then add the following blocks. The logic is simple: you can drag when the finger is pressed down, but you can’t drag when the finger is released.

Finally, add a block that controls the movement of the graphics.

The logic of this block is to set its position to the position of the finger when the figure is in the “draggable” state.

Click “Preview scene” to see the effect.

In this way, we have implemented a drag and drop function for the graph.

The current drag-and-drop problem is that when you tap the screen with your finger, the graphics are in the position of your finger, so part of the graphics can be blocked by your finger. We want the shape to be above the finger, so that it is not blocked by the finger and it is easier to see where the shape will be placed.

Change the position of the graphic so that it appears above your finger.

Preview the scene again to see what it looks like.

As you can see in the GIF, when you click on the graph, the graph has an upward offset.

Finally, take a look at all the logic.

Set the draggable state of the graph through the Sprite’s “Press” and “Release” events. Use a monitor block to monitor the value of the variable “dragable” and, if it is 1, to set the position of the graph.

To sum up:

In this section we looked at several events related to Sprite clicks, and used a combination of “press” and “release” events to implement drag-and-drop graphics.

Practice:

In a game, when a shape is pressed, we want it to be enlarged and highlighted to indicate that the shape is currently selected. When you release the figure, it should shrink to its original size and unhighlight it. Try implementing one of these.

If you are interested in game development and want to know more original content and tutorials related to game development, please follow my official account: Little Ant Game Development.

If you think the article is good, please click a “like” to give me some motivation, thanks ~