Sprite Transparency fail after export

0 favourites
  • 8 posts
From the Asset Store
A set of 10 pixel art animated magic effects with icons. 2 Fire, 2 Earth, 2 Wind, 2 Water, Portal, Explosion.
  • Hi everyone !

    Here's a little "bug" I got ...

    I'm using many sprites with transparency, everything is OK when working in construct 2. (latest version 158.2 64-bits, standard licence. )

    Then after export as HTML5 website, my main sprite (the hero character) suddenly has a black background instead of transparency. Other sprites are doing Ok, though.

    I tried different png compression, and no recompression, but the sprite still appear with black background, and only after export.

    This is very surprising considering that some weeks ago it was exporting fine.

    I checked the .png files after export : they got the black background.

    I checked the .png files before export : they don't.

    So the export process is filling the transparency with black, on this particular sprite for some reason.

    This is very strange.

    Tried to redo many times, many tests, refill with alpha 0 paint : it's not better.

    Now I can't think about any new direction to check, so any help will be very very apreciated !

  • It could be that your png is over a bit of transparent background. When exported the index.html file sets the background to black. You would need to edit that manually if you want to change it. Below I have turned it to transparent:

              body {

                   background-color: transparent;

                   color: white;

                   padding: 0;

                   margin: 0;

                   overflow: hidden;

              }

    As a test you could try putting a coloured sprite behind the offending bitmap and re-exporting.

    Huge Regards

    Dave

  • Thanks for the quick answer.

    I'm not sure to get exactly what you mean so here what I tried (without success)

    The sprite was actually over a transparent background in the layout (I've made a blank layout as a sprite library. Other sprites are in this layout too and have no problems with transparency after export though)

    So I put a colored background behind, and tried to export again.

    But it's still converting the transparency into black on the exported .png.

    :/

    Changing index.html CSS won't change anything since the .png actually has a black background and CSS has no influence on it.

    Re-edit .png after export may be a dirty solution, and such a pain in the ass since this sprite has many animations, with many frames ....

  • Strange fact :

    If I clone the buggy sprite, or if I create a new animation into the buggy sprite, all animations will fail with transparency after export.

    If I start a new sprite, copy / paste animation from buggy sprite, the transparency will export fine.

  • That's a bit bizarre and something to look out for.

    I'm glad you got it sorted

    Dave

  • I don't know if it's relevant but I never had this bug before my last update (I think I had 1.53 before getting this one 2 days ago)

  • Figured out.

    Jpg compression was activated into the sprite (little button just right to the save button in sprite editor)

    :p

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • (is it weird to get .png after activated "jpg compression" huh ? I figured out because I noticed some jpg glitch on the .png ... but this way, it seems that "jpg compression" is doing bigger .png's ...)

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