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

Most people do not understand the knowledge points of this article "how to achieve the dazzling meteor shower effect of HTML5", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can gain something after reading this article. Let's take a look at this "how to achieve the dazzling meteor shower effect of HTML5" article.

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

Engine official website:

Http://lufylegend.com/lufylegend

Engine API website:

Http://lufylegend.com/lufylegend/api

Second, trailing effect

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:

/ * *

* 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 we inherit this class from LSprite with base, as in listing 2

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

Copy the code

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

Copy the code

The code is as follows:

Self.originalSprite = new LSprite ()

Self.addChild (self.originalSprite)

Self.originalSprite.addChild (self.object)

Listing 5

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

Copy the code

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:

Copy the 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)

}

});

}

}

Code listing 7

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:

Copy the code

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:

Copy the code

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

The above class is instantiated with two parameters, the first to determine the trailing position, and the second to determine the original object. 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. Therefore, we want to transfer the data from originalSprite to SmearingChild, so we get it through $parent.

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:

Copy the code

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:

Copy the code

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:

Test connection: http://www.cnblogs.com/yorhom/articles/3237266.html

Third, the dazzling effect of meteor shower

With the class Smearing, our meteor shower is much simpler. First of all, show all the code:

Copy the code

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 + +

}

The above is about the content of this article on "how to achieve the dazzling meteor shower effect of HTML5". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to 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.