In late 2015, I signed up for a course in Mobile App Development at UAHuntsville. The course focused on building cross-platform games using the Lua software development kit Corona SDK. As one of the course's three homework assignments, I was instructed to create a Breakout game. This page documents the process I went through in designing this game, and other information about the project.
First, I started by selecting an appropriate color pallet for the project. Since the project called for four different types of blocks, I decided to go with a triad color scheme, with gray as the fourth color. I used Paletton to narrow down the color scheme.
With the colors in hand, I moved on to Adobe Illustrator. The app design called for four basic pages: the start screen, the game screen, the score screen, and a game over screen. I started with four artboards in Illustrator, each sized to the standard iPhone screen resolution (750 x 1334). I drew a sample of each page on the artboard, using the color pallet that I exported from Paletton.
For the blocks themselves, I took smiley icons from the Icomoon icon set and added an inner glow to them. Next, I placed them on the four different types of blocks, each with one of the primary colors.
Once all four pages were designed, I copied the parts of the design that made up the background and pasted them into separate artboards (seen as the second row of artboards in the above screenshot). These would be the actual resources to be exported into the app. With the design complete, I then proceeded to the implementation phase.
For this class, we used the Lua programming language and the Corona SDK. Unfortunately, my usual choice in IDEs (JetBrains) does not have solid Lua support, so I decided to use SublimeText's Corona plugin instead.
I broke the design into three different files: main.lua, which began program execution, menu.lua, which provided the app's start menu, and level.lua, which handled the actual game logic. The latter two files were formatted according to the standards of Corona's scene manager, composer. Below is a screenshot of my development environment for this project: Sublime Text 2 on the right, and the Mac file browser (Finder) on the left.
I have uploaded the completed project to GitHub. To view a copy, click the button below.