Building a universal, dynamic render resolution application (SOLVED)

Questions
1

Hi everyone,

I’ve come to a point now where I’m thinking about building an universal application, e.g. that would run at native resolution for all Apple tablets (relatively easy as it’s alway the same resolution ratio). Looking at what Defold offers on this matter, I cannot get my head around how one would achieve this properly, besides obviously release a build for each device/display resolution.
If you look at the application life cycle, it seems the display width and height which eventually will drive the render script is set by the game config file. How do you initialise the engine with the correct render resolution value ? Do you write an init method that reboot the engine and force it using an adequate game config ? Where this init method would be placed ?
Furthermore on this subject, Corona (and Moai to some extent) allows for a very simple mechanism in order to switch between different asset resolution almost automatically (you define a factor value at init, and it tries to find asset files that have the correct token, see : https://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/). How would transpose this with Defold ? Multiples atlas dynamically switched ? and if so, how would it be done ?

Sorry for the long post, A short guide on this matter would be very welcomed.

Best,
Nicolas.

2

Hi!

In the render scripts, the render.get_width and render.get_height will always return what is set in the game.project file. We call this the virtual resolution (this looks a bit similar to what corona seems to be doing). The render.get_window_width and render.get_window_height functions will always return the actual size of the game window on the platform (http://www.defold.com/ref/render). We use both in the default render script, to draw the “game world” (sprites, particles, etc) in the virtual resolution and the gui in the actual resolution. This can be changed of course by using a custom render script (http://www.defold.com/doc/rendering). In the render script, you can draw the game in pretty much any way you like. The link you posted says “Don’t worry about the math — Corona will handle it for you.” In Defold you need to worry a bit more about the math. This might make it a little harder, but it also gives you a lot more freedom once you get the hang of it. This is also essential if you want to do more advanced stuff like mini-maps, rear-view mirrors, post-fx etc.

Regarding dealing with how GUI elements are placed/scaled under different resolutions we have display profiles and GUI layouts, check out http://www.defold.com/doc/layouts. This is quite similar to what the linked page seems to talk about. Also check out “HANDLING DIFFERENT RESOLUTIONS AND ASPECT RATIOS” in this page: http://www.defold.com/doc/gui

Hope that helps!

5 Likes
3

One more tip, the easiest way to play around with resolution/aspect is definitely to run the game on your computer in windowed mode and resize the window to simulate different resolutions - just in case you didn’t know about that.

2 Likes
4

Hi all,

we are new to Defold and are trying to figure out the best way to tackle different screen resolutions on android / apple / phone / tablet devices - so our game will ‘hopefully’ work on ALL mobile devices.

So if you detect the game window size using the ‘render.get’ commands stated, is there anyway to load a different image (or images within an atlas) into an object with the appropriate resolution to suit the screen size detected.?

for example, on a smaller resolution screen can the game load a lower resolution image, and then on a higher resolution screen can the game load a higher resolution image - and regardless of which image is loaded (either lower or higher resolution) can they be loaded into the same object (so the object is always the same - only the sprite image changes to suit the screen size detected)…?

our experience of scaling images to suit the various screen resolutions and having games play in a letterbox with black borders isnt very good so we would like to avoid if possible.

Thanks in advance for any advice on this.

1 Like
5

Visually, the textures will be adapted to the res/size through mipmapping. The gui system has a layout feature to deal with different aspects/resolutions. Regarding the game world, you have to take the decision of how the camera (i.e. view and projection transforms and viewport) should adapt to the varying screen size, and this is highly game specific. E.g. you have the options to do either black borders, or show a more limited view of the world dep. on the screen. Note that there are different functions for this, render.get_width vs. render.get_window_width (the latter gives you the actual width).

3 Likes
6

Hi Ragnar,

Sorry for not coming back to you sooner. I’ve been pretty busy lately.
Thanks for taking the time of writing an elaborate answer, I’ll try to come up with a solution that I can share, following what you’ve pointed out.

Cheers,
Nicolas.

2 Likes
7

Just wondering if there are any solutions that would allows us to do “hot loading” depending on the screen sizes?

Looking briefly at api reference, can we use sys.load_resources to accomplish this? For example, detect the screen size using render.get_window_width then use a different assets accordingly?

Any tutorials or guides on how to set up multiple assets? We’re looking to build html5 game to be played across all the platforms.

1 Like
8

What Ragnar has described in his posts above in this thread are the ways you can make your game work well in different resolutions and using different aspect ratios. There is currently no way that you can make the engine load different sets of atlases depending on screen resolution or aspect ratio. Will this really be a problem for you though when you build your HTML5 game?

9

Hi guys!
How should I go about modifying the render script to make objects fit to the screen?
(That is; avoid stretching and keeping their aspect ratio, scaling them down or up)

PS: I did modify the render script to do that but was unable to get it to work. I was facing some problems with the input positions afterwards.

10

Look at the example here

You’ll need to modify so it scales up too

	if (original_height >= current_height) or (original_width >= current_width) then
		zoom_factor = math.min(math.min(current_width / original_width, current_height / original_height), 1)
	else
		zoom_factor = math.max(math.min(current_width / original_width, current_height / original_height), 1)
	end

Use this + anchors for GUI

render_helper.lua is what you need to look at to understand a way to fix input

3 Likes
11

Thank you :slight_smile:
Things are more clear now. And everything works like a charm!

12

Hello,

So I’ve been away from Defold for a year as I got annoyed that I couldn’t fix an issue I had with my code. Now I’ve come back to it and sorted that bit out, I’ve got a problem with switching resolution/aspect and the GUI text I’m putting on the screen.

I’m using Britzl’s fixed aspect ratio render and it all works as expected :slight_smile: but how do I keep the GUI nodes in the places where I put them?
I see about that Pkeod said “Use this + anchors for GUI”, if so, then I tried X & Y anchors, but that didn’t seem to do anything.

Or should I be doing this a different way now (after a year away, I haven’t read all the updates yet).

Thanks,

David

1 Like
13

What do you have the adjust mode set to of the nodes? I think the one you want is fit. Post pictures of the issues and where you want things to stay.

4 Likes
14

Thanks for the reply.

Yes, that’s exactly what I needed. Works as expected :raised_hands:

2 Likes