Phoenotopia Remake - 2 - Backgrounds, Bats, Saves and Menus

Backgrounds

A few days ago, I finally solved the mystery of the backgrounds. In addition to the scroll_x and scroll_y properties in the Tiled object, the position of the rectangle in tiled is also taken into account when drawing backgrounds. I randomly stumbled across this piece of information when looking through the original code. I also fixed some other problems with how backgrounds were drawn. I reversed the backgrounds so that the layers were drawn in the correct order. I also doubled the size of each background in-game as some backgrounds, even when repeated, did not cover the entire screen.

Bats

Bats are not as exciting as they may seem. I’m not talking about the bats which appear in Duri Forest. I’m talking about the Wooden Bat you need to collect in order to exit Panselo. I made the loot object, which is just a hitbox with a sprite attached to it. Well, it should be. I only made the hitbox part. You also don’t need to collect it in order to exit Panselo, as the gates which keep you in are not there yet.

The bat… It’s there. Trust me.

Most(if not all) collectible items are called loot by the game. A large table shows the information for all these items. My dialog system is very basic, so the normal wooden text box is shown:

Of course, I couldn’t forget the fanfare which plays when collecting a key item:

loot.gd:

func on_body_entered(body):
	if KEY_ITEMS[id][EMPHASIZE]:
		# Plays the item collection fanfare
		SoundManager.play_sound("ITEM_GET_SND", "snd")
	await Hud.speak_custom([KEY_ITEMS[id][MESSAGE]])
	
	Config.current_save.general[save_index] = true
	
	queue_free()

Camera boundaries

With the backgrounds showing properly, I thought I might as well make the various camera triggers work. The setup is nothing complex, but it was tricky to get working at first. The camera_changer trigger has two values BR (bottom right) and UL (upper left). When entering the trigger, the camera limits are changed to these two corners. A problem I faced was tile to pixel conversions, as I was trying to use pixels at first, while the coordinates of the camera limit were stored as tiles(1 tile = 16x16px), resulting in incorrect placement. However, even with that fixed, the camera limits need some random adjustments in order to work like they do in the flash game.

Inside camera_trigger, the top limit needs to be moved down one tile, the right limit right one tile, and the bottom limit down two tiles:

# TODO: Find out why this is neccessary:
	ul.y += 1
	br.x += 1
	br.y += 2

In the level-wide camera region, the top limit also needs to be moved down by one tile.

elif type == "camera":
		var r = rect_from_body(tiledObject)
		if r != null:
			# TODO: Find out why this is neccessary.
			# Shifts the camera boundary down by 1 tile
			r.position.y += 16

With the camera limits working, my screenshots correspond almost exactly to screenshots of the flash!

Saves

The save files are just a list of lots of numbers, and lists of numbers. Some information like the inventory, and hp are assigned a specific location, while the general list is used to story various flags the game might want to remember, like the collection status of a moonstone, or whether you’ve received a certain quest item. Most of my logic regarding saves is almost 1:1 with the flash, using a Save class and its variables to modify the game state:

class Save:
	var game_room: String = "room_05"
	var game_time := 0
	var player_maxhp := 20
	var player_hp := 20
	var player_x := 1724
	var player_y := 402
	var coins := 0
	var equipped_club := 0
	var inventory := [
		[0,0,0,0,0,0,0,1,1],
		[0,0,0,0,0,0,0,1,1],
		[0,0,0,0,53,0,0,0,0]
	]
	
	## Used as the 'General Array' by the game for storing various random flags
	var general := {}

Menu

The main menu took a lot of time to make, and was really fun to get right, with all the shiny buttons, and multiple credits screens. I actually worked on it before I even had the save system working. I placed the large menu texture into an empty scene, and marked the different camera positions in a dictionary, and moved the camera to these positions when a new screen needed to be shown.

const SCREENS = {
	# 300 x 200
	
	"main": Vector2(150,100),
	"save_file": Vector2(450, 100),
	"save_confirm": Vector2(750, 100),
	
	"sponsor": Vector2(150, 300),
	"credits1": Vector2(450, 300),
	"credits2": Vector2(750, 300),
}

The theme of the buttons and other UI had to be re-created using Godot’s themes. The flash game used static images for buttons and other UI, while I am making this with translations in mind, meaning that elements like buttons have to be adaptable to different lengths of text.

The game thus far: