Code Monkey home page Code Monkey logo

Comments (5)

juliandescottes avatar juliandescottes commented on August 18, 2024

Hi!

It should work as you described. I quickly tried with a simple example (red opaque rectangle on top of a transparent red background with 0.1 opacity), exported to PNG and if I display this PNG over something else, the transparent parts are still transparent:

image

I think you are previewing your PNG in the browser? In this case the browser simply displays the image on top of an opaque background, which means you won't really see the transparent parts. But they should still be there.

from piskel-website.

PoptartPresident avatar PoptartPresident commented on August 18, 2024

Hey thanks for replying man!

I did give it another shot, but it just doesn't seem to be working.

I'm not sure if it has to do with my computer, but I am using a macOS, (MacBook Air), and the picture I showed in the 2nd screenshot was not from a browser. I viewed it as the exported png file I described, and zoomed in using Finder before screenshotting. That is the direct exported PNG file when viewed from Finder.

The main reason I am trying to figure this out is because I want the shadow to be somewhat transparent so that it doesn't completely blacken parts of the sprites I'm making when I use the exported PNG files for RPG Maker MV.

Screen Shot 2020-09-16 at 2 40 10 PM

It's so strange because it looks perfectly fine on Piskel, but it's as if the opacity doesn't carry over once you actually export the file.

from piskel-website.

juliandescottes avatar juliandescottes commented on August 18, 2024

Oh wait, I see in your screenshot that both layers have the "alpha" icon displayed in yellow, which means they are both in 100% opacity.

I guess you changed layer opacity at:
image

This is a global setting which only updates how non-selected layers are previewed in the main drawing area of Piskel.
If you look at the preview in the top right in Piskel, you will see everything is opaque.

To update the opacity of the layer for rendering, you need to click on the alpha icon next to this layer:
image

And set an opacity lower than 1.

This should work.

from piskel-website.

PoptartPresident avatar PoptartPresident commented on August 18, 2024

Oh my gosh!! It worked like a charm dude!! I'll need to keep this in mind now that I'm aware of it. I've been using this program for YEARS and I never knew about that!

Thank you!!! :D

from piskel-website.

juliandescottes avatar juliandescottes commented on August 18, 2024

You're welcome :) The UX for layer transparency in Piskel is pretty bad, not surprised you got confused by this.

from piskel-website.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.