Layering Sprites

EDIT: I apologize for the lack of clarity. By layered sprite I mean assembling different sprites together one on top of the other. For example, this sprite sheet shows the character with no weapons, they are drawn by the program on top of the character depending on the character’s level:

I’ve been designing a game and equipping items seems to be the way to go for it, but I don’t know if GDevelop supports layered sprites. With layered sprites I can avoid drawing hundreds of sprites for every situation the character will be thrown in.Can it be done with GDevelop? Thanks in advance.

Can you explain exactly what you mean by layered sprites? GDevelop has layers, it has Z values for sprites, so you can assemble a large sprite from stacking smaller ones on top of each other. It sounds like you want to do something like create one body sprite, two arm sprites, two leg sprites and a head sprite and then assemble your player character from those bits, moving the arms and legs with commands, rather than being pre-rendered.

Sorry for the confusion and thanks for the reply. Yes that’s exactly what I mean. Have one sprite on top of the other. This way the character can wear equipment like swords, shields and helmets without me having to redraw each sprite with a combination of these items. This way I can simply draw base movement sprites and then assemble the equipment sprites on top of the character, helmet over his head, sword and shields over his hands, etc.

You can create a separate object for the weapon, and put it on the player hand through a point in the player sprite. The problem is the sword animation, as it won’trotate with the arm.
Here is an example of “parenting”, but in this example the little ship tower always follows the ship angle, has no custom rotation: [url]How to make an object parent to another? - #2 by Lizard-13]

One way to fix it is adding to the sword the same animations the player has, for example if the player has an animation “Walk” where its arm rotates slightly to the left and then to the right, you should add an animation for the sword, with the same name, where the sword rotates in the same way. Then you can sync the animations through events. The problem is that you have to create the animations rotating the weapon, and it has to be synced… hard work! :unamused:

Other way (for this particular case of the guy with the sword) is adding an extra point to the player, this extra point will determine the weapon angle, for example if the player has the sword in vertical position you add the “Hand” point at the hand, and the “Elbow” point under the hand. Then, in the events, after positioning the sword at the hand, you can calculate through trigonometry the angle between the elbow and the hand, and rotate the sword :nerd:

Surely other people will try to help you with more cool ideas if you give more specific needs, as you can see there are multiple ways to achieve it (but in the end it’s always about extra objects and position/rotation syncing) :slight_smile:

So in principle, yes you can do that in GDevelop using custom points on each sprite - one for sword, one for shield, one for helmet etc.
Having the player walk around holding a sword is then easy: once you’ve defined a point called “sword” on each frame of the “player” sprite animations you can then use an action that positions the Sword object at the “sword” point, which will look something like:

Do =Player.PointX(sword); =Player.PointY(sword) to the position of Sword

Which is the action: All Objects>Position>Position of an object

This will work fine for walking and jumping where the sword is simply being held vertically, but as Lizard-13 pointed out, it gets trickier when slashing with the sword to keep the two objects moving correctly together. It’s not obvious from the spritesheet you showed how the sword will move during an attack so whether you will need to rotate the Sword object or whether it can be faked with the animation isn’t clear.

Not much to add, what the others said is all true. I’d just want to point out that, from my experience, GDevelop isn’t exactly perfect for this kind of “parenting” when movement is concerned. At least if you have move events that move your character without taking attachments into consideration. Moving a character is carried out in one frame, and if your attachments are handled in a different event they will likely be considered in the next frame. So when moving objects with a lot of speed then attachments will start lagging behind. There are ways to get around this but I think it would amount to moving all attachments within each event that moves the parent, which can get really clunky.

Another thing to consider is how much you value pixel perfect graphics and positioning. GDev moves things with increments lower than one pixel as far as I can tell. So attachments will also get coordinates that aren’t pixel perfect. You can set images to never blur and always be displayed pixel perfect, in essence having them snap to your pixel grid, but when handling attachment positions that will result in them rounding their position to full pixels. So in the end they wont always be displayed at the exact same point, they might wiggle around by a pixel if their position isn’t changed in every event that also changes their parent position. Again, this can probably be avoided somehow, but makes moving your parent more clunky. This gets exponentially worse if you have a lot of events that move your parent, which I’d assume is the case for a fighting game like the one you showed the assets for.

You are talking about forces, right? If I remember correctly the forces movement are applied post events, so if you add a force to the parent object and do child position = parent position through an event, the parent will be moved after this event but before rendering, and the child will be displayed “lagged”. But there is an action to apply the forces movement during the events, I think, this way you can put all your events that moves the parent first, call this action to apply forces movement, and then put your events that sync the child position, I… think… :confused:

You mean like this?


Or rather putting it after the parent object is moved in other events? Interesting, never occurred to me that this is the use for that event function. It does not reference specific objects, does it only apply to the objects referenced elsewhere in this specific even then?

Well I tried this in several positions within events, but it appears to always apply all existing forces on all objects, so that’s not really feasible.

Yeah, forget it, even if you use this action GD will apply the forces (again) at the end of the event, so you’ll move your parent object twice, and the child will still be laggy… so no idea when this action can be useful :confused:

Thanks everyone for the help. I guess it’s time I delve into GD and see these effects myself. Personally I wonder if this lag would be a problem if there’s no fast characters like we see in Sonic, for example. Maybe increasing sprite size or resolution would mask this effect? Sorry if I’m whining but the amount of sprites I would have to make would easily shoot up to the thousands if I can’t assemble these elements satisfactorily (different armors, shields and swords).

I managed to find my way through the wiki and tutorials, and “successfully” created points on the sprites I’m testing with, to put the object on those points. Just as a test, to see how laggy this would be, I drew up an object to follow the player’s face (a mustache) through the points, but it’s not obvious to me from the tutorials/examples how I should parent them.

Also, another problem I encountered was that the points I select remain fixed for the duration of the animation, so I can’t change them on a frame-by-frame basis. What I mean is that while the character will move, the child object (in this test a mustache) won’t stay in the right place every frame. To illustrate, the fixed point won’t match the correct place in the character in this picture:

Hi!
This is pretty messy video, But I think you’ll find there what you are looking for (how to change point positions etc): https://youtu.be/M5R4B1FBaog

Probably it is not the solution you looking for but instead of trying to position small objects on different points of the player such as hat, moustache, hair, shoes…etc, and make them follow the point, you could (it is totally optionally, just saying) create the moustache, cloth…etc images to be the same size as the player image and position the staff on the image to fit so they could simply overlap the player object in-game and move and animate them along with the player.

Right key is pressed, move player right and play walk animation Right key is pressed move moustache right and play walk animation

It would definitely solve all your problem but then you need to make tons of animations and images to make sure all accessories fit the player at all frames of animation.

Another victim! hahaha : https://github.com/4ian/GD/issues/357 :laughing:

Jubeliuksen3, I couldn’t watch your video yet but thank you for helping and making all those tutorials!

ddabrahim, your method was very simple to understand and implement. It also seems to favor thoughtful, pixel-perfect placement of the sprites, something the points have difficulty offering. I tried your suggestion, and good news: no lag was observed! The mustache followed the character flawlessly:

Though I’m not sure how I should align both the mustache’s and the character’s sprites perfectly from its origin points. Another problem is that I was forced to make the mustache a “platformer character” so it would follow the character through its behaviors without having to “program” it.

EDIT: Managed to solve the above issue by myself! Took some time but feels satisfying. The mustache has no player behavior, it follows the player no matter what and there’s no lag involved: my idea can be successfully accomplished! For those who are learning like me this is how I did it:

:blush:
Heh, I just noticed that button a few moments ago :blush: , though I suspect it wouldn’t offer the precision ddabrahim’s method gave me. Maybe it’s not the proper way to solve my problem but it worked!

I’ve just had a play with the basic platformer project, adding in points on each Player animation in order to give him a “hat” (actually a piece of ladder) and “shoes” (shrunken castle blocks). Even with the speed of the Player movement boosted, the hat and shoes don’t seem to lag.

If you put the attached project file in the same folder as the basic platformer project (usually C:\Program Files (x86)\GDevelop\Examples) it will be able to find the graphics.
Basic platformer-with hat.gdg (66.4 KB)

I think the icon and pop-up text aren’t as helpful as they could be for the button that toggles between applying changes to all frames or just to the current frame. I do think it’s useful to duplicate a new point across all frames to begin with, though, as you can then alter only the ones where the point needs to move, rather than entering them for every frame. It just needs to be more obvious when it is applying to all frames or not.

A better approach might be to use the blank column in the points window to indicate what the points are being applied to.

e.g.
points.gif

“This frame” might be better than “one frame”.

Hey Matt! Thank you for posting the example with the points. I’ve tested it and indeed no lag was observed as it was rumored earlier. It seems creating equipment for the character to wear is possible with the two methods (sprites with same size as character sprite and sprites that follow points). Maybe it’s a matter of personal taste but working with same-sized sprites feels easier to work with than working with points, though I’m not sure how efficient which would be considering the things I want to do (such as change equipment, animate them, sync them).

Hey Lizard-13, I’ve attempted this using ddabrahim’s suggestion, but I’ve failed in several fronts. One is the direction in which the objects (glasses in this test) are created over the character. When I create the glasses when the character is facing left, the glasses are created/spawned facing right:

I searched for something that would be useful for this situation but nothing stood out. I tried this, but to no avail:

Another problem I encountered was synchronizing, as you stated earlier. If I hold the buttons that create the glasses, this will happen:

And after I stop holding the buttons, the glasses get out of sync. I’ve tried these but they didn’t work:

and

I apologize for the long, detailed posts, I’m trying to show that before asking for help, I’ve tried solving the problem myself.

Possibly the problem does not exist if you are using the plat former behaviour, (since that might handles forces differently?). However I’m pretty sure the problem does exist when using normal forces and change position events to handle attachments, as seen here:


Those dual cannon things at the side of the elevator thing are attachments, they noticeably lag behind when going up or down at decent speed. Didn’t have a better example at hand but it becomes more noticeable at smaller object with larger speeds. Events for this look like this:

So I guess if you’ll stick with the platformer behaviour then this might eliminate the problem.

As the “direction” event tells you, it is dealing essentially with the objects angle. (I don’t thing the direction event has any use unless used with 8 direction mode, since otherwise it does the same as the “angle”) You can try using sprite/effects//flip the object horizontally. I don’t know how that behaves with attachments. Also constantly deleting and recreating object during movement isn’t very economically. You’ll want to handle this with states, having a move right and move left state for the player that flips objects only once initially.