Using fonts

[slick29]

Anyone know why my font (it's supposed to be Arial) shows up like this? Doesn't look like it should

[macklebee]

It's hard to tell from a screenshot - a simple example program that shows the problem by showing how you are drawing the text would be more helpful. But since we have to guess, are you loading multiple sized arial fonts or are you scaling the context when drawing? Do the numbers clear when they change or is there a smearing from the previous numbers?

[slick29]

Here's my code. I'm trying to have three different sizes, health, clip size and total ammo.

HUD Manager_02.lua

[macklebee]

Currently, I don't have a way to test this due to graphics card issues, but looking at the code I would make the following suggestions:

- Load the textures and fonts in the Script:Start() function

- In the Script:PostRender() function, always set the context's blendmode and color back to the standard Blend.Solid and (1,1,1,1) to avoid interference with other code that might be rendering images and texts.

- Once you set the blendmode to Alpha, you don't have to keep doing it prior to each Draw command

- Leadwerks colors use a color scale of 0-1 and not 0-255. The only thing that displays 0-255 is the editor's color property but it is actually using 0-1 to set the color property and it will return the 0-1 scale.

- I can't tell if your hud image requires alpha or not, if it does then ignore this - but if it doesn't then draw with a solid blendmode

 

example code that shows the above changes:

Script.size = Vec2 (175,25) --vec2 "Size"

Script.textcolor = Vec4(1,1,1,1) --color "Health Text "

Script.ammocolor = Vec4(1,1,1,1) --color "Ammo Text "

Script.player = nil

Script.healthtext = nil

Script.maxhealthtext = nil

Script.clipammotext = nil

Script.totalammotext = nil

Script.healthfactor = nil

Script.healthdisplay = nil

Script.ammodisplay = nil

Script.clipdisplay = nil

 

function Script:Start()

self.hudfont = Font:Load("fonts/Arial.ttf", 14)

self.clipfont = Font:Load("fonts/Arial.ttf", 32)

self.ammofont = Font:Load("fonts/Arial.ttf", 18)

self.image={}

self.image.ammoboxdisplay = Texture:Load("Materials/HUD/Status.tex")

self.player = self.entity: GetParent()

end

 

function Script:UpdateWorld()

self.healthtext = self.player.script.health

self.maxhealthtext = self.player.script.maxHealth

self.healthfactor = self.healthtext / self.maxhealthtext

self.clipammotext = self.player.script.weapons[self.player.script.currentweaponindex].clipammo

self.totalammotext = self.player.script.weapons[self.player.script.currentweaponindex].ammo

--self.Scoretext = killscore

self.healthdisplay = "+" ..self.healthtext

self.clipdisplay = "" .. self.clipammotext

self.ammodisplay = "" .. self.totalammotext

end

 

function Script:PostRender(context)

context:SetFont(self.hudfont)

--Draw HUD Display

context:DrawImage(self.image.ammoboxdisplay, context:GetWidth()*1.05-self.size.x, (context:GetHeight()*.9)- self.size.y, self.size.x*.65, self.size.y*3.7)

 

--Draw the Health

--DrawText (text to draw, xpos, ypos)

context:SetColor (self.textcolor)

context:SetBlendMode(Blend.Alpha)

context:DrawText(self.healthdisplay, (context:GetWidth()*.932)+self.size.x*.02, (context:GetHeight()*.915)- self.size.y*.5)

 

context:SetFont(self.clipfont)

--Draw the Clip Count

--DrawText (text to draw, xpos, ypos)

context:DrawText(self.clipammotext, (context:GetWidth()*.880)+self.size.x*.02, (context:GetHeight()*.928)- self.size.y*.5)

 

context:SetFont(self.ammofont)

--Draw the Ammo Count

--DrawTex (text to draw, xpos, ypos)

context:DrawText(self.totalammotext, (context:GetWidth()*.935)+self.size.x*.02, (context:GetHeight()*.955)-self.size.y*.5)

 

context:SetBlendMode(Blend.Solid)

context:SetColor(1,1,1,1)

end

[slick29]

Thanks for your help and the quick response. I implemented your changes and that did the trick. It now looks like it should.

 

Cheers !!!

[slick29]

How would I go about centering the clip count when it goes below 10? It's in the right position with double digits (screen capture on the left), but jumps to the left of the HUD when it's 9 or less (screen capture on the right)

[macklebee]

you can just adjust the position drawn when under 10 by using if statements, or you can format the number to show a leading zero when under 10.

 

--Draw the Ammo Count

context:SetFont(self.ammofont)

local ammo = string.format("%02d", self.totalammotext)

context:DrawText(ammo, (context:GetWidth()*.935)+self.size.x*.02, (context:GetHeight()*.955)-self.size.y*.5)

[slick29]

I was going the "if" "else" route but couldn't seem to get it to work. I'll try your suggestion. Thanks again.

[slick29]

I've managed to implement the suggestions Macklebee (many thanks again sir) suggested concerning formatting the ammo count. I've tried both putting a "0" before single digits and using an " if " statement but prefer how it looks without a "0" in front of the number. My question is how do I format it so the number's position changes >100, < 100 and below <10. This is what I have so far. I only get results >100 and < 100.

HUD_01.lua

[macklebee]

context:SetFont(self.ammofont)

local ammo = self.player.script.weapons[self.player.script.currentweaponindex].ammo

if ammo >= 100 then

context:DrawText(self.totalammotext, (context:GetWidth()*.935)+self.size.x*.02, (context:GetHeight()*.955)-self.size.y*.5)

elseif ammo < 100 and ammo >= 10 then

context:DrawText(self.totalammotext, (context:GetWidth()*.942)+self.size.x*.02, (context:GetHeight()*.960)- self.size.y*.5)

elseif ammo < 10 then

context:DrawText(self.totalammotext, (context:GetWidth()*.955)+self.size.x*.02, (context:GetHeight()*.965)- self.size.y*.5)

end

 

You never see the below 10 condition because you are satisfying the second condition since 10 < 100. Another way to do this without having to resort to putting multiple conditions together as I showed above using the 'and' would be to just rearrange the order of conditions:

 

context:SetFont(self.ammofont)

local ammo = self.player.script.weapons[self.player.script.currentweaponindex].ammo

if ammo < 10 then

context:DrawText(self.totalammotext, (context:GetWidth()*.955)+self.size.x*.02, (context:GetHeight()*.965)- self.size.y*.5)

elseif ammo < 100 then

context:DrawText(self.totalammotext, (context:GetWidth()*.942)+self.size.x*.02, (context:GetHeight()*.960)- self.size.y*.5)

else

context:DrawText(self.totalammotext, (context:GetWidth()*.935)+self.size.x*.02, (context:GetHeight()*.955)-self.size.y*.5)

end

[slick29]

I realized this just after I posted. Thanks again