AuthorTopic: GR#140 - Magic Fire & Ice - Animation  (Read 21256 times)

Offline Sohei

  • 0010
  • *
  • Posts: 102
  • Karma: +0/-0
    • View Profile

GR#140 - Magic Fire & Ice - Animation

on: May 23, 2012, 06:25:22 am
Hi! Currently I'm training in fire effects. The idea was to make several types of fire attack for a mage in platformer game. But I've realized, that I don't know what I'm doing.
This is what I call "Fire Touch". You can read the idea, but the shape dynamics makes me hesitant.

Upd:

Ultimate magic "Fire Dragon", a lump of fire in a shape of a dragon's head. But I can't find a way to make plausible burning. What can be done to make it more interresting?

C+C please!
Upd: As an experiment added a sort of afterburn.
Upd2:
Upd3:

Upd4:
« Last Edit: September 15, 2013, 12:24:17 pm by Sohei »

Offline rikfuzz

  • 0010
  • *
  • Posts: 427
  • Karma: +1/-0
    • View Profile
    • twitter @hot_pengu

Re: [WIP] Magic Effects (fire)

Reply #1 on: May 23, 2012, 03:06:44 pm
The motion on the first dragon looks weird, especially because it's kind of going counter clockwise, rather than front to back.

Second one's interesting, but my mind relates it to the boss being destroyed type animation.

Think you need to animate the front of the dragon more, and show more directional motion?  The image alone reminded me of an anime I had many years ago, there was a dragon made of blood...    Have found the scene, perhaps not that useful, but inspiring animation! 

http://www.youtube.com/watch?v=IoSOmR-tmlY#t=1m50s

Some other firebased thing I've done that might be semi useful:

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: [WIP] Magic Effects (fire)

Reply #2 on: May 23, 2012, 10:41:15 pm
Cool!













Various degrees of burning detail are interesting.
Having some static elements can add alot of focus and emphasizes the dragon
On the other hand having more parts burning gives it more motion and emphasizes the fire.

I like both face designs.
You could use either one or both for different attacks.
If you want to go really crazy chomp his jaws!

There are different ways of creating and representing special effects.
Iconic, stylized, realistic, etc all have their own look and appeal.

Elements have different viscosity.
This is usually a term used for liquid but can be used as an animation term for all materials.

In nature viscosity is the thickness of a material and it affects many variables about how it changes over time under various forces.

Artistically viscosity helps you give meaning and motion to an effect as it changes each frame.
We can simplify many properties into single ideas:

Volume - overall amount of space, shape and form, mass, 2D and 3D space.
Depth is commonly shown with overlapping shapes, colors, edges etc.

Motion - direction change, speed up, slow down.
Stuff moves.
It goes places.

Resolve - how the material clusters together, breaks down, and dissipates.
Usually energy dissipates and changes over time/distance.

Style - the shape design of individual clusters and particles.
natural vs stylized.
There are different parts of the effect to draw as it changes.
Water has waves, sheets, ripples, beads, bubbles foam etc.
Fire has flames, sparks, swirls, smoke etc.

This crap lets you plan out an animation.
Draw a series of arrows representing forces.
In practice it is similar to using Line of Action for other animation techniques.

Some old drawings of mine:




Mapping lines of action to a photo:


As the material passes thru these arrows how does it change?
That's for you to decide.
And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline PypeBros

  • 0100
  • ***
  • Posts: 1220
  • Karma: +2/-0
  • Pixel Padawan
    • PypeBros
    • View Profile
    • Bilou Homebrew's Blog.

Re: [WIP] Magic Effects (fire)

Reply #3 on: May 24, 2012, 07:18:18 am
@PPD: impressive. I'll keep that as a reference, for sure.
however, my coder mind is wondering: "isn't this the job of a particle system, and not of a skilled pixel artist/animator" ...

Offline Sohei

  • 0010
  • *
  • Posts: 102
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire)

Reply #4 on: May 24, 2012, 10:21:53 am
PixelPiledriver,
This is amazing. Today I've learned something new. Thank you!

Offline Daimoth

  • 0010
  • *
  • Posts: 140
  • Karma: +0/-0
  • I Am Tooth
    • View Profile

Re: [WIP] Magic Effects (fire)

Reply #5 on: May 24, 2012, 11:42:06 pm
Thread is now property of PP. :o

The advice I came to post is feeble by comparison: Fire generally looks like it's coming off in pieces.

Offline Sohei

  • 0010
  • *
  • Posts: 102
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire)

Reply #6 on: May 25, 2012, 04:56:06 pm
Okay, so I've tried to apply acquired knowledge to make a proper burning head. What do you say?

Offline Conzeit

  • 0100
  • ***
  • Posts: 1448
  • Karma: +3/-0
  • Camus
    • conzeit
    • View Profile
    • CONZEIT

Re: [WIP] Magic Effects (fire)

Reply #7 on: May 25, 2012, 08:38:09 pm
You're getting ahead of yourself, you're shading things before you get to the complexity of the first edit PxPiledriver did.


When I look at his animation I can see all these lines of action. The red ones are constant and the squiggly green represents the pulsing that goes on closer to the head

You can see all these lines of action because you can clearly see where each of the specks of fire is going.


in yours, I can barely tell that all of the fire is pulsing, but I cant see what each little speck of fire is doing.

Now I want you to compare his first step with your edit, just looking at their sillouethes


Even without all the colors, his is much more clear.

at this stage he only used one color for the animation, as he saw that it was working he went adding more and more colors, each complimented what was going on underneath.

I think you should do the same.

Now, PixelPileDriver blatantly used static diamond particles and they dont look even slightly like fire. This would be a bad thing except he's incredibly good at making them ACT like fire.

I think it's an excellent way of explaining how to animate, but dont feel forced to make this your look or anything :p just pay attention to the sillouethe and make sure we can follow the line of action of each speck of fire.
« Last Edit: May 25, 2012, 09:13:01 pm by Conceit »

Offline Daimoth

  • 0010
  • *
  • Posts: 140
  • Karma: +0/-0
  • I Am Tooth
    • View Profile

Re: [WIP] Magic Effects (fire)

Reply #8 on: May 26, 2012, 10:11:25 pm
I like the way his fire looks better than the particle-ey fire, to be honest.  :n:

Offline Grimsane

  • 0010
  • *
  • Posts: 423
  • Karma: +2/-0
    • View Profile

Re: [WIP] Magic Effects (fire)

Reply #9 on: May 26, 2012, 11:47:32 pm
I reckon sohei's latest effort could work if he had a couple or few more frames, the motion is too quick it is more a back forth and rapid flicker than a definite lashing of flame, but I dunno, depends what you are going for, PPs is definetly got the motion nailed, and the heat distortion on the face looks awesome, very particle driven also, try adding between frames and see what happens would be my advice.

PP's last one with the whirlwind of embers is quite interesting ;D curious whether it was hand done or used a particle system or a combination of the 2

Offline Sohei

  • 0010
  • *
  • Posts: 102
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire)

Reply #10 on: May 27, 2012, 07:09:43 am
Conceit, thank you for highlighting my mistakes. The point about silhouette has been very useful.
Here's a revised version. Any better?


Daimoth, Grimsane, thank you!

Here's also some more fire works.
Fireball   Fireball2    A type of explosion
« Last Edit: May 27, 2012, 11:36:40 am by Sohei »

Offline Carnivac

  • 0010
  • *
  • Posts: 269
  • Karma: +0/-0
  • Mayhem Attack Squad
    • View Profile
    • Doctor Who - Retro Sprite Gallery

Re: [WIP] Magic Effects (fire)

Reply #11 on: May 27, 2012, 02:50:25 pm
PixelPileDriver's edits are nicely animated but lack a sense of energy (can't think of a better word at moment) and the flames don't seem wild enough, but Sohei's latest attempts certainly have it.  I actually get a feel of burny death impact from those. :)
NES, Amiga & Amstrad CPC inspired
I know nothing about pixel art
http://carnivac.tumblr.com/

Offline jinza

  • 0001
  • *
  • Posts: 26
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire)

Reply #12 on: May 27, 2012, 06:33:33 pm
I think pixel piledriver's needs to animate the dragon head fire headball as well then it will look better but that's the only reason i like sohei's better and also the way Pixel piledriver has it animated makes it look more like water[or liquid] than fire

Offline Dusty

  • 0100
  • ***
  • Posts: 1107
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire)

Reply #13 on: May 27, 2012, 09:21:09 pm
I feel like the flame leaving the face of the lion would work better if it started with a more flowing, smoother shape, even if it doesn't adhere to the randomness of a flame:


I think if you started the flames leaving the face with a smooth motion like that and have it break into the randomness of a flame, it would work way better as an animation as a whole.

I also don't think the slow pulsing brightness is helping, as all it's doing is making it very easy for my eye to notice the pattern of the animation(which is very bad when you're trying to portray something unpredictable like fire). If anything, have the varying brightness very rapid/flickering.
« Last Edit: May 27, 2012, 09:24:23 pm by Dusty »

Offline Conzeit

  • 0100
  • ***
  • Posts: 1448
  • Karma: +3/-0
  • Camus
    • conzeit
    • View Profile
    • CONZEIT

Re: [WIP] Magic Effects (fire)

Reply #14 on: May 27, 2012, 10:59:35 pm
I can certainly tell you heeded my advice Sohei  :D the motion of the fire is much more clear and really that was all that I was getting at. From here on I think the animation is good enough that improvements depend on the context in which it'll be displayed.
Daimoth and Carnivac I actually agree about PxPd's edit, but I still it's an excellent form of C&C =), which is what it's supposed to be. I doubt PxPd thinks it's a finished piece to ship in a game.

I think you could do what PxPd did with the latter steps of his animation and add more and more layers of detail (smoke, sparks, variations of wild flames, a trail of fire left by the blast, etc)
But without some context that wouldnt necesarily be a good thing, it might be overkill for how long the player would actually see the flame, or it might make the flame have a different feel than it should. Do you have any way to test this ingame or look at it in the context it'll be displayed?

How about you work on that weak fire slash first? there's nothing firey about it right now, how about you a couple (or more) of frames after your last frame, so that it dissipates like fire? I dont think I have to tell you how to make fire dissipate, just do what you did to the trailing specks in your Fire Dragon those look firey enough.

EDIT: just noticed the other flames. with smaller flames I think it works better to make their pulsing more pronounced, and have fewer specks than the bigger fires. When you think of a candle's flame that's a single speck and it pulses quite a lot because it's so weak, but with bigger fires they're slower and more imposing because of that. Look at some real life footage of firethrowers

« Last Edit: May 27, 2012, 11:08:38 pm by Conceit »

Offline Carnivac

  • 0010
  • *
  • Posts: 269
  • Karma: +0/-0
  • Mayhem Attack Squad
    • View Profile
    • Doctor Who - Retro Sprite Gallery

Re: [WIP] Magic Effects (fire)

Reply #15 on: May 27, 2012, 11:23:21 pm
Daimoth and Carnivac I actually agree about PxPd's edit, but I still it's an excellent form of C&C =), which is what it's supposed to be. I doubt PxPd thinks it's a finished piece to ship in a game.

Oh yeah.  They're still lovely animations if not quite 'firey'.  I've saved them onto my laptop to study the motion as I just like the actual animation of them.
NES, Amiga & Amstrad CPC inspired
I know nothing about pixel art
http://carnivac.tumblr.com/

Offline Sohei

  • 0010
  • *
  • Posts: 102
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire)

Reply #16 on: May 28, 2012, 01:58:54 pm
An idea of a small fire people that chase a target on the same ground level.


Conceit
>Do you have any way to test this ingame or look at it in the context it'll be displayed?
Unfortunatelly, no. I'm doing work on paper, imagination and graphic editor for now.
>How about you work on that weak fire slash first? there's nothing firey about it right now, how about you a couple (or more) of frames after your last frame, so that it dissipates like fire?
That's an interesting suggestion, but I'm hesitant. This motion supposed to be very fast and infinite to use as a basic close combat attack.  I agree with you, that it would be much more interesting with dissipation, but I don't know how will it stack together. I'll give a try.
« Last Edit: May 28, 2012, 06:58:13 pm by Sohei »

Offline Grimsane

  • 0010
  • *
  • Posts: 423
  • Karma: +2/-0
    • View Profile

Re: [WIP] Magic Effects (fire)

Reply #17 on: May 28, 2012, 06:20:37 pm
^- That's Awesome!  ;D although after watching it a few times the arch of her arms throw and the arch of the fire men coming from her are entirely different, and a tad odd, but I think that gets done alot in battle effect animations? might wanna try a throw upward animation, her animation now is better suited to throwing daggers or shuriken. can't help but imagine a comedic loop with someone frantically running away from a few of those Flame dudes too :lol: and they definitely look convincingly flame like :y:

Offline Sohei

  • 0010
  • *
  • Posts: 102
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire)

Reply #18 on: June 02, 2012, 01:59:33 pm
Added dissipation for the firetouch. And another fireburst. Do you have experience in making fire throwers? Will this fireburst be enough as a base particle?
     

Offline Conzeit

  • 0100
  • ***
  • Posts: 1448
  • Karma: +3/-0
  • Camus
    • conzeit
    • View Profile
    • CONZEIT

Re: [WIP] Magic Effects (fire)

Reply #19 on: June 03, 2012, 01:54:47 am
hm...cant say I have experience but that's not what I would do for a flamethrower, looks like a pretty generic explosion and expect for being yellow could be any magic effect as well as fire. I would probably do something that starts out as a flat projectile and then expands out into a flame

I think this footage might give you some ideas, always try to research if you're not sure how to make something look like a real thing.
https://www.youtube.com/watch?v=thaP_5d8ZpQ

Offline Sohei

  • 0010
  • *
  • Posts: 102
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire)

Reply #20 on: September 15, 2013, 12:21:19 pm
I'm resuming working on the magic effects. Now ice.
So here is Frost Touch, Ice Shard, Deadly Frost wich turns monsters into ice cubes and some familiars.



How does the ice cube looks to you? I've studied some references, and tried to simulate with the pallete I had, but I'm not satisfied and I've ran out of ideas. I can't make it all shiny and transparent, because it will appear on different sorts of levels.
« Last Edit: October 12, 2013, 07:31:18 am by Sohei »

Offline Parkerbaby

  • 0001
  • *
  • Posts: 90
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire+ice)

Reply #21 on: September 15, 2013, 02:27:10 pm
I don't like how his head turns in the ice effect. It seems like he is unable to control it.  Much better was the fire effect animation's head. In miming the action at my keyboard I notice perhaps it is natural to look in the direction of your hand at the end, but the movement of the head on the neck is so quick, it doesn't need any frames in between.

Offline Sohei

  • 0010
  • *
  • Posts: 102
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire+ice)

Reply #22 on: September 16, 2013, 12:42:35 am
New cube.

Offline Nightblade

  • 0001
  • *
  • Posts: 3
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire+ice)

Reply #23 on: September 24, 2013, 01:59:32 am
Might be a neat idea to have him do a bit of a different stance for Ice attacks. The fluid arm swipe suits fire well enough.

Offline Sohei

  • 0010
  • *
  • Posts: 102
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire+ice)

Reply #24 on: September 24, 2013, 05:11:20 am
Might be a neat idea to have him do a bit of a different stance for Ice attacks. The fluid arm swipe suits fire well enough.
It is indeed a neat idea, I'll see what can be done. I hope my imagination will give a hint on how to handle it better.

Also, here's an update on ice effect.

Offline Nirel

  • 0001
  • *
  • Posts: 38
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire+ice)

Reply #25 on: September 24, 2013, 07:59:20 am
What about raising his hand instead, or using both hands?

Offline Nightblade

  • 0001
  • *
  • Posts: 3
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire+ice)

Reply #26 on: September 27, 2013, 02:15:22 am
What about a powah geyser?

Offline Sohei

  • 0010
  • *
  • Posts: 102
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire+ice)

Reply #27 on: October 12, 2013, 06:37:09 am
Nightblade
Oh, I can try that. How does it look?


Nirel
Good ideal. I can try that one too.
All
And speaking on this, I would like to raise gamedesign question, If it will not be offtopic here, though it directly intersects with battle animations.
How do you evaluate current battle system? Right now I have some type of close range battle (fire touch, a main weapon for 15% of a game) which is inferior to actual sword play, because there is combo stacking, blocking and parry. A combat will look like: single hit and run.
When long range weapons will be acquired it will transform into some inferior type of Contra, except that enemies doesn't spawn from camera side. A combat will look like cowboy duel: who fires first and dodges damage.
I begin to doubt, that a platformer about a mage was such a great idea. Can I still draw some fun out of the concept?

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: [WIP] Magic Effects (fire+ice)

Reply #28 on: October 12, 2013, 07:08:21 am
I'm interested in your game design discussion, but I'm a bit unclear what you mean.
I think your English and your reference to Contra (2 perspectives) isn't helping.

Are you considering changing the perspective for ranged battle to be some kind of 1st or 3rd person view?
I hope not.


I've already done some thinking (too much  :crazy:) on how to make ranged battle more interesting and in depth for a 2D sidescroller, as opposed to the quick thrills coin munching arcade style that I think you're refering to.
But I think much of this depends on your options for control scheme (controller vs touchscreen), what kind of attacks/weapons you are thinking about, and what kind of enemy behaviour you had in mind.
Input options for touchscreens are horribly limited though >.<

Feel free to PM if you want to chat on about it...

Offline Sohei

  • 0010
  • *
  • Posts: 102
  • Karma: +0/-0
    • View Profile

Re: [WIP] Magic Effects (fire+ice)

Reply #29 on: October 12, 2013, 07:28:04 am
Decroded
My English is not very good. I'm asking an apology If I'll write confusing stuff.

Your point is correct. I should've explained controls, genre and monster behaviour.

Genre - Metroidvania.
Controls - keyboard. Z - jump. X - attack. ↑+X - secondary attack. A, S - brings sub menu to select another weapon and secondary weapon. Spacebar - probable backdash


Skill progression chart

Complex magic spells require some time to be cast.

For monsters, I have plain walkers right now. My knowledge doesn't hint how should I balance combat: starting from monsters or fighting capabilities. So I'm making random guesses.