Actor sprites sometimes become merged or cropped when reopening Stencyl

[TheIanKirby]

(Stencyl 4.0.4)
Edges or parts of an actor's sprites sometimes suddenly get cropped and/or merged with the Actor's other sprites when reopening the game after reopening Stencyl. This occurs for both sprites that were originally raster images or SVG images. (This distorts the appearance of the sprites and they need to be reimported or replaced to fix this.)

[Justin]

If you're importing images at a scale other than 1x, have you made sure that the resolution you're importing at cleanly divides down to the 1x scale?

For example, if you import an animation at 2x scale, and the 1x logical size of the sprite is 100x100, don't import an image with a resolution of 199x199 or 201x201. Make sure it's exactly 200x200.

I'm guessing this is the problem you're facing. I have checks in place, and a message that says the image is automatically being resized, when this happens in the current betas of Stencyl. Not in 4.0.4 unfortunately.

[TheIanKirby]

The 1x scale is the only scaling that I have enabled for my game.

[Justin]

I'm at a loss in that case. Is this something you can reproduce reliably? Can you post images of what this looks like?

[TheIanKirby]

I can't recreate this consistently, but I have an older copy of the game that suddenly had this issue. (The height and width of the sprites are different from each other. Some are taller. Some are wider. This might be where Stencyl got confused. The height and width (of an individual sprite) are also not equal to each other.)

Cropped Sprite:
1(Err):
2(Err):
3(Fixed):
4(Fixed):
5(Err):
6(Fixed):

Merged Sprite:
1(Err)(Also Cropped):
2(Err)(Also Cropped):
3(Fixed):
4(Fixed):
5(Err)(Also Cropped):
6(Fixed):

[TheIanKirby]

I found a way to repeat this issue. The more different the height and/or width of the frames of an animation are between each other, the more likely this will happen. At some point, it will happen every time. Additionally, if it always happens, Stencyl won't fix or save the animation without cropping (, and if it has more frames, merging) them. In this case, as shown in the linked video, reimporting now only squishes the frame to fit another frame. Deleting all the frames will allow you to import the sprites again, but won't save them properly.

https://youtu.be/-Huh_-bUhXo

Extra Images:
1. (Cropped):
2. (Cropped):
3. (Squished):
4. (Uncropped):

[Justin]

Wait, your frames don't match each other in size? I think I didn't catch that in your previous post. It's ok for different animations to have different sizes (although you have to be careful if you're switching between different-sized animations if your game uses collisions, because you might bump yourself out of place from the sudden size change).

Having different-sized images within an animation has never been supported or expected to work. I can add a warning to prevent the mistake from happening in the future.

Alternatively, Stencyl could automatically fix the animation by enlarging all frames that are smaller than the others (for new animations). But how should such an automatic resizing be carried out? Anchor every frame to the top left?

[TheIanKirby]

All the sprites could be centered and if some of the sprites are different in height and/or width, insert transparent rows and/or columns to account for the difference. (The tallest frame won't need its height increased.) Then the sprites (including the added transparent pixels) can be anchored to the top left. (Additionally, when adjusting the collision of a sprite's animation, it could help if the user could switch between its frames if its collision needs to be lined up for multiple or all of the frames.)

(The true height and width of every sprite could be saved into a text file or an "Alternate Data Stream". Also, would it be cool if the user could adjust the true height and width of a sprite as if they were cropping a photo without needing to click "Edit Image..."? By dragging and dropping, I'm not given the chance to use some features that I could've used if I clicked "Click here to add a frame.")

(Sorry if I'm hard to follow.)

(Alternatively, I could edit the sprites to have the same height and width(but only if I make it into a sprite sheet), but could Stencyl automatically do the same without cropping, merging, or squishing the sprites?)

[Justin]

All the sprites could be centered and if some of the sprites are different in height and/or width, insert transparent rows and/or columns to account for the difference. (The tallest frame won't need its height increased.) Then the sprites (including the added transparent pixels) can be anchored to the top left.

Sorry, I probably shouldn't have used such an ambiguous work like "anchor", but what you're describing is what I meant, except using the center instead of the top-left. Perhaps "canvas-resizing anchor" would be more clear.

(Additionally, when adjusting the collision of a sprite's animation, it could help if the user could switch between its frames if its collision needs to be lined up for multiple or all of the frames.)

This would be helpful, I agree, but would probably be best filed as its own suggestion.

(The true height and width of every sprite could be saved into a text file or an "Alternate Data Stream". Also, would it be cool if the user could adjust the true height and width of a sprite as if they were cropping a photo without needing to click "Edit Image..."? By dragging and dropping, I'm not given the chance to use some features that I could've used if I clicked "Click here to add a frame.")

I don't think that the concept of "true width and height" aside from the shared width/height of all frames in the animation is likely to be added to the default animation editor. That might be best implemented as an extension.

(Alternatively, I could edit the sprites to have the same height and width(but only if I make it into a sprite sheet), but could Stencyl automatically do the same without cropping, merging, or squishing the sprites?)

Yes, that's what I was getting at with my last post. It would be helpful to do so automatically, but how exactly that's done, and what options to present to the user, would need to be thought about. For example, it's clear that a canvas-resizing anchor needs to be selectable, since I thought top-left while you thought center.

When you create an animation in Stencyl, in the end, everything does get stored as a sprite sheet with evenly distributed frames, and that's precisely why your images are being changed the way that they are. If you can prepare your images as an evenly distributed sprite sheet before importing into Stencyl, that would fix the issue.

At the moment, my efforts are focused on the subscribers-only beta of the next Stencyl release. I'm considering this is a low-priority issue, so for now, you'll need to manually reimporting from fixed spritesheets.

[TheIanKirby]

Alright, Thank you for your time.