Remaking My First Game in 24 Hours: Part 1

For the past few weeks I've had this idea in my head to remake my first game in only twenty-four hours as a bit of a challenge. The game is called Cubied, I made it nearly 10 years ago in 2014 using GameMaker Studio. Oh how time flies. It's really simple and unpolished but I had no idea what I was doing back then. I was only 14 and had very limited programming experience at that point in time. It took me a few weeks to get a basic understanding of the game engine and it's language. For the remake I will be using Godot, as these days it is my engine of choice.

I won't be doing this challenge marathon/gamejam style, instead I will be working on it here and there in my free time. This is to prevent any stress and to preserve my somewhat fragile sleep schedule. Before I get into it though I should probably explain what my first game actually was.

What exactly is Cubied?

Cubied is a very simple and limited 2D platformer sandbox. You control a little dude and place tiles on a small grid. The player will also react to certain tiles. For example there are "conveyor" tiles that move the player and boxes that the player can push around. It was a basic idea and has a fair amount of bugs and issues, but hey you gotta start somewhere. I made a page for it here where it can be downloaded.

---

Hour 1: Creating the Sprites

I decided to start off by creating the sprites. I used Figma for this, which is a vector design tool mostly intended for user interface design and mock-ups. It may not be most people's first choice for this kind of thing but I like the interface and I can quickly throw stuff together using it. All the tiles are arranged into a tile sheet and the player is separated by its limbs so the animations can be handled by Godot.

---

Hour 2: Setting up the Tile System

Setup

As soon as I had the project open in Godot I created a TileData custom resource (read my guide on those) which contains displayname and atlas_position values along with a helper get_texture() function. I then created a GameData singleton with an array to contain the TileData resources where their position in the array will also act as their save/load IDs.

For displaying the tiles and handling collisions I used Godot's very handy built in TileMap node. I added a custom data layer that represent each tile's type ID so I can quickly find its corresponding TileData resource. I then added a single physics layer so that I could define collision shapes for each tile. Afterwards I started adding in all the basic tiles both by defining them in the TileSet and by creating TileData resources.

Color System

I quickly ran into a issue though. Godot 4 has no built-in way to modulate individual tiles, at least not as far as I can tell. However I came up with a solution. I defined a COLORS array in a GameData singleton that contains, well you guessed it, colors.

const COLORS: PackedColorArray = [
	Color.WHITE,
	Color.RED,
	Color.ORANGE,
	Color.YELLOW,
	Color.GREEN,
	Color.BLUE,
	Color.PURPLE
]

Then my grid script generates a new ImageTexture and TileSet on the fly using these colors.

func _generate_color_set():
	# Prepare
	var color_count: int = GameData.COLORS.size()
	
	# Create atlas texture
	var atlas_img_width: int = color_count * TILE_SIZE + (color_count + 1) * COLOR_ATLAS_PADDING
	var atlas_img_height: int = TILE_SIZE + (COLOR_ATLAS_PADDING * 2.0)
	var atlas_img: Image = Image.create(atlas_img_width, atlas_img_height, false, Image.FORMAT_RGBA8)
	atlas_img.fill(Color.TRANSPARENT)
	for idx in color_count:
		var color: Color = GameData.COLORS[idx]
		var rect_x = COLOR_ATLAS_PADDING * (idx + 1) + TILE_SIZE * idx
		var rect: Rect2i = Rect2i(rect_x, COLOR_ATLAS_PADDING, TILE_SIZE, TILE_SIZE)
		atlas_img.fill_rect(rect, color)
	var atlas_texture: ImageTexture = ImageTexture.create_from_image(atlas_img)
	
	# Create source
	var atlas_source: TileSetAtlasSource = TileSetAtlasSource.new()
	atlas_source.margins = Vector2i(COLOR_ATLAS_PADDING, COLOR_ATLAS_PADDING)
	atlas_source.separation = Vector2i(COLOR_ATLAS_PADDING, COLOR_ATLAS_PADDING)
	atlas_source.texture_region_size = TILE_SIZE_2D
	
	atlas_source.texture = atlas_texture
	for idx in color_count: atlas_source.create_tile(Vector2i(idx, 0))
	
	# Create tileset
	var color_tileset: TileSet = TileSet.new()
	color_tileset.add_source(atlas_source)
	color_tileset.tile_size = TILE_SIZE_2D
	color_map.tile_set = color_tileset

Afterwards this new TileSet gets applied to a separate TileMap node. This node is in the hierarchy right after the main TileMap node and its material is set to a CanvasItemMaterial with the blend mode set to multiply. This makes it where the main TileMap's colors will be multiplied by the other one's, allowing us to now color individual tiles.

---

Hours 3-4: User Interface & Building

Tile Cursor

The cursor is just a Sprite node in my Grid scene that contains a solid white square texture and a ShaderMaterial that makes it invert the colors behind it. It then follows the operating system's cursor while snapping to the tile grid.

Tile & Color Menu

It wasn't too bad changing the selected color in the original Cubied, you would just either scroll up or down. However, the way you would place specific types of tiles was pretty rough. Right clicking would place a normal tile, but if you wanted to place any special tile type you would have to press a corresponding number key. It's difficult to remember what key corresponds to which type and it's just inconvenient to go out of the way and press it while building.

This time around I wanted to include a proper graphical user interface to select which tile type and color you want to build with. This was actually pretty easy to setup using Godot's built-in UI nodes. When the game detects either the escape or e keys being pressed it will toggle the build menu. This menu contains two ItemList nodes. One displays all the types of tiles as their corresponding sprites. The other one displays all the colors available. The user can then easily and quickly make their selection by clicking the tile and color they want to build with.

Building

Building in the original Cubied was buggy and tedious. You would have to click every single time you wanted to place or destroy a tile. You could also overlap an infinite amount of tiles in a single space. Well, infinite until the game crashes. The tile also would not always be placed where you would expect it to be. I fixed all these issues in New Cubied. Now the player can just hold down left click to continuously place tiles or right click to continuously destroy tiles. Tiles can also no longer be overlapped, and when placing them the math is now proper so they should go where you expect them to.

---

Hours 5-6: Creating the Character

Stitching it together

In the original Cubied the player was represented by a single static sprite. It did the job but to be honest it was pretty boring to look at. For New Cubied I decided to make the player from multiple parts and to animate all of it inside of Godot, similar to what I did with the new Scribble Surfer. I began by creating multiple Polygon2D nodes in a new Player scene. I assigned the texture to the atlas I made earlier in Figma. I then set the UVs for each polygon and arranged them all to create the player character in a default pose.

Animations

Once I had the character setup and ready I started making the animations for it. This wasn't too difficult, as I only had to make three animations total. One for being idle, one for walking and another for falling.

Controls & Physics

The physics and controls for the player are very simple so they were both easy to implement using a CharacterBody2D node as a base. The animations were then tied to the inputs and physics. The player will even have a fall animation if it detects a drop more than two tiles high.

---

Hours 7-8: Tile Interactions

The player needs to have interactions with certain tiles like the conveyors and elevators. In order to do this, I made it where a single position directly below the player is checked every physics frame. This check will get the type of tile in that position and react accordingly to it. It was simple enough to get the conveyor tiles working, it just adds to the players velocity when detected. However it was a bit trickier to get the elevators working correctly. When the player walks over an elevator it needs to find the next open space where the player can fit either above or below it and within a certain range. Luckily for me, Godot has the perfect node for that, the ShapeCast. I created one, gave it the correct shape and a little scripting later it was working as intended.

---

Hour 9: Physics Box

The physics box in the original Cubied is so bad it's basically pointless. It often becomes stuck and you can't even stand on it. In this new version I leveraged Godot's proper physics engine to make a much better version of it. Pushing it works way better, it can be pushed up slopes, it is way less prone to getting stuck and the player can also stand on it. It also interacts with tiles in the same way as the player. It was fairly easy to add but it took quite a bit of tweaking to get the physics and pushing feeling right.

---

Hour 10: New Tiles

Half tile

I thought I could perhaps add a little more depth to the game by adding tiles the player can drop through, similar to Terraria's platforms. The player will only collide with half tiles when they are above them. This also has a bit of a quirk that allows the player to walk through them horizontally.

Background tile

The background tile is exactly what it sounds like. These tiles are purely for decoration, they are drawn below the player and have no collisions.

---

Hour 11: Old Tiles

Now its time to add the remaining tiles from the original game. These tiles are the player filter and the box filter. I added two new collision layers to my main TileMap node. One collision layer only checks for players, and the other only checks for boxes. After applying these layers to both of the corresponding tile types you can now filter the two entities apart.

---

Hour 12: Sounds & Effects

Just like the original game I created the sounds myself, using both my mouth and my trusty old Blue Yeti microphone. I decided it was probably the right call to leave out the annoying fart sound when the player jumps, leaving the game to only need two sounds. One for placing tiles and one for destroying them. Once I had both sounds set up in-engine I made it where each one gets a slight pitch shift based on a random number to make them a bit less repetitive.

---

The challenge continues in part 2!

Read it here!