Animations... I just don't get it.

[Aristy]

Hi,

 

Before I start, I would like to describe my problem. I have a ripped sprite (not planning to use this, but will ask my questions based on this) that looks like this:

 

 

and planning to develop a game that looks like:

 

 

Here are my questions.

 

1. I heard sprite frames must always be at the same size. However, in the sprite, you can see the the girl's size is dynamic. (e.g crouching at the start, standing up in the next few frames) How can I handle this with Phaser so the girl doesn't get hit by projectiles aimed at 100px height of the sprite? When crouching, height of the girl becomes 80px so there won't be any collisions, unless the girl stands up.)

2. In frame 5, projectiles will collide with girl's sword since it is very long, making the girl take damage from her sword which makes no sense. What can I do to avoid this? (e.g can I remove the sword from the girl, and keep the sword in a seperate sprite, then attach it to her hands specially for each frame?)

 

3. In the gif, you see the sword girl (left side) moves to the target, does the animation and damage pops. Am I going to specify that myself depending on my frames? Like:

animation.on('frame5', function() {     monster.receiveDamage(10);});

4. In the sprite, if I want my girl to equip a completely different sword (like a RPG) I should draw my girl without the sword, right? Similarly, what if I want to show different armors on my girl? Should I create a seperate armor sprites and show it on top of my girl sprite? (and still rely on girl collisions?)

5. In the sprite, we only see the attack animation, but there are move-left/move-right/idle/crouch/swim/jump animations which are usually on a different collision size. For example, when swimming, I will have a collision size of: 120px width and 30px height. When standing, it will be 120px height and 30px width. When crouching, it will be 70px height and 30px width. What's the best way to handle it with Phaser?

6. If I want to add virtual effects to my animation (e.g when I hit the monster with sword, I want fire/ice/lightning particles to appear depending on the type of sword) how can I calculate when the particles should appear? Should I do it with frame callbacks like in example 3, or rely on a timer?

 

I asked a similar question back in March, but I still couldn't make my mind around it so I wanted to ask it the second time. The whole idea of keeping the sprites at the same size feels very limiting, unless I'm thinking the whole animation process on the wrong side.

 

What am I supposed to do, if I want my girl to have an ultimate skill which is a gigantic sword? I cannot make the sprites 1000x1000, just because sword is 950px in width. And it should have a seperate collision detection mechanism (e.g damagingSkill to monster instead of player to monster) otherwise I will eat up all the monster projectiles and kill myself.

 

Is there any proper way to handle it?

 

Ps. So far every guide I found has a 50x50 frame sprites where character covers the whole frame, so collision detection always looks good, but literally none of them covers animations or becoming smaller (like crouching) properly.

[DonFrag]

1-change the body size depending of the state , standing crouching etc

2-4 if you are going to use different weapons you can use a character with a empty hand as one body and then attach a weapon sprite with his own body. that way you can solve problem 2, because you cand handle with wich body the projectiles should collide.

3 i don't understand wll that question. maybe you mean that when the monster get hit then fire a function that displays the damage pop up with a timer so that way you can fire it no matters how many frames the mmonster animation has.

4 the armor could be just sprites with no bodies attached. at the end the girl main body should handle collision

5-i think i answer this before.

6-I would use a timer just in case that some monster had different frames

 

If you want collisions accurate accord to the weapon shape and size you should use p2, who lets you use polygon shapes. arcade physics always are boxes....but p2 will cost you performance so you should be aware of that.

 

[MichaelD]

About the question for swords, armors, etc. You should have different sprites for these and treat them normaly but keep local or global variables that define what kind of equips you have on.

var equips = { dagger: {damage:10}, katana: {damage:50}, armor: {armor:50, type:"scaleArmor"}};function calculateDamageDone(swordType){  return equips[swordType];}

There many ways to do this but I think you get the point.

 

The bottom line is that I think it is best to keep your animations and actual game logic separate. Try to keep states about the player so you don't have to track the animation frames.

[Aristy]

About the question for swords, armors, etc. You should have different sprites for these and treat them normaly but keep local or global variables that define what kind of equips you have on.

var equips = { dagger: {damage:10}, katana: {damage:50}, armor: {armor:50, type:"scaleArmor"}};function calculateDamageDone(swordType){  return equips[swordType];}

There many ways to do this but I think you get the point.

 

The bottom line is that I think it is best to keep your animations and actual game logic separate. Try to keep states about the player so you don't have to track the animation frames.

 

I don't ask this. The damage should be done when sword hits the target. In the sprite, that is frame 5. I'm asking if I should attach a callback on certain frames or rely on a timer.

[MichaelD]

You can check on update function what the -> Sprite.animation.currentFrame is and do something, this way you don't need a timer, since the update is running anyways.

[DonFrag]

I don't ask this. The damage should be done when sword hits the target. In the sprite, that is frame 5. I'm asking if I should attach a callback on certain frames or rely on a timer.

i would use a timer

[MichaelD]

And are you certain the timer will always align with the animation frame?

[Aristy]

1-change the body size depending of the state , standing crouching etc

2-4 if you are going to use different weapons you can use a character with a empty hand as one body and then attach a weapon sprite with his own body. that way you can solve problem 2, because you cand handle with wich body the projectiles should collide.

3 i don't understand wll that question. maybe you mean that when the monster get hit then fire a function that displays the damage pop up with a timer so that way you can fire it no matters how many frames the mmonster animation has.

4 the armor could be just sprites with no bodies attached. at the end the girl main body should handle collision

5-i think i answer this before.

6-I would use a timer just in case that some monster had different frames

 

If you want collisions accurate accord to the weapon shape and size you should use p2, who lets you use polygon shapes. arcade physics always are boxes....but p2 will cost you performance so you should be aware of that.

 

1. How do we do that with Phaser? I cannot keep them in a single sprite at the same width and height then.

 

2. What I thought. Does Phaser support that?

3. The damage should be done when sword animation hits the target. In this case, if you look at the sprite, it will be 5th frame that should deal the damage. I wonder if I should rely on frame callbacks for that, or keep a timer depending on my frame. Callbacks sounds like a better practice but I wonder what would be the best practice.

 

4. Same as 2. I'm wondering if Phaser supports something like this with a builtin feature, or if I should rely on update method and re-draw the sprite on certain X and Y locations depending on player.x and player.y each time. Do we have an easy way to do it, such as an "attachSprite" feature?

5. The problem is, let's say my run-left animation consists of 200x200 frames, becoming 200x1600 in the sprite. When I add crouch-left animation in the same sprite, do I add them as 100x200 or 200x200? The girl won't be standing up, so height will be much lower, but I heard people saying it must be 200x200 similar to all frames.

 

Seriously, a small guide or a tutorial about this would be awesome, but I cannot find anything, sadly.

 

6. Well, how slow would P2 be? Are there any benchmarks I can check?

 

You can check on update function what the -> Sprite.animation.currentFrame is and do something, this way you don't need a timer, since the update is running anyways.

 

 

What happens if the game runs at stable 60 FPS and I have an animation taking 1 seconds to run over 6 frames? That means the callback would trigger 10 times. How can I react such scenarios?

[DonFrag]

1. How do we do that with Phaser? I cannot keep them in a single sprite at the same width and height then.

 

2. What I thought. Does Phaser support that?

3. The damage should be done when sword animation hits the target. In this case, if you look at the sprite, it will be 5th frame that should deal the damage. I wonder if I should rely on frame callbacks for that, or keep a timer depending on my frame. Callbacks sounds like a better practice but I wonder what would be the best practice.

 

4. Same as 2. I'm wondering if Phaser supports something like this with a builtin feature, or if I should rely on update method and re-draw the sprite on certain X and Y locations depending on player.x and player.y each time. Do we have an easy way to do it, such as an "attachSprite" feature?

5. The problem is, let's say my run-left animation consists of 200x200 frames, becoming 200x1600 in the sprite. When I add crouch-left animation in the same sprite, do I add them as 100x200 or 200x200? The girl won't be standing up, so height will be much lower, but I heard people saying it must be 200x200 similar to all frames.

 

Seriously, a small guide or a tutorial about this would be awesome, but I cannot find anything, sadly.

 

6. Well, how slow would P2 be? Are there any benchmarks I can check?

 

 

 

What happens if the game runs at stable 60 FPS and I have an animation taking 1 seconds to run over 6 frames? That means the callback would trigger 10 times. How can I react such scenarios?

1- http://phaser.io/docs/2.3/Phaser.Physics.Arcade.Body.html#setSize

2-addchilds?

3- try and make your choice

4-same as before

5-again, one thing is the sprite and another is the body. 

 

there is a lot of questions that involve testing and choice.

here we have given you some ways of doing it but what will happen it's a mystery for us.

I recommend you try and post when something is not working and then we can see the code.

[MichaelD]

1. How do we do that with Phaser? I cannot keep them in a single sprite at the same width and height then.

 

2. What I thought. Does Phaser support that?

3. The damage should be done when sword animation hits the target. In this case, if you look at the sprite, it will be 5th frame that should deal the damage. I wonder if I should rely on frame callbacks for that, or keep a timer depending on my frame. Callbacks sounds like a better practice but I wonder what would be the best practice.

 

4. Same as 2. I'm wondering if Phaser supports something like this with a builtin feature, or if I should rely on update method and re-draw the sprite on certain X and Y locations depending on player.x and player.y each time. Do we have an easy way to do it, such as an "attachSprite" feature?

5. The problem is, let's say my run-left animation consists of 200x200 frames, becoming 200x1600 in the sprite. When I add crouch-left animation in the same sprite, do I add them as 100x200 or 200x200? The girl won't be standing up, so height will be much lower, but I heard people saying it must be 200x200 similar to all frames.

 

Seriously, a small guide or a tutorial about this would be awesome, but I cannot find anything, sadly.

 

6. Well, how slow would P2 be? Are there any benchmarks I can check?

 

 

 

What happens if the game runs at stable 60 FPS and I have an animation taking 1 seconds to run over 6 frames? That means the callback would trigger 10 times. How can I react such scenarios?

 

I'm not sure you understand how animations with frames run, when you declare a sprite animation you set how many frames per second its going to run, if you have an animation with 6 frames you will probably set the fps of that animation to 12+ depending on how fast do you want the animation to run, but the update function will only catch the currentFrame = 5 once (provided you don't have it on repeat).

So all in all your animation is not dependant on the overal FPS, and what I suggested is not based on a callback but rather an if statement on the general update function.

 

I think you should try to create some examples to see for your self how different things appear.

[Skeptron]

I'm curious why people say that the frames all have to be the same dimensions. I use frames of different sizes and it works like a charm.

[MichaelD]

Yes of course, especially if you use atlas hash, then there is no limitation.

[Aristy]

Yes of course, especially if you use atlas hash, then there is no limitation.

 

I used atlas hashes myself. This is what Richard responded to my question few months ago.

 

http://www.html5gamedevs.com/topic/13477-is-it-possible-to-use-this-sprite/?p=77285

 

The problem is, I feel like I am doing something bad practice, no matter what. In the end, I always hit a wall. Thinking of the future just chains my hands.

 

I'll explain what issues I am currently facing. In the sprite I posted in first comment, I am planning to do the following:

 

1. Remove sword from girl's hands via photoshop.

2. Keep frames at the same size and keep the girl at the center-bottom all the time. (Let's say 100x100 frames.) Some people suggested positioning "body" to the left-bottom of the frame but I don't know what the benefits are.

3. Add 50x100 (50 is height) sized girl frames as the player.crouch animation into the Girl sprite, making it 150px in height. So, 9 frames at the top of the sprite will be used for "attack", 5 frames below it will be used for "crouch".

4. Create another Sprite just for the sword, and position sword according to girl's hand position in each frame. (Keep it the same size as Girl's "attack" animation frames, so 100x100)

5. Whenever player.attack animation runs, run sword.attack animation too.

6. In sword.attack.frame5, create a callback and deal damage to the enemies in collision.

 

BUT, I just can't make my mind around the following questions. Here they are.

 

1. Do I position frames at the bottom-left or bottom-center or somewhere else?

2. If I have 100x100 frames on player.attack animation and want to include new animations in the Player sprite:

 

a. Can I put other animations at different sizes to the same sprite?  (e.g 50x100)

b. If I am forced to use 100x100 frames, what would happen if in the future I end up getting frames that are 200x200? Wouldn't it break all the backwards compatibility of the frame?

c. What is the best practice about it?

 

3. Should I position sword frames in the Sword sprite according to the position of Girl frames (e.g no left-bottom, but rather where girl's hands are at any given time) or should I stick to left-bottom rule, and calculate sword's positions using Phaser during runtime? (e.g frame 1: player.x - 15, frame 2: player.x + 3 and player.y - 12)

 

4. Do I need to keep the sword 100x100 too?

 

Not to mention, the whole process takes way too long to pixel perfect everything. I used like 15 hours previously on this sprite and the output was extremely bad. (e.g sword would collide with ground so the girl wouldn't fall down) Sadly I don't want to do tests/trials once again, and would like to read best practices about animations before making the same mistakes over and over again.

 

Ps. Would anyone be interested in mentoring me and get something usable from the sprite above (I can pay for the mentorship) with best practices? I'm pretty experienced with JS and developed so games in the past, it is just the animation part that doesn't tick!

[chg]

Not to mention, the whole process takes way too long to pixel perfect everything. I used like 15 hours previously on this sprite and the output was extremely bad. (e.g sword would collide with ground so the girl wouldn't fall down) Sadly I don't want to do tests/trials once again, and would like to read best practices about animations before making the same mistakes over and over again.

The above seems to suggest you aren't maintaining a decent hitbox for the sprite, and instead are letting it autosize to the artwork. You probably want to the hitbox (relatively) consistent independent of the animation (eg. you don't want the character getting stuck under a low thing due to walking under it at the lowest part of the walk cycle; you usually also want some degree of overlap - being stopped at a wall because a pixel of hair is touching it will feel wrong, as will "standing" on a edge of something via the bottom corner of the hitbox if the feet are 1/4 of the width of the sprite off the edge already)

I also don't understand why you are trying to separate the sword from the artwork, only to draw it back in at runtime. Just keep the art uncut, and when the character is attacking use a separate collide check with a different hitbox to determine if the character has hit anything (the attack hitbox needn't be a dynamic object, it should effect the dynamics governing the character movement)

[MichaelD]

Actually why do you bother with colliding the sword to anything? Let the animation be just that an animation and do all the calculations your self, I mean from the example you gave in a turn-based system the animation is going to happen so there is no need to check for collisions, but what happens with the damage etc can be done purely via code.

 

Keep your animations separate from the damage logic or the general action, let the algorithm dictate the type of animation not the other way around.

 

This is the way I would go about on this.

[Aristy]

I also don't understand why you are trying to separate the sword from the artwork, only to draw it back in at runtime. Just keep the art uncut, and when the character is attacking use a separate collide check with a different hitbox to determine if the character has hit anything (the attack hitbox needn't be a dynamic object, it should effect the dynamics governing the character movement)

 

It is because collision callbacks should trigger differently for different sprites.

 

Monster projectile to Player -> Player receives damage.

Monster projectile to Sword -> Projectile is broken. (killed)

Player to Monster -> Player receives damage.

Sword to Monster -> Monster receives damage. (but damage should be dealt on certain frames, not while winding up the sword)

 

If I keep both sword and the girl in the same sprite, and set hitboxes according to girl's body, how am I supposed to deal damage with sword? Sword will just be an animation with no collision boxes, so I won't be able to detect which monsters it hits to.

 

 

Actually why do you bother with colliding the sword to anything? Let the animation be just that an animation and do all the calculations your self, I mean from the example you gave in a turn-based system the animation is going to happen so there is no need to check for collisions, but what happens with the damage etc can be done purely via code.

 

Keep your animations separate from the damage logic or the general action, let the algorithm dictate the type of animation not the other way around.

 

This is the way I would go about on this.

 

 

Oh, sorry. I completely forgot I was talking about the JRPG game. However my last posts were targeted for a Hack & Slash game. (e.g Maplestory or Elsword)

You're correct. In the JRPG I can use the Sprite as is, and there is no need for a collision detection, but in a Hack & Slash, sword object has to be collided with monster objects.

 

Sorry for the confusion!

[MichaelD]

I would thing that you can create an empty sprite that has the dimentions of the sword and do the collisions based on that (you can animate this as well). But if you want pixel perfect collision with a "curved sword" that might be a challenge.

[Aristy]

I would thing that you can create an empty sprite that has the dimentions of the sword and do the collisions based on that (you can animate this as well). But if you want pixel perfect collision with a "curved sword" that might be a challenge.

 

Could work. What would you do if you create a RPG game and allow the Player to equip more than one sword? Seperating the sword from the Girl sprites would be the best idea, right?

 

[MichaelD]

It could work but you would need to sync the sword animation with the girl animation all the time, you could create the girl with the different swords (as sprites) and have them load on demand (if you unlock the sword, load the assets with the girl holding the new sword)

[Aristy]

It could work but you would need to sync the sword animation with the girl animation all the time, you could create the girl with the different swords (as sprites) and have them load on demand (if you unlock the sword, load the assets with the girl holding the new sword)

 

It may work, but I will eventually add new armors, add more classes which uses the same weapons, so it would be best to keep them seperated to have a future compatible project. It will also duplicate assets, which will increase the size of drastically.

 

I'll toy with this animation a bit more and see how it goes. However, probably the end result will be having all body pieces seperated. The body, head, legs, attachables (such as wings or mounts) will require gathering tiny bits of pieces together where everything has their own collisions, like feet to ground, feet/body/head to projectiles, sword to monster, hoverboard mount to water typed ground and such.