Chapter 6 of HTML5 2D game engine R & D series (Canvas technology-mixed color effects and particles)

 

Directory

Chapter 1 of HTML5 2D game engine R & D series <start of everything> Chapter 2 of HTML5 2D game engine R & D series <mjian> HTML5 2D game engine R & D series chapter 3 HTML5 2D game engine development series Chapter 4 Chapter 5 HTML5 2D game engine R & D series Chapter 6 HTML5 2D game engine R & D series Chapter 7 HTML5 2D game engine R & D series Chapter 8 HTML5 2D game engine R & D series Chapter 1 of the WEBGL 2D game engine R & D series <New Start> Chapter 2 of WEBGL 2D game engine R & D series <display picture> Chapter 3 of WEBGL 2D game engine R & D series <orthogonal View> Chapter 4 of the WEBGL 2D game engine R & D series <feelings and matrix> Chapter 5 of the WEBGL 2D game engine R & D series <operation display Object> Chapter 6 of the WEBGL 2D game engine R & D series <first encapsulation> Chapter 7 of WEBGL 2D game engine R & D series <mixed color> Chapter 8 of the WEBGL 2D game engine R & D series <batch processing (image separation)> Chapter 9 of the WEBGL 2D game engine R & D series <UV-based simulated slicing> Chapter 10 of the WEBGL 2D game engine R & D series <texture set animation> Chapter 2 of the WEBGL 2D game engine R & D series <shader-shader> Chapter 1 WEBGL 2D game engine R & D series <particle transmitter> Chapter 2 WEBGL 2D game engine R & D series Game techniques 2D game engine R & D series Chapter 1 <optimization skills> Game techniques 2D game engine R & D series Chapter 2 <timer> Game techniques 2D game engine R & D series Chapter 3 <UV-Based Seamless image scrolling> Game techniques 2D game engine R & D series Chapter 4 <shape-based collision detection>

HI, everyone. How have you learned in the previous chapters? Does your engine have a basic model? Is it boring to start thinking about how to build your own architecture? Now, this chapter will let you relax. We will learn the coolest and most dazzling part of the game, but it is so simple that we only need a line of code, it is a mixed color. What is the mixed color? I have already introduced this content in Chapter 1. If you forget it, you can go back and check it out. If you already understand it, we can start to use mixed colors for some special effects, now we often see the cool skill in the game. Think about it. Why do we think this skill looks good? There is only one answer, that is, bright enough, with a certain degree of transparency. To do this now, you only need to overlay all colors, if you often analyze other people's game materials, you will often find some pictures with black background or some materials that do not look like

Well, they don't look very special, and some edges are very dry and even don't think they can be used. We can't always run a special effect animation, It's all black, actually, they are the treasures in the game materials. They are the source of special effects and the original images of particles. Now let's give it a gorgeous transformation. You can find a dark background. Let's try it, let's put them on the scene to see the effect.

It's so ugly that you can't look straight at it. Now let's add the overlay effect to the special effect door and try again.

Haha, what's the problem? The overlay not only automatically removes the background, but also makes the special effects more vivid. Well, there is only one more step to make these special effects look like this, that is motion. The so-called particles are the overlapping images and cool motion tracks. If you can't wait, you can see the FLASH demonstration below,

Demo address

Hmm? Is it interesting? It looks mysterious. When I was not familiar with the implementation principle of particles, I felt deeply when I saw a lot of great results achieved by Daniel, I think it takes a very advanced algorithm or a legendary third-party plug-in or an engine to implement it. In fact, particles are the simplest link, as long as your source image looks good, if the scene is dark enough, it can play the best effect of the particles. I don't know if some of the experts who sell their own particle effects will criticize me, haha .., in fact, you don't have to implement particles by means of color mixing and motion. You can also implement masks, special movie effects, and so on. Now I'm looking forward to it. Okay, open your editor and find DisplayerObject. js: add the function of the magic tool "mixed colors.

?

1 2	// Mixed color parameters this.blend=source-over;

Add a member variable, and then update the function.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 28 29 30 31 32 33 34 35 36 38 39 40 41 42 43 44 45 46 48

// Animation repainting Function this.paint=function() { if(this.visible) { this.upFrameData(); // Save the canvas handle status context.save(); // Adds the mixed color Function context.globalCompositeOperation=this.blend; // Change the transparency of the canvas handle. Image drawn from this moment will be based on this transparency. context.globalAlpha=this.alpha; // Set the position of the canvas handle, which is actually the position of the set image context.translate(this.x,this.y); // Setting the canvas Rotation Angle actually sets the image angle. The parameter is radian, so we must convert the angle to radian. context.rotate(this.rotation*Math.PI/180); // Set the proportion of the canvas handle, which is actually the ratio of the image. context.scale(this.scaleX,this.scaleY); switch(this.isPlay) { case 1: context.drawImage(img,this.mcX,this.mcY,this.frameWidth,this.frameHeight,-this.frameWidth/2,-this.frameHeight/2,this.frameWidth,this.frameHeight); break; case 2: // Adds the offset of the frame information and the actual width and height of the last animation. context.drawImage(img,this.mcX,this.mcY,this.width,this.height, -(this.frameX)-this.frameWidth/2, -(this.frameY)-this.frameHeight/2 ,this.width,this.height); break default : context.drawImage(img,this.mcX,this.mcY,this.frameWidth,this.frameHeight,-this.frameWidth/2,-this.frameHeight/2,this.frameWidth,this.frameHeight); break; } // Finally, return the status of the canvas handle, because the canvas handle is unique and its status is unique. This makes it easier to use it elsewhere. // The last saved status needs to be returned, as if nothing has happened context.restore(); } } }

Then, if you don't have any materials, I have prepared them for you. Check the source image download.

XML address: http://jfy19771224.sinaapp.com/course/demo_4/eff.xml

Next, find a background and test it in Main. js.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

function init () { // Create a scenario Manager stage2d=new Stage2D(); // Enable scenario Logic stage2d.init(); var mc=new MovieClip2D(imageStart[0]); mc.isPlay=1; mc.x=1024/2; mc.y=768/2; mc.frameWidth=imageStart[0].width; mc.frameHeight=imageStart[0].height; stage2d.addChild(mc); var mc2=new MovieClip2D(imageStart[1],xmlStart[0].quadDataList); mc2.isPlay=2; mc2.x=1024/2; mc2.y=768/2; mc2.scene(eff_5) // Set the mixed color style to overlay mc2.blend=lighter; stage2d.addChild(mc2); }

If there is no error, your picture should look like this now.

What's the result? If you want to build a complete particle system, you still need to do a few things. First, create an object pool, you will store the particle Display object to facilitate the next call. Second, let the particles move, you can give them an angle and speed to move in a certain direction, for example

Mc. x + = Math. cos (angle * Math. PI/180) * speed

Mc. y + = Math. sin (angle * Math. PI/180) * speed

Then, we can also give them random coordinates of a certain range of birth points. So far, the mixed colors have been introduced. In the HTML5 case, we can see the following anti-tower games, this is how the fireworks laser and bullets work. You can upgrade the turret to see the status when the turret is full.

You can click here to try out this anti-tower game.

The last time, of course, the mixed colors are not only in the superposition state. For other status characters, refer to the introduction of mixed colors in w3school. If you are not familiar with the status, refer to the mixed colors section in chapter 1 of this series, in addition to the mixed colors, our game special effects also have a more advanced technology called the coloring tool. In fact, many game special effects are implemented through the coloring tool. Although HTML5 currently has pixel processing capabilities, the efficiency is too low, this is not suitable for actual development, so I will describe the coloring tool in the next chapter WEBGL. If you are interested in the coloring tool, you can learn it through the DEMO below.

Coloring er DEMO this chapter DEMO online DEMO this chapter DEMO source code download

Reprinted, please note: HTML5 game developer community» chapter 6 of HTML5 2D game engine R & D series