0评论

设置遮罩(AS3)

文章来自http://ldc.layabox.com/doc/?nav=ch-as-1-2-0 2017-04-01 226浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯GAD游戏开发行业精英群156225479

LayaAir的遮罩,可以设置一个对象(支持位图和矢量图),然后根据对象形状进行遮罩显示。

一、遮罩API介绍

  遮罩属性位于laya.display.Sprite API内,该属性的说明如图1所示:

1
(图1)

二、简单的遮罩示例

2.1 我们先用LayaAir引擎显示一张位图,代码如下:

  1. package
  2. {
  3. import laya.display.Sprite;
  4. import laya.resource.Texture;
  5. import laya.utils.Handler;
  6. public class MaskDemo
  7. {
  8. private var Res:String;
  9. private var img:Sprite;
  10. public function MaskDemo()
  11. {
  12. Laya.init(1136,640);
  13. //设置舞台背景色
  14. Laya.stage.bgColor = "#ffffff"
  15. //资源路径
  16. Res = "./res/img/monkey1.png";
  17. //先加载图片资源,在图片资源加载成功后,通过回调方法绘制图片并添加到舞台
  18. Laya.loader.load(Res,Handler.create(this,graphicsImg));
  19. }
  20. private function graphicsImg():void
  21. {
  22. img = new Sprite();
  23. //获取图片资源,绘制到画布
  24. img.graphics.drawTexture(Laya.loader.getRes(Res),150,50);
  25. //添加到舞台
  26. Laya.stage.addChild(img);
  27. }
  28. }
  29. }

运行效果如图2所示:

图2
(图2)

2.2 创建一个圆形的遮罩区域,通过mask属性,即可实现遮罩效果。继续看代码和注释,我们将2.1示例代码修改为如下代码:

  1. package
  2. {
  3. import laya.display.Sprite;
  4. import laya.resource.Texture;
  5. import laya.utils.Handler;
  6. public class MaskDemo
  7. {
  8. private var Res:String;
  9. private var img:Sprite;
  10. public function MaskDemo()
  11. {
  12. Laya.init(1136,640);
  13. //设置舞台背景色
  14. Laya.stage.bgColor = "#ffffff"
  15. //资源路径
  16. Res = "./res/img/monkey1.png";
  17. //先加载图片资源,在图片资源加载成功后,通过回调方法绘制图片并添加到舞台
  18. Laya.loader.load(Res,Handler.create(this,graphicsImg));
  19. }
  20. private function graphicsImg():void
  21. {
  22. img = new Sprite();
  23. //获取图片资源,绘制到画布
  24. img.graphics.drawTexture(Laya.loader.getRes(Res),150,50);
  25. //添加到舞台
  26. Laya.stage.addChild(img);
  27. //创建遮罩对象
  28. var cMask:Sprite = new Sprite();
  29. //画一个圆形的遮罩区域
  30. cMask.graphics.drawCircle(80,80,50,"#ff0000");
  31. //圆形所在的位置坐标
  32. cMask.pos(120,50);
  33. //实现img显示对象的遮罩效果
  34. img.mask = cMask;
  35. }
  36. }
  37. }

运行效果如图3所示:

图3 
(图3)

通过对比代码我们发现,实现遮罩很简单,把创建的显示对象cMask作为遮罩对象赋值给img对象的mask属性,即实现了img显示对象的遮罩效果。

三、在LayaAirIDE中设置遮罩

除了直接在代码中设置遮罩,也可以通过LayaAirIDE方便的给对象设置遮罩。下面我们跟着引导按步骤操作。

步骤一:创建一个UI页面maskDemo.ui,导入资源。(本步骤不了解的请去IDE章节查看UI创建及资源导入相关文档)

步骤二:在资源面板拖入一个Image组件到场景编辑区,如图4所示

图4 
(图4)

步骤三:双击进入Image组件内部,然后再到组件面板拖入一个Sprite组件,如图5所示。

图5 
(图5)

步骤四:选中Sprite组件,在右侧属性面板中,将公用属性renderType设置为mask,如图6所示。

图6 
(图6)

步骤五:双击进入Sprite组件内部,然后再到组件面板拖入一个Graphics圆形组件,调整好位置和大小。层级关系如图7所示。

图7 
(图7)

步骤六:连续双击编辑区的空白区域退出Image组件内部,即可看到遮罩的效果,如图8所示。

图8 
(图8)

四、在项目中应用LayaAirIDE设置的遮罩

4.1 发布UI

  在IDE界面按F12发布制作遮罩效果的UI页面,会在src/ui目录下生成UI类,以及bin/h5/res/atlas目录下的图集文件,如图9所示。

图9 
(图9)

4.2 使用IDE生成的类与图集,实现遮罩效果

  创建一个入口类Main.as,编码如下:

  1. package
  2. {
  3. import laya.net.Loader;
  4. import laya.utils.Handler;
  5. import ui.maskDemoUI;
  6. public class Main
  7. {
  8. public function Main()
  9. {
  10. //初始化舞台
  11. Laya.init(1136,640);
  12. //设置舞台背景色
  13. Laya.stage.bgColor = "#ffffff"
  14. //加载图集资源,加载成功后添加到舞台
  15. Laya.loader.load([{url:"./res/atlas/ui.json",type:Loader.ATLAS}],Handler.create(this,onLoaded));
  16. }
  17. private function onLoaded():void
  18. {
  19. var cMask:maskDemoUI = new maskDemoUI();
  20. Laya.stage.addChild(cMask);
  21. }
  22. }
  23. }

运行效果如图10所示,我们很快捷的实现了遮罩的效果。

图10 
(图10)

想免费获取内部独家PPT资料库? 观看行业大牛直播?

立即扫码加群

腾讯GAD 游戏开发者平台

正在为您生成个性化社区首页

已为您定制专属社区首页

选择关注标签

全新改版的GAD,想你所想,等你体验...
  • 策划{{selectCount.plan}}
  • 开发{{selectCount.program}}
  • 美术{{selectCount.art}}
  • VR/AR{{selectCount.vr}}
{{tab.name}}
跳过

选择关注用户

  • {{tab.user.NickName}} {{tab.introduction}}