HTML5 game engine Ltweenlite implementation of the Super Handsome animation effect (with demo source download) _javascript Tips

This article describes the HTML5 game engine Ltweenlite implementation of the Super handsome animation effect. Share to everyone for your reference, specific as follows:

Lufylegend.js is an open source HTML5 game engine, in the game will often have a variety of animations, some of these animations are flash files, some are video files, this time to use Lufylegend to make a handsome game animation, the following figure.

The test connection is as follows:
http://lufylegend.com/demo/effects01/

First, preparatory work

The preparation is of course the engine download.

Lufylegend.js Engine website
Http://lufylegend.com/lufylegend

Lufylegend.js engine Online API Documentation link
Http://lufylegend.com/lufylegend/api

Second, the production process

To do the animation, it is generally to use the timeline, in the Lufylegend.js engine, the timeline event usage is as follows

Copy Code code as follows:

Layer.addeventlistener (Levent.enter_frame, onframe);

For example, we let an object a keep moving to the right, and we can do it.

Layer.addeventlistener (Levent.enter_frame, onframe);
function Onframe (event) {
  a.x + + 1;
}

The timeline is the most commonly used method in the production of games and animations, but this time the animation is made by another approach, which is ltweenlite.

Ltweenlite is the lufylegend.js engine of the easing class, in the animation process is very useful, even more convenient than the general timeline events, in the next development, all animations are implemented by the Ltweenlite easing class class.

1. Of course, to prepare HTML first

<! DOCTYPE html>
 
 

2. Then the engine was initialized, and the picture was read

var imgdata = [
  {name: ' Background ', path: ' Background.jpg '},
  {name: ' Background_ad ', Path: ' Background_ad.jpg ' },
  {name: "CARD01", Path: "Card01.png"},
  {name: "CARD02", Path: "Card02.png"},
  {name: "CARD03", Path: " Card03.png "},
  {name:" Card04 ", Path:" Card04.png "},
  {name:" CARD05 ", Path:" Card05.png "},
  {name:" Effects ", Path:" Effects.png "},
  {name:" Stable_assets ", Path:" Stable_assets.png "}
];
var dataList;
var Loadinglayer,charalayer,stagelayer;
var warshipdown,playertext,enemytext,windowup,title,big_vs,background,swords,swords02;
if (Lglobal.cantouch) {
  lglobal.stagescale = Lstagescalemode.exact_fit;
  Lsystem.screen (Lstage.full_screen);
}
Init ("Legend", 320,410,main);
function Main () {
  loadinglayer = new LoadingSample4 ();
  AddChild (Loadinglayer);
  /** Read the picture * *
  lloadmanage.load (Imgdata,
    function (progress) {
      loadinglayer.setprogress (progress);
    } , gameinit);
}

The above code, when using mobile phone browsing, will set the interface for Full-screen.

3. Create an automatic flashing background

/**
 * Background
 * * *
/function BackGround (bg01,bg02) {
  var self = this;
  Base (self,lsprite,[]);
  SELF.BITMAPBG01 = new Lbitmap (new Lbitmapdata (BG01));
  Self.addchild (SELF.BITMAPBG01);
  SELF.BITMAPBG02 = new Lbitmap (new Lbitmapdata (BG02));
  Self.addchild (SELF.BITMAPBG02);
  Self.run ();
}
/**
 * Let the background class of two pictures of the top picture, constantly alternating display and hidden state, to achieve the effect of alternating light and shade
 * */
BackGround.prototype.run = function () {
  var self = this;
  var tween = ltweenlite.to (Self.bitmapbg02,0.5,{alpha:0,ease:bounce.easein}).
  to (Self.bitmapbg02,0.5,{alpha:1,ease:bounce.easein,oncomplete:function () {
    self.run ();}
  });

The code above, which uses the new features of the Lufylegend.js engine 1.8.0 version, continues to ease, and when the easing is over, calls its own run function, which enables the loop.

4. A ship that keeps firing artillery shells

/** * * */function warship (shipdata,shotdata) {var self = this;
  Base (self,lsprite,[]);
  Self.bitmapship = new Lbitmap (shipdata);
  Self.addchild (self.bitmapship);
  Self.bitmapshot = new Lbitmap (shotdata);
  Self.bitmapshot.x =-10;
  Self.bitmapshot.y = self.bitmapship.y + 123;
  Self.addchild (Self.bitmapshot);
  Self.bitmapShot.rotate =-75;
  Self.bitmapShot.alpha = 0;
  self.bitmapshot02 = new Lbitmap (shotdata);
  Self.bitmapShot02.scaleX = Self.bitmapShot02.scaleY = 0.7;
  self.bitmapshot02.x = 65;
  SELF.BITMAPSHOT02.Y = self.bitmapship.y + 220;
  Self.addchild (self.bitmapshot02);
  Self.bitmapShot02.rotate =-80;
  Self.bitmapShot02.alpha = 0;
  Self.run ();
Self.shot ();
  /** * Allow the battleship to float up and down */Warship.prototype.run = function () {var self = this;
  Ltweenlite.to (Self.bitmapship,1,{y:5,ease:quad.easeinout}).
  to (Self.bitmapship,1,{y:0,ease:quad.easeinout,oncomplete:function () {self.run ();
}}); /** * Let the battleship fire guns * * * * * * Warship.prototype.shot = function () {varself = this; Ltweenlite.to (self.bitmapshot,0.1,{delay:1.5,alpha:1,ease:quad.easeinout,onupdate:function (obj) {obj.y =
  OBJ.PARENT.BITMAPSHIP.Y + 123; }). to (Self.bitmapshot,0.1,{alpha:0,ease:quad.easeinout}). to (Self.bitmapshot02,0.1,{delay:0.5,alpha:1,ease:
  Quad.easeinout,onupdate:function (obj) {obj.y = obj.parent.bitmapship.y + 220;
  }). to (Self.bitmapshot02,0.1,{alpha:0,ease:quad.easeinout,oncomplete:function () {self.shot ();
}});

 }

The code above uses the same method to implement the loop.

5. A flashing title

/**
 * Title
 *
/function title (bitmapData) {
  var self = this;
  Base (self,lsprite,[]);
  Self.bitmap = new Middlebitmap (bitmapData);
  Self.bitmap.scaleX = Self.bitmap.scaleY = 0.5;
  Self.addchild (SELF.BITMAP);
  Self.run ();
}
/**
 * By changing the transparent state of the title, let the title Light and shade alternately blink
 * * *
/Title.prototype.run = function () {
  var self = this;
  Ltweenlite.to (Self.bitmap,1,{alpha:0.4,ease:quad.easeinout}).
  to (Self.bitmap,1,{alpha:1,ease:quad.easeinout,oncomplete:function (obj) {
    obj.parent.run ();}}
  );

The above code, by constantly changing the transparency of the picture, to achieve the flashing display of the title.

6. Can flip the display picture of the sword class

/**
 * Sword, through the parameters of the scale straight, to set the picture of the sword flip
 * * *
/function Swords (bitmapdata,scale) {
  var self = this;
  Base (self,lsprite,[]);
  Self.bitmapswords = new Lbitmap (bitmapData);
  Self.bitmapswords.x =-self.bitmapswords.getwidth () *0.5;
  Self.bitmapswords.y =-self.bitmapswords.getheight () *0.5;
  if (scale = = 1) {
    Self.bitmapSwords.scaleY = scale;
    Self.bitmapswords.y + + self.bitmapSwords.getHeight ();
  }
  Self.addchild (self.bitmapswords);
}

7. The object that moves the picture to the vertex. The advantage of moving the center of a child object Lbitmap to the object's origin is that the object's display position does not change regardless of whether the object is scaled or rotated.

/**
 * Places the center of the Lbitmap object at the origin of an object and returns the object
 *
/function Middlebitmap (bitmapData) {
  var self = this;
  Base (self,lsprite,[]);
  Self.bitmaptitle = new Lbitmap (bitmapData);
  self.bitmaptitle.x =-self.bitmaptitle.getwidth () *0.5;
  Self.bitmaptitle.y =-self.bitmaptitle.getheight () *0.5;
  Self.addchild (Self.bitmaptitle);
}

8. A special effects class

/** * Special effects category, special effects picture added, after the effect is displayed automatically disappear * * */function Effect (index) {var self = this;
  Base (self,lsprite,[]);
  var bitmapData;
      Switch (index) {case 0:bitmapdata = new Lbitmapdata (datalist["Effects"],99,45,116,96);
    Break
      Case 1:bitmapdata = new Lbitmapdata (datalist["Effects"],102,278,110,88);
    Break
      Case 2:bitmapdata = new Lbitmapdata (datalist["Effects"],357,85,122,127);
    Break
      Case 3:bitmapdata = new Lbitmapdata (datalist["Effects"],346,357,108,99);
    Break
      Case 4:bitmapdata = new Lbitmapdata (datalist["Effects"],246,918,57,62);
  Break
  } Self.item = new Middlebitmap (bitmapData);
  Self.item.scaleX = Self.item.scaleY = 0.1;
  Self.addchild (Self.item); Ltweenlite.to (Self.item,0.1,{scalex:2,scaley:2,ease:quad.easeinout}). to (Self.item,0.2,{scalex:3,scaley:3,alpha
    : 0,ease:quad.easeinout,oncomplete:function (obj) {var eff = obj.parent;
  Eff.parent.removeChild (EFF);
}});

 }

The above effect class, when the effect object added to the screen, will gradually automatically disappear.

9. Add characters to the screen

/** * Add character images to the interface */function Setchara () {charalayer = new lsprite ();
  Stagelayer.addchild (Charalayer);
  var charabitmap,sy = 220;
  var charabitmap = new Middlebitmap (New Lbitmapdata (datalist["card01"));
  Charabitmap.scale = 0.4;
  charabitmap.x = 110;
  Charabitmap.ty = 50;
  CHARABITMAP.Y = sy;
  Charabitmap.alpha = 0;
  Charalayer.addchild (CHARABITMAP);
  Charabitmap = new Middlebitmap (New Lbitmapdata (datalist["card02"));
  Charabitmap.scale = 0.45;
  charabitmap.x = 85;
  Charabitmap.ty = 90;
  CHARABITMAP.Y = sy;
  Charabitmap.alpha = 0;
  Charalayer.addchild (CHARABITMAP);
  Charabitmap = new Middlebitmap (New Lbitmapdata (datalist["card03"));
  Charabitmap.scale = 0.55;
  charabitmap.x = 70;
  Charabitmap.ty = 140;
  CHARABITMAP.Y = sy;
  Charabitmap.alpha = 0;
  Charalayer.addchild (CHARABITMAP);
  Charabitmap = new Middlebitmap (New Lbitmapdata (datalist["card04"));
  Charabitmap.scale = 0.65;
  charabitmap.x = 75;
  Charabitmap.ty = 215;
  CHARABITMAP.Y = sy; CharabItmap.alpha = 0;
  Charalayer.addchild (CHARABITMAP);
  Charabitmap = new Middlebitmap (New Lbitmapdata (datalist["card05"));
  Charabitmap.scale = 0.75;
  charabitmap.x = 85;
  Charabitmap.ty = 280;
  CHARABITMAP.Y = sy;
  Charabitmap.alpha = 0;
  Charalayer.addchild (CHARABITMAP);
  Right charabitmap = new Middlebitmap (New Lbitmapdata (datalist["card05"));
  Charabitmap.scale = 0.4;
  charabitmap.x = 215;
  Charabitmap.ty = 50;
  CHARABITMAP.Y = sy;
  Charabitmap.alpha = 0;
  Charalayer.addchild (CHARABITMAP);
  Charabitmap = new Middlebitmap (New Lbitmapdata (datalist["card04"));
  Charabitmap.scale = 0.45;
  charabitmap.x = 240;
  Charabitmap.ty = 90;
  CHARABITMAP.Y = sy;
  Charabitmap.alpha = 0;
  Charalayer.addchild (CHARABITMAP);
  Charabitmap = new Middlebitmap (New Lbitmapdata (datalist["card01"));
  Charabitmap.scale = 0.55;
  charabitmap.x = 260;
  Charabitmap.ty = 140;
  CHARABITMAP.Y = sy;
  Charabitmap.alpha = 0;
  Charalayer.addchild (CHARABITMAP); Charabitmap = new MIDDLEbitmap (New Lbitmapdata (datalist["card03"));
  Charabitmap.scale = 0.65;
  charabitmap.x = 260;
  Charabitmap.ty = 215;
  CHARABITMAP.Y = sy;
  Charabitmap.alpha = 0;
  Charalayer.addchild (CHARABITMAP);
  Charabitmap = new Middlebitmap (New Lbitmapdata (datalist["card02"));
  Charabitmap.scale = 0.75;
  charabitmap.x = 242;
  Charabitmap.ty = 280;
  CHARABITMAP.Y = sy;
  Charabitmap.alpha = 0;
Charalayer.addchild (CHARABITMAP);

 }

Add five characters to the left and right sides, and set him up. Finally, the target position and the target size are displayed on the screen.

With the following function, you can add a special effect

function Addeff (index,x,y) {
  var eff = new Effect (index);
  eff.x = x;
  Eff.y = y;
  Stagelayer.addchild (EFF);
}

10. Next, all the objects are added to the screen, the first temporarily do not display the object, the Visible property set to false;

/** * Adds all objects and pictures to the interface */function AddItem () {backlayer = new lsprite ();
  Stagelayer.addchild (Backlayer);
  Backlayer.scalex = Backlayer.scaley = 2;
  Background = new background (datalist["Background"],datalist["Background_ad"));
  Background.x =-60;
  Background.y =-50;
  Backlayer.addchild (background); var warship = new warship (New Lbitmapdata (datalist["Stable_assets"],0,0,409,480), New Lbitmapdata (datalist["stable_a")
  Ssets "],754,0,270,250));
  Warship.scalex = Warship.scaley = 0.8;
  Backlayer.addchild (warship);
  Setchara ();
  Warshipdown = new Lsprite ();
  WARSHIPDOWN.Y = Lglobal.height;
  Stagelayer.addchild (Warshipdown);
  var warship02 = new Lbitmap (New Lbitmapdata (datalist["Stable_assets"],0,505,720,310));
  Warship02.scalex = Warship02.scaley = 0.5;
  warship02.x = (Lglobal.width-warship02.getwidth ()) *0.5;
  Warshipdown.addchild (WARSHIP02);
  var small_vs = new Middlebitmap (New Lbitmapdata (datalist["Stable_assets"],726,502,120,120)); Small_vs.scalex = Small_vs.scaley = 0.6;
  Small_vs.x = lglobal.width*0.5;
  Small_vs.y = lglobal.height-355;
  Warshipdown.addchild (SMALL_VS);
  Playertext = new Ltextfield ();
  Playertext.color = "Red";
  Playertext.text = "Player";
  Playertext.x = (Lglobal.width*0.5-playertext.getwidth ()) *0.5;
  Playertext.y = 30;
  Warshipdown.addchild (Playertext);
  Enemytext = new Ltextfield ();
  Enemytext.color = "Red";
  Enemytext.text = "enemy";
  Enemytext.x = lglobal.width*0.5 + (lglobal.width*0.5-enemytext.getwidth ()) *0.5;
  Enemytext.y = 30;
  Warshipdown.addchild (Enemytext);
  Windowup = new Lsprite ();
  WINDOWUP.Y =-50;
  Stagelayer.addchild (WINDOWUP);
  var title_battle = new Middlebitmap (New Lbitmapdata (datalist["Stable_assets"],897,469,45,239));
  Title_battle.rotate =-90;
  Title_battle.scalex = Title_battle.scaley = 0.55;
  title_battle.x = lglobal.width*0.5;
  Title_battle.y = 10;
  Windowup.addchild (Title_battle); var chain = new Lbitmap (New Lbitmapdata (datalist["Stable_assets"],880,264,71,180));
  Chain.rotate =-90;
  Chain.scalex = Chain.scaley = 0.5;
  Windowup.addchild (chain);
  var chain01 = new Lbitmap (New Lbitmapdata (datalist["Stable_assets"],851,740,100,173));
  Chain01.rotate =-90;
  Chain01.scalex = Chain01.scaley = 0.6;
  chain01.x = 240;
  Windowup.addchild (CHAIN01);
  title = new Title (New Lbitmapdata (datalist["Stable_assets"],415,425,405,80));
  title.x = lglobal.width*0.5;
  TITLE.Y = 290;
  Title.alpha = 0;
  Title.visible = false;
  Stagelayer.addchild (title);
  Big_vs = new Middlebitmap (New Lbitmapdata (datalist["Stable_assets"],420,5,340,330));
  Big_vs.rotate =-90;
  Big_vs.x = lglobal.width*0.5;
  BIG_VS.Y = 170;
  Big_vs.alpha = 0;
  Big_vs.visible = false;
  Stagelayer.addchild (BIG_VS);
  Swords = new Swords (new Lbitmapdata (datalist["Stable_assets"],405,335,454,89), 1);
  Swords.x = lglobal.width*0.5;
  Swords.y = lglobal.height*0.5-60;
  Swords.rotate =-135;
  Swords.scalex = Swords.scaley = 0.8;
  Swords.visible = false; Stagelayer.addchild (Swords);
  SWORDS02 = new Swords (New Lbitmapdata (datalist["Stable_assets"],405,335,454,89),-1);
  swords02.x = lglobal.width*0.5;
  Swords02.y = lglobal.height*0.5-60;
  Swords02.rotate =-45;
  Swords02.scalex = Swords02.scaley = 0.8;
  Swords02.visible = false;
Stagelayer.addchild (SWORDS02);

 }

11. Use the easing function to realize the animation.

Let's see the first animation first.

* * * The first animation to start playing * */function Animation01start (event) {if (event) {Stagelayer.die ();
  Stagelayer.removeallchild ();
  /* Add all Objects/* AddItem ();
  * All characters start easing/var charalist = charalayer.childlist,chara,delayvalue,duration; for (Var i=0,l=charalist.length;i<l i= "chara=" charalist[i); "y=", "scalex=" Chara.scaley "2=" "delayvalue=" 0.1*
    i; "if=" ">= 5" {delayvalue = 0.1* (i-5);
    } duration = 1-delayvalue;
    CHARA.Y = 220; Ltweenlite.to (chara,duration,{delay:delayvalue,alpha:1,scalex:chara.scale,scaley:chara.scale,ease:
  Strong.easeout}). to (Chara,1,{y:chara.ty,ease:strong.easeout}); //* Background ease, larger left move up → small right Move Down/ltweenlite.to (Backlayer,1,{scalex:1.3,scaley:1.3,x:-100,y:-50,ease:strong.easeout}). to (
  Backlayer,1,{scalex:1,scaley:1,x:0,y:0,ease:strong.easeout}); /* The following window easing, delay → move up → title can show +vs can show/ltweenlite.to (warshipdown,0.5,{delay:1.5,y:320,ease:elastic.easeout,oncomplete:
  function () {title.visible = Big_vs.visible = true;
  }}); /* The upper window is slow to move,Delay → down-shift/Ltweenlite.to (windowup,0.5,{delay:1.5,y:0,ease:elastic.easeout});
  * * Above window easing, delay → opaque * * * LTWEENLITE.TO (title,0.2,{delay:1.5,alpha:1,ease:elastic.easeout}); /*vs title easing, delay → opacity narrowing → narrowing → adding special effects and entering the second animation initialization/ltweenlite.to (big_vs,0.5,{delay:1.5,alpha:1,scalex:1,scaley:1,ease: Elastic.easeout}). to (Big_vs,1,{scalex:0.45,scaley:0.45,ease:elastic.easeout,oncomplete:function () {ADDEFF (1,big
    _VS.X,BIG_VS.Y);
    Addeff (1,BIG_VS.X,BIG_VS.Y);
  /* After all eases, animation 2 begins to prepare/animation02init ();
}});

 }

Second animation

* * * The second animation starts playing */function Animation02start (event) {Stagelayer.removeeventlistener (lmouseevent.mouse_up, Animation0
  2Start); /*vs easing, becoming large and transparent → then disappearing/ltweenlite.to (Big_vs,1,{scalex:2,scaley:2,alpha:0,ease:elastic.easein,oncomplete:function ()
  {Big_vs.parent.removeChild (BIG_VS);
  }}); /* background easing, larger → larger → small/ltweenlite.to (Backlayer,2,{delay:1,scalex:1.2,scaley:1.2,x:-100,y:-50,ease:sine.easeinout}). to (Backlayer,1,{scalex:1.5,scaley:1.5,ease:sine.easeinout}). to (Backlayer,0.5,{scalex:1,scaley:1,x:0,y:0,ease:
  Sine.easeinout}); /* The following window is slow, move Down → move Up/ltweenlite.to (Warshipdown,0.5,{delay:0.5,y:lglobal.height,ease:strong.easeout}). to (WarshipDown
  , 0.5,{delay:3,y:320,ease:strong.easeout}); * * Above window easing, up-move → down/ltweenlite.to (Windowup,0.5,{delay:0.5,y:-50,ease:strong.easeout}). to (windowup,0.5,{delay:3,y:0
  , ease:Strong.easeOut});
    /* Title ease, no effect → no show + character easing start → show/ltweenlite.to (Title,0.5,{delay:0.5,ease:strong.easeout,oncomplete:function (obj) {
    Obj.visible = false; Charabattle();
  }). to (Title,0.5,{delay:3,ease:strong.easeout,oncomplete:function (obj) {obj.visible = true;
  }});
  * * The sword becomes visible, and the coordinates are set outside the picture * * swords.visible = true;
  Swords02.visible = true;
  swords.x =-200;
  swords02.x = Lglobal.width + 200;
  var wait = 4;
  * * Left Sword ease, move right screen Center/ltweenlite.to (Swords,0.5,{delay:wait,x:lglobal.width*0.5,ease:elastic.easeout});
  * * Right Sword ease, move left screen Center/ltweenlite.to (Swords02,0.5,{delay:wait,x:lglobal.width*0.5,ease:elastic.easeout});
    /*stagelayer slow, no effect delay, add special effects after end and enter the first animation initialization/ltweenlite.to (Stagelayer,0.2,{delay:wait,oncomplete:function () {
    Addeff (Math.random () *5 >> 0,lglobal.width*0.5,lglobal.height*0.4);
    Addeff (Math.random () *5 >> 0,lglobal.width*0.5,lglobal.height*0.4);
    Addeff (Math.random () *5 >> 0,lglobal.width*0.5,lglobal.height*0.4);
  Animation01init ();
}});

 }

12. Finally, two animation after the end to add click events, click on the screen so that two animations can switch to each other

*
 * Click on the screen, the first animation begins to play
 */
function animation01init () {
  Stagelayer.addeventlistener ( LMOUSEEVENT.MOUSE_UP, Animation01start);
*
 * Click on the screen, the second animation begins to play
 */
function animation02init () {
  Stagelayer.addeventlistener ( LMOUSEEVENT.MOUSE_UP, Animation02start);

Finished, all the code above. Welcome everybody to exchange together

Third, the source code

Full instance code click here to download the site.

I hope this article will help you with JavaScript programming.