Cooperative Blokus

We had a fun time playing Blokus this weekend. The object of the game is to place as many pieces on the board as possible, with all your pieces touching by at least one corner and no sides. Rarely are you able to finish with all of your pieces used up, so the winner is usually the the player with the least amount of pieces left. There were four of us playing, and it ended up being a fairly close game, but it got us all wondering, what if the game were played cooperatively? Could everybody use every single piece? Could everybody win?

The board is 20 × 20 (400 squares) and each player has what amounts to 89 squares. So 89 × 4 = 356 squares. That leaves a difference of 44 squares that will not be used up. So mathematically there is enough area.

The trouble is that the pieces are all unique and unwieldy shapes so you can’t just stack them all up like the diagram. Still, it turns out the answer is yes, everybody can win.

We didn’t use any mathematical formula to work it out, we simply worked off the idea that building a tessellation would be the easiest way to succeed. It was strategy mixed with intuition, trying to place pieces that allowed for as much useful area as possible in the negative spaces, and mirroring every play with each color. Here’s a photo of our finished cooperative game.

It actually doesn’t look like much of a pattern, but upon close scrutiny notice every shape that is played has it’s counterpart in every other color played in exactly the same way, but rotated ninety degrees. eg: The blue 1 × 5 piece placed in the bottom right corner has its mirrors in the other corners— green in the top right, red in the top left, and yellow on the bottom left. The symmetry is most visible in the very center of the board.

Technically this end game wouldn’t exactly be a a tessellation, but the underlying idea of symmetry is how we succeeded. Read more about tessellations on Wikipedia. Or, for fun check out the work of M.C. Escher, a master of the tessellation.

Thinking About Star Hound

We’ve been thinking about Star Hound a lot lately. In case you’re unfamiliar, Star Hound is an endless runner game, that really never made it past alpha phase. We’ve always wanted to add more to the game, but we’ve had too many other projects going on. Here’s some recent fun concept art.

Don’t forget you can download the alpha version for free for iOS or for OS X. It’s a little rough around the edges, but it’s still really fun, and (did we mention?) it’s free. Go download Star Hound now, and let us know what you think.

A T-Shirt for Blockwick

Yes, it’s official, after seven years of making apps, we’ve finally come out with a t-shirt. The design was a collaboration between Michael and myself and was created in honor of the Blockwick universe.

You may recall a while ago we were planning on making a Blockwick 2 t-shirt, but because of some rookie mistakes we did not get it printed. Back then we made three designs, and we couldn’t pick our favorite so we ended up doing a poll.

The design that won the poll was pretty fun, but it turns out that we were using too many colors for the screen printer. So we decided to put the t-shirt project on hold until we had a little more time to work on a design that we were happy with.

So this time around to simplify we put one together, and sent it straight over to Cotton Bureau. If you aren’t familiar with this company, we’d like to tell you about them. They are a small screen printing shop based out of Pittsburgh, PA. They focus on small batch, quality product, and have been great to work with. The unique thing is how they decide what to print.

Anybody can submit a design to their editorial team; they pick the best submissions to put up on the home screen. At any given time there are around 72 designs for customers to choose from. The trick is that out of all the designs, they only print ones that get at least 12 orders. Each design stays up for two weeks, and any that get 11 orders or less get scrapped. The downside is that there are lots of great designs that don’t get printed, and the onus to sell the t-shirt really rests with the designers who make the tees.

We are guessing for an indie company of three people that’s been around for seven years we should be able to sell at least 12 t-shirts, but it’s a bit more difficult than you’d expect, especially for lone designers. Anyways, we’d love it if you picked up a Blockwick t-shirt (we are almost up to twelve, but we need a few more orders). Head over to cottonbureau.com to pre-order now.

Update 9/25/2015: The t-shirt is going to print (yay!), but unfortunately if you did not get an order in before the deadline, you are out of luck. Its a one-run, limited-edition tee afterall. If you missed the train, and really want some KB threads, let us know; we may be exploring less transient methods of selling t-shirts in the future.

Super High-Res Graphics for Monster Soup – In Progress

One of the great things about creating vector based 2D art, is the ability to scale it as big as you need it. Today we started going through all the assets from our 2011 game Monster Soup. We thought it would be a good idea to go ahead and bring the game into the age of high-res displays as well as work on some other tiny improvements.

The game’s assets are mostly bitmaps, but the original artwork was created with vectors. Diving into a project that’s over four years old can be a bit disorienting, but a few hours later I had recreated half the game in 4x, high-resolution glory. The update will of course take us a while because we are also working on a bunch of other projects, and this is a Maintenance Monday kind of thing. But in the meantime I thought I’d share this lovely tiling background of frozen soup monsters. Enjoy.

Designing an SVG Favicon

Firefox will eventually fully support SVG favicons. I like favicons. I like making favicons. I like SVG. So why not? Here is a look at the construction of my first SVG favicon.

See lower right corner for the final product.

Designing Clean Blocks

With the past couple of years’ design trends all rushing towards a flat world, we wanted Blockwick 2′s art style to draw from this, but add some dimensionality and not get bogged down in some of the shortcomings of flatland. The idea to stay as flat and minimalist as possible, and still suggest dimension was more easily conceived than accomplished. Here’s what we came up with.

So the look is simple and clean, but definitely 3D. Afterall a game where you slide around blocks really just feels better when its world has some physicality.

Icon Sizes Needed For Android and iOS

Here is a good list for the icon dimensions required for making an app for iOS and Android. I made this list for our latest game Blockwick 2. Note that the largest sizes are for the respective marketplaces.

Android

512 × 512
192 × 192
144 × 144
96 × 96
72 × 72
48 × 48
36 × 36

iOS

1024 × 1024
180 × 180
152 × 152
144 × 144
120 × 120
114 × 114
76 × 76
72 × 72
57 × 57

Making 3D Flip Blocks Fit into the 2D World of Blockwick 2

Blockwick 2 is rendered completely with 2D sprites except for one special block type, the Flip Block. With so many possible arrangements of colors and animations, using 2D sprites would have been far too complicated and tedious to implement. Using a 3D asset made the most sense as we need to be able to select a color for all six sides and animate the block flipping over as it rolls around the board. The animation is especially important as it allows the player to understand that with each move the block is rolling rather than sliding.

First, our designer, David, modeled the 3D asset in Blender. Once in Unity, we needed to rotate the Flip Block around the X-axis to match our the angle of three dimensional illusion from our 2D sprite.

Since our 2D tile grid is non-square, even with the flip block rotated, it still lines up perfectly with all the 2D sprites. Now we light the Flip Block(s) with a single directional light rotated an angle based upon the length of the block shadows. It’s a good start, but our shading if far too dark and not at matching the style of the rest of the scene. So we crank our ambient light color all the way to pure white and adjust the intensity of our directional light. This is now essentially mimicking the screen shader used to render the normal Color Block sprites. Finally, we adjust the specular colors for materials that are applied to the faces of the Flip Block for a bit of fine tuning.

There you go, a 3D-lit object mimicking the style of the 2D game. Check out blockwick.com to see it in action.

The Colors of Blockwick

Here is a comparison between the colors used in the original Blockwick and Blockwick 2. It’s apparent that the sequel’s colors were based on the original, but we wanted to go a bit more vibrant. We also decided to use two less colors. To see the game visit Blockwick.com.

KB Blog

Interesting things from Kieffer Bros.

Design