Skip to main content
M
mentalcase129
Known Participant
May 29, 2017
Answered

Weird transparency issue with HTML5

  • May 29, 2017
  • 1 reply
  • 709 views

So I'm creating an HTML5 site with Animate CC.  I've done a bunch of actionscript stuff in the past but this is my first time with html5.  I've barely done anything so far but I've noticed two weird issues that I want to address before I get too far along.  When I did a test render, the upper layer appears to have a transparency on it that wasn't intentional and doesn't appear in the fla.  Even the black linework on the background layer appears to have a white edge around it as well.

Here's a screencap of what I mean:

The white around the black lines is a little hard to see in this screencap but you can clearly see the bush through the outhouse even though there's no transparency there.

It was also kinda slow to render, which is odd considering how little I have done.  I even got this error message:

"WARNINGS:

Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (5)"

At this point I haven't done any coding at all so this warning seems weird. 

Can anybody advise me on these issues?

Thanks

This topic has been closed for replies.
Correct answer ClayUUID

What you may be observing is a fundamental problem in current HTML5 canvas implementations with the way they anti-alias polygon edges.

graphics - How to avoid seams between filled areas in canvas? - Stack Overflow

If this is the problem you're experiencing, you can only work around it. Put solid colored backgrounds behind problem areas. Paint detail on top of solid colors instead of merged with it. Add thin outlines to vector boundaries. That sort of thing.

1 reply

Colin Holgate
Colin Holgate
Inspiring
May 29, 2017

With there being so many flat color areas I would try setting the bitmaps in the library to be lossless. If you're using spritesheets set them to be PNG, and 32 bit. You can optimize the PNGs after you publish, using sites like tinypng.com.

M
mentalcase129Author
Known Participant
May 29, 2017

Those actually aren't bitmaps.  The outhouse was a psd that I imported and then did a trace bitmap and the rest was drawn directly in animate.  Or should I have set that to lossless before doing the trace bitmap?

I just tried upping the sprite sheet quality and it didn't make a difference.

C
ClayUUIDCorrect answer
Legend
May 29, 2017

What you may be observing is a fundamental problem in current HTML5 canvas implementations with the way they anti-alias polygon edges.

graphics - How to avoid seams between filled areas in canvas? - Stack Overflow

If this is the problem you're experiencing, you can only work around it. Put solid colored backgrounds behind problem areas. Paint detail on top of solid colors instead of merged with it. Add thin outlines to vector boundaries. That sort of thing.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices