Hi all,
I am trying to add a HUD with coins at the top. The HUD will have an image of a coin with a text next to it containing the amount. (similar to https://i.pinimg.com/474x/6a/f9/32/6af9324d35a946f23687e8993c6e2700.jpg)
If I use the native font and work out the correct size on the simulator, would this work on ALL devices or do I need to use image digits to represent the number of coins in order to guarantee the size?
Thanks.
Hi. Your question is unclear.
Explain what you mean for text to be the correct size.
Explain what it means to be incorrect.
Do you simply mean you want the text to retain the same relative size compared to the badge it overlays? If so, that should not automatically handled by scaling.
Note: I would NOT use a (default) system font. I would use font explicitly supplied (by you) in a TTF file.
Appologies if the question is not clear.
To clarify:
I am going to have a PNG file that has a coin and a frame around it. I am going to position the PNG file at the top of the display. Then I am going to put a text on top of it. I want the text to always be within that frame.
If I use a TTF font as suggested, and if (say size 12) of that font works in the simulator and fits in the frame, am I guaranteed that the text will be in the frame on all devices?
In other words, will all the devices render a given font/size in the same way in relation to other graphics?
In the past in an other engine (Construct 2) I used a bitmap font to achieve this, but if a standard text can be used instead then that is much better.
Using native.systemFont* will get you the device’s default font and there is differences across devices because the fonts will be different.
display.newText() with a the same provided font “should” give you the same size, however, that API depends on the operating system’s font rendering to generate the image used by display.newText() can create variances in spacing between lines in multiline text or spacing between words. But for your usage it should be very close.
Rob
I tried using a font as follows:
local diamond\_frame = display.newImageRect(sceneGroup, "graphics/diamond\_frame.png", 200, 46 ) diamond\_frame.x = display.contentCenterX diamond\_frame.y = 80 num\_of\_diamonds = display.newText(sceneGroup, "123", diamond\_frame.x+55, diamond\_frame.y+5, 150, 42, "tuffy.ttf", 46)
But on the simulator I got:
What am I doing wrong and how do I fix this please?
The font might be doing alright, but there’s something wrong with your scaling of the diamond frame. I’d suggest looking into your config.lua file. You should also check if you do some scaling to the diamond frame.
Read through the scaling methods at https://docs.coronalabs.com/guide/basics/configSettings/index.html#scale
“zoomStretch” — scales the content area to fill the entire screen on any device, ignoring the content aspect ratio. This mode should be used with caution since it will stretch/warp images and text if the device’s aspect ratio doesn’t exactly match the content area’s aspect ratio.
I personally use “letterbox” pretty much everywhere. I don’t think you will be able to get display objects to align nicely across different displays with zoomStretch.
Thanks @XeduR
Changing it t o letterbox helps but it leaves a part of the screen unused 
In my app, the aspect ration change with zoomStretch doesn’t affect the app much except for this frame/text issue.
I thought it should apply the stretch to both text and frame equally. If it doesn’t then the only option would be to use a spritesheet with the digits 0-9 and write a function that converts a number to sprites for display. This of course would increase the complexity of the code and would require sprite tracking for memory management.
Deciding on the scaling method should really be one of the first things you do when starting out developing a game on Corona. Changing it later on in the project may take a lot of work.
One thing you could do is use bitmap fonts, but I’m not really sure if you can position them accurately with zoomStretch if the scaling distorts the diamond frame. There’s probably some formula to figure out for offsetting images based on the amount of distortion, but I don’t use that particular mode and I don’t want to figure it out 
zoomStretch is probably our most evil option. zoomStetch warps your screen items. You won’t have any circles, they will all be ovals. Since text is created after the fact, It’s probably still based on one pixel dimension and isn’t considering the stretching. Note the numbers are not changed with regards to their shape.
Letterbox takes more work, no doubt, but it’s the right way. This blog will help you understand the work needed to go letter box. Filling the space isn’t difficult.
https://coronalabs.com/blog/2018/08/08/understanding-content-scaling-in-corona/
Rob
Hi. Your question is unclear.
Explain what you mean for text to be the correct size.
Explain what it means to be incorrect.
Do you simply mean you want the text to retain the same relative size compared to the badge it overlays? If so, that should not automatically handled by scaling.
Note: I would NOT use a (default) system font. I would use font explicitly supplied (by you) in a TTF file.
Appologies if the question is not clear.
To clarify:
I am going to have a PNG file that has a coin and a frame around it. I am going to position the PNG file at the top of the display. Then I am going to put a text on top of it. I want the text to always be within that frame.
If I use a TTF font as suggested, and if (say size 12) of that font works in the simulator and fits in the frame, am I guaranteed that the text will be in the frame on all devices?
In other words, will all the devices render a given font/size in the same way in relation to other graphics?
In the past in an other engine (Construct 2) I used a bitmap font to achieve this, but if a standard text can be used instead then that is much better.
Using native.systemFont* will get you the device’s default font and there is differences across devices because the fonts will be different.
display.newText() with a the same provided font “should” give you the same size, however, that API depends on the operating system’s font rendering to generate the image used by display.newText() can create variances in spacing between lines in multiline text or spacing between words. But for your usage it should be very close.
Rob
I tried using a font as follows:
local diamond\_frame = display.newImageRect(sceneGroup, "graphics/diamond\_frame.png", 200, 46 ) diamond\_frame.x = display.contentCenterX diamond\_frame.y = 80 num\_of\_diamonds = display.newText(sceneGroup, "123", diamond\_frame.x+55, diamond\_frame.y+5, 150, 42, "tuffy.ttf", 46)
But on the simulator I got:
What am I doing wrong and how do I fix this please?
The font might be doing alright, but there’s something wrong with your scaling of the diamond frame. I’d suggest looking into your config.lua file. You should also check if you do some scaling to the diamond frame.
Read through the scaling methods at https://docs.coronalabs.com/guide/basics/configSettings/index.html#scale
“zoomStretch” — scales the content area to fill the entire screen on any device, ignoring the content aspect ratio. This mode should be used with caution since it will stretch/warp images and text if the device’s aspect ratio doesn’t exactly match the content area’s aspect ratio.
I personally use “letterbox” pretty much everywhere. I don’t think you will be able to get display objects to align nicely across different displays with zoomStretch.
Thanks @XeduR
Changing it t o letterbox helps but it leaves a part of the screen unused
In my app, the aspect ration change with zoomStretch doesn’t affect the app much except for this frame/text issue.
I thought it should apply the stretch to both text and frame equally. If it doesn’t then the only option would be to use a spritesheet with the digits 0-9 and write a function that converts a number to sprites for display. This of course would increase the complexity of the code and would require sprite tracking for memory management.