hi! Hi, I’m Little Ant, and this is the third tutorial in the Elimination game series.
In the previous two articles, we first opened our “creator’s eye” and looked at the invisible grid behind the elimination game. Imagine a elimination game you’ve played, where every icon follows a grid layout. We then went on to further refine the Creator’s Eye, and in addition to the grid, we also saw some numbers, which were the identity of each icon.
Today, we continue to practice some basic skills. Yes, we need to hone our fundamentals before we can start making specific types of match-3 games. That way, when you’re actually making the game, you’ll know what’s going on.
In the section on grids, we covered some basic math, so review this picture again.
According to the midpoint, number of rows and sides of the grid, we first calculate the starting position of the lower left corner. With the starting position, you can calculate the position of each cell based on the current row and column numbers.
Using simple math, we created a grid and placed each element in its place. This is the basis of the elimination game, and with this basic layout, the next steps can be taken.
In elimination games, you usually need to select an icon and then proceed. For the player, it’s just a matter of pointing your finger at the icon that you want to select, but for the game maker, it’s a matter of doing something to make sure the player is clicking on the icon that he wants to click on.
Two coordinate systems
To understand how this works, you need to understand two different coordinate systems.
- Screen coordinate system
As shown in the figure, the blue grid area in the middle is the operation area for eliminating the game, and the green border on the periphery represents the screen area, which can be understood as the screen of your mobile phone. There is a coordinate system in the screen area, namely the screen coordinate system, starting from the lower left corner of the screen. Assume that the current screen of the device is 400 x 800. So the screen coordinate system as indicated by the red arrow is 400 on the right side of the screen, 800 on the top side of the screen.
The origin of the screen coordinate system varies from game engine to game engine. Some to the upper left for the dot, downward to the right for the positive direction; Others are centered at the center of the screen; It doesn’t matter where the origin is, it doesn’t matter where the origin is, but the calculation is a little bit different. This article uses the lower left as the starting point for an example, which needs to be adjusted for different game engines.
- Grid coordinate system
Grid coordinate system refers to the coordinate system for the entire elimination layout grid, starting from the position of the first element in the lower left corner of the entire elimination grid, as indicated by the purple arrow in the figure. Remember how we figured out the position of the first element in the lower left corner? If you forget, please review the image above with the formula or review the previous article.
Obviously for grid coordinates, the origin is not (0,0), there is no hard and fast rule, the origin of the coordinate system has to be (0,0), that needs to be clear.
Transformation of coordinate system
Now mind you, we’re going to do a little bit of math, don’t worry, it’s not that hard to understand.
As shown in the figure, the position of the starting point (green dot) in the lower left corner of the grid layout has been calculated previously, which is (x0,y0). Now suppose the player clicks on the position of the red dot (x1,y1), which is known (different game development tools provide the function of obtaining the screen click position). The position of this point is actually the position of the screen coordinate system.
Now we have two things that we know:
- The position of the screen coordinates currently clicked (x1,y1)
- The position of the starting point of the lower left corner of the grid coordinate system (x0,y0)
According to the current known conditions, the position of the current click position in the grid coordinate system can be calculated, that is, the orange line in the figure (X2,y2).
x2 = x1 – x0
y2 = y1 – y0
Here’s what we’ve done: we’ve converted the current click location from screen coordinates to grid coordinates.
Why do you want to do this coordinate transformation? Because only in grid coordinates can we translate the position coordinates into the corresponding row and column numbers to find out which icon the player is clicking on.
Calculation of row and column numbers
Then add a known condition, namely the side length n of the element, and we can get the row and column numbers of the current element in the grid through the calculation below.
Row number = y1-y0 /n + 1
The column number is x1 minus x0 divided by n plus 1
Are you confused again? Let’s look at the example shown in the figure below and then look at the formula in comparison.
For now, let’s assume that the starting position in the lower left corner is (50,200), then the screen position that the player is currently clicking on is (100,250), and each element currently has a side length of 50. Substitute these known values into the formula for calculating row and column numbers:
Row number = (250-200)/50 + 1 = 2
Column number = (100-50)/50 + 1 = 2
As you can see, the icon in row 2, column 2 is currently clicked.
According to this example, a review of the above calculation of column and column number formula, it is not easy to understand it!
Fault-tolerant processing
The numerical examples given here are handy because the main purpose is to help you understand the formulas. In real games, it’s not always possible to get divisible numbers just right, but it’s obvious that our column and column numbers have to be integers at the end.
As shown in the figure, any position of a red dot is a player may click on the location of some of the red dot position did not even sits above the icon for the player the click should be effective, because I just want some row 2 column 2 of the icon, and my fingers may not be very accurate, but I don’t care, my point is that, If the icon is not selected, it is not my fault, it must be the game’s fault.
Again, we as game creators need to do something to allow for a certain amount of error in what the player is doing, and we need to do our best to make sure that where the player is currently clicking is the icon that he wants to select. Sounds a bit esoteric, right? How do you ensure a certain tolerance? How do you determine which icon the player wants to select?
The answer is to use “rounding”. Another example of how something that feels so mysterious until you know the truth turns out to be just that when it’s cracked.
We modify the formula for counting rows and columns with rounding, and it looks like this:
Line number = round ((y1-y0)/n + 1)
Column number = round ((x1 – x0)/n + 1)
Here also cited some position coordinates, take out the calculator into the top calculation formula, calculate it! Let’s see if we can round it off, and we get a 2.
Did you never think that rounding you learned could have such an application in games? Can actually be used to improve the player experience and increase the error tolerance of the game.
With this small improvement, our game becomes a little more “human”, as if to say: it doesn’t matter if your eyes are good or your finger clicks are accurate or not, just click on it, I know what you want to click on.
Element identification
So far, we’ve been able to figure out the “row number” and “column number” of the element that the player is currently clicking on through a series of calculations based on where the player is clicking on the screen, and from the row number we can find the corresponding element in the layout grid. We can call this row and column number an element identifier. What does an identifier do? When you have many elements, the best way to find them accurately is to assign each element a unique identifier (like our id number). When you want to find an element, you only need to know its identifier to find it accurately.
This is what it looks like when we use row and column numbers to identify elements. Each element has a unique row number, and we can find the identified element by this row number.
Using a column number as an identifier requires two numbers (the row number and the column number). Another way to do this is to calculate a numeric index from the column number so that an element can be identified using a single number.
The numerical index is calculated as follows:
Index = (row number -1) * Total number of columns + column number
Let’s say I have three rows and three columns, and the current element is in row two, column one, so
Index = (2-1) * 3 + 1 = 4
In turn, we can deduce row and column numbers backwards from this numeric index:
Row number = rounded up (index/total number of columns)
Column number = index – (row number -1) * Total number of columns
If there are 3 rows and 3 columns and the numeric index of the current element is 8, then:
Row number = round up (8/3) = 3
Column number = 8 – (3-1) * 3 = 2
I get its position in row 3, column 2.
Now, with these two extrapolations of column and column numbers and numeric indexes above, we can actually do one thing, which is convert a two-dimensional array or table into a one-dimensional array or list.
You can implement a elimination game using a one-dimensional array or list if you want, because it’s really just a “squashed” table. Of course you don’t have to do this unless you’re using a game development tool or programming language that doesn’t support two-dimensional arrays or tables. Otherwise, you should prefer more intuitive tables or arrays. The point of this example is that even in a constrained development environment, you can still find other solutions, but there are plenty of options if you are smart and flexible with what you already have.
Welcome to pay attention to the public account “little Ant teach you to make games”, learn more about the game development of the original tutorial.
Vx: Xmy-Xiaomayi
If the content of this article is helpful to you, please feel free to like and share. Your encouragement means a lot to me. Thank you!