[4] Dot Matrix

dotmatrix

Introduction

This is a game of falling block. I have written a step by step tutorial to build the game from scratch. Since the source code of Dot Matrix is directly derived from that tutorial, you may wish to read the tutorial first.

Enhancement

The tutorial above is rather complete. However, it was using the so called “programmer graphics” (an alias for ugly graphics). To make the game look better, we are going to make the following enhancements here:
  • Use better graphics
  • Add sound support


Attribution

The followings are the attribution for the graphics, background music and sound effect for the game.

1. Graphics

We are using the same graphics in the game of Color Matrix: MATCH 3 by Buch/CC0
We just need a single file (match3_sheet_0.png) provided by Buch:
match3_sheet_0

2. Background Music

Orchestral Adventure by RevampedPRO/CC BY 3.0

3. Sound Effect

63 Digital sound effects by Kenney/CC0

Sound Support in JDK

The standard JDK doesn’t support mp3 format. Since I don’t want to use JavaFX, I have converted the sound files to wav format. You will need “epic_loop.wav” and “twoTone2.wav” to enable sound support. To download the wave file, have a look at the simple wave player written by me.

Note:
Sound support is optional. You may run the game without downloading the wave file. Just go to the source code section below.

Bounding Rectangle

We don’t need all the blocks in match3_sheet_0.png. We would select nine of them in the game. The bounding rectangles inside the source image for all of the nine blocks are:
  static int[][] imageBounds = new int[][] {  // [blockType][x,y,w,h]
//    null,                // reserved for an empty image
    {209,202, 32, 32},   // 0 Grey block with nothing inside
    {209,202, 32, 32},   // 1 Grey block with nothing inside
    {  4,268, 32, 32},   // 2 Purple block with nothing inside 
    {242, 70, 32, 32},   // 3 Red block with a cross inside
    { 70,136, 32, 32},   // 4 Green block with a circle inside
    {308,136, 32, 32},   // 5 Brown block with a square inside
    {341,169, 32, 32},   // 6 Orance block with a triangle inside 
    {169,169, 32, 32},   // 7 Blue block with a star inside
    {209, 37, 32, 32},   // 8 pink block with nothing inside
  };



Image Scaling

The block size in the source image is 32 by 32 pixels. This is a bit too big for this game. Hence we resize the image to 24 by 24 pixels. The scaling is done by the drawImage API. The first parameter is the image to be drawn. The next four parameters define the bounding rectangle for the destination (coordinates in the game window). The next four parameters define the bounding rectangle from the source image (coordinates in match3_sheet_0.png).
// inside redrawImage() in DotMatrix.java
gr.drawImage(blockImage,x,y,x+24,y+24,sx,sy,sx+32,sy+32,null);


Keyboard sensitivity

The player is allowed to move for every N frames, where N define the keyboard sensitivity. If N is one, then the keyboard would be very sensitive. I choose a value of two based on my own taste. You may try another value yourself.
// defined in addFallingToken() of DotMatrix.java
      if (frame%2==0)
      {
      if (leftPressed && isValidPosition(x-1,y,tokenNumber,rotationNumber)) x -= 1;
      if (rightPressed && isValidPosition(x+1,y,tokenNumber,rotationNumber)) x += 1;
      }


Source Code

Please visit the source code page.
Previous Entries [3] Color Matrix Next Entries [2] Sliding Puzzle