All browsers handle layer bkg colors/transparency different.

0 favourites
  • 5 posts
From the Asset Store
Adjusting the game screen for different resolutions (Letterbox scale)
  • I braved the creation of a tutorial to illustrate fading between layers and have discovered that each browser is different in how it handles the layers background colors with C2 r175.

    You can test the project here and check the capx from my tut.

    Here are the noted browser differences regarding background colors and transparency properties of C2 layers between browsers:

    Firefox -- does not recognize the 'Transparent' property of layers cleanly. If 'Transparent' is No, the layer will still be transparent (except for areas around textbox objects) -- and if Transparency is 'Yes' when both a text box (on the transparent layer) and white (or black) background from separate layer is present the shades of white or black in the text box are slightly different -- not cleanly transparent.

    Chrome -- perhaps the best -- seems to render as expected.

    IE -- Opacity does not persist. Once the opacity of the layer being faded in reaches 100% it goes black. (EDIT - this was sort of fixed in IE by adding a wait 0 seconds to the end of the fade actions -- this prevented assigning the new layer variable too quickly in IE (but added a 'flash' at the end of the fade in IE), and it seems this should not have been necessary due to the order of my events.)

    I'm not entirely sure how to address these differences -- file a bug report maybe? ... any suggestions are welcome... and also let this be a good reminder to cross-browser test your projects!

  • Id say its probably a dom thing, but the lines 6 and 7 are inverted, but system compare has a "not" equal.

    Btw all the browsers including Safari, and Opera worked as expected, except Chrome did the blinky thing.

    Honestly I feel that layers really weren't designed to be used this way, and can be accomplished in other ways.

  • I need to learn more about the dom object. I also don't fully understand the issue with 6 and 7 being inverted -- the fade in/out should run at the same time - by design. One fades in while the other fades out... a large part of my learning process is figuring out best ways to do stuff in C2. I was using this to test layers with different background images in my game (not just colors) and just thought it might be useful enough to share.

    The biggest problem I see is that Firefox does not honor the 'Transparency' property of the layer when set to 'No' (it is still transparent, except for around objects) ... and that with Transparency to yes, it is not 100% against object.

    To see how this might fubar someones project, check out this guys game in Firefox.

  • You got system compare two values are this = to 0, inverted, but system compare has a not equal choice, so the inverted isn't needed if you do it that way.

    Also it very well may be a bug, but when I say a dom thing I mean it may have nothing to do with C2.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Yes, in my system compare opacity condition, I could have used IS > 0 rather than IS NOT <=0 ... But isn't that a difference without a distinction?

    Nonetheless, yes a bug or dom problem .... ... and a frustrating one if you aren't aware. (for example, I work mainly with Firefox and didn't test other browsers until someone else pointed it out 'not working' ... because I was initially seeing layer transparency where there should have been none.) ... and I'm still curious about why the events don't get handled the same in IE (why the 'wait 0' action is necessary) ...

    UPDATE: After submitting a bug report -- it turns out the Firefox issue I was experiencing was related to my specific setup (a fairly new Asus laptop with imbedded Intel graphics).

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)