Shanghai

June 10, 2012 in Projects »Game TI-83/84+Z80

Shanghai is a Mahjong solitaire game and is loosely based on the Amiga version of Shanghai. The objective of the game is to remove all of the 144 tiles on the screen by selecting pairs of equal tiles. When all of the tiles are removed, the game is won. The player may only remove pairs of tiles that are free. A tile is free when it has at most one neighboring tile on the left and right side combined. The game features 4 different layouts and a dragon.

I played Shanghai on the Amiga, and always thought it was a fun game. It is a casual style game, as opposed to an action game. To solve a game, you need to use visual searching skills and a bit of strategy. I wanted to make a version of this game that could work on a TI-83 graphing calculator.

Development

A big challenge when creating this game was overcoming the limitations of the screen of the graphing calculator. The screen is only 96×64 pixels, but a layout of the game consists of 144 individual tiles. The tiles contain decals that must be identifiable by the player. The tiles can also be stacked onto each other. I started playing with a paint program to create really small tiles that could just fit the screen of the calculator, but had enough room for the decals. The tiles turned out to be 7×8 pixels, with 5×6 pixels for the decal with a surrounding border. Below you can see an image of 144 tiles on the calculator screen with the classic Mahjong layout.

There was limited space for the decals, so I had to come up with identifiable faces for the tiles. A regular Mahjong game includes a lot of different tiles. I wanted the tiles in this game to be as close as possible to the original, so I came up with the tiles that you can see in the image below. The number 4 that is next to the strips of tiles, indicates that these tiles occur 4 times in a layout. I did skip the Flower and the Season tiles, because tiles in these sets are all different. It would be impossible for the player to find the matching tiles that have different faces, on the small screen of the calculator.

Now that the graphics all worked out on the small screen of the calculator, I had to implement the game logic. The layout of tiles had to be represented in the code somehow and interactions between the user and the game needed to be defined and created. The layout of the game consists of multiple layers of tiles. I arranged consecutive tiles in tile-strips per layer. These strips allowed me to check if the game could still be finished by the player. It also made it easy to check for tiles that were free, tiles that are selectable by the player.

One of the iconic features of the original Shanghai would show up when the player had finished a game. When all of the tiles were cleared, the screen would crack open and show a moving eye of a dragon. I wanted to implement this feature to reward the player, so I made a simple animation system. I created the animation frames and arranged them horizontally in an image. I made a converter that would transform this image into a Z80 Assembly file, containing the image data and animation settings. Below you can see the frames of the final animation.

The game includes four different layouts of tiles. These layouts were created using a layout editor, written in Borland Delphi. Overall, I am very happy with the end result of the game. The look and feel of the game is pretty close to the original, even though the TI-83 only has a very small screen.