HTML5 Dream Journey - Processus de mise en œuvre de l'effet de pluie de météores éblouissant_html5 Compétences du didacticiel

Le miroir brisé de la famille Xu est aussi sombre que le brouillard. La moitié du visage est exposée. Nous nous retrouvons tranquillement pour observer les lumières. De manière inattendue, le ciel sur terre ressemble à une étoile filante. L’ombre du rideau de porte rouge est profonde sous la pluie. Le nouveau venu hagard danse. Profitez du nouveau soleil du monde entier. Seule la vente de miroirs près du pont est une activité de loisir.
——Dynastie Song Liu Chenweng·"Poppy"

Lorsque les étoiles filantes apparaissent, les gens aiment faire des vœux sur elles, car on dit que si vous faites un vœu sur les étoiles filantes, le vœu se fera se réaliser. Mais les étoiles filantes sont rares, du moins je ne les ai pas vues, donc je n'ai jamais fait de vœu à leur sujet. Récemment, par intérêt, j'ai créé un effet de traînée, puis j'ai pensé que je pourrais utiliser l'effet de traînée pour obtenir l'effet d'une pluie de météores. Alors faisons-le aujourd’hui, pour que les enfants comme moi qui n’ont jamais vu d’étoile filante aient un aperçu.

Permettez-moi d'abord de poster quelques captures d'écran :


Testez la connexion : http://www.cnblogs.com/yorhom/articles/3237944.html
1. Préparation
Ce développement nécessite le moteur open source lufylegend.js L'adresse de téléchargement et les détails du moteur sont les suivants
Site officiel du moteur :
http. ://lufylegend.com/lufylegend
Site Web de l'API du moteur :
http://lufylegend.com/lufylegend/api
2. Effet de traînée
Pour réaliser la pluie de météores , vous devez utiliser l'effet de fin, mais il n'y a pas de fonction de queue dans lufylegend, j'ai donc dû l'écrire moi-même. En fait, ce n'est pas difficile à implémenter, mais Lufy est trop paresseux et n'a pas d'encapsulation (j'espère que Lufy le fera. je ne vois pas cette phrase...). Aujourd'hui, je vais l'aider à obtenir cet effet.
L'effet de queue est très courant dans les jeux, comme les fantômes et les balles lorsque les personnages bougent. Par conséquent, nous l’encapsulons dans une classe Smeearing, qui est principalement responsable de l’obtention de l’effet de traînée. Le code est le suivant :

Copiez le code

Le code est le suivant :

/**
* Masquage
* @param $object Ajouter un objet de fin
*/
function Smearing($object){
var self = this;
base(self,LSprite,[]); 🎜>self.y = 0 ;
self.mode = "";
self.smearingSprite = new LSprite();
self.addChild(self.smearingSprite); objet;
self.originalSprite = new LSprite();
self.addChild(self.originalSprite);
self.originalSprite.addChild(self.object); ,self.smeared);
}


Code List 1
Laissez-moi vous l'expliquer mot pour mot.
Je n’expliquerai pas la première ligne de code, tous les informaticiens sur terre la connaissent. Commencez donc par la deuxième ligne.

Tout d'abord, nous héritons de cette classe de LSprite en utilisant base, comme indiqué dans la liste de codes 2 (pour ce qui est de base et LSprite, vous pouvez la consulter dans la documentation de l'API ou lire mes articles précédents).





Copier le code

Le code est le suivant : base(self,LSprite, []) ;

Code Listing 2
Ensuite, nous ajoutons un calque pour ajouter une piste. Par exemple, liste de codes 3

Copier le code

Le code est le suivant : self.smearingSprite = new LSprite();

self.addChild(self.smearingSprite);

Code Listing 3
Ensuite, nous enregistrons l'objet avec l'effet de fin, afin qu'il puisse être utilisé plus tard. Comme indiqué dans la liste de codes 4

Copiez le code

Le code est le suivant : self.object = $object;

Code Listing 4
Ajoutez ensuite un calque à l'endroit où vous souhaitez ajouter l'objet à effet de fuite et affichez-le. Par exemple, liste de codes 5

Copier le code

Le code est le suivant : self.originalSprite = new LSprite();

self.addChild(self.originalSprite);

self.originalSprite.addChild(self.object); Enfin, ajoutez un événement chronologique, pratique pour ajouter une queue.

Copier le code


Le code est le suivant :

self.addEventListener(LEvent. ENTER_FRAME,self .barbouillé);
程式碼清單6
到這裡，Smearing構造器就寫完了，也解釋完了，看不懂的話可能是你不了解lufylegend，裡面的addChild，LSprite都是lufylegend中封裝的。
我們在上面的程式碼中已經加入了時間軸事件。為什麼要加入呢？因為我不妨說一下拖尾的原理。拖尾其實就是不斷地將原物件克隆出來，然後放在現在所在的位置上，相當於不斷地向畫面上蓋章。當原物件移開時，我們克隆的物件並沒有移開，而原始物件移開了，如果我們增加的物件有很多，那就會形成一條連結原物件的線。這時我們再遍歷這個線裡的每個成員，透過緩動來改變目前物件的透明度。然後判斷該物件的透明度是否為0，如果是就移除，避免佔用太多空間。因此，我們加入時間軸事件用來不斷新增拖尾物件。
Smearing成員函數smeared起到這點作用，程式碼如下：

複製程式碼

程式碼如下:

複製程式碼

程式碼>

Smearing.prototype.smeared = function(self){
var smearingChild = new SmearingChild(self.originalSprite,self.object);
self.smearingSpsml. >for(var key in self.smearingSprite.childList){
LTweenLite.to(self.smearingSprite.childList[key],0.5,{
alpha: 0,
onComplete:function(o){
self.smearingSprite.removeChild(o);
}
});
}

};


程式碼清單7
這些程式碼按照我在上面所說的原理執行。可以看到我們在最後遍歷了拖曳層的成員，然後改變遍歷到的物件的透明度，並且在緩動結束後移除自身。其中的緩動類別用的是lufylegend中封裝好了的LTweenLite，可以去API文件裡看看，寫得很詳細。
主要是上面兩行程式碼，如程式清單8：

複製程式碼

程式碼如下:


var smearingChild = new SmearingChild(self.originalSprite,self.object);

self.smearingSprite.addChild(smearingChild);


代碼到又用到了一個名為SmearingChild的類，這個便是傳說中的拖尾類。這個類別不容忽視，雖然程式碼很少，但很重要，裡面的程式碼如程式清單9：

複製程式碼

程式碼如下:

/**
* SmearingChild
* @param $parent 決定拖曳位置的物件
* @param $object 要新增拖尾效果的物件
*/
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;
}

程式碼清單9
以上的類別實例化時有兩個參數，第一個用來決定這個拖曳位置的，第二個是原物件。首先來解釋一下「用來確定這個拖尾位置的」是神馬意思，其實我們對象的移動，不是讓整個Smearing對象移動，而是讓他裡面的originalSprite對象移動，所以不干smearingSprite的事，為什麼這樣設計呢？其實是有原因的（廢話，請忽略），原因所在就是，如果我們的拖尾的坐標設置為整個Smearing對象的坐標位置，那加到smearingSprite的對像也會跟著移動，拖尾就會錯位，從而達不到效果。所以我採取了以上的辦法：不移動本身，而是移動originalSprite。因此，我們要把originalSprite的資料傳到SmearingChild中，因此就透過$parent來取得。
講了一通，大夥應該也明白了些。後面放出程式碼，大家可以拿下去研究，或是在文章下方提出問題或用新浪微博@Yorhom，還可以用信箱，信箱地址：wangyuehao1999@gmail.com。 （聯絡方式多多啊(^o^)）
Smearing這個類別還差個功能，那就是讓物件緩緩移動，實作起來也很簡單，加入to函數：

複製程式碼

程式碼如下:

Smearing.prototype.to = function($duration,$vars){
vars self = this;
$vars.onComplete = function(){
self.mode = "complete";
}
LTweenLite.to(self.originalSprite,$duration,$vars); 🎜>};

程式碼清單10
第一個參數是移動執行的時間；第二個參數是執行緩動的數據，和LTweenLite.to方法最後一個參數是一樣的，參考API文件即可。不過值得注意的是，為了方便操作，我們在移動結束時，將該物件的mode屬性改為「complete」。這樣做是為了讓大家根據mode屬性的值來決定是否作出其他的操作，例如移除該對象，或往其他地方移動。
Smearing這個類別封裝好了，使用起來就簡單了，如下：

複製程式碼

複製程式碼

程式碼如下:


init(10,"mylegend",500,400,main);
var back;
function main(){
LStage.setDebug(true);
back
back
back
back
back = new LSprite();
back.graphics.drawRect(0,"",[0,0,50,50],true,"blue");

smearing = new Smearing(back,50);
smearing.to(2,{
x: 200,
y: 200 });
addChild(smearing);
}

代碼清單11
示範效果圖如下：

 測試連結：http://www.cnblogs.com/yorhom/articles/3237266.html 三，炫麗的流星雨效果

有了，Smearing這個類，我們的流星雨就簡單多了。先把所有程式碼展示一下：

複製程式碼


程式碼如下:



程式碼如下:

var backLayer,meteorLayer;
var back,meteor;
var maxFrame = 40,indexFrame = 0;
function main(){
LStage.setDebug(true);
//加入底板層
backLayer = new LSprite();
addChild(backLayer);
//加入流星層
meteorLayer = new LSprite() ;
addChild(meteorLayer);
//畫一個黑色矩形作為背景
back = new LGraphics();
back.drawRect(0,"",[0,0,LStage.width ,LStage.height],true,"black");
backLayer.addChild(back);
//畫一個黃色矩形作為一顆流星
meteor = new LSprite();
meteor .graphics.drawRect(0,"",[0,0,10,10],true,"yellow");
backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
}
function onframe (){
if(indexFrame > maxFrame){
indexFrame = 0;
//為每個流星加上一個拖尾
var smearing = new Smearing(meteor,50);
smearing.x = Math.floor(Math.random() * 250);
smearing.y = 0;
smearing.to(2,{
x: Math.floor(Math.random() * (500 - 480) 480),

y: 400
});
meteorLayer.addChild(smearing);
} for(var key inListorLayer.L. >if(meteorLayer.childList[key].mode == "complete"){ meteorLayer.removeChild(meteorLayer.childList[key]);
}
} indexFrame ; 程式碼清單12 每行程式碼都加入了註釋，理解起來一定很簡單了。如果實在理解不到，可能是因為你沒有了解lufylegend罷了。可以參考API文件學習一下。 最後是代碼打包，下載地址 這篇文章就到此結束了。文章如有什麼地方寫得不妥，歡迎提出。另外，如果有任何不解的地方，可以在部落格下方留言，我會盡我所能幫你解決。 支持就是最大的鼓勵！