Flash/flex Study Notes (24): Particle effect

Particle explosion:

We still need to use the previous small ball games, but we need to make some changes.

 
Package {import flash. display. sprite; // ball class public class ball extends sprite {public var radius: uint; // radius public var color: uint; // color public var VX: Number = 0; // X axis speed public var Vy: Number = 0; // y axis speed public function ball (r: Number = 50, C: uint = 0xff0000) {This. radius = r; this. color = C; Init ();} private function Init (): void {graphics. beginfill (color); graphics. drawcircle (0, 0, radius); graphics. endfill ();}}}
 

Increase the speed of X and Y axes.

Principle:Place a large number of ball instances in a certain area of the stage, and then let them move in all directions at a certain time point (that is, change the coordinates of each ball on the X and Y axes)

Problem:Efficiency! It is resource-consuming to allow the CPU to redraw a large number of objects at each frame. Therefore, when the ball runs out of the stage boundary, You need to notify the CPU: these balls do not need to be processed any more (they cannot be seen anyway )! Otherwise, it will be purely CPU-consuming.CodeUse an array to store references of all object instances, and then continuously detect objects in the enterframe event. Once an object runs out of the boundary, it is cleared and ignored.

Import FL. controls. label; import flash. text. textfieldautosize; stage. scalemode = stagescalemode. no_scale; stage. align = stagealign. top_left; var count: Number = 1500; var radius: uint = 30; var centerx: uint = stage. stagewidth/2; var centery: uint = stage. stageheight/2; var arrball: array = new array (count); // round the ball to a random distribution for (VAR I = 0; I <arrball. length; I ++) {arrball [I] = new ball (math. random () * 5, math. random () * 0xff0000); var angle: Number = math. random () * Math. pI * 2; var radiusrnd: Number = math. random () * radius; arrball [I]. X = centerx + math. cos (angle) * radiusrnd; arrball [I]. y = centery + math. sin (angle) * radiusrnd; addchild (arrball [I]);} var lbl1: Label = new label (); lbl1.text = "click to detonate the ball"; lbl1.autosize = textfieldautosize. center; lbl1.x = stage. stagewidth/2-lbl1.width/2; lbl1.y = 50; mouse. cursor = mousecursor. button; addchild (lbl1); stage. addeventlistener (mouseevent. mouse_move, mousemovehandler); stage. addeventlistener (mouseevent. mouse_down, mousedownhandler); // file and mouse follow function mousemovehandler (E: mouseevent): void {lbl1.x = mousex + 15; lbl1.y = Mousey + 15;} function mousedownhandler (E: mouseevent): void {// click it once, cancel the mouse following, remove lbl1, and also cancel the mouse clicking event (that is, this event is triggered only once) mouse. cursor = mousecursor. arrow; stage. removeeventlistener (mouseevent. mouse_move, mousemovehandler); lbl1.visible = false; removechild (lbl1); stage. removeeventlistener (mouseevent. mouse_down, mousedownhandler); initvelocity (); // initialize the particle speed addeventlistener (event. enter_frame, enterframehandler);} function initvelocity () {for (VAR I = 0; I <arrball. length; I ++) {arrball [I]. VX = (math. random () * 2-1) * 30; // note the tips: math. random () * 2-1 is used to obtain a random decimal number distributed between-1 and 1, that is, the initial speed at which the ball is randomly directed to the left or right, and then amplified by N times, obtain the final speed of the X axis, arrball [I]. vy = (math. random () * 2-1) * 30;} function enterframehandler (E: Event): void {for (I = arrball. length-1; I> = 0; I --) {var ball: ball = arrball [I]; ball. X + = (ball. VX); ball. Y + = (ball. vy); // check the boundary. If the boundary is exceeded, remove the object (Note: remove the object that is no longer in use from the stage to effectively reduce the CPU usage) if (ball. x <-ball. width/2 | ball. x> stage. stagewidth + ball. width/2 | ball. Y <-ball. height/2 | ball. y> stage. stageheight + ball. height/2) {removechild (ball); arrball. splice (I, 1);} // clear the enterframe event if (arrball. length = 0) {removeeventlistener (event. enter_frame, enterframehandler);} // trace (arrball. length );}}

Particle Injection:

If you have read the Flash/flex Study Notes (23): A friend who has worked hard on the "free fall motion", the effect of this particle may be easier to understand.

Principle:Aggregates all particles at a certain point on the screen (in this example, the center point at the bottom of the screen) and then assigns a random upward velocity (so that the particles can be sprayed up ), at the same time, to make the effect more natural, we also need to add a random X-axis direction speed (to achieve the diffusion during the injection process), and finally add the gravity acceleration to achieve the free fall of particles.

Efficiency:To maximize the use of existing objects, when a particle runs out of the stage boundary, it is re-positioned to the launch point with the code so that the next injection can continue.

Interaction:In this example, we use the x-axis position of the mouse to simulate the wind power effect. (Move the mouse horizontally to see a slight change in the jet direction)

Package {import flash. display. sprite; import flash. display. stagealign; import flash. display. stagescalemode; import flash. events. event; public class fountain extends sprite {private var count: Int = 3000; private var wind: Number = 0.0; private var gravity: Number = 0.3; private var bils: array; public Function fountain () {Init ();} private function Init (): void {stage. scalemode = stagescalemode. no_scale; stage. align = stagealign. top_left; bils = new array (); For (var I: Int = 0; I <count; I ++) {var ball: ball = new ball (xffffff ); ball. X = stage. stagewidth/2; ball. y = stage. stageheight; ball. VX = (math. random () * 2-1) * 1.5 + wind; ball. vy =-5 + math. random () *-10; addchild (ball); bils. push (ball);} addeventlistener (event. enter_frame, onenterframe);} private function onenterframe (Event: Event): void {Wind =-1 * (mousex-stage. stagewidth/2)/200; For (var I: Number = 0; I <bils. length; I ++) {var ball: ball = ball (bballs [I]); ball. vy + = gravity; ball. X + = ball. VX; ball. Y + = ball. vy; If (ball. x> stage. stagewidth + ball. radius | ball. x <-ball. radius | ball. y> stage. stageheight + ball. radius | ball. Y <-ball. radius) {ball. X = stage. stagewidth/2; ball. y = stage. stageheight; ball. VX = (math. random () * 2-1) * 1.5 + wind; ball. vy =-5 + math. random () *-10 ;}}}}}

Particle follow:

In addition to the use of boundary detection to remove particles, time is often used in actual development. For example, an object will be killed after it remains on the stage for several seconds.

Stage. addeventlistener (mouseevent. mouse_move, mousemovehandler); function mousemovehandler (E: mouseevent): void {var ball: ball = new ball (math. random () * 3, 0x00ff00); ball. X = mousex; ball. y = Mousey; ball. VX = (math. random () * 2-1) * 3; ball. vy = (math. random () * 2-1) * 3; addchild (ball); ball. addeventlistener (event. enter_frame, enterframehandler);} function enterframehandler (E: Event): void {var ball: ball = e.tar get as ball; ball. X + = ball. VX; ball. Y + = ball. vy; ball. count ++; If (ball. count> = 50) {ball. removeeventlistener (event. enter_frame, enterframehandler); removechild (ball );}}
 

Note:Add a public var count: uint = 0 variable to the ball class (used to assist timing). The above Code uses if ball. count> = 50 to make a judgment, which is equivalent to making each ball play 50 frames at the end of its life

Simulate the Brown motion:

 var count: Number = 200; // initialize for (var I: Number = 0; I <= count; I ++) {var ball: ball = new ball (math. random () * 3, 0x00ff00); ball. X = math. random () * stage. stagewidth; ball. y = math. random () * stage. stageheight; ball. VX = ball. vy = 0; addchild (ball); ball. addeventlistener (event. enter_frame, enterframehandler);} function enterframehandler (E: Event): void {var ball: ballequale.tar get as ball; // each frame randomly changes the speed of a ball. VX + = (math. random () * 2-1) * 2; ball. vy + = (math. random () * 2-1) * 2; ball. X + = ball. VX; ball. Y + = ball. vy; // After the boundary is exceeded, first let it reverse motion (that is, return to the original position), and then if (ball. x> stage. stageWidth-ball.width/2 | ball. x 
  
    stage. stageHeight-ball.height/2 | ball. Y