Roberto Del Busto


Overview | Instructional Objective | Learners | Context | Scope | Object of the Game

Design Details | Competing Products | Motivational Issues | Design Process | References


Overview

Are you familiar with tessellations? A tessellation is a tiling, made up of the repeated use of polygons and other curved figures to completely fill a plane without gaps or overlapping. In other words, it's a puzzle made up of many pieces but only one shape.

Trans-Tessellations combines the art of tessellations with the geometric concept of transformations. The player must fill the whole stage with the image provided, creating a tesselation. The player does so by translating, rotating, reflecting , and/or dilating the image so that it can fit on the right space. The player keeps doing this until the background cannot be seen. The catch is...the player must do so under a certain amount of time before advancing to the next level.


 

Instructional Objective

The player must already be introduced to the geometric transformation concepts before playing Trans-Tessellations in order for them to get a fully appreciation of the learning value the game provides. The game demands that the learner makes fast decisions on which type of transformation to use: translation, rotation, reflection, or dilation. The player will learn this concepts by repeatedly applying them.

Translation

Translation, as shown in Image 1, moves an object without changing its size or shape without turning it or flipping it. The pieces translate one centimeter at a time.

Image 1. Translation

 

Rotation

Image 2. shows a rotation, which is the act of turning around as on an axis. The piece rotates 45 degrees at a time.

Image 2. Rotation

 

Reflection

A reflection is a kind of transformation that produces a mirror image. See Image 3. Pieces reflect horizontally and vertically.

Image 3 . Reflection

 

Dilation

A dilation, as seen in Image 4, is a transformation in which the original figure and its image are similar. The piece can be enlarged or reduced.

Image 4. Dilation

 

If the game is used in a classroom, the teacher can also tie this game to an unit in tessellations, which will cover subjects such as polygons, congruency, and similarity.


Learners

Trans-Tessellations' main audience will be 10th grade High School students who are enrolled in a geometry course. However, the game is also aimed at anyone who is interested in tessellations. The game will provide different levels of difficulty so it can attract people from all ages.


Context

Trans-Tessellations can be played at school or at home. At school, the game will be most useful if played concurrently with a unit on transformations and a tessellations project so they can obtain a hands-on approach of how these transformation principles are applied. The instructor must be familiar with the game and challenge the students to look for geometric concepts when playing the game. The instructor must conclude the lesson with a debriefing about the game and it's relationship with geometry. Trans-Tessellations has so many levels that it will keep the learner engage and make them feel challenged to advanced to the next level.

At home, the learner can play as many times as possible. Each level brings a more difficult tessellation than the previous one. Therefore, making each level last longer.


Scope

Trans-Tessellations consists of a stage that will be about 2/3 of the size of the monitor. This is the only screen that will be seen in the monitor. The stage will have only one image at the beginning, then the same image will appear either inside or outside of the stage.

Trans-Tessellations contains 96 different levels. Each level is more difficult than the previous. Levels are based on three differnt criteria: shape movements, amount of shapes in the tessellation, and how the shapes interlock in the tessellation.

Image movements

Amounts of images in the tessellation

How the images interlock in the tessellation

Image 5. Same Direction

 

Image 6. Reverse

 

Image 7. Rotating

 

Image 8. Different Images

 


Object of the Game

The object of Trans-Tessellations is to fill the stage with the same image by creating a tesselation by means of rotation, dilation, translation, and reflection. The player has only certain amount of time to complete the tessellation. A player must complete the tessellation under the required time in order to move to a more advanced level. The goal is that the learners can obtain a more hands-on approach on how the different geometric transformations properties work.


Design Details

Universal Elements

The tessellations will be made from different type of images. The purpose of this is to make the game atractive to all. If the game was to become a success. Then different editions of Trans-Tessellations can be created. The images must be very pleasant to the eye and they will be very colorful. Most of the images will be of animals, people, objects, and cartoon-type characters. There will be no panoramic images. As far as sounds of the game, most of the sounds from Trans-Tessellations will take place when a piece is connected to the tessellation. The reason being is to let the player know that the piece is being locked and it is time to go after the next piece.

Specific Elements

The interface of the game will consist of a screen similar to the one at the beginning of this document. It will also contain a set of four buttons that indicate the different types of transformation movements. Time forces the player to make quick decisions as to which button to use. Image 9. shows how what the screen is going to look like while the game is being played. The interface shows the tessellation itself as it is being completed. The buttons below the stage indicate the different trnsformations movements. The player must select which movement to use by pressing the correct button. This will allow them to move the pieces accordingly. Each of the transformation buttons will have a subdivision of choices to transform the tessellation.

Image 9. Trans-Tessellations Interface

After the player presses a button, the shape is ready to move. The player then, uses the keyboard/joystick to move the shape.Table 1. demonstrates the moves for each particular transformation:

Table 1. Transformations Moves

Move
Computer
Console
Translation

Left - Left arrow key
Right - Right arrow key
Up - Up key
Down - Down key

Move joystick in the direction in which the shape needs to move. The shape does not move diagonally.
Rotation

Clockwise - Right arrow key
Counter-clockwise - Left arrow key

Clockwise - move Right
Counter-clockwise - move Left

Reflection

Flip Horizontally - Left/Right arrow key
Flip Vertically - Up/Down arrow key

Flip Horizontally - move Left/Right Flip Vertically - move Up/Down
Dilation

Enlarge - Up arrow key
Reduce - Down arrow key

Enlarge - move Up
Reduce - move Down

 

Scoring

Trans-Tessellations also has a scoring system. Players as they complete a tessellation. Image 10. shows the game's high score scree. Points are obtained under the following criteria:

  • As the level of difficulty increases, so do the points.
  • How fast the player completes the tessellation.
  • The least amount of movements they make, the more points they obtain.

 

Image 10. High Score

Technical Elements

Multimedia Tools

In order to set up Trans-Tessellations, the following software must be employed:

 

Naming Files

Flash files must be first saved as FLA files in order for them to be open if the animation needs to be improved. Once the movie is finished and it's ready to be placed in the game, it must exported as a SWF file.

The same concept aplies to images created in Illustrator. It must first be saved as an AI file and then exported to Photoshop and then saved as a GIF file.

 

Screen Size and Resolution

In order to obtain the full effect of Trans-Tessellations, the monitor must be set at 800 X 600.


Competing Products

It was dificult to find a game that was similar to Trans-Tessellations. The closest that I could find was Tetris. There were games that have Tetris-like applications, but none provided the educational value that Trans-Tessellations brings to the learner. These games seemed to be more of a mindless movements type of games. The type of games that you could not build a Math lesson around.


Motivational Issues

A number of people do not understand the concept that Math can be fun. Tetris, which happens to be one of the more addictive games ever, is all about Math. Yet, there are people that play it and do not see the connection to it. Trans-Tessellations deals with similar issues as Tetris does. The concept of Transformations in Geometry sometimes is overlooked by some educators and teachers alike. Trans-Tessellations reviews those concepts and challenges the learner to apply them in the correct fashion while the clock is ticking. It is not only a Geometry game, it is also very visual. It combines Math with the ability to form puzzles.


Design Process

I have always been an M.C. Escher fan. His work on tessellations is astonishing and well ahead of his time. I have been fascinated with tessellations for about five years. I spend a week on a unit on tessellations, in which my students have to create a high-quality tessellation and an essay explaining how does it relate to Geometry.

At first, I thought of designing a game that will be about creating a tessellation and animating it, using Macromedia Flash. These game was beginning to sound more like a web quest, which I now plan to design and develop. That was when Bernie Dodge suggested: Think Tetris. Later on that week I was playing with Flash. I created a piece of the tessellation. Copied the piece and paste it to the original. Then I created the small movie that you saw when you first arrived at this page. I thought of Tetris and the concept of eliminating tiles before they creep up on you. I opted for my own idea: Finish the tessellation before time runs out.

I like the idea that the learner wins when the tessellation is finished because it gives them some sense of accomplishment by seeing what they created based on their geometrical, visual, and quick-thinking skills. I choose the idea that the learner must conquer a level before going onto the next because that is what creates the challenge. The learner must be able to master the skills previously mentioned in order to move on.

I took on Bernie Dodge's suggestion on showing the names of the transformations on the interface so the player can see what transformation properties they are using. The arrows keys in computers and the joystick in consoles makes it very easy for the player to maneuver the shape once the right transformations have been chosen.


References

Books and Journals

Bool, F.H., Kist, J.R., Locher, J.L., and Wierda, F. (1981) M.C. Escher - His Life and Complete Graphic Work. London, England

Ulrich, K. (2000) Macromedia Flash for Windows and Macintosh. Peachpit Press. Berkeley,CA

Westrom, M. and Shaban, A. (1992) Intrinsic Motivation in Microcomputer Games. EDTEC 670 Readings. SanDiego, CA. Montezuma Publishing.

Rinne, C. (1998) Motivating Students Is a Percentage Game. EDTEC 670 Readings. San Diego, CA Montezuma Publishing.

Electronic


Return to the Final Project Table of Contents

Last updated December 10, 2000