How do I Export of Group of Sprites to a Single Image?

0 favourites
  • 3 posts
From the Asset Store
Elevate your games with our AI Chatbot Integration! Seamlessly connect your Construct 3 projects with GPT-4 for dynamic,
  • I'm trying to build an avatar builder that would give the user a png and I have the avatar built with ~5 different sprites that make up different parts (head, body, facial hair, etc.)

    How would I make an actual image out of this? preferably with no (transparent) background.

    Thanks

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Hey YetAnotherSuperhero,

    If I understand what you're looking for, I think you can do this with a combination of the System object's "Canvas Snapshot" action, and the Browser object's "Invoke Download" action.

    Basic Idea

    To get a snapshot with a transparent background, you'll need to ensure that when you snapshot the canvas, the entire canvas has a transparent background. I believe this can be done by making sure that the bottom layer of your game has its "Transparent" property set to "Yes".

    (Strictly speaking all layers should be set to transparent, but usually it's only the bottom layer that's opaque in the first place.)

    In the Construct2 editor, the backdrop of your layout should now appear gray (just like the margins) instead of white, as gray is the color the C2 editor puts behind your entire project. You are now seeing through your project's transparent canvas, down to the gray editor background color.

    Example

    So now, to see a practical example of this in action, we'll open one of C2's built in tutorial projects and modify it.

    1. Open Construct 2, and From the main menu choose New.

    2. In the search area, type "snap" to filter the list, and open "Example: Taking screenshots" project.

    (Or just look through the list to find and open the "Example: Taking screenshots" project.)

    3. In the "Layers" panel, select "Layer 0".

    4. In the "Properties" panel, in the "Layer properties" section, set "Transparent" to "Yes".

    (The background of the project should now look gray, just like the margins.)

    5. Run the project. (It should open in your default browser.)

    6. Click the "Take screenshot" button, and notice that the screenshot you took now appears above the button.

    7. Click and drag one of the pig sprites to that screenshot image in the bottom-right corner. Notice that the pig passes "under" the image, and that the image's background is transparent.

    8. Click the "Download" button to download the screenshot as a PNG with a transparent backdrop.

    Hope that's along the lines of what you're looking for, and thanks for asking this question.

    When I started writing this reply I was pretty sure there was a way to download a screen-cap but not with transparency.

    It took some experimentation, but I learned something new.

  • Yeah, that looks like it'll work, but is there anyway to take a snapshot of just an area? instead of the whole canvas?

    Also, why should ALL layers be transparent?

    Thanks!

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