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 a Fire Particle Effect</title> 12<!-- InstanceEndEditable --> 13</head> 14<body> 15<div> 16 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 17 <h1>Creating fire effects using particles</h1> 18 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 19 <p>CreativeStudio can create a myriad of effects using particles.</p> 20 <p>This page describes how to create a fire effect using particles and sample textures. </p> 21 <h2>Creating a Particle Effect</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>Here, we enter "fire" for the paricle name.</p> 25 <img class="manual_image" src="assets/fire_particle_create.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>Click the <B>Play</B> button in CreativeStudio to display the particles in the <B>Preview</B> panel.</p> 28 <a href="assets/fire_particle_create01.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/fire_particle_create01.png" alt="Particle creation image 01"/></a> 29 <h3>Emitter Settings</h3> 30 <p>Here, we will set an emitter using the <a href="../../../glossary/index.html#particle_emitter">particle emitter</a> <B>Properties</B> panel.</p> 31 <p>Parameters for the emitter shape, size, and volume of particles to be emitted can be set on the particle emitter <B>Properties</B> panel.</p> 32 <p>Single clicking on <B>fireEmitter</B> displayed in the <B>Contents</B> panel will display particle emitter settings in the <B>Properties</B> panel.</p> 33 <a href="assets/fire_particle_create03.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/fire_particle_create03.png" alt="Particle creation image 03"/></a> 34 <p class="hint">Selecting the CreativeStudio menu <B>Window > Property panel</B> or double-clicking on a particle emitter icon displayed in the <B>Contents</B> panel will open the <B>Properties</B> panel in a separate window, where the same emitter settings as given above can be made.</p> 35 <h4>Changing the emitter shape</h4> 36 <p>On the particle emitter <B>Properties</B> panel, the emitter shape can be selected from among <em>point, disc, sphere, cylinder, rectangle, and cube</em>.</p> 37 <p>Here, we will change the emitter shape to a sphere.</p> 38 <img class="manual_image" src="assets/fire_particle_create04.png" alt="Particle Creation Image 04"/> 39 <p>Confirm that particle emission changes on the <B>Preview</B> panel when the emitter shape is changed.</p> 40 <h3>Loading texture intermediate files</h3> 41 <p>On the CreativeStudio menu, select <B>File </B>→ <B>Open </B>→ <B>Intermediate file</B> to load the fire texture intermediate file located in the following folder:</p> 42 <p>%NW4C_ROOT%/SampleData/Effect/Intermediate/fire_particle/fire_anim.ctex</p> 43 <p>The following texture image is used. <em>L8</em> is used for the texture format.</p> 44 <img class="manual_image" src="assets/fire_particle_create02.png" alt="Particle Creation Image 02"/> 45 <p>Loading the fire texture intermediate file will display <B>fire_anim</B> in the CreativeStudio <B>Contents</B> panel.</p> 46 <h3>Material settings</h3> 47 <p>The fire texture intermediate file loaded into CreativeStudio will be applied to particles using the material <B>Properties</B> panel.</p> 48 <p>Single clicking on <B>fireMaterial</B> displayed in the <B>Contents</B> panel will display the material <B>Properties</B> panel.</p> 49 <a href="assets/fire_particle_create05.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/fire_particle_create05.png" alt="Particle creation image 03"/></a> 50 <p><B>Standard</B> mode, <B>Details</B> mode and <B>Particle</B> mode have been prepared on the material <B>Properties</B> panel.</p> 51 <p class="warning">The description here uses <em>Details</em> mode on the material <B>Properties</B> panel.</p> 52 <p>For details on the material <B>Properties</B> panel, click <a href="../../../ui_reference/panel/property/material/index.html">here</a>.</p> 53 <h4>Adding textures</h4> 54 <p>The fire texture intermediate file is added to available settings on the material <B>Properties</B> panel under Texture configuration.</p> 55 <p>Right click on the box labelled <B>Texture number 0</B>, select <B>Apply texture</B> and then choose <B>fire_anim</B>.</p> 56 <p>Now, we will apply <B>fire_anim</B>.</p> 57 <img class="manual_image" src="assets/fire_particle_create06.png" alt="Particle Creation Image 06"/> 58 <p>The CreativeStudio <B>Preview</B> panel will appear as follows when <B>fire_anim</B> is applied.</p> 59 <img class="manual_image" src="assets/fire_particle_create07.png" alt="Particle Creation Image 07"/> 60 <h3>Particle effect settings</h3> 61 <p>In this section, we will set the particle lifespan and an animation using the particle set <B>Properties</B> panel.</p> 62 <p>Single click <B>fireParticle</B> displayed on the <B>Contents</B> panel.</p> 63 <a href="assets/fire_particle_create09.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/fire_particle_create09.png" alt="Particle creation image 03"/></a> 64 <p>The particle set <B>Properties</B> panel will appear in the CreativeStudio main window. Change the following settings.</p> 65 <h4>Lifespan setting</h4> 66 <p><B>Lifespan</B> sets the particle lifespan.</p> 67 <p>Change the lifespan values to those given below.</p> 68 <img class="manual_image" src="assets/fire_particle_create10.png" alt="Particle Creation Image 10"/> 69 <ul> 70 <li>Max. value: 30f</li> 71 <li>Min. value: 20f</li> 72 </ul> 73 <p>Making the above settings randomly varies the particle lifespan between 20f to 30f.</p> 74 <!-- #BeginLibraryItem "/Library/glossary_particle_life_time.lbi" --> <!-- パーティクル寿命の時間 ( particle_life_time ) --> 75 <p>The <I>particle lifespan</I> is the amount of time between the emission of a particle from a particle emitter and its expiration.<br /> It can be used to animate individual particles.</p> 76 <!-- #EndLibraryItem --> 77 <h4>Color Settings</h4> 78 <p>Here, we will change the colors used by the particle vertex shader to the numeric values given below.</p> 79 <img class="manual_image" src="assets/fire_particle_create11.png" alt="Particle Creation Image 11"/> 80 <ul> 81 <li>R: 1</li> 82 <li>G: 0.16</li> 83 <li>B: 0.05</li> 84 </ul> 85 <p>Making the above settings will cause the CreativeStudio <B>Preview</B> panel to appear as shown below.</p> 86 <img class="manual_image" src="assets/fire_particle_create12.png" alt="Particle Creation Image 12"/> 87 <h3>Animation settings</h3> 88 <p>Now, we will create a fire-like animation.</p> 89 <h4>Alpha animation settings</h4> 90 <p>Now we will set an animation for the vertex alpha of the particle.<br /> Under <B>Alpha</B>, select <B>Overwrite previous value</B> from the <B>Animation</B> pull-down menu.</p> 91 <img class="manual_image" src="assets/fire_particle_create13.png" alt="Particle Creation Image 13"/> 92 <p>The setting option <B>Overwrite previous value</B> will appear. Check the playback option <B>Fit to lifespan</B>.</p> 93 <!-- #BeginLibraryItem "/Library/glossary_particle_fit_to_lifespan.lbi" --> <!-- ライフフィット ( particle_fit_to_lifespan ) --> 94 <p><B>Fit to lifespan</B> is a playback option that automatically links animations created on the <B>CurveEditor</B> panel with particle lifetimes.</p> 95 <!-- #EndLibraryItem --> 96 <p class="hint">This allows you adjust the duration of alpha animation to match the particle lifespan.</p> 97 <p>Create an alpha animation curve using the <B>CurveEditor</B> panel.</p> 98 <p>Select <B>Window</B> → <B>CurveEditor</B> to open the <B>CurveEditor</B> panel in a separate window.</p> 99 <p>Clicking on the plus sign next to <B>fireParticle</B> displayed on the <B>CurveEditor</B> panel expands the hierarchy. Expand to <B>Alpha</B> and then <B>Curve</B> and set the following numeric values. </p> 100 <a href="assets/fire_particle_create22.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/fire_particle_create22.png" alt="Particle creation image 22"/></a> 101 <ul> 102 <li>Horizontal axis: 0, Vertical axis: 1</li> 103 <li>Horizontal axis: 20, Vertical axis: 1</li> 104 <li>Horizontal axis: 30, Vertical axis: 0.25</li> 105 </ul> 106 <p class="hint">The values for the horizontal axis and vertical axis when the alpha animation is displayed on the <B>CurveEditor</B> panel represent the following information.<br /> Horizontal axis: Frame value<br /> Vertical axis: Alpha value</p> 107 <h4>Texture coordinate 0 animation setting</h4> 108 <p>Return to the particle set <B>Properties</B> panel. Configure an animation under <B>Vertex UV translation</B> for <B>Texture coordinate 0</B>. <br /></p> 109 <p>Select <B>Texture pattern</B> from the pull-down menu.</p> 110 <p>Texture pattern settings will be displayed. Change the settings as follows.</p> 111 <img class="manual_image" src="assets/fire_particle_create14.png" alt="Particle Creation Image 14"/> 112 <ul> 113 <li>Number of divisions U: 4 114 <ul> 115 <li>Sets the number of divisions in the horizontal (U) direction of loaded texture coordinates.</li> 116 </ul> 117 </li> 118 <li>Playback order: 0 - 3 119 <ul> 120 <li>Sets the playback order of the divided texture.</li> 121 </ul> 122 </li> 123 <li>Playback options: Check <B>Fit to lifespan</B>. 124 <ul> 125 <li>Adjusts the duration of the animation curve to match the particle lifespan.</li> 126 </ul> 127 </li> 128 </ul> 129 <p>Making the above settings will cause the CreativeStudio <B>Preview</B> panel to appear as shown below.</p> 130 <img class="manual_image" src="assets/fire_particle_create15.png" alt="Particle Creation Image 15"/> 131 <h4>Scale settings</h4> 132 <p>Set the size and amplitude of the effect by changing the particle scale.<br /> Change scale values to those given below.</p> 133 <img class="manual_image" src="assets/fire_particle_create16.png" alt="Particle Creation Image 16"/> 134 <ul> 135 <li>Standard value X: 2</li> 136 <li>Standard value Y: 2</li> 137 <li>Standard value Z: 1</li> 138 <li>Amplitude: 25 ( % ) </li> 139 </ul> 140 <!-- #BeginLibraryItem "/Library/glossary_particle_amplitude.lbi" --> <!-- 振れ幅 ( particle_shaped_width ) --> 141 <p><B>Amplitude (%)</B> is a random value multiplied by the standard value at the time of particle generation.</p> 142 <h5>Amplitude formula</h5> 143 <p class="hint">Standard Value ± (Random Value × Standard Value)</p> 144 <!-- #EndLibraryItem --> 145 <h6>Example</h6> 146 <p>The calculation formula when the above settings, X axis = 2, Amplitude = 25%, have been made is 2 ± (0.25 × 2), with a random value varying between 1.5 and 2.5.</p> 147 <h5>Applying an animation to the scale</h5> 148 <p>Additional settings are appear under <B>Scale</B> when <B>Add to previous value</B> is selected from the <B>Animation</B> pull-down menu.</p> 149 <img class="manual_image" src="assets/fire_particle_create17.png" alt="Particle Creation Image 17"/> 150 <p>Settings for <B>Add to previous value</B> and <B>Default value</B> for X, Y and Z will be displayed. Change the default values for <B>Add to previous value</B> as given below. </p> 151 <ul> 152 <li>X: -0.02</li> 153 <li>Y: -0.02</li> 154 <li>Z: 0</li> 155 </ul> 156 <p class="hint">The above settings scale the effect by -0.02 each frame.</p> 157 <!-- #BeginLibraryItem "/Library/glossary_particle_animation_addition.lbi" --> <!-- 前の値に加算 ( particle_animation_addtion ) --> 158 <p>The <B>Add to previous value</B> method animates by adding a value to the value from the previous frame every frame.<br /> Use this to animate at a set speed.</p> 159 <!-- #EndLibraryItem --> 160 <h4>Rotation settings</h4> 161 <p>Rotation settings are used to set the rotation of a particle around the XYZ axes and its angular velocity when generated.<br /> Change rotation values to those given below.</p> 162 <img class="manual_image" src="assets/fire_particle_create18.png" alt="Particle Creation Image 18"/> 163 <p>Standard Value</p> 164 <ul> 165 <li>X: 0</li> 166 <li>Y: 0</li> 167 <li>Z: 360</li> 168 </ul> 169 <p>Amplitude</p> 170 <ul> 171 <li>X: 0 ( % )</li> 172 <li>Y: 0 ( % )</li> 173 <li>Z: 100 ( % )</li> 174 </ul> 175 <h5>Applying an animation to rotation</h5> 176 <p>Be sure to select <B>Add to previous value</B> from the <B>Animation</B> pull-down menu under <B>Rotation</B>.<br /> Settings for <B>Add to previous value</B> and <B>Default value</B> for X, Y and Z will be displayed. Change the settings for <B>Add to previous value</B> as given below. </p> 177 <img class="manual_image" src="assets/fire_particle_create19.png" alt="Particle Creation Image 19"/> 178 <p>Select the radio button labeled <B>Random table</B>.</p> 179 <!-- #BeginLibraryItem "/Library/glossary_particle_random_table.lbi" --> <!-- ランダムテーブル (particle_rndom_table ) --> 180 <p><B>Random table</B> is a playback option for getting a value at the time of particle emission from a random animation frame.</p> 181 <!-- #EndLibraryItem --> 182 <p class="hint">Selecting <B>Random table</B> will randomly select from among the Rotate Z keys created below.</p> 183 <p>Open the <B>CurveEditor</B> panel to create the following keys for the Rotate Z.</p> 184 <a href="assets/fire_particle_create23.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/fire_particle_create23.png" alt="Particle creation image 23"/></a> 185 <ul> 186 <li>Horizontal axis: 0, Vertical axis: -0.1</li> 187 <li>Horizontal axis: 1, Vertical axis: -0.05</li> 188 <li>Horizontal axis: 2, Vertical axis: 0.1</li> 189 <li>Horizontal axis: 3, Vertical axis: 0.05</li> 190 <li>Horizontal axis: 4, Vertical axis: 0</li> 191 </ul> 192 <p class="hint">The values for the horizontal axis and vertical axis when an animation using <B>Add to previous value</B> is displayed on the <B>CurveEditor</B> panel are as follows.<br /> Horizontal axis: Frame value<br /> Vertical axis: Default value to be added.</p> 193 <h4>Speed settings</h4> 194 <p>Set gravity for the speed.<br /> Select gravity (accelerate in the specified direction) from the speed animation pull-down menu and press the <B>Add</B> button.</p> 195 <p>Gravity settings will be displayed. Change the settings as follows.</p> 196 <img class="manual_image" src="assets/fire_particle_create20.png" alt="Particle Creation Image 20"/> 197 <ul> 198 <li>X direction: 0</li> 199 <li>Direction Y: 1</li> 200 <li>Z direction: 0</li> 201 <li>Speed: 0.02</li> 202 </ul> 203 <p>Making the above settings will cause the CreativeStudio <B>Preview</B> panel to appear as shown below.</p> 204 <img class="manual_image" src="assets/fire_particle_create21.png" alt="Particle Creation Image 21"/> 205 <p>This completes the creation of fire effect using particles.</p> 206 <!-- InstanceEndEditable --> </div> 207 <div class="footer" /> 208</div> 209<hr><p>CONFIDENTIAL</p></body> 210<!-- InstanceEnd --> 211</html> 212
