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)
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
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():
# 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
# 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 😉