0 Favourites

Sprite Transparency fail after export

  • 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 !

  • Construct 3

    Buy Construct 3

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

    Buy Now Construct 3 users don't see these ads
  • 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

  • (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)
Similar Topics Posts Views Last Post
Unread hot topic
0 Favourites
New Android Export Experiences
494 67,270
jabk's avatar
jabk
Unread hot topic
0 Favourites
Sprite Font Generator - v3
368 112,308
RetroDaddy's avatar
RetroDaddy
Unread hot topic
187 45,138
Yann's avatar
Yann