Text IN CENTER!

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|546\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Concept/Design -> Text IN CENTER!
Thu, 27 Oct 2011, 16:25
Afr0	Does anyone have a bulletproof mathematical/algorithmical approach for centering text against a component (say, a button) given the component's x, y, width, height and the text's width and height? I obviously don't know the text's x and y, as those are the parameters I'm trying to figure out... I want them to be centered! -=-=- Afr0 Games Project Dollhouse on Github - Please fork!
Thu, 27 Oct 2011, 16:34
HoboBen	Off the top of my head... (untested) function text(txt, x, y, w, h) { textw = CalculateTextW(txt); texth = CalculateTextH(txt); textx = x + ((w - textw) / 2); texty = y + ((h - texth) / 2); DrawText(txt, textx, texty); } --v To explain, take textx = x + ((w - textw) / 2); The x being the offset of the component is simple. We can effectively ignore this for now by pretending it's zero, leaving: text = (w - textw) / 2; This is w/2 (the mid-point of the component) Subtracted by textw/2 (half the graphical length of the string) Which will centre it about the mid point. Which simplifies to (w/2) - (textw/2) = ((w - textw)/2) -=-=- blog \| work \| code \| more code
Thu, 27 Oct 2011, 17:11
JL235	I believe Ben's answer is right (although I've not run it). But bear in mind that you can't centre text just using it's pixel height. The problem is that certain characters are meant to extend way up or below, and so become out of place. Essentially, the centre of a character is probably not half it's height in pixels. This image from the W3 Spec on HTML5 Canvas is a good illustration of what I mean:
Thu, 27 Oct 2011, 21:49
Afr0	Well I'm using Comic Sans for rendering fonts (as that is more or less what the original TSO used), and I'm also not mixing uppercase and lowercase letters right now (as that would require rendering two different fonts at the same time for the desired effect), so I should be relatively fine. Thanks Hobo! -=-=- Afr0 Games Project Dollhouse on Github - Please fork!
Fri, 28 Oct 2011, 05:36
spinal	Comic Sans!!!!!!!!!!!!!!!!!!!!1111111111111111111 The entire world should have already told you not to use comic sans for anything ever!! Does whatever language you're using not support centered text already? -=-=- Check out my excellent homepage!
Fri, 28 Oct 2011, 06:42
Afr0	I know Comic Sans isn't a very popular font, but it worked nicely for The Sims and TSO. Yes, the SpriteFont class in XNA has a MeasureString() function, but I still needed to wrap my head around the maths. -=-=- Afr0 Games Project Dollhouse on Github - Please fork!
Fri, 28 Oct 2011, 06:54
spinal	I would only worry about centring the width, keep the hight exactly the same for all button text, it will look out of place otherwise. -=-=- Check out my excellent homepage!
Fri, 10 Aug 2012, 13:45
Afr0	Ugh.... somehow I managed to mess this up again when putting scaling into the mix! My code: if (!Invisible) { float GlobalScale = GlobalSettings.Default.ScaleFactor; if (m_ScaleX == 0 && m_ScaleY == 0) { //WARNING: Do NOT refer to m_CurrentFrame, as the accessor ensures the right //value is returned. SBatch.Draw(m_Texture, new Vector2(m_X * GlobalScale, m_Y * GlobalScale), new Rectangle(CurrentFrame, 0, m_Width, m_Texture.Height), Color.White, 0.0f, new Vector2(0.0f, 0.0f), GlobalScale, SpriteEffects.None, 0.0f); if (m_Caption != null) { Vector2 CaptionSize = m_Screen.ScreenMgr.SprFontSmall.MeasureString(m_Caption); CaptionSize.X += GlobalScale; CaptionSize.Y += GlobalScale; float ButtonWidth = (m_Width * GlobalScale) * GlobalScale; float ButtonHeight = (m_Texture.Height * GlobalScale) * GlobalScale; SBatch.DrawString(m_Screen.ScreenMgr.SprFontSmall, m_Caption, new Vector2((m_X + ((ButtonWidth - (CaptionSize.X / 0.7f)) * GlobalScale)), (m_Y + (ButtonHeight - (CaptionSize.Y / 2)) * GlobalScale)), Color.Wheat); } } else { //WARNING: Do NOT refer to m_CurrentFrame, as the accessor ensures the right //value is returned. SBatch.Draw(m_Texture, new Vector2(m_X * GlobalScale, m_Y * GlobalScale), new Rectangle(CurrentFrame, 0, m_Width, m_Texture.Height), Color.White, 0.0f, new Vector2(0.0f, 0.0f), new Vector2(m_ScaleX + GlobalScale, m_ScaleY + GlobalScale), SpriteEffects.None, 0.0f); if (m_Caption != null) { Vector2 CaptionSize = m_Screen.ScreenMgr.SprFontSmall.MeasureString(m_Caption); CaptionSize.X += GlobalScale; CaptionSize.Y += GlobalScale; float ButtonWidth = ((m_Width * GlobalScale) + m_ScaleX) * GlobalScale; float ButtonHeight = ((m_Texture.Height * GlobalScale) + m_ScaleY) * GlobalScale; SBatch.DrawString(m_Screen.ScreenMgr.SprFontSmall, m_Caption, new Vector2(m_X + (ButtonWidth - (CaptionSize.X / 0.7f)) * GlobalScale, m_Y + (ButtonHeight - (CaptionSize.Y / 2)) * GlobalScale), Color.Wheat); } } } --v This works for some buttons (where ScaleX and ScaleY is 0), but not for others! Please keep in mind that GlobalScale is the global scalefactor (I.E the result of the current resolution's width by 800), and ScaleX and ScaleY is the button's individual scalefactor. Any tips or hints are greatly appreciated! -=-=- Afr0 Games Project Dollhouse on Github - Please fork!
Sun, 12 Aug 2012, 19:15
dna	The code you wrote works ben. There just needs to be some conversion for txt. Using Stringwidth(txt) somewhere inside of CalculateTextW(txt) should do it. Than you would have both the x and textw in the same terms, pixels. -=-=- DNA
Mon, 13 Aug 2012, 02:30
Afr0	I'm aware that Hobo's code works, but I made my equation a little more difficult by throwing scaling into the mix... I made it work last night, it turned out I had my braces messed up; float GlobalScale = GlobalSettings.Default.ScaleFactor; if (m_ScaleX == 0 && m_ScaleY == 0) { //WARNING: Do NOT refer to m_CurrentFrame, as the accessor ensures the right //value is returned. SBatch.Draw(m_Texture, new Vector2(m_X * GlobalScale, m_Y * GlobalScale), new Rectangle(CurrentFrame, 0, m_Width, m_Texture.Height), Color.White, 0.0f, new Vector2(0.0f, 0.0f), GlobalScale, SpriteEffects.None, 0.0f); if (m_Caption != null) { Vector2 CaptionSize = m_Screen.ScreenMgr.SprFontSmall.MeasureString(m_Caption); CaptionSize.X += GlobalScale; CaptionSize.Y += GlobalScale; float ButtonWidth = m_Width * GlobalScale; float ButtonHeight = m_Texture.Height * GlobalScale; SBatch.DrawString(m_Screen.ScreenMgr.SprFontSmall, m_Caption, new Vector2(m_X + (((ButtonWidth - CaptionSize.X) / 2.1f) * GlobalScale), m_Y + ((ButtonHeight - CaptionSize.Y) / 2) * GlobalScale), Color.Wheat); } } else { //WARNING: Do NOT refer to m_CurrentFrame, as the accessor ensures the right //value is returned. SBatch.Draw(m_Texture, new Vector2(m_X * GlobalScale, m_Y * GlobalScale), new Rectangle(CurrentFrame, 0, m_Width, m_Texture.Height), Color.White, 0.0f, new Vector2(0.0f, 0.0f), new Vector2(m_ScaleX + GlobalScale, m_ScaleY + GlobalScale), SpriteEffects.None, 0.0f); if (m_Caption != null) { Vector2 CaptionSize = m_Screen.ScreenMgr.SprFontSmall.MeasureString(m_Caption); CaptionSize.X += GlobalScale; CaptionSize.Y += GlobalScale; float ButtonWidth = m_Width * (GlobalScale + m_ScaleX); float ButtonHeight = m_Texture.Height * (GlobalScale + m_ScaleY); SBatch.DrawString(m_Screen.ScreenMgr.SprFontSmall, m_Caption, new Vector2(m_X + ((ButtonWidth - CaptionSize.X) / 2.1f) * GlobalScale, m_Y + ((ButtonHeight - CaptionSize.Y) / 2) * GlobalScale), Color.Wheat); } } --v To explain, I had; float ButtonWidth = (m_Width * GlobalScale) + m_ScaleX; float ButtonHeight = (m_Texture.Height * GlobalScale) + m_ScaleY; --v It's amazing what a couple of braces can do! -=-=- Afr0 Games Project Dollhouse on Github - Please fork!