Colorslide tutorial levels off screen

Octocide · April 21, 2021, 6:25am

I’m working on the color slide tutorial and levels 3 and 4 are “cut off” at the top of the screen when building/running the game. Appears that the renderer will only show tile maps that are 6 tiles high, and everything above that is off screen. The only thing I can see that might be the problem would be in this script called “default.render_script” as i see no camera object. I’ve tried adding/playing with these lines of code here to set the different types of projections.

msg.post(“@render:”, “use_fixed_fit_projection”, { near = -1, far = 1 })
msg.post(“@render:”, “use_fixed_projection”, { near = -1, far = 1, zoom = 2 })
msg.post(“@render:”, “use_stretch_projection”, { near = -1, far = 1 })

None of them seem to work, aside from the zoom parameter that I pass in for use_fixed_projection, which gets me something even more unusable as things are far too zoomed in. What am I missing? Here’s a screenshot of level 4 being cut off.

Working with editor version 1.2.181 on an older macbook pro 2011 running el cap 10.11.6

britzl · April 21, 2021, 10:41am

Can you make the window larger or is it using max height on your computer?

What if you set a larger height in game.project? Set a height that is guaranteed to be able to show all levels.

If you want it to dynamically zoom you need to calculate the difference between the height set in game.project and the height reported by window.get_size() and use that as a zoom value for “used_fixed_project”.

Octocide · April 22, 2021, 6:52am

Sorry, should have included that my display resolution is maxed at 1440x900 and that is what my game.project is set at. Given those settings, I still don’t see the top set of tiles in levels 3 and 4.

Changing the resolution in the game project settings to 1440x1440 allows me to see all the tiles, but they are squished.

I would think that invoking “use_fixed_fit_projection” would do the trick, as the comment says that it does the following…

-- projection that centers and fits content with maintained aspect ratio

or…am i just not calling it correctly in “default.render_script”? Here’s my block of code there…

function init(self)
self.tile_pred = render.predicate({“tile”})
self.gui_pred = render.predicate({“gui”})
self.text_pred = render.predicate({“text”})
self.particle_pred = render.predicate({“particle”})
self.clear_color = vmath.vector4(0, 0, 0, 0)
self.clear_color.x = sys.get_config(“render.clear_color_red”, 0)
self.clear_color.y = sys.get_config(“render.clear_color_green”, 0)
self.clear_color.z = sys.get_config(“render.clear_color_blue”, 0)
self.clear_color.w = sys.get_config(“render.clear_color_alpha”, 0)
self.view = vmath.matrix4()
– default is stretch projection. copy from builtins and change for different projection
– or send a message to the render script to change projection:
– msg.post(“@render:”, “use_stretch_projection”, { near = -1, far = 1 })
– msg.post(“@render:”, “use_fixed_projection”, { near = -1, far = 1, zoom = 2 })
– msg.post(“@render:”, “use_fixed_fit_projection”, { near = -1, far = 1 })
self.near = -1
self.far = 1
–self.zoom = 1
–self.projection_fn = stretch_projection
self.projection_fn = fixed_fit_projection
end

The results of doing the above is that I still don’t see the top set of tiles (with 1440 x 900). Now, if i set my game project resolution to something LARGER than my display resolution, specifically 1440 x 1440, I can see all the tiles…but now the mouse functionality is broken and i can’t accurately click on anything. the following screenshot is using the larger resolution and calling “fixed_fit_projection”…

As you can see, the look is…better (although not centered?) and i can see all the tiles, but i’m completely busto with the input (mouse clicks don’t register correctly, and clicking tiles is offset). That is to be expected I would think, given the resolution is inaccurate.

So, ultimately, i can continue to futz with the resolution settings in game project to get a proper render and see everything by using “fixed_projection”, but I would assume that “fixed_fit_projection” should do that for me, regardless of my resolution settings, and ultimately not break controls?

Thanks for the tips and help!

britzl · April 22, 2021, 8:48am

Could you please share the project here? I’d like to take a look at it to better understand the problem. Share it as a zip file (and exclude the build folder).

Octocide · April 23, 2021, 3:57am

Here is the zipped file of the project, sans build folder. That only saved 1 MB though, and the size is still 13 MB. The uploader is not playing nicely, so I’m going to rip out this one file here, called “colorboys.afphoto” hope that is okay. its 12mb alone!Colorslide tutorial 2.zip (1.6 MB)

Observation 1: I noticed that since i was editing the “default.render_script” file that it won’t save properly (the tab is starred all the time) but still seems to compile and function okay. If I close and re-open, i notice my changes are gone. I’m wondering if I can’t edit it because it’s in the “builtins” folder?

Observation 2: I found a nice resolution using “fixed_fit_projection” that works for all levels (visually) and set my game project file to it, it’s 768 x 1152 … given that each tile is 128 x 128 pixels i just went ahead and did the math (with an extra tile space as a border). Level 3 is completely busted though, and no controls (mouse input) works. Other levels seem okay. Not sure why this is occurring with fixed fit projection, and why just one level, but there it is.

Very curious how this resolves itself. Thanks for taking a look.

britzl · April 23, 2021, 6:41am

I went back to the original tutorial and checked the unmodified code: GitHub - defold/tutorial-colorslide

The default game.project setting for window width and height is 640x1136, a common setup for an iOS device for instance.

Running the project as is on my laptop with an external screen with a fairly high resolution shows the game as intended:

If your laptop has a max resolution of 900 and the game is designed for a screen with height 1136 then yes, the window will only be 900 pixels high and you will not see the game as it was designed for a higher resolution.

You should be able to use the “Simulate Resolution” option to resize the window and simulate the resolution of popular device screens:

If you bundle your application and test in on an actual device you will also see the game properly resize to the resolution of the device, in a similar fashion as when selecting Simulate Resolution.

But for you, when developing a game I realise that it is not optimal to design the game for a resolution higher than your dev machine supports. You can, like you tested, use a different projection than the default stretch projection, but you will run into problems with input in the sample game. The colorslide sample takes a rather naive approach to handling input and always assumes a window with fixed aspect ratio and calculates input based on a hardcoded width and height of the tiles:

			local x = math.ceil(action.x / 128)
			local y = math.ceil(action.y / 128)

In a more advanced version of a game such as colorslide you may want to have scrolling levels covering a larger area than a single screen. In such a case the input handling must also be redesigned.

One option for solving local dev and to quickly be able to switch to different screen resolutions is to use the DefOS extension:

This extension has many useful functions for working with windows, mouse pointers etc. In your case you could use it to resize the window on creation, in a similar fashion as the Simulate Resolution menu option from the editor:

function init(self)
	defos.set_window_size(nil, nil, 640, 900)
end

You can also query for the display resolution and use that as input to set_window_size()

Octocide · May 1, 2021, 2:37am

Thanks @britzl for the mention of the “simulate resolution” option, I did not see that. I set that to my laptop resolution as a test. However, I can’t “unset” it now, as the option is all greyed out! I restarted Defold but no luck, none of the options are available, they are al greyed out. Bug?

As far as input is concerned (when switching projections), I will have to educate myself a bit more on how to get the proper input on mouse click so the bricks move correctly on differently scaled machines.

I will look into DefOS next, thanks for the tip.

Now to figure out why Level 3 doesn’t work, when all the others do!