2D Climb Wall Question

Started by
13 comments, last by behdadsoft 6 years, 1 month ago

Hi.

i busy make a 2d game that i want player can climb the wall. for do this i made this sprite sheet for climb wall animation like below picture. 

This art is animated in same place and make not clean programming for do that. i need know is there better way for design climb wall animation? or i should use this?

anim5.png

Advertisement

You could go that route, but would have to figure out the animation path (should be fairly static), but sometimes people will utilize more space for the set of frames within the sprite sheet.  For example:

(https://opengameart.org/content/the-awesome-possum-ultimate-smash-friends)

awesomepossum%20sheet.bmp

Notice that for the jump/kick animation and the punching animation, the artist dedicates a bit more real-estate on the sprite sheet to animate the movement in-place to simplify the movement logic.

Not all frames need to be the same size, though you will have to account for it.  Hope that helps.

Additional example of different sized frame spaces: https://opengameart.org/content/low-pixel-fighters-top-view

12 hours ago, behdadsoft said:

i need know is there better way for design climb wall animation?

The way this is done is very simple. First, you make the cliff, then you use a layer in your 2D software of choice to make the character climb the cliff.

Now you have the sprites, draw the "Sprite block" Around each animation frame. Find the center of each frame and calculate the difference.

Use the origin differences as a curve input that you can scale to the game size and you get a perfect animation.

On 3/3/2018 at 6:28 AM, ace4016 said:

You could go that route, but would have to figure out the animation path (should be fairly static), but sometimes people will utilize more space for the set of frames within the sprite sheet.  For example:

(https://opengameart.org/content/the-awesome-possum-ultimate-smash-friends)

awesomepossum%20sheet.bmp

Notice that for the jump/kick animation and the punching animation, the artist dedicates a bit more real-estate on the sprite sheet to animate the movement in-place to simplify the movement logic.

Not all frames need to be the same size, though you will have to account for it.  Hope that helps.

Additional example of different sized frame spaces: https://opengameart.org/content/low-pixel-fighters-top-view

Thanks ace4016.

On 3/3/2018 at 6:36 AM, Scouting Ninja said:

The way this is done is very simple. First, you make the cliff, then you use a layer in your 2D software of choice to make the character climb the cliff.

Now you have the sprites, draw the "Sprite block" Around each animation frame. Find the center of each frame and calculate the difference.

Use the origin differences as a curve input that you can scale to the game size and you get a perfect animation.

Thanks Scouting Ninja.

I'm not Art Designer. but need say to my designer what i need. if i understand correctly, we should create a block and design each frame like character is climb the wall. Right?

but i don't understand your explanation about Sprite Block. Can you explain a little bit more clearly?

10 hours ago, behdadsoft said:

but i don't understand your explanation about Sprite Block. Can you explain a little bit more clearly?

A sprite is a image and as such has a sprite block, that is the rest of the image around the sprite; the transparent part. Now looking at your example it could be that your using a bone animation, if so keeping it in one place isn't needed.

Sprite Animation Climb:

Step1) Create the sprites using layers.

ClimbStep1.jpg.4b3b3d738db1bb89f313439a2cbdd0fe.jpg

 

 

Step 2) Make sprite sheet. Here I used colors to show the Sprite Block.

SpriteSheet.jpg.d3b517c0e44985320ba13175466c4b0d.jpg

Step 3) Find the center point of every sprite, this is easy just draw lines from one corner to the other, where they meet is the center. Tools like Photoshop keeps this data in the layers so you don't have to do it by hand.

ClimbStep3.jpg.e0620abd11b20b36d8c70c3a8fa5c920.jpg

Step 4) Align all the images with the one in the climb drawing. Then measure the relative distance between each sprite and use that as input for animating.

ClimbStep4.jpg.fd1c45b4066dc72d29d947d716e627d7.jpg

The above way works in any engine and is easy to do for beginners. With vector graphics this is easy, just copy the position of your master bone to the engine; or export it as is.

 

Extra, center of gravity:

If your engine has a more complex animation tool it will allow you to set the center point. You can then estimate where the center of gravity is and use that as a way to animate the sprite.

This example shows the same animation in the Unity editor.

GravityStep.jpg.2c0c91d061fe99b76ca88b3a11cac813.jpg

This style is faster but more difficult, it takes practice to get right.

Edit:

10 hours ago, behdadsoft said:

I'm not Art Designer. but need say to my designer what i need.

A experienced artist can implement the art for you, just give them that part of the level.

If your artist is less experienced then you need to decide what is the easiest for you to work with and how you are going to animate it. Do some tests. 


I remember this from MUGEN, you had to set points called "axes" to let the engine know where's the pivot of each sprite frame while jumping, kicking etc. This way you can control how the sprite slides around its location, how it is offset when drawn.

axis0.pngaxis1.jpgaxis2.jpgaxis3.jpgaxis4.jpg

 

In case of a climb, for some frames you could place the axis on the character's hands so they stay still in place while the rest of the body moves as the character lifts themselves up.

The sprite bitmap can be cropped \ trimmed out of all transparent pixels to save memory, since the axis point is abstract and you can do it in code, it's just an offset.

On 3/5/2018 at 3:11 AM, Scouting Ninja said:

A sprite is a image and as such has a sprite block, that is the rest of the image around the sprite; the transparent part. Now looking at your example it could be that your using a bone animation, if so keeping it in one place isn't needed.

Sprite Animation Climb:

Step1) Create the sprites using layers.

ClimbStep1.jpg.4b3b3d738db1bb89f313439a2cbdd0fe.jpg

 

 

Step 2) Make sprite sheet. Here I used colors to show the Sprite Block.

SpriteSheet.jpg.d3b517c0e44985320ba13175466c4b0d.jpg

Step 3) Find the center point of every sprite, this is easy just draw lines from one corner to the other, where they meet is the center. Tools like Photoshop keeps this data in the layers so you don't have to do it by hand.

ClimbStep3.jpg.e0620abd11b20b36d8c70c3a8fa5c920.jpg

Step 4) Align all the images with the one in the climb drawing. Then measure the relative distance between each sprite and use that as input for animating.

ClimbStep4.jpg.fd1c45b4066dc72d29d947d716e627d7.jpg

The above way works in any engine and is easy to do for beginners. With vector graphics this is easy, just copy the position of your master bone to the engine; or export it as is.

 

Extra, center of gravity:

If your engine has a more complex animation tool it will allow you to set the center point. You can then estimate where the center of gravity is and use that as a way to animate the sprite.

This example shows the same animation in the Unity editor.

GravityStep.jpg.2c0c91d061fe99b76ca88b3a11cac813.jpg

This style is faster but more difficult, it takes practice to get right.

Edit:

A experienced artist can implement the art for you, just give them that part of the level.

If your artist is less experienced then you need to decide what is the easiest for you to work with and how you are going to animate it. Do some tests. 

Thanks Scouting Ninja.

I use Unity engine. i think understand what should i do, but if during work i need guide, is ask you.

On 3/5/2018 at 9:57 AM, Kryzon said:

I remember this from MUGEN, you had to set points called "axes" to let the engine know where's the pivot of each sprite frame while jumping, kicking etc. This way you can control how the sprite slides around its location, how it is offset when drawn.

axis0.pngaxis1.jpgaxis2.jpgaxis3.jpgaxis4.jpg

 

In case of a climb, for some frames you could place the axis on the character's hands so they stay still in place while the rest of the body moves as the character lifts themselves up.

The sprite bitmap can be cropped \ trimmed out of all transparent pixels to save memory, since the axis point is abstract and you can do it in code, it's just an offset.

 

Thanks Kryzon.

 

offset is good point.

I apologize for the font of Heading 2 size on my post... the post editor for this forum on mobile sucks

On 3/5/2018 at 3:11 AM, Scouting Ninja said:

A sprite is a image and as such has a sprite block, that is the rest of the image around the sprite; the transparent part. Now looking at your example it could be that your using a bone animation, if so keeping it in one place isn't needed.

Sprite Animation Climb:

Step1) Create the sprites using layers.

ClimbStep1.jpg.4b3b3d738db1bb89f313439a2cbdd0fe.jpg

 

 

Step 2) Make sprite sheet. Here I used colors to show the Sprite Block.

SpriteSheet.jpg.d3b517c0e44985320ba13175466c4b0d.jpg

Step 3) Find the center point of every sprite, this is easy just draw lines from one corner to the other, where they meet is the center. Tools like Photoshop keeps this data in the layers so you don't have to do it by hand.

ClimbStep3.jpg.e0620abd11b20b36d8c70c3a8fa5c920.jpg

Step 4) Align all the images with the one in the climb drawing. Then measure the relative distance between each sprite and use that as input for animating.

ClimbStep4.jpg.fd1c45b4066dc72d29d947d716e627d7.jpg

The above way works in any engine and is easy to do for beginners. With vector graphics this is easy, just copy the position of your master bone to the engine; or export it as is.

 

Extra, center of gravity:

If your engine has a more complex animation tool it will allow you to set the center point. You can then estimate where the center of gravity is and use that as a way to animate the sprite.

This example shows the same animation in the Unity editor.

GravityStep.jpg.2c0c91d061fe99b76ca88b3a11cac813.jpg

This style is faster but more difficult, it takes practice to get right.

Edit:

A experienced artist can implement the art for you, just give them that part of the level.

If your artist is less experienced then you need to decide what is the easiest for you to work with and how you are going to animate it. Do some tests. 

i forget one thing: Should i add movement script for climb the wall or should i design my sprite like that himself climb up the wall automatically?

your sprite sheet seem can climb up automatically without script. right?

This topic is closed to new replies.

Advertisement