本文へスキップ

Kwik App Design Book: 24 Particle System


Created Saturday 28 March 2015, Need kwik3.4.0 and Kaboom 1.0.1

Use Kaboom

You can create a fancy particle animation with Kaboom plugin for Kwik. The price of Kaboom is $49.99. Kaboom is a plugin for Kwik and it runs on Mac and Windows.
http://kwiksher.com/product/kaboom/

Kaboom User guide
http://kwiksher.com/user-guide/kaboom/

For updating Kaboom, you will find the download link from your accout page
http://kwiksher.com/my-account/

Kaboom can import paticles made by Particle Desinger, 71 Squared Inc. Particle Desinger is only available for Mac
https://71squared.com/particledesigner

This tutorial demonstrates how to create a particle system by Kaboom, how to import a particle from Particle Designer and how to change the texture image of a particle.

the following rectangles will be replaced for particle animations.

Select a layer in Layer Panel and click Layers and Replacement > Particle replacment

Particle Replacement Window. Click Create Particles.

Kaboom window appears

Rename as you like and Click LIVE PREVIEW button.

Corona Simulator runs up to show the default new particle.

You can configure the paticle system with the various parameter inputs on Kaboom. Click Create button on the left bottom to save the particle system.

Publish the project to check the particle replacement.

Corona Simulator shows the particle and the other display objects.

Import Particle Designer file

Let's import Particle Designer file if you owns PD. https://71squared.com/particledesigner

Your PD file should be exported without embedding texture image and set FlipY true for Corona SDK
Copy the json file of PD and the png file to the project folder of your kwik.
For instance, particle2.json and particle2.png are copied to ~/Documents/Kwik/yourBook/

Select a layer and click Particle replacement from Kwik panel and Browser button to select the json file from PD.

Select particle desiner's json file

Don't click "Create Particles" button with Kaboom Icon. Click "Create" button on the bottom left.

The paticle is created with PD json file.

You can preview the particle from PD. Once the PD json is imported, "Edit Particles" with Kaboom icon is available.

LIVE PREVIW in Kaboom.

Published.

Corona SDK Sample

You can view various particle samples in the folloing folder
Corona Labs/Corona SDK/Sample Code/Graphics-Premium/EmitterViewer

This zip contains the same json/image files which can be imported to Kaboom
Please download and use it

http://www.kwiksher.com/tutorials/Multi/CoronaSDK_Emitter_Viewer_Sample.zip

Change Texture image

Now we replace the default texture image. I created a simple star png.
Put a image file Not root folder of your project folder. For instance, create "img" folder under your project folder and put the image file


From Kaboom, click image area to change the image.

If you want to have each particle in the same colour as the original PNG

http://forums.coronalabs.com/topic/49088-particle-designer-color-issue/
Blend source: GL_ONE
Blend destination: GL_ONE_MINUS_SRC_ALPHA
Start color: white (100% opacity)
End color: white (100% opacity)

That's all.

Enjoy creating colorful particles.