Excel PixelArt Puzzle

Excel PixelArt Puzzle is a VBA program that converts a pixel art representation created in Excel into a puzzle. It does so by creating pictures for each puzzle piece out of the target range spanning the desired number of cells from the pixel art (cells represent pixels). Puzzle pieces are placed randomly on the same range or next to the pixel art. Once completed, the puzzle pieces can be moved by clicking on a piece and a position or another piece to be exchanged with. Continue reading this post to see how all that works and go down to the bottom of the post to download Excel PixelArt Puzzle.

Create Pixel Art

Pixel art is a form of digital art where images are created using pixels as the only building block. It is often associated with the low-resolution graphics from 8-bit and 16-bit era computers and arcade video game consoles. Pixel art is still popular and widely used today. For example, pixel art and sprites are often used to create video games. There are numerous professional software products available to create pixel art and sprites. However, a spreadsheet software such as Microsoft Excel can also be used to make simple pixel art drawings.

We can easily format the Excel worksheet to create a pixel art drawing by changing the background or interior color of cells. The column width and row height of the cells within the range containing the pixel art can be adjusted as needed. In the example below, the column width and row height have been set to create fairly squared and rather big cells to illustrate the technique. But usually, the smaller the cell size the better the pixel art resolution. The background or interior color of the cells is formatted as needed to create the pixel art picture (a minion in this example).

 Select the Pixel Art

Once the pixel art picture is ready, we need to select the entire area or range containing the pixel art. Depending on the morphology of the picture, and also the desired outcome, we may want to select a blank row or column when appropriate. Also, and more importantly, we need to make sure that the selected area or range has a composite number of rows and columns. Going back to basic mathematics, a composite number is a positive integer that can be formed by multiplying two smaller positive integers. In other words, is a number that has at least one divisor other than 1 and itself. It is actually the opposite of a prime number. This is important to ensure the puzzle pieces have the same size (i.e. number of columns and rows) and the entire pixel art can be properly represented in the puzzle.

To help selecting the right area, the index for columns and rows has been added to the worksheet. Prime numbers are highlighted in red, indicating that, when starting at point 1-1 (cell C3), the selected area should not span across any of the red numbers. For the example of the minion above, we would choose to select range C3:N22, which corresponds to 12 columns and 20 rows, both digits being composite numbers (not prime/not red).

Read Pixel Art

Once the pixel art picture is selected, and just before creating the puzzle, there is a macro that gets the number of columns and rows (and consequently cells) of the area containing the pixel art, and calculates the possible combinations for the size of puzzle pieces. To do that, the macro uses two loops (one for columns and another for rows) that checks which number of columns or rows can be used to create puzzle pieces. In other words, it checks which numbers are divisors of the total number of columns and rows of the area containing the pixel art. The code below checks for divisors in columns, where PixCols is the total number of columns in the pixel art selection. The condition inside the loop checks if the quotient of dividing PixCols by each divisor (i) is an integer. In that case, it adds the number to an array (puzWidth) that will be used later to show possible options for puzzle piece width.

  
  n = 0
  ReDim puzWidth(30)
  For i = 2 To PixCols - 1
      If Val(PixCols / i) = Int(PixCols / i) Then
          puzWidth(n) = i
          n = n + 1
      End If
  Next i
 

The array is initially declared as a dynamic array and later re-dimensioned. Initially, the array can store 30 values, but later, it will again be re-dimnedioned to have only as many values as divisors. This saves some memory space and makes the program more efficient. If there are no divisors, the selected number of columns must have been a primer number. That’s checked with the code below just looking at the value of n.

  
  If n > 0 Then
      ReDim Preserve puzWidth(n - 1)
  Else
      MsgBox "Cannot create puzzle. Select area with a composite number for rows and columns."
      Exit Sub
  End If
 

The same is done for rows; basically, it’s the same code but using PixRows instead of PixCols, and putting the divisors into another array (puzHeight).

Create Puzzle

A userform shows the pixel art properties and puzzle settings and options prior to finally create the puzzle. Pixel art properties include the number of columns, rows, and total cells for the selected pixel art area. Puzzle settings allow to choose the number of columns and rows for each puzzle piece. Here’s where the arrays explained earlier are used to populate the combo boxes in the userform.

So, we just need to choose the number of cells that each puzzle piece spans for both columns and rows. The puzzle pieces are rectangles with as many cells as the product of columns and rows. We should probably choose combinations that generate pieces as square as possible, but it is all up to you and the desired puzzle design.

Finally, we can choose to add the puzzle right on top of the pixel art, thus covering the original picture and adding difficulty to resolve the puzzle, or have the puzzle next to the original pixel art (that makes easier solving the puzzle). See below an example of the generated puzzle next to the original pixel art.

This puzzle example has a total of 20 pieces, each having 12 cells (or pixels), spanning 4 columns and 5 rows. Each puzzle piece is given a unique picture name (puz1, puz2, puz3, etc). The pieces have been randomly distributed and the puzzle has been added next to the original pixel art.

Resolve Puzzle

Each puzzle piece is a picture, which behaves as a shape in Excel. The picture is assigned to a macro that is triggered when clicking the picture. That macro highlights the piece clicked by adding a red border around the shape and keeps in memory the name of the picture. The second time we click a picture, it swaps the position with the previous one. The position of the shape is determined with the Left and Top properties (in points). In that way, we keep moving the puzzle pieces to the desired location until the puzzle is solved.

Go ahead and create a cool pixel art to play the game. Feel free to send me your creations and I will think how to share them with other users either in this post or other page in the blog.

 

Download Excel PixelArt Puzzle