Way to improve quality of text rendering?

[dooms101]

Hey guys, I am a little stumped right now. I've been looking through all the samples that I can and the online docs with no luck. Is there anyway to improve the rendering quality of text in MOAITextBox? I tried setting a higher dpi and adjusted the font size and it still looks a little blurry.

For now I am substituting some of my textboxes to pre-rendered images, but I'd really rather just use a textbox. It would make it so much easier for localization purposes amount other things. The edges of the fonts look pretty fuzzy, I don't know if that's just me or what. Anyone else notice this on their setup?

I am using the supplied arial-rounded.ttf, along with some other high quality ttf fonts. They all look kinda low quality when rendered in MOAI.

[dooms101]

Here's a screenshot of my game's menu. The title is a pre-rendered image, hence its clarity. However, the text on the buttons are MOAITextBoxs. You can't miss the poor quality that they render at.

[dana]

That definitely is noticeable, could you post the code you're using to set up the textbox and font? Which version of Moai are you using? I haven't seen this happen to text before so I'm trying to get a repro.

[dooms101]

Well I am using a resource cache to retrieve the font and the rest of my calls for generating the textbox's are contained within my UI framework factory functions. But, this code produces the same result and is essentially the same:

Code: Select all

1. MOAISim.openWindow ( "test", 512, 512 )


2.  


3. viewport = MOAIViewport.new ()


4. viewport:setSize( 512, 512 )


5. viewport:setScale( 256, 256 )


6.  


7. layer = MOAILayer.new()


8. layer:setViewport( viewport )


9.  


10. text = 'Example Text'


11. charcode = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 _'


12.  


13. font = MOAIFont.new()


14. font:load( 'Dwarves.TTF' )


15. font:preloadGlyphs( charcode, 70, 72 )


16.  


17. textbox = MOAITextBox.new()


18. textbox:setString( text )


19. textbox:setRect( -128, -128, 128, 128 )


20. textbox:setYFlip( true )


21. textbox:setAlignment ( MOAITextBox.CENTER_JUSTIFY, MOAITextBox.CENTER_JUSTIFY )


22. textbox:setColor( 0, 0, 1, 1 )


23. textbox:setFont( font )


24. layer:insertProp( textbox )


25.  


26. MOAIGfxDevice.setClearColor( 200/255, 200/255, 255/255, 1 )


27.  


28. MOAISim.pushRenderPass ( layer )

In my game, I setup a global viewport to be used for all my layers. The code for setting up the viewport creates a viewport with the same size as the screen and a scale with a constant height of 200 'world units' and a width proportional to that and the original aspect ratio of the screen. Kind of like this:

Code: Select all

1.  


2. Viewport = MOAIViewport.new()


3. Viewport:setSize( Config.screen_width, Config.screen_height )


4. local w = math.floor( ( Config.screen_width / Config.screen_height ) * 200 )


5. Viewport:setScale( w, 200 )


6.  

Setting up the viewport like this makes handling different screen aspect ratios and resolutions a breeze and works great for the rest of my graphics. I think this is the source of the fuzzy text though. It seems like MOAIFont isn't scaling correctly to the 'world units' I am using.

Edit: I am using the Snapshot Developer Build from a few days ago, I believe it is v1.2 build 36

[dana]

Yeah, it seems to have to do with setting the viewport scale to be smaller than the size. I've put in a bug report, I'll keep you updated.

[dooms101]

Okay thanks! I am assuming this isn't the desired functionality, and that font size should correspond to the world units size of the Viewport being used just like Props, Textures, etc. I think a work around for now might be to use a FrameBuffer to draw text to off screen using a different Viewport.

[dooms101]

Okay, I've found a pretty simple work around that can be used until the bug in MOAI itself is fixed.

Code: Select all

1.  


2. screen = { w = 512, h = 512 }


3. stage = { w = 256, h = 256 }


4.  


5. MOAISim.openWindow ( "test", screen.h, screen.w )


6.  


7. viewport = MOAIViewport.new ()


8. viewport:setSize( screen.h, screen.w )


9. viewport:setScale( stage.h, stage.w )


10.  


11. layer = MOAILayer.new()


12. layer:setViewport( viewport )


13.  


14. text = 'Example Text'


15. charcode = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 _'


16.  


17. font_size = 40


18.  


19. scl = screen.w / stage.w


20.  


21. font = MOAIFont.new()


22. font:load( 'Dwarves.TTF' )


23. font:preloadGlyphs( charcode, font_size * scl, 72 )


24.  


25. textbox = MOAITextBox.new()


26. textbox:setString( text )


27. textbox:setRect( -128 * scl, -128 * scl, 128 * scl, 128 * scl )


28. textbox:setScale( 1 / scl )


29. textbox:setYFlip( true )


30. textbox:setAlignment ( MOAITextBox.CENTER_JUSTIFY, MOAITextBox.CENTER_JUSTIFY )


31. textbox:setColor( 0, 0, 1, 1 )


32. textbox:setFont( font )


33. layer:insertProp( textbox )


34.  


35. MOAIGfxDevice.setClearColor( 200/255, 200/255, 255/255, 1 )


36.  


37. MOAISim.pushRenderPass ( layer )

This is the same code as my second post, using a viewport scale smaller than the resolution of the screen, but with compensation for font size scaling. Works perfectly.