: How to make this explosion animation better 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
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.
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.
Any advice about color choosing, shapes or how each frame should look like is welcomed:)
Thanks in Advance!
Updated on Mar 29th
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
Inspired by Popular Burst Accents Animations(What I want to do is something similar to the effect on 0:20)
More posts by @Welton168
4 Comments
Sorted by latest first Latest Oldest Best
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.
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:
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: 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: 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: and . 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 :)
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:
Click for full resolution
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.