hi! Hi, I’m Ant, and this is the first in a series of elimination games tutorials.

Take a look at the list of various elimination games above. They all have one thing in common: they are arranged in columns, 7 rows, 7 columns, 10 rows, 10 columns. Does this row layout look particularly like a “grid”? This is what we’re talking about today, the invisible “grid” behind all elimination games.

Strictly speaking, there are a class of elimination games that are completely physics-based, such as the recently popular Synthesis watermelon. These elimination games don’t need a “grid” behind them, because their positions are set based on the physics in the game.

The grid layout is a starting point for eliminating the game. At the very least, you need to set up the layout of the game before the game starts, and then all actions will be based on that layout.

Let’s say we want to make a elimination game with a layout of six rows and six columns, and this 6×6 grid at the top is the invisible “net” behind it. To achieve such a layout, where should we start? First, we need to learn some simple math.

As shown, we added a coordinate system to the grid, the horizontal x axis, and the vertical y axis. The midpoint of the axis (0,0) is exactly the center of the grid. Up to now, we have some information, we imagine a game grid layout (imagined, of course, because you haven’t done?), and then set up a coordinate system for the grid, then, we need to do is will all of the elements according to the grid one by one to the top.

An element refers to the elimination of an icon in the game, and in this series of tutorials we will refer to the elimination of actionable ICONS in the game as elements.

Usually, the size of the element is known in advance, for example, the size of the game icon you want to eliminate is 100×100. Before we proceed to the next calculation, let’s review what we already know.

The size of the element is 100×100, and usually the ICONS in elimination games are square, so here we only need to record an element with a side length of 100

Line number six lines

The number of columns six columns

Ok, now we will use these three known data points to calculate the position of the starting point in the lower left corner of the grid.

As shown in the figure, according to three known conditions, we can calculate the position of the midpoint of the first cell in the lower left corner of the grid.

X0 is equal to 0 minus number of columns over 2 times side length plus side length over 2

Y0 is 0 minus number of rows over 2 times side length plus side length over 2

The calculation formula can be compared with the figure above to see, should be able to understand, or do not understand the words, it is necessary for you to fill the junior high school mathematics knowledge.

Here why do we choose the position of the first grid in the lower left corner as the starting position? Because we’re going to position each element from left to right, from bottom to top, line by line, until all the elements are in the right place.

You can also choose the top left corner as the starting point and go from top to bottom, or you can choose the bottom right corner as the starting point and go from right to left, depending on your personal preference, but the bottom left corner is the starting point because it fits the way we look at things.

That’s one more thing we know so far.

The sides of the element are 100

Line number six lines

The number of columns six columns

Grid starting position (X0,y0)

With this information, we can actually do something even more powerful, which is we can calculate the position of any given row and column number in the grid.

As shown in the figure, the grid is marked with row and column numbers, and the green dot represents the position of any cell in the grid (we can mark the position of any cell in the grid by row and column numbers). According to the known conditions, we can obtain the formula for calculating the position of any lattice.

Xn is equal to x0 plus column number minus 1 times side length

Yn is y0 plus row number minus 1 times the length of the side

Now that all the prerequisites are in place, the next step is to place all the elements in the desired grid layout, depending on the programming language or game engine you’re using.

-> Calculate the start point position x0,y0 -> loop (row number) times -> loop (column number) times -> Create element -> Set the element position xn,yn -> column loop end -> row loop endCopy the code

This is a description of the implementation process. According to the preconditions we know and derive above, only two loops are needed to create and set elements line by line.

What? Still want concrete code implementation? You’re not so lazy as to want someone else to give you a kick, are you? Believe me, if you still want to learn something, do it yourself. Copying and pasting is a machine’s job.

Finally, let’s take a look at the process of creating elements.

* I deliberately inserted a bit of time between each element creation so that I could see the creation process line by line, left to right, and bottom to top as shown in the figure.

The grid layout is a starting point for eliminating the game, and with that starting point we can go on to do even more amazing things.

As a game developer, you should have an eye that can see through the surface of the game and see the web behind the elimination of the game that the player can’t see. Looking back at the top picture of the various types of elimination games, do you see the “grid” behind each of them?

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!