Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about how to use HTML5 to achieve the dazzling meteor shower effect. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

The Xu family is as foggy as a broken mirror. Half of the face is exposed. To make an appointment is to watch the lights. Only by the bridge to sell mirrors, is idle.

When a meteor appears, people like to make a wish on them, because it is said that after making a wish on a meteor, the wish can come true. But meteors are rare, at least I haven't seen them, so I've never made a wish on it. Recently, out of interest, I made a trailing effect, and then I thought that we could use the trailing effect to achieve the effect of meteor shower. So let's make it happen today, so that we can learn a lot about children's shoes who haven't seen meteors.

Send a few screenshots first:

First, prepare for the work

This development needs to use the open source engine lufylegend.js, the download address of the engine & the details are as follows

Http://lufylegend.com/lufylegend

Http://lufylegend.com/lufylegend/api

To realize the meteor shower, you need to use the trailing effect, but there is no trailing function added to lufylegend, so you have to write it by yourself. In fact, it is not difficult to realize it, but Lufy is too lazy and has no encapsulation. (may lufy not see this sentence. ). Today, I will help him to achieve this effect.

The trailing effect is common in games, such as phantoms and bullets when the characters are moving. So we encapsulate it as a Smearing class, which is mainly responsible for implementing the trailing effect. The code is as follows:

The code is as follows:

/ * *

* Smearing

* @ param $object add trailing objects

, /

Function Smearing ($object) {

Var self = this

Base (self,LSprite, [])

Self.x = 0

Self.y = 0

Self.mode = ""

Self.smearingSprite = new LSprite ()

Self.addChild (self.smearingSprite)

Self.object = $object

Self.originalSprite = new LSprite ()

Self.addChild (self.originalSprite)

Self.originalSprite.addChild (self.object)

Self.addEventListener (LEvent.ENTER_FRAME,self.smeared)

}

Code listing 1

Let me explain it word for word.

The first line of code will not be explained, and IT people on Earth all know it. So start with the second line.

First of all, let's inherit this class from LSprite with base, such as listing 2 (as for what base and LSprite are, check out the API documentation, or see my previous article).

The code is as follows:

Base (self,LSprite, [])

Code listing 2

Next, we add a layer to add trailing. As shown in listing 3

The code is as follows:

Self.smearingSprite = new LSprite ()

Self.addChild (self.smearingSprite)

Listing 3

Then we save the object that adds the trailing effect so that it can be used later. As shown in listing 4

The code is as follows:

Self.object = $object

Listing 4

Then add the layer where you want to add the trailing effect object and display it. As shown in listing 5

The code is as follows:

Self.originalSprite = new LSprite ()

Self.addChild (self.originalSprite)

Self.originalSprite.addChild (self.object)

Finally, add a timeline event to make it easy to add trails.

The code is as follows:

Self.addEventListener (LEvent.ENTER_FRAME,self.smeared)

Code listing 6

At this point, the Smearing constructor is finished and explained. If you don't understand, it may be that you don't know lufylegend, and the addChild,LSprite in it is encapsulated in lufylegend.

We have added timeline events to the above code. Why join? Because I might as well talk about the principle of trailing. Trailing is actually constantly cloning the original object and putting it in its present position, which is equivalent to constantly stamping the picture. When the original object is moved away, the cloned object is not moved, but the original object is moved away. If we add a lot of objects, it will form a line linking the original object. At this point, we iterate through each member of the line and slowly change the transparency of the current object. Then determine whether the transparency of the object is 0, and if so, remove it to avoid taking up too much space. Therefore, we add timeline events to keep adding trailing objects.

The Smearing member function smeared does this, with the following code:

The code is as follows:

Smearing.prototype.smeared = function (self) {

Var smearingChild = new SmearingChild (self.originalSprite,self.object)

Self.smearingSprite.addChild (smearingChild)

For (var key in self.smearingSprite.childList) {

LTweenLite.to (self.smearingSprite.childList [key], 0.5, {

Alpha: 0

OnComplete:function (o) {

Self.smearingSprite.removeChild (o)

}

});

}

}

The code is executed according to the principle I mentioned above. You can see that we trailed the members of the trailing layer at the end, then changed the transparency of the traversed object, and removed ourselves at the end of the ease. Among them, the slow class uses the encapsulated LTweenLite in lufylegend, which can be written in detail in the API document.

Mainly the above two lines of code, such as listing 8:

The code is as follows:

Var smearingChild = new SmearingChild (self.originalSprite,self.object)

Self.smearingSprite.addChild (smearingChild)

Code listing 8

You can see that another class called SmearingChild is used, which is the legendary trailing class. This class can not be ignored, although the code is very small, but very important, the code in it is like listing 9:

The code is as follows:

/ * *

* SmearingChild

* @ param $parent determines the object of the trailing position

* @ param $object objects to which you want to add a trailing effect

, /

Function SmearingChild ($parent,$object) {

Var self = this

Base (self,LSprite, [])

Self.addChild ($object)

Self.x = $parent.x

Self.y = $parent.y

Self.alpha = 0.8

}

Listing 9

First of all, let's explain what "used to determine the trailing position" means. In fact, the movement of our object is not to let the whole Smearing object move, but to let the originalSprite object in it move, so don't do the smearingSprite thing, why is it designed in this way? In fact, there is a reason (nonsense, please ignore), the reason is that if the coordinates of our trailing are set to the coordinates of the entire Smearing object, then the objects added to smearingSprite will move with it, and the trailing will be misplaced, thus not achieving the effect. So I took the above approach: instead of moving itself, I moved the originalSprite.

After talking about it, everyone should have understood something. After the release of the code, you can take it down to study, or ask questions at the bottom of the article, or use Sina Weibo @ Yorhom, or use email address: wangyuehao1999@gmail.com. (there are many contact information (^ o ^))

The Smearing class still lacks a function, that is, to make the object move slowly, and it is easy to implement. Add the to function:

The code is as follows:

Smearing.prototype.to = function ($duration,$vars) {

Var self = this

$vars.onComplete = function () {

Self.mode = "complete"

}

LTweenLite.to (self.originalSprite,$duration,$vars)

}

Listing 10

The first parameter is the execution time of the move; the second parameter is the data that executes the buffer, which is the same as the last parameter of the LTweenLite.to method, just refer to the API document. It is worth noting, however, that for ease of operation, we changed the object's mode property to "complete" at the end of the move. This is done so that people can decide whether to do something else based on the value of the mode property, such as removing the object or moving it somewhere else.

When the class Smearing is encapsulated, it is easy to use, as follows:

The code is as follows:

Init (10, "mylegend", 500, 400, main)

Var back

Function main () {

LStage.setDebug (true)

Back = new LSprite ()

Back.graphics.drawRect (0, "", [0pm 0je 50je 50], true, "blue")

Smearing = new Smearing (back,50)

Smearing.to (2, {

X: 200

Y: 200

});

AddChild (smearing)

}

Code listing 11

The illustration of the demonstration is as follows:

Third, the dazzling effect of meteor shower

With the class Smearing, our meteor shower is much simpler.

The code is as follows:

Init (10, "mylegend", 500, 400, main)

Var backLayer,meteorLayer

Var back,meteor

Var maxFrame = 40JI indexFrame = 0

Function main () {

LStage.setDebug (true)

/ / add the backplane layer

BackLayer = new LSprite ()

AddChild (backLayer)

/ / join the meteor layer

MeteorLayer = new LSprite ()

AddChild (meteorLayer)

/ / draw a black rectangle as the background

Back = new LGraphics ()

Back.drawRect (0, "", [0pr 0pr LStage.widthje LStage.height], true, "black")

BackLayer.addChild (back)

/ / draw a yellow rectangle as a meteor

Meteor = new LSprite ()

Meteor.graphics.drawRect (0, "", [0pm 0je 10je 10], true, "yellow")

BackLayer.addEventListener (LEvent.ENTER_FRAME,onframe)

}

Function onframe () {

If (indexFrame > maxFrame) {

IndexFrame = 0

/ / add a trail for each meteor

Var smearing = new Smearing (meteor,50)

Smearing.x = Math.floor (Math.random () * 250)

Smearing.y = 0

Smearing.to (2, {

X: Math.floor (Math.random () *)

Y: 400

});

MeteorLayer.addChild (smearing)

}

For (var key in meteorLayer.childList) {

If (metered Layer.childList [key] .mode = = "complete") {

MeteorLayer.removeChild (mega Layer.childList [key])

}

}

IndexFrame + +

}

Listing 12

Each line of code is commented, which must be easy to understand. If you really don't understand, it may be because you don't know lufylegend. You can refer to the API documentation to learn.

The above is the editor for you to share how to use HTML5 to achieve the dazzling meteor shower effect, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.