4

I need some help with this explosion animation design. I made it for some mobile words puzzle game. It shows up when gamers solve the puzzle and reveal the right answer tile. enter image description here

However, one feedback I got is that it feels not nature/engaging enough. I may need some wise suggestions here. Here I also attach the screenshot of how the interface looks like before and after games solve the puzzle.

enter image description here

Any advice about color choosing, shapes or how each frame should look like is welcomed:)

Thanks in Advance!

Updated on Mar 29th

enter image description here

Based on some wise suggestions I got from this forum, I created another sheet which starts from small clouds. And in order to make it more vivid, I added some stars on the later stage of the explosion. However, it turned out not as good as I have expected, is there any improvements about the color choosing or the way stars show up I can make? Thanks a lot!

Updated on Mar 30th enter image description here

Inspired by Popular Burst Accents Animations(What I want to do is something similar to the effect on 0:20) https://www.youtube.com/watch?v=54-_qopqIas and Timing Principle (one of 12 Principles), I tried to make the sparks and cloud explode in different speed. But it seems not as good as what I want to achieve. I wish I could get some feedback on that version. :) I appreciate all you guys' helps!!

4
+25

It does not look like an explosion. It looks like a fading cloud.

An explosion has directionality starting from a point. This images are simply dissolving.

If you need an explosion, the first image should be smaller, then growing and dissolving.

  • Thanks so much @Rafael. This is very helpful. Do you have suggestions on animation tutorials to look at? I'm pretty good at drawing individual frames but having trouble putting them together into a cool animation for a game. – Peiyun Chen Mar 31 '17 at 0:49
4

Your animation timing is linear, this is a natural tendency for some people as it's easy. That is each frame advances the sequence distances the same amount. What you really need is something that first moves very fast and then slows down, or as they say the animation eases in.

If you're animating by hand and you have a hard time picturing this you can draw some linear guides. Then start deleting guides at the start of your animation and then delete less guides as you reach the end.

Also you may want to have a few frames of anticipation due to your graphics style.

  • Yeah "Slow In and Slow Out" is actually one of the 12 principles :) – Peiyun Chen Mar 31 '17 at 6:52
  • @PeiyunChen yes but an explosion should be violent so slow in should be indicate something is about to happen then abruptly make it happen. – joojaa Mar 31 '17 at 6:53
  • yeah, that is very true! Just like "Anticipation" (indicate something is about to happen) :) and I will also try to draw some linear guide. – Peiyun Chen Mar 31 '17 at 6:57
  • So current each frame is 0.05 seconds. Should I change it and make it unequal? – Peiyun Chen Mar 31 '17 at 6:58
3

I think you have already done a great job. Here are a few of my suggestions that might be helpful.

I usually animate in After Effects, so I am not sure if all these tips might apply to sprite sheets, however I believe that these principles can be applied anywhere, regardless of the software used.

1. As someone previously answered, animate the scale from small to big. I would suggest that the first frame to be at 0px scale(if possible), then gradually grow from there.

2. Keep the accents. Those are the little stars that pop-up at the end. Try coming up with new types of accents. Here is some inspiration: https://www.youtube.com/watch?v=54-_qopqIas

3. I would also consider adding proper easing to the animation. Basically, control the speed progression of the sprite sheet within the animation. In this case, I would start quickly until the 'pop' happens, afterwards I would give it a few seconds of easing out. I demonstrate what I am talking about here: http://cubic-bezier.com/#0,.98,0,.98

(This website is used for CSS but you can use the bezier curves on the left and apply this type of interpolation in any animation program. On the page, the pink cube represent the speed progression that I would use for your animation.)

4. In terms of color, I would choose a color that suggests emphasis and a call to attention. In a lot of situations that color would be red, but see if it works in your project.

Also, visit the Adobe colors website: https://color.adobe.com/create/color-wheel/

Choose a base color and set a color rule of shades or monochromatic. Choose one main color for the sprite and use use the other ones for the edges of the sprite, for the sprite itself at different stages and for the accents.

5. The shape seems fine. I think it is a good idea to use round shapes instead of sharp ones since roundness usually conveys more friendliness.

I think you did a great job! In terms of animation tutorials, the best ones to study are the the 12 Basic Principles of Animation.

Take each one and see how it pertains to your animation.

I hope this helped and I wish you all the best in your project.Let me know if you have any other questions!

Update: I am glad you found my tips helpful! I want to help you for free, I will not charge you anything :). What I think you should do is study online principles and workflows of sprite sheet animation and of animation in general. There are SO MANY resources out there. Here is a starting point: https://www.youtube.com/watch?v=U1BQofY46AQ&list=PLYEm7rMz0yoetzd3FvBK0pLy9GaYrzyTv and https://www.youtube.com/watch?v=haa7n3UGyDc&list=PL-bOh8btec4CXd2ya1NmSKpi92U_l6ZJd . Afterwards, ask any further questions here and in this way other people will find useful tips in the future and other users will be able to see and help. Win-win :)

  • 1
    Hi, thank you very much for this detailed, inspiring answers. I appreciate it a lot! A lot of resources here are really helpful. For each of your suggestion: 1. Sure, I will definitely try start from 0px. 2. The youtube video contains so many cool inspiration! I have found several cool effects, will try each one out to see which one fit my project best. 3. A few seconds of easing out after 'pop' is a good idea, I will try this out too, and the example you gave makes a lot of sense here. – Peiyun Chen Mar 31 '17 at 1:12
  • 1
    4. Just check out Adobe Color website, it is a powerful tool that helps people collect color palette anytime and anywhere. I will try this out too 5. So i will keep the round shapes here, yeah I agreed, I want it to look more friendly :) 6. 12 Basic Principles of Animation is very inspiring too, I learned a lot from reading these, will try to apply some of them in this project. – Peiyun Chen Mar 31 '17 at 1:15
  • 1
    Thank you again for these greats suggestions! By the way. would you be willing to consult for a few hours to help accelerate my learning? I'm pretty good at drawing individual frames but am new to animation as you can see. If so, how much would you charge per hour? – Peiyun Chen Mar 31 '17 at 1:17
  • Thanks @Vicki for adding Adobe Colors website. Now I understand what a color rule of shades or monochromatic means. :) – Peiyun Chen Mar 31 '17 at 2:18
  • 1
    Here is what I suggest: After checking out those videos, in addition to my tips above, see if you can create an animation that will receive the feedback that you seek. If you will still not be receiving the feedback that you seek, then post a comment here and I will contact you to provide further help :) – user37388 Mar 31 '17 at 5:26
2

What you have there is called a sprite sheet. It is basically a collection of different bitmap images, put into one image. Then the image is masked so only the relevant part shows. This means only one resource needs to be loaded once, instead of lots of small resources.

The Magic Google Search Term™ would thus be Explosion sprites. This reveals what Rafael already pointed out: an explosion expands from the center, then dissolves.

So what you have now is not bad, don't throw it away! You can use it as the final stages of the explosion. All you need now is three or four frames before these, showing the explosion expanding into this cloud.

Example:

explosion sprites

Click for full resolution

  • Hi, PieBie, Thank you very much for sharing the cute video and the 'magic word' :) These are really helpful! I will try to add some frames at the beginning. Btw, could you please suggest some animation tutorials? I would very much appreciate that. – Peiyun Chen Mar 29 '17 at 23:39
1

Your animation doesn’t have any anticipation or good fading effect, which doesn't make it look like an explosion.

I suggest having anticipation with a vibrating cloud of 2 frames and when the smoke goes outward it should be fast and sudden and it slows down when it starts to fade away.

Additionally, try to make it dissipate without the star in the middle and rather puffs of smokes with the center of light in the middle of the explosion to make it a bit more dramatic.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.