Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


#Breakouts -- Resources

This directory contains the resources used in the breakout implementations. If you are adding a new implementation (thank you!) then please use these resources as closely as possible.


All of these resources were created by me (Matt Greer) and are licensed under MIT, just like all Breakouts code. Use these as you please.

What's Here

These are the images, sound and other misc resource files used in the breakouts. If you are adding a new engine, just copy these files locally into that engine's directory.



  • tiles.png -- these are all of the graphics in the entire game. Each tile is 16x16 and some entities take up more than one tile (like the paddle and countdown numbers). The bricks include frame animations for spawning (when a level first starts) and for death (when a ball hits them). Using these frame animations is optional. If your engine offers scaling or other kinds of animations that can accomplish a similar effect, feel free to do so. For example, the LimeJS version has ScaleTo built in, and so uses that to scale the bricks up and down. But the ImpactJS and CraftyJS versions use the frame animation as frame animation is the only type they natively support. For the ball animation, please use the frames here and animate it that way.


  • logo.png -- This is the main logo for the game, used on the main menu, game over and game won screens. Using the title that is baked into this image is optional. Some engines offer nice text rendering support, and so they cut the image off at the title and render their own.


  • bg_prerendered.png -- This is the main background, prerendered into one image. See "The Background" section below for more details.


These audio files are in the sfx directory and provided in mp3, ogg and wav format. Generally that should account for all browsers. These sound effects were generated using cfxr which is the Mac port of sfxr.

  • brickDeath -- played whenever the ball hits a brick and destroys it
  • countdownBlip -- played everytime the starting countdown ticks over to the next number 3... 2... 1...
  • powerdown -- played whenever the player gets a powerdown
  • powerup -- played whenever the player gets a powerup
  • recover -- played when the powerdown wears off and the paddle returns to full size

The Background

There are two choices here for the background, either prerendered or using a Tiled tmx file. The prerendered version is the entire background in one image, where as the tile approach builds the background from tiles.png and bg.tmx or bg.json.

Pick whichever makes more sense for your engine (most use the prerendered version).

Tiled bmx file

  • bg.tmx -- the tile layout for the walls and background of the game and the menu screens

This is the background in Tiled format.

Tiled json file

  • bg.json -- the tile layout for the walls and background in JSON format, as exported from Tiled