Particle Effect Series #3 : Pixel Flame Burn

Attached Files

The following files have been attached to this tutorial:

.capx

pixel-flame-burning.capx

Download now 172 KB

Stats

1,696 visits, 2,449 views

Translations

This tutorial hasn't been translated.

Tools

This time I'll show you an easy way to create a nice pixel art flame burning particle effect.

Let's Get Started

1. Create a new Project

2. Name it as you want

3. Change layout color to pure black

4. insert a particle effect on the layout

Dot Draw

After you insert particle effect, image editor opens. Reduce size of canvas to something very small. I used 10 pixels

Choose a flame like color. If you are unsure here the RGB values I used:

**Red : 233

Green : 112

Blue: 21**

Choose the filler tool and simply click on canvas. That will fill the entire canvas with the flame like color. Close editor.

Particle Effect Configuring

Now we only need to change couple of properties in order to give the particle a flame like behavior. I write down every property that has changed and gave a short comment why it was changed.

Angle : -90

Turns particle effect upwards. Now flame particles will rise up

Blend mode: Additive

Adds color of particles at intersection area. On center of particle where more particles collide / intersect with each other this will give more brighter colors and thus represent the center of our flame.

Rate : 20

You can play around with this property. I found 20 to be optimal for myself. Higher value means stronger flame burning. I tested with 50 (the default value) which also looks fine. I don't recommend to set a too low value for this though.

Spray cone: 20

For the burning flame effect particles shouldn't spray left and right but keep their path straight up. I didn't deactivate it completely though to give it a more natural flow.

Speed : 50

50 is just perfect.

Size : 10

This can be changed according what you want to achieve. For this tutorial I want to have a small burning flame. If you want a big one go for 20. If you want a even smaller one you can really go as small as only 1 pixel

Grow Rate : -10

A positive value will grow the particles by time. A negative value will shrink it. This is just perfect for our purpose! We spawn each particle with size 20. By time it shrinks. What does it mean? Easy. The basement of the flame remains big but the upper part will be small. Like a triangle. I tried to explain with a small illustration.

X-Randomiser : 20

Randomises starting point of each particle. Gives more natural burning to the flame.

Acceleration: 0

The default one -150 moves particles downwards. But we don't want this

Angle randomiser: 10

This is the final touch we apply to our burning flame particle effect. Remember I said I want particles to go straight upwards? Well, that is true for when the particles start but not when they end. So angle randomiser will make the particles go left and right actually. But thats not a bad thing. That gives the flame more natural look instead!

Done

Have fun and enjoy :D

Not Done Yet

Did you really think this looks really cool without adding a fire glow? Shame!

- Create another particle effect

- This time use the brush tool

- Set canvas size to 50

- Use a little brighter color than for the flame. I used RGB(238,142,68,255) for this

- Draw a dot on center and close editor

Flame Glow Configuring

Now we don't want the glow move any, do anything fancy or whatever. So deactivate everything that could possibly move the particle effect from its initial spawn position.

Speed:0

Gravity: 0

Acceleration:0

X-Y-Randomiser :0

Speed randomiser:0

and so on...

All the other settings are as following

Blend mode : additive,

angle : -90

rate : 1

spray cone : 0

opacity randomiser : 25

timeout : 3

Finally place it about same position of your first particle effect like this

Hit play, drink your coffee and enjoy.

.CAPX

pixel-flame-burning.capx

Download now 172 KB
  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!