查看: 2722|回复: 7

[教程] Egret设计的的白云飘飘效果

[复制链接]
发表于 2015-11-5 14:22:05 | 显示全部楼层 |阅读模式
  这是我原来基于Starling写的一个Demo,改了一下代码,转换成Egret版本!



001.jpg


  1. /**
  2. * Created by shaorui on 14-9-3.
  3. */
  4. class Cloud extends egret.DisplayObjectContainer {

  5.     private imgArr:CloudImage[];
  6.     private imgCount:number = 300;
  7.     private screenWidth:number = 480;
  8.     private screenHeight:number = 800;
  9.     private focal:number=400;
  10.     private stageRect:egret.Rectangle;
  11.     private vpX:number;
  12.     private vpY:number;
  13.     private touchX:number=240;
  14.     private touchY:number=540;

  15.     public constructor() {
  16.         super();
  17.         this.touchEnabled = true;
  18.         this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
  19.     }
  20.     private onAddToStage(event:egret.Event){
  21.         this.removeEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
  22.         this.initGame();
  23.     }
  24.     private initGame():void {
  25.         this.vpX=this.stage.stageWidth/2;
  26.         this.vpY=this.stage.stageHeight/2;
  27.         this.stageRect = new egret.Rectangle(-480,0,this.stage.stageWidth*3,this.stage.stageHeight);
  28.         this.imgArr = [];
  29.         for (var i:number = 0; i < this.imgCount; i++)
  30.         {
  31.             var item:CloudImage = new CloudImage(RES.getRes("cloud10"));
  32.             item.anchorX = 0.5;
  33.             item.anchorY = 0.5;
  34.             //item.x = Math.random()*2000;
  35.             //item.y = this.screenHeight-200+Math.random()*200;
  36.             this.setAShape(item);
  37.             this.imgArr.push(item);
  38.             this.addChild(item);
  39.         }
  40.         this.addEventListener(egret.Event.ENTER_FRAME,this.enterFrameHandler,this);
  41.         this.addEventListener(egret.TouchEvent.TOUCH_MOVE,this.touchMoveHandler,this);
  42.     }
  43.     private touchMoveHandler(evt:egret.TouchEvent):void {
  44.         this.touchX = evt.stageX;
  45.         //this.touchY = evt.stageY;
  46.     }
  47.     /**重置位置*/
  48.     private setAShape(shape:CloudImage):void
  49.     {
  50.         shape.scale = 0.001;
  51.         shape.scaleX = shape.scale;
  52.         shape.scaleY = shape.scale;
  53.         shape.startX=this.screenWidth*Math.random();
  54.         shape.startY=this.screenHeight/2+this.screenHeight/2*Math.random()-100;
  55.         shape.x = shape.startX;
  56.         shape.y = shape.startY;
  57.         shape.zpos = Math.random()*800+400;
  58.         shape.rotation = Math.random()*Math.PI;
  59.     }
  60.     /**Z排序*/
  61.     private sortArray():void
  62.     {
  63.         this.imgArr.sort(this.zSortFunction);
  64.     }
  65.     /**排序方法*/
  66.     private zSortFunction(a:CloudImage,b:CloudImage):number
  67.     {
  68.         if(a.zpos > b.zpos)
  69.             return -1;
  70.         else if(a.zpos < b.zpos)
  71.             return 1;
  72.         else
  73.             return 0;
  74.     }
  75.     /**判断一个对象是否已经不在屏幕区域*/
  76.     private shapeAvisible(shape:CloudImage):Boolean
  77.     {
  78.         var shapeRect:egret.Rectangle = shape.getBounds();
  79.         return this.stageRect.intersects(shapeRect);
  80.     }
  81.     /**每帧调用*/
  82.     private enterFrameHandler(event:Event=null):void
  83.     {
  84.         var centerPoint:egret.Point = new egret.Point(this.touchX,this.touchY);
  85.         var xpos:number;
  86.         var ypos:number;
  87.         var item:CloudImage;
  88.         for (var i:number = 0; i < this.imgCount; i++)
  89.         {
  90.             item = this.imgArr[i];
  91.             //reset properties
  92.             item.zpos-=4;
  93.             var x1:number = this.screenWidth/2-item.startX;
  94.             var y1:number = this.screenHeight/2-item.startY;
  95.             if (item.zpos>-this.focal && this.shapeAvisible(item))
  96.             {
  97.                 xpos=centerPoint.x-this.vpX-x1;//x维度
  98.                 xpos*=2;
  99.                 ypos=centerPoint.y-this.vpY-y1;//y维度
  100.                 item.scale=this.focal/(this.focal+item.zpos);//缩放产生近大远小,取值在0-1之间;
  101.                 item.scaleX = item.scale;
  102.                 item.scaleY = item.scale;
  103.                 item.x=this.vpX+xpos*item.scale;
  104.                 item.y=this.vpY+ypos*item.scale;
  105.             }
  106.             else
  107.             {
  108.                 this.setAShape(item);
  109.             }
  110.         }
  111.         this.sortArray();
  112.         for (i = 0; i < this.imgCount; i++)
  113.         {
  114.             item = this.imgArr[i];
  115.             this.addChild(item);
  116.         }
  117.     }
  118. }
  119. class CloudImage extends egret.Bitmap
  120. {
  121.     private itemWidth:number = 256;
  122.     private itemHeight:number = 256;

  123.     public startX:number;
  124.     public startY:number;
  125.     public zpos:number=0;

  126.     public scale:number = 1;

  127.     public getBounds():egret.Rectangle
  128.     {
  129.         var w:number = this.itemWidth*this.scale;
  130.         var h:number = this.itemHeight*this.scale;
  131.         var rect:egret.Rectangle = new egret.Rectangle(this.x-w/2,this.y-h/2,w/2,h/2);
  132.         rect.width = Math.max(1,rect.width);
  133.         rect.height = Math.max(1,rect.height);
  134.         return rect;
  135.     }
  136. }
复制代码


回复

使用道具 举报

发表于 2016-10-12 14:13:04 | 显示全部楼层
为企鹅请问请问请问请问企鹅去委屈委屈
回复 支持 反对

使用道具 举报

发表于 2016-11-24 08:43:28 | 显示全部楼层
it looks fine
回复 支持 反对

使用道具 举报

发表于 2017-1-17 18:45:49 | 显示全部楼层
还不错,学习了
回复 支持 反对

使用道具 举报

发表于 2017-2-16 08:57:28 | 显示全部楼层

谢谢楼主啊,我正在寻找学习的例子呢,辛苦啦
回复 支持 反对

使用道具 举报

发表于 2017-9-21 15:06:01 | 显示全部楼层
感谢分享,我下载看看好用吗
回复 支持 反对

使用道具 举报

发表于 2018-6-28 10:39:36 | 显示全部楼层
1111111111111
回复 支持 反对

使用道具 举报

发表于 2018-6-28 10:39:53 | 显示全部楼层
1111111111111
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条

关注蚂蚁HTML5社区官方微信
关注蚂蚁HTML5社区官方微信

邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© 2014-2018 MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表