Particle Effect Series #4: I love you

3

Attached Files

The following files have been attached to this tutorial:

.capx

heart-particle.capx

Download now 212 KB
.png
.png

Stats

5,282 visits, 10,042 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 3 Apr, 2017. Last updated 19 Feb, 2019

I love C2

I love you the visitor

I love everything else

This time it's all about love <3

We will create a lovely particle effect with hearts.

So..

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

I have no heart!

After particle effect is placed image editor will open. If you are an artist you can draw a heart here. Or download from the internet. Or simply download it from the left side I give a free heart for you :D

I made the heart white so you can change to any color you want.

After done close editor.

Configure Particle Effect

I'll just list all the changed particle properties and give a short comment why it was changed.

Angle : -90

Particles will go upwards.

Blendmode: Additive

makes the color of particles which cross each other more intense.

Rate: 2

For this special effect we want to create we need less particles. Or it looses it's effect.

Spray Cone: 20

Only spray upwards

Speed : 50

Not so fast. You can play around with this value.

Size : 1

Start small. Grow Big.

Grow Rate : 10

The particles will be larger over time.

X-Randomiser : 10

Shifts the particles left and right at start time. This gives a little variation and makes it look more natural or else it looks all too mechanical.

Acceleration : 0

Turn OFF acceleration

Speed Randomiser : 0

Turn OFF Speed Randomiser. Prevents particles to move down as they should only move upwards.

Timeout : 4

Give enough time for particles to grow and move on screen

That's all you have to change. It will create a similar effect to the GIF below.

Love Cube

That was a short tutorial. But I'll show you the usage of the particle effect we created. We will do a very little coding.

- On left side download the "love cube"

- Place it on layout

- Place the keyboard input on layout

- Select particle effect, go to behaviors and choose "Pin" as behavior

- Make sure the love cube is at the position where the particle effect emits (starting position)

All together should look like this

Now when you hit play it looks like if the hearts come out from the love cube and the love cube has so many hearts to give.

Love Cube: Movement

We will make the cube move around scene now.

Go to the event sheet and type the following:

    System > On Start of Layout > Particles > Pin Pin to lovecube(Position & Angle)
    Keyboard > Left Arrow Down > lovecube > Move forward -1 pixels
    Keyboard > Right Arrow Down > lovecube > Move forward 1 pixels


Sample

That will

1. attach the heart particles to the cube

2. move cube on the horizontal axis and with it the heart particles

Now as you move the cube the particle effect will follow your cube.

Where to go from here?

Obviously the love cube was only a place holder. You can replace it with a character in your game.

One more thing is that you may not want to have the particles spray on and on. Let's say you have a player and a NPC. The hearts are attached to the NPC. When the player comes close enough to the NPC activate the particle effect via code. And when the player is too far away deactivate the particle effect. That will surely look better.

You can also increase the rate at which the particles spawn to make it more interesting maybe.

Who said hearts have to be red :P

And one final example : Invert the growing.

Make hearts big as they spawn but grow smaller over time

For the example above I changed properties as following

size: 32

rate : 5

speed: 100

grow rate: -10

I hope you enjoyed this little tutorial.

.CAPX

heart-particle.capx

Download now 212 KB
.PNG
  • 0 Comments

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