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 particle name.</p> 25 <img 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">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 class="no">(1) Single clicking on fireEmitter displayed in the <B>Contents</B> panel displays the emitter <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 Window > Property panel or double-clicking on an emitter icon displayed in the Contents panel will open the Properties 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 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 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/ManualResource/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 src="assets/fire_particle_create02.png" alt="Particle Creation Image 02"/> 45 <p>Loading the fire texture intermediate file will display fire_anim in the CreativeStudio Contents panel.</p> 46 <p>Four flame patterns are drawn for the texture. These will be used for texture pattern animation to be described later.</p> 47 <h3>Material Settings</h3> 48 <p>The fire texture intermediate file loaded into CreativeStudio will be applied to particles using the material <B>Properties</B> panel.</p> 49 <p class="no">(1) Single clicking on fireMaterial displayed in the Contents panel will display the material Properties panel.</p> 50 <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> 51 <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> 52 <p class="warning">The description here uses <em>Standard</em> mode on the material <B>Properties</B> panel.</p> 53 <p>For details on the material <B>Properties</B> panel, click <a href="../../../ui_reference/panel/material/index.html">here</a>.</p> 54 <h4>Adding textures</h4> 55 <p>Change the texture on the <B>Texture</B> tab of the material <B>Properties</B> panel.</p> 56 <p>Set the image on the <B>Texture0</B> tab in the <B>Texture List</B> to Fire_anim in the pull-down list.</p> 57 <img src="assets/fire_particle_create06.png" alt="Particle Creation Image 06"/> 58 <p>Select Fire_anim to set the Fountain_Drop texture for the particle.</p> 59 <img src="assets/fire_particle_create07.png" alt="Particle Creation Image 07"/> 60 <p>Use the <B>Texture combiner</B> located on the <B>Fragment</B> tab of the material <B>Properties</B> panel to set the textures and colors to be used by the material.</p> 61 <p>For details on texture combiners, click <a href="../../../ui_reference/panel/material/standard_panel/standard_panel_combiner/index.html#combiner">here</a>.</p> 62 <h3>Particle effect settings</h3> 63 <p>In this section, we will set the particle lifespan and an animation using the particle set <B>Properties</B> panel.</p> 64 <p>Single click fireParticle displayed on the Contents panel.</p> 65 <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> 66 <p>The particle set <B>Properties</B> panel will appear in the CreativeStudio main window. Change the following settings.</p> 67 <h4>Lifespan setting</h4> 68 <p><B>Lifespan </B>sets the particle lifespan.</p> 69 <p>Change the lifespan values to those given below.</p> 70 <img src="assets/fire_particle_create10.png" alt="Particle Creation Image 10"/> 71 <p>Making the above settings randomly varies the <a href="../../../glossary/index.html#particle_life">particle lifespan</a> between frames 30 to 20.</p> 72 <h4>Color Settings</h4> 73 <p>Let's change the color of the particles.</p> 74 <p class="new_hint"><B>Note:</B> Left-clicking on the thumbnail allows you to set the color using the displayed <a href="../../../ui_reference/panel/property/index.html#color_picker">color picker</a> popup.</p> 75 <img src="assets/fire_particle_create11.png" alt="Particle Creation Image 11"/> 76 <p>This color is the color for the particle vertex shader.</p> 77 <p>With these settings, color is applied to the particle.</p> 78 <img src="assets/fire_particle_create12.png" alt="Particle Creation Image 12"/> 79 <h3>Animation Settings</h3> 80 <p>Now, we will create a fire-like animation.</p> 81 <h4>Alpha animation settings</h4> 82 <p>Now, we will set an animation for the vertex alpha of the particle.</p> 83 <p>Select Overwrite previous value using four-key method from the alpha animation pull-down menu.</p> 84 <img src="assets/fire_particle_create13.png" alt="Particle Creation Image 13"/> 85 <p>Setting parameters for <B>Overwrite previous value using four-key method</B> will appear. Change the settings as follows.</p> 86 <img src="assets/fire_particle_create22.png" alt="Particle Creation Image 22"/> 87 <p class="new_hint"><B>Note:</B> The four-key method is a low-overhead animation technique configured using information from just four animation key locations.<BR> For details on overwriting previous values using the four-key method, click <a href="../../../user_guide/particle_effect/particleeffect_animation/animation/index.html#four_key">here</a>.</p> 88 <h4>Setting a translation animation for the texture</h4> 89 <p>Here, we will configure a translation animation for the texture's <em>vertex UV </em>, and create a texture pattern animation.</p> 90 <p>Select a texture pattern from the pull-down menu located under <B>Vertex UV translation</B> for <B>Texture coordinate 0</B> and then make the following settings.</p> 91 <img src="assets/fire_particle_create14.png" alt="Particle Creation Image 14"/> 92 <ul> 93 <li>Number of divisions U: 4 94 <ul> 95 <li>Sets the number of divisions in the horizontal (U) direction of loaded texture coordinates.</li> 96 </ul> 97 </li> 98 <li>Playback order: 0 - 3 99 <ul> 100 <li>Sets the playback order of the divided texture.</li> 101 </ul> 102 </li> 103 <li>Playback options: Check <B>Fit to lifespan</B>. 104 <ul> 105 <li>Adjusts the duration of the animation curve to match the particle lifespan.</li> 106 </ul> 107 </li> 108 </ul> 109 <p>Making the above settings will cause the CreativeStudio <B>Preview</B> panel to appear as shown below.</p> 110 <img src="assets/fire_particle_create15.png" alt="Particle Creation Image 15"/> 111 <h4>Scale settings</h4> 112 <p>Set the size and amplitude of the effect by changing the particle scale.</p> 113 <p>Change scale values to those given below.</p> 114 Particle Creation Image 16 115 <p><B>Amplitude (%)</B> is a random value multiplied by the standard value at the time of particle generation.</p> 116 <h5>Amplitude Formula</h5> 117 <p class="system">Standard Value ± (Random Value × Standard Value)</p> 118 <!-- #EndLibraryItem --> 119 <h6>Example</h6> 120 <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> 121 <h5>Applying an animation to the scale</h5> 122 <p class="no">(1) Select <a href="../../../glossary/index.html#particle_animation_addtion">Add to previous value</a> from the scale animation pull-down menu.</p> 123 <p class="no">(2) Setting parameters for <B>Add to previous value</B> will be displayed. Change the settings as follows.</p> 124 <img src="assets/fire_particle_create17.png" alt="Particle Creation Image 17"/> 125 <p class="new_hint"><B>Note:</B> The above setting causes -0.02 to be subtracted from the value for the previous frame. <A></A> Actual behavior is such that as frames advance, the flame gets smaller by -0.02 each frame.</p> 126 <h4>Rotation settings</h4> 127 <p>Rotate settings are used to set the rotate of a particle around the XYZ axes and its angular velocity when generated.<br /> Change rotation values to those given below.</p> 128 <img src="assets/fire_particle_create18.png" alt="Particle Creation Image 18"/> 129 <h5>Applying an animation to a rotate</h5> 130 <p class="no">(1) Select <B>Add to previous value</B> from the rotate animation pull-down menu.</p> 131 <p class="no">(2) Setting parameters for <B>Add to previous value</B> will be displayed. Select <B>Random table</B>.</p> 132 <img src="assets/fire_particle_create27.png" alt="Particle Creation Image 27"/> 133 <p class="new_hint"><B>Note:</B> When <B>Random table</B> is selected, keys are selected randomly from the rotation animation created below and then animated.</p> 134 <p>Open the <B>Curve editor</B> panel and create an Z-axis rotation animation. </p> 135 <p>Create the following keys for Rotate Z.</p> 136 <img src="assets/fire_particle_create23.png" alt="Particle Creation Image 23"/> 137 <ul> 138 <li>Horizontal axis: 0, Vertical axis: -0.1</li> 139 <li>Horizontal axis: 1, Vertical axis: -0.05</li> 140 <li>Horizontal axis: 2, Vertical axis: 0.1</li> 141 <li>Horizontal axis: 3, Vertical axis: 0.05</li> 142 <li>Horizontal axis: 4, Vertical axis: 0</li> 143 </ul> 144 <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>Curve editor</B> panel are as follows.<br /> Horizontal axis: Frame value<br /> Vertical axis: Default value to be added.</p> 145 <h4>Configuring a speed animation</h4> 146 <p class="no">(1) Select Gravity (accelerate in the specified direction) from the pull-down menu in the Speed section and press the Add button.</p> 147 <p class="no">(2) Gravity settings (accelerate in the specified direction) will be displayed. Change the settings as follows.</p> 148 <img src="assets/fire_particle_create20.png" alt="Particle Creation Image 20"/> 149 <p>With the above settings, a gravity of 0.02 is applied in the Y-direction every frame.</p> 150 <img src="assets/fire_particle_create21.png" alt="Particle Creation Image 21"/> 151 <p>This completes the creation of fire effect using particles.</p> 152 <!-- InstanceEndEditable --> </div> 153 <div class="footer" /> 154</div> 155<hr><p>CONFIDENTIAL</p></body> 156<!-- InstanceEnd --> 157</html>
