This is the “micro channel small game development actual combat” series of the sixth, 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 fourth section, we realized the function of dragging and dropping the graph, and the dragged graph needs to be placed on the corresponding position of the grid eventually.
Let’s talk about the implementation idea:
Compare the position of the graph with that of the entire grid, using the position in the lower left corner of the drag graph as the position of the graph. If the position of the graph matches the position of the current cell, it starts filling from the current cell based on the data of the graph until the entire graph is filled.
Look not to understand? it doesn’t matter And then I’m going to disassemble and analyze it step by step.
Calculate the position of the lower left corner of the drag graph as the comparison position of the graph
As shown in the figure, the shape to be dragged is a “tian-shaped” shape composed of four squares. Each square has a side length of 60 and the space between the two squares is 2. The red dot on the lower left is the position of the graph we will calculate. Assuming that the midpoint position of the current graph (i.e. the center of the coordinate axis) is (x, y), the position of the red point can be calculated to be (x-31, y-31) based on the length and spacing of the sides of the square.
Add four squares with sides of 60 to the scene, select all squares at the same time, right click, and choose “Select layer to form container”. Put them under a container.
As shown, four squares are placed in “container -1”. The center of the coordinate axis is the coordinate position of container -1.
In the game, each graph is composed of multiple squares, and we will use containers to pack these squares and use them as graphics. The coordinates of the four squares in the container look like this.
Why use the lower-left position as a graphic position to compare to the grid position?
Reason 1: It is easy to determine the position of the graph.
Suppose we now use the central position of the graph as the alignment position.
As shown, the center of the graph is located in the grid of row 2 and column 2, but where should the field shape be placed? It’s not intuitive, it’s not easy to judge.
Now we use the lower left position of the graph as the comparison position.
The blue dot on the lower left is currently located in the first row, first column, and it is easy to see that the current shape is intended to be placed in the four lower left cells, as shown below.
The final comparison position calculation can be “rounded” to allow for a certain amount of position offset and error, that is, as long as the position is similar, the figure should be placed.
Reason 2: to facilitate the drawing of the graph, we will always start from the lower left corner of the graph to draw the entire graph. This will be explained later.
The graph position is compared to the grid position
Assume that the current “field” shape is in the middle of the grid.
In the Drawing grid section, we talked about how to calculate the starting position of the bottom left corner of the grid. Based on the current position of the graph (blue dot), the starting position of the grid (red dot) and the side length of the cell, we can calculate the row and column numbers of the point (blue dot) at the lower left of the current graph in the grid. The current blue dot is in the 5th row, 5th column grid, where we will start to draw the entire field graph.
Graph point (x, y), grid starting point (A, B), cell edge length N
Row number is equal to y minus b over n plus 1
The column number is equal to x minus a over n plus 1
Once you have the row and column numbers, you can proceed to the next step of populating.
Fill the grid with graphics
Implementation idea: to obtain the current graph in the grid position, that is, we step on the operation. Starting from the current position, the cells in the grid are successively filled based on the data of the graph.
Still hard to understand? That’s all right. Keep watching.
In the first video, we said that a computer can only understand data, and that what we see, if we want a computer to understand it, needs to be mapped to data, like the following. The first “field” shape is actually made up of two rows and two columns of 1s.
Now let’s set the data for the “field character” graph. Select container-1 and add a local variable table data to it. Name it Shape Data.
Add two rows and two columns of data to the table, both set to 1. (The figure is made up of four squares, so all four values are 1)
Next, add some variables to “container-1” that will be used later when the logic is implemented.
Local variables of “container-1” :
Held down: Whether the current graph is held down for dragging of the graph.
Grid position X/Y: Records which row and column the current graph is in the entire grid.
Row number/column number: used for traversal of table data for field figures.
Starting offset X/Y: Used to calculate the position of the point in the lower left corner of the graph.
Global variables:
Global – Column number/row number: Used to record the row and column number of the square to be filled.
Global – Single cell side length: The side length of each square cell.
Global – Total number of rows/columns: how many rows and columns in the grid.
Global – Starting X/Y coordinates: the starting position of the lower left corner of the entire grid.
You may have noticed that I added the prefix “global -” to all global variables, so that you can easily distinguish global variables from local variables when selecting variables in blocks. This is a good habit to use, especially if there are many variables. Next, we first add a “fill box” to the scene to fill on the grid.
As shown, a fill box has been added to the scene and set to green to distinguish it from the red drag shape.
Add the following block logic to it.
The logic is not complicated. When you are cloned, you will set yourself to the corresponding position in the grid.
Next, select “container-1” and add the following block logic to it:
The focus is on the two-part logic that computes the position of the graph in the grid when it is dragged. When the hand is released, starting from the current position, the data of the current graph is traversed and the corresponding position on the grid is filled with squares.
Click “Preview scene” to see the effect.
When a drag-and-drop figure is placed on the grid, it fills the figure in its place. Observe that even if the position of the drag is slightly different from that of the grid, it will fill in at the correct position. This makes for a better game experience: your fingers aren’t very precise, but that’s ok, I know you want to put them there.
To summarize
In this section we learned how to fill a grid with drag shapes, including the implementation ideas and how to do it. Although it involves a lot of calculations, these calculations are not complicated and are easier to understand if you draw them on a piece of paper.
practice
In the “1010” game, there are many other shapes besides the “field” shape made up of four squares. Try to achieve an “L” shape made up of three squares and fill it in the grid.
This section is probably the most difficult tutorial I’ve ever written, and while I try to make it as simple as possible, some of the calculations and ideas are hard to explain in the most straightforward way. If you find it difficult to read, you can read it several times, match the picture and try to achieve it yourself. If you have any questions, please leave a message to me and I will try my best to help you.
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 ~