基于laya Air引擎的游戏开发之基础篇中

显示与切换图片

1、用loadImage方法显示与切换图片

1.1 loadImage API概述

在API文档中搜索laya.display.Sprite，可以找到loadImage()方法，如图1所示，我们先熟悉一下该方法的参数。

(图1)

1.2 用loadImage加载显示图片的示例

创建一个Sprite_DisplayImage.ts类，编写代码如下：

1. module laya {
2.     import Sprite = Laya.Sprite;
3.     import Stage = Laya.Stage;
4.     import Texture = Laya.Texture;
5.     import Browser = Laya.Browser;
6.     import Handler = Laya.Handler;
7.     import WebGL = Laya.WebGL;
9.     export class Sprite_DisplayImage {
10.         constructor() {
11.             // 不支持WebGL时自动切换至Canvas
12.             Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
13.             Laya.stage.alignV = Stage.ALIGN_MIDDLE;
14.             Laya.stage.alignH = Stage.ALIGN_CENTER;
15.             Laya.stage.scaleMode = "showall";
16.             Laya.stage.bgColor = "#ffffff";
17.             this.showApe();
18.         }
19.          private showApe(): void {
20.             // 方法1：使用loadImage
21.             var ape: Sprite = new Sprite();
22.             ape.pos(100,50);
23.             Laya.stage.addChild(ape);
24.             ape.loadImage("../../res/apes/monkey3.png");
25.         }
26.     }
27. }
28. new laya.Sprite_DisplayImage();

在示例代码里，“100,50”是图片的显示坐标信息。示例代码运行效果如图2-1所示：

 (图2-1)

1.3 用loadImage切换图片的示例

切换图片是在显示图片的基础之上，增加了清空绘制，然后通过代码逻辑获得新的图片资源重新绘制。具体的代码说明可以参考代码注释及API，结合实例运行体验。

下面我们在Sprite_SwitchTexture.ts类中修改代码为如下所示：

1. module laya {
2.     import Sprite = Laya.Sprite;
3.     import Stage = Laya.Stage;
4.     import Texture = Laya.Texture;
5.     import Handler = Laya.Handler;
6.     import Browser= Laya.Browser;
7.     import WebGL = Laya.WebGL;
9.     export class Sprite_SwitchTexture {
10.         private texture1: string = "../../res/apes/monkey2.png";
11.         private texture2: string = "../../res/apes/monkey3.png";
12.         private flag: boolean = false;
13.         private ape: Sprite;
15.         constructor() {
16.             // 不支持WebGL时自动切换至Canvas
17.             Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
19.             Laya.stage.alignV = Stage.ALIGN_MIDDLE;
20.             Laya.stage.alignH = Stage.ALIGN_CENTER; 
21.             Laya.stage.scaleMode = "showall";
22.             Laya.stage.bgColor = "#ffffff";
24.             Laya.loader.load([this.texture1, this.texture2], Handler.create(this, this.onAssetsLoaded));
25.         }
26.         private onAssetsLoaded(): void {
27.             this.ape = new Sprite();
28.             Laya.stage.addChild(this.ape);
29.             this.ape.pivot(55, 72);
30.             this.ape.pos(100,50);
32.             // 显示默认纹理
33.             this.switchTexture();
35.             this.ape.on("click", this, this.switchTexture);
36.         }
38.         private switchTexture(): void {
39.             var textureUrl: string = (this.flag = !this.flag) ? this.texture1 : this.texture2;
41.             // 更换纹理
42.             this.ape.graphics.clear();
43.             var texture: Texture = Laya.loader.getRes(textureUrl);
44.             this.ape.loadImage(textureUrl);
46.             // 设置交互区域
47.             this.ape.size(texture.width, texture.height);
48.         }
49.     }
50. }
52. new laya.Sprite_SwitchTexture();

2 、用drawTexture方法显示与切换图片

2.1 drawTexture API 概述

在API文档中搜索laya.display.Graphics，可以找到drawTexture()方法，除此之外，还需要了解laya.net.LoaderManager中的load()方法和getRes()方法，以及laya.utils.Handler中的create()方法，各方法的参数图3、图4、图5、图6所示：

 (图3)

 (图4)

(图5) 

 (图6)

2.2 用drawTexture 加载显示图片的示例

​ loadImage()方法可以即时加载外部图片资源，也可以从缓冲区读取图片资源，drawTexture()方法则必须先加载完图片后，再绘制添加到舞台中来，因此在示例代码中需要使用到加载（Laya.loader.load()）与回调(Handler.create())的方法，下面我们通过简单的示例代码加载显示一张图片，代码说明请查看代码中的注释部分以及相关API说明。

创建一个Sprite_DisplayImage.ts类，编写代码如下：

2. module laya {
3.     import Sprite = Laya.Sprite;
4.     import Stage = Laya.Stage;
5.     import Texture = Laya.Texture;
6.     import Browser = Laya.Browser;
7.     import Handler = Laya.Handler;
8.     import WebGL = Laya.WebGL;
10.     export class Sprite_DisplayImage {
11.         constructor() {
12.             // 不支持WebGL时自动切换至Canvas
13.             Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
15.             Laya.stage.alignV = Stage.ALIGN_MIDDLE;
16.             Laya.stage.alignH = Stage.ALIGN_CENTER;
18.             Laya.stage.scaleMode = "showall";
19.             Laya.stage.bgColor = "#ffffff";
21.             this.showApe();
22.         }
24.         private showApe(): void {
26.             // 方法2：使用drawTexture
27.             Laya.loader.load("../../res/apes/monkey2.png", Handler.create(this, function(): void {
28.                 var t: Texture = Laya.loader.getRes("../../res/apes/monkey2.png");
29.                 var ape: Sprite = new Sprite();
30.                 ape.graphics.drawTexture(t, 0, 0);
31.                 Laya.stage.addChild(ape);
32.                 ape.pos(100, 50);
33.             }));
34.         }
35.     }
36. }
37. new laya.Sprite_DisplayImage();

代码运行效果如图7-1所示。

(图7-1)

2.3 用drawTexture 切换图片的示例

切换图片是在显示图片的基础之上，增加了清空绘制，然后通过代码逻辑获得新的图片资源重新绘制。具体的代码说明可以参考代码注释及API，结合实例运行体验。

下面我们在Main.as入口类中修改代码为如下所示：

1. module laya {
2.     import Sprite = Laya.Sprite;
3.     import Stage = Laya.Stage;
4.     import Texture = Laya.Texture;
5.     import Handler = Laya.Handler;
6.     import Browser= Laya.Browser;
7.     import WebGL = Laya.WebGL;
9.     export class Sprite_SwitchTexture {
10.         private texture1: string = "../../res/apes/monkey2.png";
11.         private texture2: string = "../../res/apes/monkey3.png";
12.         private flag: boolean = false;
14.         private ape: Sprite;
16.         constructor() {
17.             // 不支持WebGL时自动切换至Canvas
18.             Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
19.             Laya.stage.alignV = Stage.ALIGN_MIDDLE;
20.             Laya.stage.alignH = Stage.ALIGN_CENTER;
21.             Laya.stage.scaleMode = "showall";
22.             Laya.stage.bgColor = "#232628";
23.             Laya.loader.load([this.texture1, this.texture2], Handler.create(this, this.onAssetsLoaded));
24.         }
25.         private onAssetsLoaded(): void {
26.             this.ape = new Sprite();
27.             Laya.stage.addChild(this.ape);
28.             this.ape.pivot(55, 72);
29.             this.ape.pos(100,50);
30.             // 显示默认纹理
31.             this.switchTexture();
32.             this.ape.on("click", this, this.switchTexture);
33.         }
34.         private switchTexture(): void {
35.             var textureUrl: string = (this.flag = !this.flag) ? this.texture1 : this.texture2;
36.             // 更换纹理
37.             this.ape.graphics.clear();
38.             var texture: Texture = Laya.loader.getRes(textureUrl);
39.             this.ape.graphics.drawTexture(texture, 0, 0);
40.             // 设置交互区域
41.             this.ape.size(texture.width, texture.height);
42.         }
43.     }
44. }
45. new laya.Sprite_SwitchTexture();

设置遮罩

一、遮罩API介绍

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

 

（图1）

二、简单的遮罩示例

2.1 我们先用LayaAir引擎显示一张位图

创建一个MaskDemo.ts入口类，编写代码如下：

1. // 程序入口
2. class MaskDemo{
3.     private Res:string;
4.     private img:Laya.Sprite;
5.     constructor()
6.     {
7.         Laya.init(1336,640);
8.         //设置舞台背景色
9.         Laya.stage.bgColor = "#ffffff";
10.         //资源路径
11.         this.Res = "res/img/monkey1.png";
12.         //先加载图片资源，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台
13.         Laya.loader.load(this.Res,Laya.Handler.create(this,this.graphicsImg));
14.     }
15.     private graphicsImg():void{
16.         this.img = new Laya.Sprite();
17.         //获取图片资源，绘制到画布
18.         this.img.graphics.drawTexture(Laya.loader.getRes(this.Res),150,50);
19.         //添加到舞台
20.         Laya.stage.addChild(this.img);
21.     }
22. }
23. new MaskDemo();

运行效果如图2所示：

2.2 创建一个圆形的遮罩区域

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

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

运行效果如图3所示：

 

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

三、在LayaAirIDE中设置遮罩

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

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

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

 

（图4）

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

（图5）

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

（图6）

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

（图7）

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

 

(图8)

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

4.1 发布UI

　　在IDE界面按F12发布制作遮罩效果的UI页面，会在src/ui目录下生成UI类，如图9所示。

（图9）

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

　　编辑模式下按F9 设置引擎预览 ，启动场景为maskDemoUI

主类代码如下：

1. import GameConfig from "./GameConfig";
2. import { ui } from "./ui/maskDemoUI";
3. class Main {
4.     constructor() {
5.         //根据IDE设置初始化引擎        
6.         if (window["Laya3D"]) Laya3D.init(GameConfig.width, GameConfig.height);
7.         else Laya.init(GameConfig.width, GameConfig.height, Laya["WebGL"]);
8.         Laya["Physics"] && Laya["Physics"].enable();
9.         Laya["DebugPanel"] && Laya["Physics"].enable();
10.         Laya.stage.scaleMode = GameConfig.scaleMode;
11.         Laya.stage.screenMode = GameConfig.screenMode;
13.         //打开调试面板（通过IDE设置调试模式，或者url地址增加debug=true参数，均可打开调试面板）
14.         if (GameConfig.debug || Laya.Utils.getQueryString("debug") == "true") Laya.enableDebugPanel();
15.         if (GameConfig.stat) Laya.Stat.show();
16.         Laya.alertGlobalError = true;
18.         //激活资源版本控制，version.json由IDE发布功能自动生成，如果没有也不影响后续流程
19.         Laya.ResourceVersion.enable("version.json", Laya.Handler.create(this, this.onVersionLoaded), Laya.ResourceVersion.FILENAME_VERSION);
20.     }
22.     onVersionLoaded(): void {
23.         //激活大小图映射，加载小图的时候，如果发现小图在大图合集里面，则优先加载大图合集，而不是小图
24.         Laya.AtlasInfoManager.enable("fileconfig.json", Laya.Handler.create(this, this.onConfigLoaded));
25.     }
27.     onConfigLoaded(): void {
28.         //加载IDE指定的场景
29.         GameConfig.startScene && Laya.Scene.open(GameConfig.startScene);
30.     }
31. }
32. //激活启动类
33. new Main();

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

(图10)

设置滤镜效果

1、设置颜色滤镜

1.1 颜色滤镜 API 简述

颜色滤镜类 ColorFilter位于laya.filters包中，通过指定矩阵（排列成4 x 5 的矩阵）改变各颜色通道。

点击 laya.filters.ColorFilter 查看API说明。

1.2 设置颜色滤镜

如果要给一个位图设置颜色滤镜，需要先设置一个颜色矩阵，然后用ColorFilter方法创建一个颜色滤镜实例，如下面的代码所示：

1. //颜色滤镜矩阵，红色
2. var colorMatrix:any = 
3.   [
4.   1, 0, 0, 0, 0, //R
5.   0, 0, 0, 0, 0, //G
6.   0, 0, 0, 0, 0, //B
7.   0, 0, 0, 1, 0, //A
8. ];
10. //创建红色颜色滤镜
11. var redFilter:Laya.ColorFilter = new Laya.ColorFilter(colorMatrix);

最后通过Spriter的filters属性将颜色滤镜效果叠加到位图中。下面我们创建一个Main.ts类，编写代码如下：

1. module laya {
2.     import Sprite = Laya.Sprite;
3.     import Stage = Laya.Stage;
4.     import ColorFilter = Laya.ColorFilter;
5.     import Texture = Laya.Texture;
6.     import Browser = Laya.Browser;
7.     import Handler = Laya.Handler;
8.     import WebGL = Laya.WebGL;
10.     export class Main {
11.         private ApePath: string = "../../res/apes/monkey2.png";
13.         private apeTexture: Texture;
15.         constructor() {
16.             // 不支持WebGL时自动切换至Canvas
17.             Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
19.             Laya.stage.alignV = Stage.ALIGN_MIDDLE;
20.             Laya.stage.alignH = Stage.ALIGN_CENTER;
22.             Laya.stage.scaleMode = "showall";
23.             Laya.stage.bgColor = "#232628";
25.             Laya.loader.load(this.ApePath, Handler.create(this, this.setup));
26.         }
28.         private setup(): void {
29.             this.normalizeApe();
30.             this.makeRedApe();
31.             this.grayingApe();
32.         }
34.         private normalizeApe(): void {
35.             var originalApe: Sprite = this.createApe();
37.             this.apeTexture = Laya.loader.getRes(this.ApePath);
38.             originalApe.x = (Laya.stage.width - this.apeTexture.width * 3) / 2;
39.             originalApe.y = (Laya.stage.height - this.apeTexture.height) / 2;
40.         }
42.         private makeRedApe(): void {
43.             //由 20 个项目（排列成 4 x 5 矩阵）组成的数组，红色
44.             var redMat: Array<number> =
45.                 [
46.                     1, 0, 0, 0, 0, //R
47.                     0, 0, 0, 0, 0, //G
48.                     0, 0, 0, 0, 0, //B
49.                     0, 0, 0, 1, 0, //A
50.                 ];
52.             //创建一个颜色滤镜对象,红色
53.             var redFilter: ColorFilter = new ColorFilter(redMat);
55.             // 赤化猩猩
56.             var redApe: Sprite = this.createApe();
57.             redApe.filters = [redFilter];
59.             var firstChild: any = Laya.stage.getChildAt(0);
60.             redApe.x = firstChild.x + this.apeTexture.width;
61.             redApe.y = firstChild.y;
62.         }
64.         private grayingApe(): void {
65.             //由 20 个项目（排列成 4 x 5 矩阵）组成的数组，灰图
66.             var grayscaleMat: Array<number> = [0.3086, 0.6094, 0.0820, 0, 0, 0.3086, 0.6094, 0.0820, 0, 0, 0.3086, 0.6094, 0.0820, 0, 0, 0, 0, 0, 1, 0];
68.             //创建一个颜色滤镜对象，灰图
69.             var grayscaleFilter: ColorFilter = new ColorFilter(grayscaleMat);
71.             // 灰度猩猩
72.             var grayApe: Sprite = this.createApe();
73.             grayApe.filters = [grayscaleFilter];
75.             var secondChild: any = Laya.stage.getChildAt(1);
76.             grayApe.x = secondChild.x + this.apeTexture.width;
77.             grayApe.y = secondChild.y;
78.         }
80.         private createApe(): Sprite {
81.             var ape: Sprite = new Sprite();
82.             ape.loadImage("../../res/apes/monkey2.png");
83.             Laya.stage.addChild(ape);
85.             return ape;
86.         }
87.     }
88. }
90. new laya.Main();

在上面的代码中，我们创建了一个原始位图、一个红色滤镜效果位图、一个灰色滤镜效果位图。运行效果如图1所示：

(图1)

2、设置发光与阴影滤镜

2.1 发光滤镜 API 简述

发光滤镜类 GlowFilter位于laya.filters包中，通过调整发光的偏移角度也可以当成阴影滤使用，参数说明如图2所示。注意：该滤镜只支持WebGL模式下有效。

 

(图2)

点击 laya.filters. GlowFilter 查看API说明。

2.2 设置发光滤镜与阴影滤镜

发光与阴影滤镜的设置比较简单，我们直接通过编码查看示例效果，

先创建一个Main.ts类，编写代码如下：

1. module laya {

2.     import Sprite = Laya.Sprite;

3.     import Stage = Laya.Stage;

4.     import GlowFilter = Laya.GlowFilter;

5.     import Browser = Laya.Browser;

6.     import Handler = Laya.Handler;

7.     import WebGL = Laya.WebGL;

8. 

9.     export class Main{

10.         private apePath: string = "../../res/apes/monkey2.png";

11. 

12.         private ape: Sprite;

13.         private apeGlow:Sprite;

14.         private apeShadow:Sprite;

15. 

16.         constructor() {

17.             // 不支持WebGL时自动切换至Canvas

18.             Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);

19. 

20.             Laya.stage.alignV = Stage.ALIGN_MIDDLE;

21.             Laya.stage.alignH = Stage.ALIGN_CENTER;

22. 

23.             Laya.stage.scaleMode = "showall";

24.             Laya.stage.bgColor = "#aabbcc";

25. 

26.             Laya.loader.load(this.apePath, Handler.create(this, this.setup));

27.         }

28. 

29.         private setup(): void {

30.              this.ape=this.createApe();

31.              this.ape.pos(100,50);

32.              this.apeGlow = this.createApe();

33.              this.apeGlow.pos(250,50);

34.              this.apeShadow = this.createApe();

35.              this.apeShadow.pos(400,50);

36.              this.GlowFilter();

37.              this.ShadowFilter();

38.         }

39. 

40.         private createApe(): Sprite {

41.             var ape = new Sprite();

42.             ape.loadImage(this.apePath);

43.             Laya.stage.addChild(ape);

44.             return ape;

45.         }

46. 

47.         private GlowFilter(): void {

48.             //创建一个发光滤镜

49.             var glowFilter: GlowFilter = new GlowFilter("#ffff00", 10, 0, 0);

50.             //设置滤镜集合为发光滤镜

51.             this.apeGlow.filters = [glowFilter];

52.         }

53.         private ShadowFilter(): void {

54.             //创建一个发光滤镜

55.             var shadowFilter: GlowFilter = new GlowFilter("#000000", 8, 8, 8);

56.             //设置滤镜为阴影滤镜

57.             this.apeShadow.filters = [shadowFilter];

58.         }

59.     }

60. }

61. new laya.Main();

在上面的代码中，我们创建了一个原始位图、一个发光滤镜效果位图、一个阴影滤镜效果位图。运行效果如图3所示：

(图3)

3、设置模糊滤镜

3.1 模糊滤镜 API 简述

模糊滤镜类 BlurFilter位于laya.filters包中，通过调整strength参数设置模糊滤镜的强度，值越大，越糊滤。参数说明如图4所示。注意：该滤镜只支持WebGL模式下有效。

 

(图4)

3.2 设置模糊滤镜

模糊滤镜的设置比较简单，创建一个模糊滤镜实例，然后设置模糊强度，叠加给位图即可，我们直接通过编码查看示例效果。

先创建一个Main.ts类，编写代码如下：

1. module laya {

2.     import Sprite = Laya.Sprite;

3.     import Stage = Laya.Stage;

4.     import BlurFilter = Laya.BlurFilter;

5.     import Browser = Laya.Browser;

6.     import Handler = Laya.Handler;

7.     import WebGL = Laya.WebGL;

8. 

9.     export class Main {

10.         private apePath: string = "../../res/apes/monkey2.png";

11. 

12.         constructor() {

13.             // 不支持WebGL时自动切换至Canvas

14.             Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);

15. 

16.             Laya.stage.alignV = Stage.ALIGN_MIDDLE;

17.             Laya.stage.alignH = Stage.ALIGN_CENTER;

18. 

19.             Laya.stage.scaleMode = "showall";

20.             Laya.stage.bgColor = "#232628";

21. 

22.             Laya.loader.load(this.apePath, Handler.create(this, this.createApe));

23.         }

24. 

25.         private createApe(): void {

26.             var ape: Sprite = new Sprite();

27.             ape.loadImage(this.apePath);

28. 

29.             ape.pos(100,50);

30. 

31.             var apeBlur:Sprite = new Sprite();

32.             apeBlur.loadImage(this.apePath);

33.             apeBlur.pos(250,50);

34. 

35.             Laya.stage.addChild(ape);

36.             Laya.stage.addChild(apeBlur);

37. 

38.             this.applayFilter(apeBlur);

39.         }

40. 

41.         private applayFilter(ape: Sprite): void {

42.             var blurFilter: BlurFilter = new BlurFilter();

43.             blurFilter.strength = 5;

44.             ape.filters = [blurFilter];

45.         }

46.     }

47. }

48. new laya.Main();

在上面的代码中，我们创建了一个原始位图、一个模糊滤镜效果位图。运行效果如图5所示：

 

小结：

本篇主要介绍了几种laya Air遮罩效果以及滤镜效果的实现，每种效果都有多种实现方式，包括了其中实现的示例代码以及具体表现，接下来介绍利用laya Air进行绘制直线曲线等操作流程