Flash = pixellated graphics. HTML5 = fine

Monkey Forums/Monkey Programming/Flash = pixellated graphics. HTML5 = fine

hobo(Posted 2012) [#1]
EDIT - SORRY ABOUT THE SIZE OF THE PIC I EXPECTED JUST A LINK TO APPEAR!

Hello all.

I'm sure this is a basic setting in the config or something that i'm missing (I have looked) but anyway:

When I run a flash version of my game in the browser the assets look extremely pixellated (or non-anti aliased?) while HTML5 looks crisp.

You can see the comparison here: (Flash on the left)
[url]

[/url]
Is this something I'm doing or just normal?

Thanks in advance for any info.


hobo(Posted 2012) [#2]
EDIT - SORRY ABOUT THE SIZE OF THE PIC I EXPECTED JUST A LINK TO APPEAR!

Hello all.

I'm sure this is a basic setting in the config or something that i'm missing (I have looked) but anyway:

When I run a flash version of my game in the browser the assets look extremely pixellated (or non-anti aliased?) while HTML5 looks crisp.

You can see the comparison here: (Flash on the left)



Is this something I'm doing or just normal?

Thanks in advance for any info.


hobo(Posted 2012) [#3]
That's strange.

I added the preloader.swf as discussed here:

http://www.monkeycoder.co.nz/Community/posts.php?topic=2406

And it seems to be ok now.

Although my resolution now seems to be 1228*901 instead of the 1024*768

Now im really confused.

BIG SCREENSHOT INCOMING!




Supertino(Posted 2012) [#4]
I recalling needing to use;

SetBlend AlphaBlend 


to solve jaggies on my HTML5 app.. not sure if that helps at all?


hobo(Posted 2012) [#5]
Alphablend didnt seem to help unfortunately but thanks for the response.

One thing I notice in the preloader.as that effects the graphic pixellation is:

stage.scaleMode = StageScaleMode.NO_SCALE;


With this set to NO_SCALE, the graphics look crisp.

stage.scaleMode = StageScaleMode.NO_BORDER;


Like this (NO_BORDER or the stage.scaleMode line removed) they are super-pixellated. Which is annoying as I want the graphics to look crisp and to scale.

But this suggests with preloader.as and even without some kind of scaling is going on even though I set my resolution as 1024*768 in:

monkeygame.html
monkeygame.as
preloader.as (if used)

Anyone else provide any info on this?

Thanks.


hobo(Posted 2012) [#6]
Alphablend didnt seem to help unfortunately but thanks for the response.

One thing I notice in the preloader.as that effects the graphic pixellation is:

stage.scaleMode = StageScaleMode.NO_SCALE;


With this set to NO_SCALE, the graphics look crisp.

stage.scaleMode = StageScaleMode.EXACT_FIT;
stage.scaleMode = StageScaleMode.NO_BORDER;


Like this (EXACT_FIT or NO_BORDER or the stage.scaleMode line removed) they are super-pixellated. Which is annoying as I want the graphics to look crisp and to scale.

But this suggests with preloader.as and even without some kind of scaling is going on even though I set my resolution as 1024*768 in:

monkeygame.html
monkeygame.as
preloader.as (if used)

Anyone else provide any info on this?

Thanks.


DruggedBunny(Posted 2012) [#7]
There is the app config setting MOJO_IMAGE_FILTERING_ENABLED:Bool=true, but that should default to True I believe. Try setting it just in case.

Funnily enough, I want the exact opposite (ie. pixelly) but Chrome on Windows still doesn't support this in HTML5! Unfuriating.


Rushino(Posted 2012) [#8]
The main reason come to evidence... Flash is going to die. :P


DruggedBunny(Posted 2012) [#9]
Not while Chrome can't do retro games!


hobo(Posted 2012) [#10]
MOJO_IMAGE_FILTERING_ENABLED:Bool=true

Tried this and no luck either.

Looks like the only way to remove the pixellation is to turn scaling off in the preloader which is a shame but will work for now.

Thanks for suggestions.


outsider(Posted 2013) [#11]
I know that is an old thread, but it can be still useful to somebody.

I have a little fix on this issue, here it is:

1. Open YourMonkeyDir\modules\mojo\native\mojo.flash.as
2. Add "bitmap.smoothing = true;" in gxtkGraphics function after bitmap.bitmapData = new BitmapData (stage.stageWidth, stage.stageHeight, false, 0xff0000ff);
3. Save and clear your build folder
4. Recompile flash version of game

This works for me with Monkey73b.

I hope this helps.


programmer(Posted 2013) [#12]
2. Add "bitmap.smoothing = true;" in gxtkGraphics function after bitmap.bitmapData = new BitmapData (stage.stageWidth, stage.stageHeight, false, 0xff0000ff);
Thanks! IMHO MOJO_IMAGE_FILTERING_ENABLED:Bool=true should also set bitmap.smooting = true;
Could you please report a bug in http://www.monkeycoder.co.nz/Community/topics.php?forum=201 ?


outsider(Posted 2013) [#13]
Nice to see that this works for other people.

Ok, I'll do this.