1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> 3<!-- InstanceBegin template="/Templates/default_template.dwt" codeOutsideHTMLIsLocked="false" --> 4<head> 5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6<meta http-equiv="Content-Style-Type" content="text/css" /> 7<!-- InstanceBeginEditable name="CSS の相対パス指定" --> 8<link href="../../../common/manual.css" rel="stylesheet" type="text/css" /> 9<script type="text/javascript" src="../../../common/ibox.js"></script> 10<!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="ページのタイトル" --> 11<title>Creating Particles</title> 12<!-- InstanceEndEditable --> 13</head> 14<body> 15<div> 16 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 17 <h1>Creating Effects Using Particles</h1> 18 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 19 <p>You can create effects in CreativeStudio by using particles.</p> 20 <p>This page describes the basics of creating effects and how to configure color animations for particles.</p> 21 <h2>Preparing to Create Effects with Particles</h2> 22 <p>On the CreativeStudio menu, select<B> Create</B> → <B>Effect</B>.</p> 23 <p>The <B>ParticleCtrCreationPanel</B> dialog box appears, where you can enter a name for the particle.</p> 24 <p>In this example, we enter "color" for the name.</p> 25 <img src="assets/particle_create01.png" alt="Entering the particle name"/> 26 <p>Enter a particle name, then click <B>Apply and close</B> or <B>Apply </B>to create the effect.</p> 27 <p>When you create a particle, CreativeStudio generates the following content.</p> 28 <table> 29 <thead> 30 <tr> 31 <th>Content name</th> 32 <th>Description</th> 33 </tr> 34 </thead> 35 <tbody> 36 <tr> 37 <th><user-supplied-name>Model</th> 38 <td>This is a <a href="../../../user_guide/particle_effect/particleeffect_structure/content/index.html#ParticleModel">model</a>.<br /> You can create multiple particle sets in a model and then layer them together.<br /> You can then display or hide these particle sets, and expand or shrink, rotate, and move particles centered on the particle model.</td> 39 </tr> 40 <tr> 41 <th><user-supplied-name>Particle</th> 42 <td>This is a <span class="hint"><a href="../../../user_guide/particle_effect/particleeffect_structure/content/index.html#ParticleSet">particle set</a>.<br /> You can use a particle set to configure particles and create particle animations.</span></td> 43 </tr> 44 <tr> 45 <th><user-supplied-name>Material</th> 46 <td>This is the default material used only for particle effects.</td> 47 </tr> 48 <tr> 49 <th><user-supplied-name>Texture</th> 50 <td>This is the texture used for the particle effect.</td> 51 </tr> 52 <tr> 53 <th><user-supplied-name>Emitter</th> 54 <td>This is an <a href="../../../user_guide/particle_effect/particleeffect_structure/content/index.html#ParticleEmitter">emitter</a>.<br /> You can use the emitter to specify the particle set into which particles are emitted.<br /> You can also control how many particles are emitted and for how long.</td> 55 </tr> 56 </tbody> 57 </table> 58 <p class="hint">Each type of content is named according to the particle name you entered earlier.<br /> Ex: colorModel</p> 59 <h3>Checking Particles</h3> 60 <p>Check the created particle.</p> 61 <a href="assets/particle_create.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/particle_create.png" alt="Created particle image"/></a> 62 <p>Click the Play button in CreativeStudio to show the effect created in the <B>Preview </B>panel.</p> 63 <h3>Setting Particle Effects</h3> 64 <p>To make it easier to check the color animations you are creating, you can configure the direction of movement of particles and the number of frames.</p> 65 <h4>Configuring the Particle Movement Direction</h4> 66 <p>Use the particle set <B>Properties</B> panel to set the direction of movement of particles.</p> 67 <p>In this example, we configure the particles to move upwards at a uniform velocity.</p> 68 <p class="no">(1) To display the particle-set panel in the Properties panel of the main window, click once on colorParticle in CreativeStudio's Contents panel.</p> 69 <p class="new_hint"><B>Note:</B> Double-clicking on the colorParticle icon opens the particle set <B>Properties</B> panel in a separate window.</p> 70 <a href="assets/particle_create03.png" rel="ibox" title="Click the image"><img class="ui_thumb" src="assets/particle_create03.png" alt="Particle set Properties panel image"/></a> 71 <p class="no">(2) From the Position category group box, select <B>Add in specified direction</B> and press <B>Add</B>.</p> 72 <img src="assets/particle_create09.png" alt="Particle Set Panel Position"/> 73 <p class="no">(3) Now that the Add in specified direction item has been added, set these values:</p> 74 <p>Direction Y: 1<br />Speed: 0.2</p> 75 <p>With these settings, particles move upwards at a uniform velocity.</p> 76 <img src="assets/particle_create04.png" alt="Particles moving upwards at a uniform velocity"/> 77 <h4>Configuring the Timeline Panel</h4> 78 <p>In the timeline panel of CreativeStudio's main window, change the last frame to 200.</p> 79 <p class="hint">The frame number cannot be changed when the <B>Play</B> button is pressed, so stop the preview to change the value.</p> 80 <h3>Color Animation Settings</h3> 81 <p>You can configure color animation for the particles moving upwards at a uniform velocity.</p> 82 <p>On the particle set <B>Properties</B> panel, change the color animation to <B>Overwrite previous value</B>.</p> 83 <p class="new_hint"><B>Note:</B> <B>Overwrite previous value </B>is a method of animation. The value of the previous frame is overwritten with the next value to be set.</p> 84 <img src="assets/particle_create05.png" alt="Changing color animation absolute values"/> 85 <p>Use the <B>Curve Editor</B> panel to edit the animation.</p> 86 <h5>Opening the Curve Editor Panel</h5> 87 <p>On the CreativeStudio menu, click <B>Window</B> → <B>Curve Editor</B>.</p> 88 <p>For details on the <B>Curve editor</B> panel, click <a href="../../../ui_reference/tool_panel/curveeditor_panel/index.html">here</a>.</p> 89 <a href="assets/particle_create06.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/particle_create06.png" alt="Curvet panel image"/></a> 90 <p>When you open the <B>Curve editor</B> panel, <B>colorParticle</B> will appear at the top of the tree view. Click to expand the tree and show X, Y, and Z.</p> 91 <p class="hint">XYZ correspond to RGB color channels.</p> 92 <h5>Creating Curves</h5> 93 <p>Create animation curves for each of the X, Y, and Z color components of colorParticle.</p> 94 <p>Create animation curves as shown in the figures below.</p> 95 <img class="user_guide_chart" src="assets/startup_guide_effect_curve.png" alt="Color animation curves"/> 96 <p class="hint">You can copy your curves by hitting Ctrl+C, and paste by hitting Ctrl+V.<br /> You can save time by creating a curve for one color channel and then copying to other color channels and modifying as needed, instead of having to create from scratch each time.</p> 97 <p>After creating the color curves, you can check in the <B>Preview</B> window to see that the particles are animated, using the colors in the timing specified by the curves.</p> 98 <img src="assets/particle_create07.png" alt="Particle animation"/> 99 <h4>Configuring Random Particles</h4> 100 <p>You can configure your animation to use random timings.</p> 101 <h5>Configuring the Particle Set Panel</h5> 102 <p>Change the color animation Playback options you just configured as shown below.</p> 103 <img src="assets/particle_create10.png" alt="Setting the playback options for color animation"/> 104 <ul> 105 <li>Select <B>Specify frame count</B> as the option and then change the <B>Frames per cycle</B> value to 100.<br />Selecting <B>Specify frame count</B> allows you to freely change the length of the curves.<br /> In this example, we set the value to 100, and since this is the same as for the curves created earlier, the animation is rendered as-is.</li> 106 <li>Check the <B>Random offset</B> option.<br />Checking this option allows you to start the animation at any random offset.</li> 107 </ul> 108 <p class="hint">After changing the <B>Frames per cycle</B> value, you can run the Preview to confirm that the animation is changing randomly.</p> 109 <img src="assets/particle_create08.png" alt="Playback options image"/> <!-- InstanceEndEditable --> </div> 110 <div class="footer" /> 111</div> 112<hr><p>CONFIDENTIAL</p></body> 113<!-- InstanceEnd --> 114</html>
