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

Get help using Construct 2

Post » Wed May 20, 2015 6:07 am

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
Follow me on Twitter @evgLabs
B
34
S
14
G
4
Posts: 251
Reputation: 4,074

Post » Thu May 21, 2015 7:36 am

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. :)
B
27
S
18
G
8
Posts: 331
Reputation: 6,164

Post » Sat May 23, 2015 3:09 pm

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!
Follow me on Twitter @evgLabs
B
34
S
14
G
4
Posts: 251
Reputation: 4,074


Return to How do I....?

Who is online

Users browsing this forum: No registered users and 10 guests