Scaling a TiledSprite with HorizontalSpriteSheetAnimator behaviour

I’ve got a lot of TiledSprites which each have a sprite sheet for animation, so I’m using the HorizontalSpriteSheetAnimator behaviour to make them animated. However, I’d also like to be able to scale these sprites on the X axis, to make them wider or narrower. I can’t set width because that doesn’t scale the image, it cuts it off. But TiledSprites don’t seem to have a Scale action? How can I scale such a sprite?

Weird. It looks like there was scaling for Tiled Sprites at one time. I’m not sure if they removed it on purpose or by accident. It’s still showing in this tutorial.

Tiled Sprite object [GDevelop wiki]

As far as I can tell, that just isn’t there any more, unless I’m missing something obvious?

1 Like

It seems to be gone. I don’t know why.

Edit: It still shows in the JavaScript documentation too but I couldn’t get it to work using JavaScript either. It must’ve been removed either on purpose or by accident.

image

TiledSpriteRuntimeObject | GDevelop JavaScript game engine

Keith_1357, I’ve been looking at the wiki and the part that deals with “scale” tells us that it is possible to change the scale to modify the size of the object. The image shows a normal tiledsprite being resized like we can do in the scene editor.

After, talking about events it says it’s possible to change the size of the tiled sprite (not the scale). My guess is that it was never possible to change the scale of the tiled sprites but just the size. They probably just changed the names of actions in the events and dropped the word “scale” and changed to the right word “size”. What do you think? :thinking:

1 Like

You might be right. I got it to work in JavaScript and setScale seems to set the size of the tiled sprite by the number of copies. So, I’m sorry. Unless, there’s another way.

const obj = runtimeScene.getObjects(“NewTiledSprite”);
obj[0].setScale(10,10);

This sets it to the texture size times 10 width and 10 height.

That’s what I found too – it doesn’t scale the displayed image, it changes the size of the “window” through which the displayed image is shown, if that makes sense. So it seems that it really is impossible to scale a TiledSprite, which is unfortunate for my use case!

1 Like

I don’t like to call anything impossible. Maybe someone else knows how. What are you planning on using the scale for? Maybe there’s another way.

OK. So I’ve got a picture of a log, which looks like this:

image

and it’s animated, so it looks like it’s spinning: there are eight frames showing it rotating.

My game involves carving this log with the mouse, as though it were on a lathe, something like this:

image

To make this happen, the single log is not one image: it’s 60 different images, placed one above the other, each of which has 8 frames of rotation. (It’s not 60 copies of the same image, because then the perspective doesn’t look right: this might illustrate that, with more spacing between the slices.

image

Anyway, the way to make the slices smaller (that is, carved away) is to scale them down on the X axis. (I don’t want to just cut each slice off rather than scale it down because then I lose the shading on each slice and it doesn’t look right.)

Now, I could make each slice a Sprite rather than a TiledSprite, and give each one a separate animation with the 8 separate frames. This would work, and could be scaled. But then I have to create 60 Sprites, and give each one an animation into which I add 8 frames; that is, 480 separate frames. Doing that in the gdevelop editor will take me about a year of tedious work and I really don’t want to, and as far as I’m aware there’s no way to create multiple very similar objects at design time (rather than at runtime). So I combined the 8 sprites for each slice into one image, created the slices (20 of them so far rather than 60, because this is still very tedious) as TiledSprites, set the combined image for that slice as the TiledSprite’s image, and I use HorizontalSpriteSheetAnimator to do the animation.

So, that’s why I want to scale a TiledSprite; doing this with Sprites would take forever to do by hand, especially if I decide to re-render the images or change it so there are 12 frames of animation rather than 8, or anything similar.

If there’s a better way to do this, I’m open to suggestions!

Interesting. Let me think about it. My first thought is using a mask. Not sure if you’re familiar with the “marching squares” extension. If not, create a new project from template and type “marching squares”.

I don’t think you can mask an animated sprite. I never tried but if not then maybe you can place an masked image or even just draw on a shape painter over it to hide parts of the spinning wood. You would have to restrict movement. IDK, it’s a thought.

This is just drawing on a shape painter to hide the spinning sprite.

left click anywhere draws a black circle and it’s mirror.

Edit: I reread your post. I’m not totally sure on your technique, I understand you want to keep the shading. So, IDK if this would work. Maybe if there was a reduction in opacity in spots. One shape painter full opacity and one partial.

Ah, masking the sprite would be the same as chopping it off by setting the width, unfortunately: masking off the left (or restricting the width) of one of the slices would look like this:

image

whereas it should look like this when scaled.

image

As you can see, a width-restricted version has cut-off edges, and a mask would fix that, but the “proper” version also has the distinct lighting shadow on the left, and that can’t be done with masking, unfortunately.

Unless I’m misunderstanding what you mean by masking here?

Yeah, I think I understand. Let me think more. And maybe someone else might also have a suggestion.

You can’t scale a tiled sprite. It’s called tiled for a reason.

However, I would suggest using sprite masking and sprites. Have the 8 slices on a sprite, say stacked vertically. Use a sprite mask that is just big enough for 1 slice. To give the illusion of rotation, simple move the sprite up by the height of each slice so that the slice that should be displayed is under the sprite mask object.

For example, say your sprite has these 8 slices :

image


Using the green outline to indicate the sprite mask. It stays in the same position, but the sprite moves.

image


You can then scale the sprite and the sprite mask. It’d then just be a matter of calculating the change in Y position based on the scale.

1 Like

OK, I can see how that would work. Thank you!

I like the idea of using the offset of a tile sprite to create the illusion of spinning. I also think you could layer sprites and then make them semi-transperent or use the blend modes. Maybe one motionless sprite could be for shading, one for texture and/or pattern. Theres also the patch sprite. You might be able to utilize the locking of texture near the edges. IDK just typing what comes to my mind

Yeah, I explored that possibility too, but 9 panel sprites don’t allow for offsets like tiled sprites do. They’re more like a sprite object in that regard, but with extra functionality.

1 Like