i overhaul my first game

it all started on a corona infested sunday

I woke up at 8am in the morning, I felt good about the productive week that I dedicated mostly to my projects and some side hustle stuff, the Week Of Gameboy II was going well, I watched an episode of AVGN, … What a great day! Thanks to Corona I felt like I had plenty of extra time on my hands. So I grabbed my iPad and thought about what I could pixel just for fun…

I plan to redo my game for over a year now. And I finally started!

a first draft

- 2020, Pixel Studio, DB-ISO22

I liked its retro style. But I was not 100% satisfied. There is no “real red” in the palette. I wanted the game to look way more colorful. That is when I switched to the Lospec 500 color palette (which does not contain a real yellow, but I can live with that)

repaint it with heart

- 2020, Aseprite, Lospec500

That’s more like it! Much closer to what I had in mind! And a really strong red 😉

time to code

Unlike my first project I focussed specifically on mobile devices and came up with (hopefully) good touch controls. But first things first: The resolution

the size must be right

I think I am set. I tested it on some browsers and it worked! I still need to test it on some real phones though.

What I need: A fixed viewport width that never changes. However, when the ratio changes and the user switches from landscape to portrait I want the ground and the sky to expand while the platform etc. stays in the center

First of all we need the right settings:

160:90 is the minimum resolution. I want the screen (and the game) to grow only in height but not in width which is why I chose the aspect mode “keep_width”. This way no element in the game gets cut. stretch mode “viewport” is only an aesthetic choice because I prefer the game to be “true pixel art”. However, the “smoothness” of the parallax background scrolling suffers a litte. I will think about it.

And here we code!

func _ready():

    initial_viewport_height = 90
    initial_viewport_width = 160
    initial_viewport_ratio = initial_viewport_width / initial_viewport_height

I defined a fixed viewport height and a fixed viewport width which must not be dynamically generated. I divided them (width ÷ height) to get the ratio (~1,7666).

Next I created the function adjust_stage_to_viewport():

func adjust_stage_to_viewport():
	
    # get the current viewport height, width and ratio
	var current_viewport_height = get_viewport_rect().size.y
	var current_viewport_width = get_viewport_rect().size.x
	var current_viewport_ratio = current_viewport_width / current_viewport_height
	
	# compare the initial viewport ratio with the current one by subtracting 
	var ratio_difference = current_viewport_ratio - initial_viewport_ratio
	
	# subtract the initial viewport height & width from the current
	# divide the values by three because I want the platform above the center
	var viewport_offset_height = round((current_viewport_height - initial_viewport_height) / 3)
	var viewport_offset_width = round((initial_viewport_width - current_viewport_width) / 3)
	
	# if viewport height is higher than 9 (from the original 16:9 resolution)
	if ratio_difference <= 0:
		# move the stage (position.y) and the camera down
		position.y = viewport_offset_width + viewport_offset_height
		$Camera/MovingBackground.offset.y = viewport_offset_width + viewport_offset_height		
	else:
		# if not keep everything at its place!
		position.y = 0
		$Camera/MovingBackground.offset.y = 0

Please refer to the comments in the code. Basically it does what I explained above already: If the viewport gets higher than it is in the 16:9 resolution, expand the game’s height (sky and ground).

I call it every frame inside the _physics_process(): of my Stage.gd. I guess it would be better to call it only when the viewport actually gets resized. I am going to fix this later.

can't touch dis

I have to admit: I fiddled around with touch controls but I figured out the hard way that browser are not able to detect multiple touches at once! (Please correct me if I’m wrong!) Then I checked several browser games and I did not find any that are playable on a mobile browser. I figured it is exceptionally hard and stupid to play a game inside a canvas on a mobile browser anyway due to all the scrolling and dragging etc.. I postponed the touch controls for now^^

this is the result so far

what is already done

what is still missing

still a lot to do

The only thing left for me to say is: That’s it for now, folks! I will keep on working and I hope to see you testing and playing soon.

See you next time and stay safe 😉