Move, Melon! is the third game I made with libGDX. In this game, the player is a watermelon that they can move left and right. The player must move the melon to dodge falling objects, or else they will be squished or cut.

Inspiration

Much like my other game, Shape Tap Supreme, I wanted to create a game with a simple objective and short round times. Unlike Shape Tap, I wanted to create something that was more aesthetically pleasing. Shape Tap was very dark and simplistic, and while it looks good, it lacks a certain polish.

Gameplay

Gameplay is simple: two arrows on either side of the screen move the melon from left to right. The aim is to collect as many stars as possible, while avoiding the falling objects.

Design & animation process

When designing all elements of the game, I did a bunch of revisions until I felt I had gotten it right. Pictured above were three major versions: all the way to the left is the earliest, and all the way to the right is the latest. Early on I found myself sketching ideas that I had, and then translating my sketches into photoshop where I could play around with how they looked, their colors, etc.

A big hurdle with design was when trying to implement animation. At first, I thought that I could just make very basic animations by creating key frames myself in photoshop, and then programmatically flipping between the sprites. However this is obviously extremely tedious and time consuming, and looks terrible.

I found out about Spine, which was the perfect solution. Spine allows for individual images to be mapped to bones, and bone position, rotation, and scale data can be saved as keyframes. As the animation progresses through keyframes, Spine will interpolate smooth movement between these data points, allowing for fantastic looking animations. So, I began to design things in layers, and then mapping each layer to a bone in spine. As such, in the image above each piece of the melon was assigned to a bone.

The melon squishing animation.

Rolling melon animation.

Star collection animation.

Menu animation.

Above, I’ve included a few of the animations I created within Spine. I’ve exported them with the bones showing, so if you look carefully you can see the bones as well as the texture that is mapped to them, whenever they move. Things like menus require a whole bunch of bones, as there are a lot of moving text, rectangles, and buttons. Luckily due to the nature of Spine and it’s bones, when you build bones off of each other (like a skeleton), the movement / rotation / translation of a base bone is reflected on any child bones.

When programming the animations within libGDX, there are callbacks available for events such as animation start, animation end, etc. These are crucial for doing things like playing sounds when an animation starts, or ending a round when an animation ends, because it syncs up the application logic to the animation, even if you change the animation playback speed.

Integrations

One of the big integrations was implementing a process by which Spine data could be read into libGDX. When exporting a Spine animation, a texture atlas is outputted along with all corresponding images packed into a single image, and a JSON file that contains all animation details. Lucky for me, there existed a Spine library libGDX that worked very well, and just needed a few tweaks.

I also needed to use a physics body editor for the three different falling objects (pictured above) to outline bounding boxes to detect collisions between other objects with. Once the bound boxes were defined, it was very easy to detect collisions.

Download

This game is available for free to download on Google Play.