Taking resolution into account when performing 2D render functions.

[lxFirebal69xl]

Hey all, I've just ran through all the forum posts about resolutions and everything and none of them seem to mention something that context:GetWidth and context:GetHeight don't do which is take into account the resolution at which the player is playing the game at.

 

Here's an example of what I'm talking about:

--Battery begin
local battL =math.floor((context:GetWidth()))/2 - 775
local battY =math.floor((context:GetHeight()))/2 + 425
local battX =math.floor((context:GetWidth()))/2 - 800
 local battery_percent = self.battery_level / self.battery_max_level --calculate the percentage of battery power remaining
 context:SetColor( 1 - battery_percent, battery_percent, 0, 1) --as the battery dies the red component increases while the green decreases
 context:DrawRect( battX, battY, battL * battery_percent, 20) --rectangle width is dependent on the percentage of battery remaining. Wider with more power.
 --Battery end

 

This is the post render part of the script I use for the flashlight bar.

Here's how it looks in my native 1920x1080 display:

 

 

 

 

And here's how it looks in the native leadwerks display 1024x768

 

 

 

 

 

See the difference? The flashlight bar doesn't show up and the interaction text is way too close to the middle of the screen, so my question is, is there an easy way to take the player's resolution and dynamically change the draw functions so they fit the screen no matter the resolution used?

[Jazz]

http://www.leadwerks.com/werkspace/topic/13485-font-sizes/#entry94658

[Rick]

I personally think it sucks that we have to handle this on our own and this is why having a GUI built into LE would help a lot because it's job should be to handle stuff like this.

 

You have a couple options:

 

1) You can use code that is dynamic to the resolution/aspect ratio

2) You can do setup/config that is specific for each resolution

 

 

Web programming (CSS) is the path for step 2. It's a little more tedious but if gives you fine control over everything. However, you have to code this system in LE because LE doesn't have any CSS type of concept. I'm planning on this system so you do get fine control. In this process you have some configuration data where you have have every control name and it's position/size listed per each resolution (or it can fall into more than 1 resolution if the resolutions are close enough and you want to use the same pos/size data). So let's say you have your flashlight bar. Ideally that's an element with a name and in this config file you'd have something that branches off based on each resolution and you give that element's pos/size for that resolution.

 

Another way splits position and size into 2 different categories. Positioning becomes relative to anchors points on the screen. Anchor points would be top_left, top_center, top_right, right, left, center, etc. 9 anchor points in total. All of these anchor points should be calculated using functions like window:GetWidth(), window:GetHeight(). Sizing can also be calculated based on the resolution. This method can have artifacts because it's all calculated and it may end up with some strange rounding errors.

 

So basically it's a pain in the ***. With either systems you have to code the system to do these things and 1 method makes it tedious in setup but exact control over everything, and the other is less tedious but with a lack of control. A hybrid could probably be created I guess as well.

 

I'm going to create a system for our game that uses the CSS type approach and hope that it'll be generic enough and not that invasive so that it's easy to re-use for people.

[thehankinator]

The way I handled this was anytime I calculated a the point I wanted on the screen I used a ratio. Using your 1920x1080 display as the "target", the value of battL is 1920/2 - 775 = 185. Now to find the ratio 185/1920 = 0.0963541666666667. Take that ratio, and use that to calculate battL.

 

local battL = context:GetWidth() * 0.0963541666666667

 

The result for 1024x768 would now be 98.6666666666667. You could round the ratio to make it easier on your eyes but what it is still hard to visualize where that point is on the screen. What I didn't do but might make it easier to use this method is to define a resolution that all the development and code would be in relation to. Lets say we pick 1024x768, we could create a function that would figure out the ratio then convert the points to whatever resolution is actually being run.

 

function ConvertX(x)
 return context:GetWidth() * x / 1024 --TODO change this to our standard resolution width
end
function ConvertY(y)
 return context:GetHeight() * y / 768 --TODO change this to our standard resolution height
end

 

Now your code would look like:

 

local battL = ConvertX(98)

 

This would auto scale and stuff. Gets awkward with fonts but the same idea can work.

[lxFirebal69xl]

This issue seems to be something that shouldn't be an issue from the get go, like rick mentioned. But since it is, I find it interesting how all of you have a different way of dealing with it.

 

At this point in time, I've messed around with all of your answers, and to be honest, all of them work, some more than others of course.

To be honest the ones I understand the most is Hankinator's and Rick's second option, and since Leadwerks doesn't have any kind of CSS compatibility I'll be sticking to Hank's method for now.

Thank you for all your answers nonetheless.