How to Build Your Own Tetris 101

8/13/2019 How to Build Your Own Tetris 101

1/26

How to Build Your Own

Tetris 101

Presented by:Luke Arntson

E-mail: [email protected]

Fall Quarter 05
mailto:[email protected]:[email protected]


2/26

What Makes a Good Tetris?

Emulates the real thing

Feels like a solid game

Visually appealing

Sound effects are high quality

Controls are responsive

Tetris the Grand Master Capcom\Arika


3/26

Simple Design Concepts

Puzzle Games

Timed Puzzle Games Action Puzzle Games Etc

Tetris Plus 2 Jaleco Super Puzzle Fighter II Turbo Capcom


4/26

Tetris Design Concepts

Move and rotate Tetris pieces

Make lines of blocks to remove a line

Score higher points with more lines removed atonce (four lines is called scoring a Tetris)

Game gets faster as the levels gets higher

The only goal is to get the highest score


5/26

Lets Talk Programming

What do we need for Tetris?

-> Puzzle Block Data Structures

-> Puzzle Block Rotation Algorithm-> Way to Represent the Playing Field

-> Ways to Find Collisions in the PF

-> Easy Game Physics (timers, etc.)-> Smooth Movement & Dropping

-> Levels, Lines and Hi-Scores Oh My


6/26

What is That Puzzle Block Made of??

How Can We Define Our Block?-Each shape has 4 blocks, defined in some way-

Examples:

philhasseyFTetris @ http://www.imitationpickles.org/ftetris/Code:1. Box shape

2. Z shape

3. T shape

my Tetris example-Numbers represent distance from top left corner -

-Numbers are also in order: Left, Top, Right, and Bottom Block-

Code:

1. Box shape 1. [(0,1), (0,0), (1,0), (1,1)]

2. Z shape 2. [(0,0), (1,0), (2,1), (1,1)]

3. T shape 3. [(0,0), (1,0), (2,0), (1,1)]

2. [(0,0,0,0),(1,1,0,0),(0,1,1,0),(0,0,0,0),]

1. [(0,0,0,0),(0,1,1,0),(0,1,1,0),(0,0,0,0),]

3. [(0,0,0,0),(1,1,1,0),(0,1,0,0),(0,0,0,0),]


7/26

X 0 1 2 3Y

0

1

2

3

[(0,0,0,0),(1,1,1,0),(0,1,0,0),(0,0,0,0),]

Ok, Lets Examine Example 1 AgainI personally am a visual person, and I know as a visual person there is no way to

get code like that unless we visualize what is going on.

Let us pretend we are building a Tetris piece, and it has four blocks to play with

Each block is represented as a 1 or a 0 in a 4x4 array

We can now observe the array and watch how the 1s and 0s fill the grid


8/26

Ok, Lets Examine Example 2 AgainNow to examine the code I wrote, which is much more confusing, but can reduce

massive array listing to easy to manage coordinates.

Let us pretend we are building a Tetris piece, and it has four blocks to play with

Each block has (x,y) coordinates on a 4x4 grid

X 0 1 2 3Y

0

1

2

3

We can now match the coordinates given with the code: [(0,0), (1,0), (2,0), (1,1)]

(0,0)

(1,0)

(2,0)

(1,1)


9/26

Now That We Understand Our Pieces,How Do We Go About Rotating Them?

Lets step back to see how the pros do it. Ill take theclassic example of Tetris Atari Games.


10/26

How Do We Represent Rotations?

First, what is a set of rotations?A set of rotations can be defined as a list of pieces. So using

(X,Y) coordinates, we can define the following:

Z Piece1st.(0,0), (1,0), (2,1), (1,1) 2nd.(0,1), (1,0), (1,1), (0,2)

T Shape Piece1st.(0,0), (1,0), (2,0), (1,1) 2nd.(0,1), (1,0), (1,1), (1,2)

3rd.(0,1), (1,0), (2,1), (1,1) 4th.(0,1), (0,0), (1,1), (0,2)

7 Shape Piece1st.(0,0), (1,0), (1,1), (1,2) 2nd.(0,1), (2,0), (2,1), (1,1)

3rd.(0,1), (0,0), (1,2), (0,2) 4th.(0,0), (1,0), (2,0), (0,1)


11/26

So How Do We Add This In-Game?

Well one way of doing it is to keep track of the state of the current piece. ForExample, if you had a T shaped piece, it can rotate four times. So a rotationinvolves increasing and decreasing your current state.

So we have two functions, one for rotation clockwise, and one for counter-

clockwise. Lets make these simple and call them moveLeft and moveRight.

rotateLeft

cycle from highest state to lowest state. Set to highest state if lowest statereached.

rotateRight

cycle from lowest state to highest state. Set to lowest state if highest statereached.


12/26

Optimizing the Rotation

The first road to optimization is laying out our pieces and their numberof states.

Horizontal Bar Piece - 2 States

Box Piece - 1 State

T Shaped Piece - 4 States

Z & S Shaped Pieces - 2 StatesF & 7 Shaped Pieces - 4 States

Ok, now we know that our Box Piece has one state, our Horizontal Bar,Z and S shaped pieces have two states, and our T, F & 7 shapedpieces have four states. So lets rewrite our list of states.

1 state - Box shaped piece.

2 states - Horizontal Bar, Z, and S shaped pieces.

4 states - T, F, and 7 shaped pieces.


13/26

Now We Can Finally Write Our FunctionsrotateLeft

if (piece == horizontalbar or Z or S shape)

if ( state > 1 )

state -= 1;

else

state = 2;

if (piece == T or 7 or F shape)

if ( state > 1 )

state -= 1;else

state = 4;

rotateRightif (piece == horizontalbar or Z or S shape)

if ( state < 2 )

state += 1;

else

state = 1;

if (piece == T or 7 or F shape)

if ( state < 4 )

state += 1;

else

state = 1;


14/26

Creating the Playing Field

Using Tetris the Grand Master Arika/Capcom as an example, we seethat our Tetris field can be broken into a 10x20 grid. This grid thencan be represented as a 2D array and used to display our game.

While a game piece is on the field, it is taking up four elements in the2D array (four blocks to a piece.)

The values of the 2D array can also be used to determine what is inthe playing field, so essentially you can add a piece to the grid by

manipulating the 2D array.

Same goes for subtraction, if you want to subtract a line from thegrid when its filled, you can simply check the row and remove the row.(more about this later.)


15/26

Visual Demonstration of Our Grid Again, I am a visual person, so Im going to give a visual representation of a

given Tetris grid.

Given the following screenshot, well visually represent what is in the grid with1s for blocks, and 0s for empty spaces.

20x10 Grid

0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 00 0 0 0 1 1 0 0 0 00 0 0 0 1 1 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 01 1 0 0 0 0 0 0 0 01 1 0 0 0 0 1 0 0 01 1 0 1 0 1 1 0 1 01 1 1 1 1 1 1 0 1 01 1 1 1 1 1 1 1 1 0

1 1 1 1 1 1 0 1 1 0


16/26

Color RepresentationOk, now that we understand how our grid

works, lets redo it with the following legend.Legend

1 = Red 2 = Yellow 3 = Turquoise 4 = Purple 5 = Green 6 = Blue 7 = Orange0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 2 2 0 0 0 00 0 0 0 2 2 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 02 2 0 0 0 0 0 0 0 02 2 0 0 0 0 5 0 0 06 6 0 4 0 5 5 0 1 06 5 5 4 4 5 4 0 1 0

6 3 5 5 4 7 4 4 1 03 3 3 7 7 7 0 4 1 0


17/26

Lets Try Some Collision Detection

There is no right way to do this, as long as it succeeds 100%.

Optimization will depend on how the pieces are created, for myexample I have the blocks in their positional order: left, top, right, andbottom. This allows for detection against borders to be quick.

However, when we are dealing with moving a piece against an alreadycreated grid that has potentially one block obstacles, we should checkall four blocks. This is open to optimization, but for now this willsimplify things greatly.


18/26


19/26

Writing the Collision Code

Ok, now for my grid collision function to optimize theactual function I inserted two unique x difference and ydifference values into the function.

gridCollision( piece, grid, xDif, yDif )

if ( Furthest Right Block + xDif > 9 ) or ( Furthest Left Block + xDif < 0 )

return true

else if ( Furthest top piece + yDif < 0 ) or ( Furthest Bottom Piece + yDif > 19 )

return true

for ( I = 0 to I = 4 )if Current Grid at [ Current Blocks X Value + xDif ] [ Current Blocks Y Value + yDif ] is

not empty

return true


20/26

Now to Add Some Basic Physics The core essential to a Tetris game is simple, a drop counter. This

counter is used to determine when the piece will drop.

The drop counter is directly related to the level the player is on, so thehigher the level, the smaller the drop counter.

So in a 60fps game, if we set our drop counter to increment every

frame, and it resets after the drop counter hits 60, then our Tetrispiece would drop every 1 second.

Simple Code:

dropCounter = 0

dropMax = 60

gameLoop:increase 1/60thof a second (to make 60fps)dropCounter++if (dropCounter > dropMax )

drop the piece one

dropCounter = 0


21/26

How to Detect A Tetris A Tetris is simple, a line completely filled with blocks. So how can we

test this efficiently.

Simple, the only lines that could possibly be filled are the lines the lastpiece was put into. In other words, the most lines wed ever have totest for a Tetris would be four lines if the straight block was put into

the grid.

Simplified Code:hasTetris

for ( lowestPoint to highestPoint )

{

for ( row-left to row-right )if ( current-row-spot is empty )

break, then continue to next point

mark current line as a Tetris

}

if no line was marked, return false

else return true

Tetris Tengen


22/26

Player Movement This goes along the lines of the Tetris world physics. One thing you

will notice when playing a homebrew Tetris game as apposed to aprofessional Tetris game is how clunky the controls feel.

The real trick to smooth player movement is to allow a delay betweenquick movement and slow movement. For example, a player holdsleft, the piece in a clunky game will move left once per half second. In

a well done Tetris game, there will be about a half second delay,where the piece moves once, then begins the slide in the direction.

This can be achieved by having a movement timer. So when left orright is detected, begin the movement timer, move the piece once,then when the timer has reached its limit, begin slide.

Down does not need such complicated methods, just shoot down.Some Tetris games use an instant drop to the bottom when down ispressed.


23/26

Levels, Lines, and Points

So now that Tetris has been created and pieces are moving, dropping,and locking correctly, we can finally add our line and level variables.

We have two variables: Line and Level. Level is simply a function ofline, and the rate at which the levels increase is up to the programmer.

Lines are increased when a line is cleared, so adding the lines is easy.

Points can be given to the user in two ways: when a piece is droppedonto the grid, and when lines are cleared. Multipliers can also beadded to the number of lines cleared to allow massive points for a full

four line Tetris.


24/26

Hi-Scores and Menus Ok, now we have a fully working Tetris, and everything

runs smoothly. So we can start adding some creative partsof the game.

The Hi-Score can be done one of two ways: first way is to

have a static variable Hi-Score that is assigned every timethe program starts. The second way is to have a Hi-Scoresheet of some kind the program can use to display andsave to.

Menus are up to the programmer. This part is all show, sonice looking menus and options are all optional. Inprofessional Tetris games they are essential, but for ahomebrew game Menus can be an added bonus.


25/26

Modifying Tetris

There have been a lot of attempts since Tetris originallycame out to modify and create a new spin on the oldclassic.

To give you some ideas of whats been done: Tetris Plus 2uses a non-player character to determine if youre Tetris istoo high, mTetris is a purely sound based Tetris designedfor the blind, and Tetris Worlds uses a very large numberof effects to enhance game play.

Tetris has also been on almost every single console and pcsystem, ranging from the Commodore 64, to the TI-83calculator, to the latest Cell Phone.


26/26

Thanks goes to the following people

Phil Hasseyfor helping me w/ my code, helping me layout my project, andgiving me some great advice.

Dr. Schwingfor giving me a place and time to present.

Zak Arntsonfor helping me optimize my code.

my girlfriend Jillfor not killing me after a two day programming bingemaking this game in the first place.

Date post:	04-Jun-2018
Category:	Documents
Upload:	nguyen-van-quy
View:	224 times
Download:	0 times

How to Build Your Own Tetris 101

Documents