Greeble is an HTML5 game where you are the captain of a crashed spaceship. You are ALONE but need some help to survive. Collect the cryo-keys to activate the stasis pods in order to free your friends.

What went right?
Was very familiar with my tools, both engine, language and art creation pipeline. The amazing JAWSJS game engine was a breeze to work with. Had a very easy time making the art, since my level editor was just photoshop. Enjoyed screenshotsaturday, twitter and google+ as a means to stay motivated. I did well in the time-management arena, and planned ahead of time. I used placeholder art during programming and coded everything first in an ugly room with rectangles for characters. Only after the first day (when all coding was done) did I dive into the art, so I had tons of time to make it real puuurdy. I spent 75% of the time on the art and was feature-complete the coding by noon on Saturday. Total time spent on the game: 14 hours.

What went wrong?
Ran out of time before I could add sound effects. No user instructions or intro. No GUI. Had to cut features and simplify to finish on time. Got a bit stressed about it on the last day, racing to finish. Drawing the level took more time than I predicted. Overall, had TONS of fun regardless.

About the game:
Features pixel-perfect, non-grid platforming, bounce-pads, transparent glass tubes, a fun retro “scan line” effect, silly AI followers and A KITTEN. Your objective is to navigate to the exit where you will be rewarded with a trampoline party!

→→→→ CLICK HERE TO PLAY! ←←←←

Use the ARROW KEYS to move around. Try to find a way to revive all your friends (including the hidden secret kitten, which signifies my enthusiastic participation in the “kitten challenge”) so you can all bounce on the trampoline at the end.

I had so much fun making this game. I even had time to hang out with friends, go for a hike, and decorate my house for the holidays! There is a lot of room for improvement but overall I’m really happy with the final product. Created using ippa lix’s wonderful jawsjs game engine.

The word “greeble” comes from the original Star Wars ILM special effects artists who used the term to describe generic “tech” bits and pieces that adorn sci-fi hulls. There are thousands of greebles in this game’s level art.

How it was made: I drew two “techno” textures as the base texture for all the world platforms (one brown and one silver). These patterns were covered in “greebles” (panels, buttons, wires, lines, etc.) In photoshop, I made opacity maps for each and turned everything transparent. Then, I drew the game map itself by drawing black and white pixels on the alpha (opacity) channel so that certain parts of these materials would become opaque. An effect filter that added a little emboss to the edges completed the look.

In the game engine, the entire world map is one gigantic .PNG image, which is layered on top of two parallax-scrolling background tiles (set to move slower than the foreground). The retro “scanlines” effect is merely another overlay image that sits on top of everything.

This is the entire map image I drew, as used in the game (click to zoom in):

… and this is the scanlines overlay I created:

Making “Greeble” was very inspiring. I now have an HTML5 platformer game engine that allows me to create freeform worlds in photoshop. No tiles or level data files required!

→→→→ CLICK HERE TO PLAY! ←←←←

Ludum Dare is so much FUN. It is amazing what you can accomplish in a speed-coding weekend.

Tags: html5, postmortem, screenshot, video

This entry was posted on Tuesday, December 20th, 2011 at 10:11 am and is filed under LD #22. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.