Mobile jagged rendering problem

68 views
Skip to first unread message

Bogwog

unread,
Aug 17, 2014, 6:41:05 PM8/17/14
to haxef...@googlegroups.com
Hi,

I've been working on a game for the past month and a half using HaxeFlixel. So far, everything has been smooth sailing. However, now that I've begun to focus on building it for mobile I've run into some issues. Most importantly, some of my sprites look hideous on Android (and possibly iOS and BB10 as well, but I haven't tested those yet).

My game will most likely be played primarily on a handheld in portrait mode. When this is the case, the "hideous" rendering is barely noticeable due to the small screen. However, one of the devices I'm planning to target is the Amazon Fire TV, which is an Android TV console that will be connected to 1080p/720p televisions in all sizes (think Ouya).

Here is a picture to illustrate my issue:
The "Original Image" is how it should look, but as you can tell by the other two images, it doesn't look like that. On my PC it looks acceptable, and the distortion is almost negligible. However, on the Fire it looks really really bad ESPECIALLY on a 50 inch TV screen. If I was able to notice the subtle distortion on my 27-inch 1080p computer monitor, then my players' eyes will probably start bleeding when the distortion is increased and stretched onto a 50 inch TV!

The weird thing is though that none of the other sprites in my game look as bad as these circular ones. The UI is made up of many different components of varying shapes and sizes, and their distortions are barely noticeable (except for FlxTexts; those simply don't appear to have anti-aliasing enabled. idk if these two issues are related though, but the sprite distortions are more bothersome atm).

I found a thread in the OpenFL forums that discussed this topic somewhat, and learned that the reason they look like this is because of the hardware renderer. I confirmed it by testing it out on my PC, and as soon as I switched to software rendering everything looked perfect, although very, very slow. This doesn't appear to be possible to do on mobile targets.


So does anyone know of a solution or at least a way to mitigate the distortions? For what it's worth, I created these assets in vector format, so I have a lot of flexibility in regards to their dimensions. If there was a way to directly render the SVGs in Flixel, then that might solve the problem. But AFAIK that's not possible.


Any suggestions or help is appreciated.
Thanks!

Bogwog

unread,
Aug 17, 2014, 8:33:38 PM8/17/14
to haxef...@googlegroups.com
I just figured it out! Apparently FlxSprite has a public variable called "pixelPerfectRender" which is set to true by default. Setting it to false fixed the rendering issues I was having.

HaxeFlixel seriously needs better documentation as I didn't find the answer to this question anywhere online. I just coincidentally stumbled upon this variable thanks to FlashDevelop's code completion and a typo on my part :P 

Andrei Regiani

unread,
Aug 18, 2014, 10:35:21 AM8/18/14
to haxef...@googlegroups.com
HaxeFlixel should change its default settings to favour high-res games, such as "anti-aliasing true" (maybe pixelPerfectRender too?), "fixedTimestep false", and more, we've discussed this on GitHub before... I'm afraid people still think this is a "pixel games engine", because of AS3 Flixel, at least our showcase has more high-res games now.

Tembac

unread,
Aug 19, 2014, 4:58:55 AM8/19/14
to haxef...@googlegroups.com
I agree. I didn't know about this.
Reply all
Reply to author
Forward
0 new messages