Font scaling?

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
User avatar
xNick1
Party member
Posts: 267
Joined: Wed Jun 15, 2016 8:27 am
Location: Rome, Italy

Font scaling?

Post by xNick1 »

Hi,
I don't know how to make the font scalable.

This is how I did it for my game, but the font dimension is 200 whether you're playing on a 128x128px screen or a 1920x1080px screen.

Code: Select all

self.font = lg.newFont("assets/font/bpreplay-bold.otf", 200)
self.tap = la.newSource("assets/sounds/menu/tap.ogg", "static")
self.text = lg.newText(self.font, "Aarstider")

lg.setFont(self.font)
lg.print("Aarstider", self.gameTitleX, self.gameTitleY)
I do the following thing for my objects, so every object scales and position itself regardless of your screen resolution:

Code: Select all

    self.exitImg = lg.newImage("assets/images/menu/imagebuttons/quit.png")
    self.exitImgW = wWidth / 15
    self.exitImgH = wHeight / 10
    self.exitImgSx = self.exitImgW / self.exitImg:getWidth()
    self.exitImgSy = self.exitImgH / self.exitImg:getHeight()
    self.exitImgX = wWidth - wWidth / 13
    self.exitImgY = wHeight / 50
  
    lg.draw(self.exitImg, self.exitImgX, self.exitImgY, 0, self.exitImgSx, self.exitImgSy)
Can I set a font size too when I draw it?

I could pass a value based on your resolution instead of passing 200 as the font size, but isn't there a better way like I do for my objects?
User avatar
Jasoco
Inner party member
Posts: 3727
Joined: Mon Jun 22, 2009 9:35 am
Location: Pennsylvania, USA
Contact:

Re: Font scaling?

Post by Jasoco »

Look into love.graphics.push(), scale(), translate(), rotate() and pop() on the Wiki.
User avatar
Sir_Silver
Party member
Posts: 286
Joined: Mon Aug 22, 2016 2:25 pm
Contact:

Re: Font scaling?

Post by Sir_Silver »

What is the the resolution of your game window? if you haven't changed it, I think it should be 800 x 600.

If that is the case, do you want the font size to be 200 at 800 x 600 resolution - or whatever your set resolution for the game window is?
If so, then do:

Code: Select all

self.font = lg.newFont("assets/font/bpreplay-bold.otf", 200 * (love.graphics.getWidth() / 800))
That magic number, 800, is just however wide the game window is that you're *designing* the game for. So basically, at 800 x 600, the font is 200, but at say, 400 x 300 resolution, the font is 100, because 200 * (400 / 800) gives us just that.
User avatar
xNick1
Party member
Posts: 267
Joined: Wed Jun 15, 2016 8:27 am
Location: Rome, Italy

Re: Font scaling?

Post by xNick1 »

Sir_Silver wrote: Mon Apr 24, 2017 2:54 am What is the the resolution of your game window? if you haven't changed it, I think it should be 800 x 600.

If that is the case, do you want the font size to be 200 at 800 x 600 resolution - or whatever your set resolution for the game window is?
If so, then do:

Code: Select all

self.font = lg.newFont("assets/font/bpreplay-bold.otf", 200 * (love.graphics.getWidth() / 800))
That magic number, 800, is just however wide the game window is that you're *designing* the game for. So basically, at 800 x 600, the font is 200, but at say, 400 x 300 resolution, the font is 100, because 200 * (400 / 800) gives us just that.
That did the job. Thank you :D
User avatar
peterrust
Prole
Posts: 42
Joined: Thu Dec 29, 2016 8:49 pm
Location: Bellingham, WA, USA
Contact:

Re: Font scaling?

Post by peterrust »

xNick1: Sir_Silver's approach will work and matches the approach you have taken with the rest of your game so it may be the best for the short term. But for the long term, you really should learn about what Jasoco is talking about because it will make your game faster and your code simpler.

I recently heard someone on the forums (I don't remember who) say it like this: you're doing a bunch of work in your code (calculating all values based on `wWidth` and `wHeight`) that is much faster done by the graphics card (GPU). Also it would make your code a lot simpler if you let the graphics card handle these calculations and you don't have to do them on every x/y/width/height value.

A lot of people in the community use a camera library -- kikito's gamera (https://github.com/kikito/gamera) is popular and has worked well for me -- which calls graphics.scale(), graphics.transform(), etc, for you. Others argue that it's best to learn love's APIs and use them directly, rather than using a camera library. Regardless, I would encourage you to check it out when you have time, since the graphics.scale() API is designed for exactly this, whether you use it directly or via a camera library.
User avatar
Sir_Silver
Party member
Posts: 286
Joined: Mon Aug 22, 2016 2:25 pm
Contact:

Re: Font scaling?

Post by Sir_Silver »

Are you saying that using the graphics functions like rotate and scale are performed by the gpu instead of the cpu? As far as I was aware, I thought everything in love was work being done on the cpu with the exception of shaders.
User avatar
xNick1
Party member
Posts: 267
Joined: Wed Jun 15, 2016 8:27 am
Location: Rome, Italy

Re: Font scaling?

Post by xNick1 »

peterrust wrote: Tue Apr 25, 2017 3:56 pm xNick1: Sir_Silver's approach will work and matches the approach you have taken with the rest of your game so it may be the best for the short term. But for the long term, you really should learn about what Jasoco is talking about because it will make your game faster and your code simpler.

I recently heard someone on the forums (I don't remember who) say it like this: you're doing a bunch of work in your code (calculating all values based on `wWidth` and `wHeight`) that is much faster done by the graphics card (GPU). Also it would make your code a lot simpler if you let the graphics card handle these calculations and you don't have to do them on every x/y/width/height value.

A lot of people in the community use a camera library -- kikito's gamera (https://github.com/kikito/gamera) is popular and has worked well for me -- which calls graphics.scale(), graphics.transform(), etc, for you. Others argue that it's best to learn love's APIs and use them directly, rather than using a camera library. Regardless, I would encourage you to check it out when you have time, since the graphics.scale() API is designed for exactly this, whether you use it directly or via a camera library.
Thank you for the tip.
I wrote a lot of that stuff already and it'd be hard for me to rewrite everything.
I'll take a look at gamera as soon as possible. Thank you for pointing that out.
I'm working on my first project and I made a step longer than my leg eheheh
I aim to stop doing such calculations on my next project.

"I recently heard someone on the forums (I don't remember who) say it like this: you're doing a bunch of work in your code (calculating all values based on `wWidth` and `wHeight`)"

Are people on the forum talking about me? eheheh
User avatar
peterrust
Prole
Posts: 42
Joined: Thu Dec 29, 2016 8:49 pm
Location: Bellingham, WA, USA
Contact:

Re: Font scaling?

Post by peterrust »

xNick1 wrote: Tue Apr 25, 2017 7:32 pm Are people on the forum talking about me? eheheh
No, sorry, I think it was someone else :-) I think most people do it that way by default until they learn about graphics.scale() or the way OpenGL graphics work under the hood -- that's the way I was doing thing up until very recently.
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 3 guests