显示与切换图片
1、用loadImage方法显示与切换图片
1.1 loadImage API概述
在API文档中搜索laya.display.Sprite,可以找到loadImage()方法,如图1所示,我们先熟悉一下该方法的参数。
(图1)
1.2 用loadImage加载显示图片的示例
创建一个Sprite_DisplayImage.ts类,编写代码如下:
- module laya {
- import Sprite = Laya.Sprite;
- import Stage = Laya.Stage;
- import Texture = Laya.Texture;
- import Browser = Laya.Browser;
- import Handler = Laya.Handler;
- import WebGL = Laya.WebGL;
- export class Sprite_DisplayImage {
- constructor() {
- // 不支持WebGL时自动切换至Canvas
- Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
- Laya.stage.alignV = Stage.ALIGN_MIDDLE;
- Laya.stage.alignH = Stage.ALIGN_CENTER;
- Laya.stage.scaleMode = "showall";
- Laya.stage.bgColor = "#ffffff";
- this.showApe();
- }
- private showApe(): void {
- // 方法1:使用loadImage
- var ape: Sprite = new Sprite();
- ape.pos(100,50);
- Laya.stage.addChild(ape);
- ape.loadImage("../../res/apes/monkey3.png");
- }
- }
- }
- new laya.Sprite_DisplayImage();
在示例代码里,“100,50”是图片的显示坐标信息。示例代码运行效果如图2-1所示:
(图2-1)
1.3 用loadImage切换图片的示例
切换图片是在显示图片的基础之上,增加了清空绘制,然后通过代码逻辑获得新的图片资源重新绘制。具体的代码说明可以参考代码注释及API,结合实例运行体验。
下面我们在Sprite_SwitchTexture.ts类中修改代码为如下所示:
- module laya {
- import Sprite = Laya.Sprite;
- import Stage = Laya.Stage;
- import Texture = Laya.Texture;
- import Handler = Laya.Handler;
- import Browser= Laya.Browser;
- import WebGL = Laya.WebGL;
- export class Sprite_SwitchTexture {
- private texture1: string = "../../res/apes/monkey2.png";
- private texture2: string = "../../res/apes/monkey3.png";
- private flag: boolean = false;
- private ape: Sprite;
- constructor() {
- // 不支持WebGL时自动切换至Canvas
- Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
- Laya.stage.alignV = Stage.ALIGN_MIDDLE;
- Laya.stage.alignH = Stage.ALIGN_CENTER;
- Laya.stage.scaleMode = "showall";
- Laya.stage.bgColor = "#ffffff";
- Laya.loader.load([this.texture1, this.texture2], Handler.create(this, this.onAssetsLoaded));
- }
- private onAssetsLoaded(): void {
- this.ape = new Sprite();
- Laya.stage.addChild(this.ape);
- this.ape.pivot(55, 72);
- this.ape.pos(100,50);
- // 显示默认纹理
- this.switchTexture();
- this.ape.on("click", this, this.switchTexture);
- }
- private switchTexture(): void {
- var textureUrl: string = (this.flag = !this.flag) ? this.texture1 : this.texture2;
- // 更换纹理
- this.ape.graphics.clear();
- var texture: Texture = Laya.loader.getRes(textureUrl);
- this.ape.loadImage(textureUrl);
- // 设置交互区域
- this.ape.size(texture.width, texture.height);
- }
- }
- }
- 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类,编写代码如下:
- module laya {
- import Sprite = Laya.Sprite;
- import Stage = Laya.Stage;
- import Texture = Laya.Texture;
- import Browser = Laya.Browser;
- import Handler = Laya.Handler;
- import WebGL = Laya.WebGL;
- export class Sprite_DisplayImage {
- constructor() {
- // 不支持WebGL时自动切换至Canvas
- Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
- Laya.stage.alignV = Stage.ALIGN_MIDDLE;
- Laya.stage.alignH = Stage.ALIGN_CENTER;
- Laya.stage.scaleMode = "showall";
- Laya.stage.bgColor = "#ffffff";
- this.showApe();
- }
- private showApe(): void {
- // 方法2:使用drawTexture
- Laya.loader.load("../../res/apes/monkey2.png", Handler.create(this, function(): void {
- var t: Texture = Laya.loader.getRes("../../res/apes/monkey2.png");
- var ape: Sprite = new Sprite();
- ape.graphics.drawTexture(t, 0, 0);
- Laya.stage.addChild(ape);
- ape.pos(100, 50);
- }));
- }
- }
- }
- new laya.Sprite_DisplayImage();
代码运行效果如图7-1所示。
(图7-1)
2.3 用drawTexture 切换图片的示例
切换图片是在显示图片的基础之上,增加了清空绘制,然后通过代码逻辑获得新的图片资源重新绘制。具体的代码说明可以参考代码注释及API,结合实例运行体验。
下面我们在Main.as入口类中修改代码为如下所示:
- module laya {
- import Sprite = Laya.Sprite;
- import Stage = Laya.Stage;
- import Texture = Laya.Texture;
- import Handler = Laya.Handler;
- import Browser= Laya.Browser;
- import WebGL = Laya.WebGL;
- export class Sprite_SwitchTexture {
- private texture1: string = "../../res/apes/monkey2.png";
- private texture2: string = "../../res/apes/monkey3.png";
- private flag: boolean = false;
- private ape: Sprite;
- constructor() {
- // 不支持WebGL时自动切换至Canvas
- Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
- Laya.stage.alignV = Stage.ALIGN_MIDDLE;
- Laya.stage.alignH = Stage.ALIGN_CENTER;
- Laya.stage.scaleMode = "showall";
- Laya.stage.bgColor = "#232628";
- Laya.loader.load([this.texture1, this.texture2], Handler.create(this, this.onAssetsLoaded));
- }
- private onAssetsLoaded(): void {
- this.ape = new Sprite();
- Laya.stage.addChild(this.ape);
- this.ape.pivot(55, 72);
- this.ape.pos(100,50);
- // 显示默认纹理
- this.switchTexture();
- this.ape.on("click", this, this.switchTexture);
- }
- private switchTexture(): void {
- var textureUrl: string = (this.flag = !this.flag) ? this.texture1 : this.texture2;
- // 更换纹理
- this.ape.graphics.clear();
- var texture: Texture = Laya.loader.getRes(textureUrl);
- this.ape.graphics.drawTexture(texture, 0, 0);
- // 设置交互区域
- this.ape.size(texture.width, texture.height);
- }
- }
- }
- new laya.Sprite_SwitchTexture();
设置遮罩
一、遮罩API介绍
遮罩属性位于laya.display.Sprite API内,该属性的说明如图1所示:
(图1)
二、简单的遮罩示例
2.1 我们先用LayaAir引擎显示一张位图
创建一个MaskDemo.ts入口类,编写代码如下:
- // 程序入口
- class MaskDemo{
- private Res:string;
- private img:Laya.Sprite;
- constructor()
- {
- Laya.init(1336,640);
- //设置舞台背景色
- Laya.stage.bgColor = "#ffffff";
- //资源路径
- this.Res = "res/img/monkey1.png";
- //先加载图片资源,在图片资源加载成功后,通过回调方法绘制图片并添加到舞台
- Laya.loader.load(this.Res,Laya.Handler.create(this,this.graphicsImg));
- }
- private graphicsImg():void{
- this.img = new Laya.Sprite();
- //获取图片资源,绘制到画布
- this.img.graphics.drawTexture(Laya.loader.getRes(this.Res),150,50);
- //添加到舞台
- Laya.stage.addChild(this.img);
- }
- }
- new MaskDemo();
运行效果如图2所示:
2.2 创建一个圆形的遮罩区域
用代码创建一个圆形的遮罩区域。通过mask属性,即可实现遮罩效果。继续看代码和注释,我们将2.1示例代码修改为如下代码:
- // 程序入口
- class MaskDemo{
- private Res:string;
- private img:Laya.Sprite;
- private cMask:Laya.Sprite;
- constructor()
- {
- Laya.init(1336,640);
- //设置舞台背景色
- Laya.stage.bgColor = "#ffffff";
- //资源路径
- this.Res = "res/img/monkey1.png";
- //先加载图片资源,在图片资源加载成功后,通过回调方法绘制图片并添加到舞台
- Laya.loader.load(this.Res,Laya.Handler.create(this,this.graphicsImg));
- }
- private graphicsImg():void{
- this.img = new Laya.Sprite();
- //获取图片资源,绘制到画布
- this.img.graphics.drawTexture(Laya.loader.getRes(this.Res),150,50);
- //添加到舞台
- Laya.stage.addChild(this.img);
- //创建遮罩对象
- this.cMask = new Laya.Sprite();
- //画一个圆形的遮罩区域
- this.cMask.graphics.drawCircle(80,80,50,"#ff0000");
- //圆形所在的位置坐标
- this.cMask.pos(120,50);
- //实现img显示对象的遮罩效果
- this.img.mask = this.cMask;
- }
- }
- 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
主类代码如下:
- import GameConfig from "./GameConfig";
- import { ui } from "./ui/maskDemoUI";
- class Main {
- constructor() {
- //根据IDE设置初始化引擎
- if (window["Laya3D"]) Laya3D.init(GameConfig.width, GameConfig.height);
- else Laya.init(GameConfig.width, GameConfig.height, Laya["WebGL"]);
- Laya["Physics"] && Laya["Physics"].enable();
- Laya["DebugPanel"] && Laya["Physics"].enable();
- Laya.stage.scaleMode = GameConfig.scaleMode;
- Laya.stage.screenMode = GameConfig.screenMode;
- //打开调试面板(通过IDE设置调试模式,或者url地址增加debug=true参数,均可打开调试面板)
- if (GameConfig.debug || Laya.Utils.getQueryString("debug") == "true") Laya.enableDebugPanel();
- if (GameConfig.stat) Laya.Stat.show();
- Laya.alertGlobalError = true;
- //激活资源版本控制,version.json由IDE发布功能自动生成,如果没有也不影响后续流程
- Laya.ResourceVersion.enable("version.json", Laya.Handler.create(this, this.onVersionLoaded), Laya.ResourceVersion.FILENAME_VERSION);
- }
- onVersionLoaded(): void {
- //激活大小图映射,加载小图的时候,如果发现小图在大图合集里面,则优先加载大图合集,而不是小图
- Laya.AtlasInfoManager.enable("fileconfig.json", Laya.Handler.create(this, this.onConfigLoaded));
- }
- onConfigLoaded(): void {
- //加载IDE指定的场景
- GameConfig.startScene && Laya.Scene.open(GameConfig.startScene);
- }
- }
- //激活启动类
- new Main();
运行效果如图10所示,我们很快捷的实现了遮罩的效果。
(图10)
设置滤镜效果
1、设置颜色滤镜
1.1 颜色滤镜 API 简述
颜色滤镜类 ColorFilter位于laya.filters包中,通过指定矩阵(排列成4 x 5 的矩阵)改变各颜色通道。
点击 laya.filters.ColorFilter 查看API说明。
1.2 设置颜色滤镜
如果要给一个位图设置颜色滤镜,需要先设置一个颜色矩阵,然后用ColorFilter方法创建一个颜色滤镜实例,如下面的代码所示:
- //颜色滤镜矩阵,红色
- var colorMatrix:any =
- [
- 1, 0, 0, 0, 0, //R
- 0, 0, 0, 0, 0, //G
- 0, 0, 0, 0, 0, //B
- 0, 0, 0, 1, 0, //A
- ];
- //创建红色颜色滤镜
- var redFilter:Laya.ColorFilter = new Laya.ColorFilter(colorMatrix);
最后通过Spriter的filters属性将颜色滤镜效果叠加到位图中。下面我们创建一个Main.ts类,编写代码如下:
- module laya {
- import Sprite = Laya.Sprite;
- import Stage = Laya.Stage;
- import ColorFilter = Laya.ColorFilter;
- import Texture = Laya.Texture;
- import Browser = Laya.Browser;
- import Handler = Laya.Handler;
- import WebGL = Laya.WebGL;
- export class Main {
- private ApePath: string = "../../res/apes/monkey2.png";
- private apeTexture: Texture;
- constructor() {
- // 不支持WebGL时自动切换至Canvas
- Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
- Laya.stage.alignV = Stage.ALIGN_MIDDLE;
- Laya.stage.alignH = Stage.ALIGN_CENTER;
- Laya.stage.scaleMode = "showall";
- Laya.stage.bgColor = "#232628";
- Laya.loader.load(this.ApePath, Handler.create(this, this.setup));
- }
- private setup(): void {
- this.normalizeApe();
- this.makeRedApe();
- this.grayingApe();
- }
- private normalizeApe(): void {
- var originalApe: Sprite = this.createApe();
- this.apeTexture = Laya.loader.getRes(this.ApePath);
- originalApe.x = (Laya.stage.width - this.apeTexture.width * 3) / 2;
- originalApe.y = (Laya.stage.height - this.apeTexture.height) / 2;
- }
- private makeRedApe(): void {
- //由 20 个项目(排列成 4 x 5 矩阵)组成的数组,红色
- var redMat: Array<number> =
- [
- 1, 0, 0, 0, 0, //R
- 0, 0, 0, 0, 0, //G
- 0, 0, 0, 0, 0, //B
- 0, 0, 0, 1, 0, //A
- ];
- //创建一个颜色滤镜对象,红色
- var redFilter: ColorFilter = new ColorFilter(redMat);
- // 赤化猩猩
- var redApe: Sprite = this.createApe();
- redApe.filters = [redFilter];
- var firstChild: any = Laya.stage.getChildAt(0);
- redApe.x = firstChild.x + this.apeTexture.width;
- redApe.y = firstChild.y;
- }
- private grayingApe(): void {
- //由 20 个项目(排列成 4 x 5 矩阵)组成的数组,灰图
- 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];
- //创建一个颜色滤镜对象,灰图
- var grayscaleFilter: ColorFilter = new ColorFilter(grayscaleMat);
- // 灰度猩猩
- var grayApe: Sprite = this.createApe();
- grayApe.filters = [grayscaleFilter];
- var secondChild: any = Laya.stage.getChildAt(1);
- grayApe.x = secondChild.x + this.apeTexture.width;
- grayApe.y = secondChild.y;
- }
- private createApe(): Sprite {
- var ape: Sprite = new Sprite();
- ape.loadImage("../../res/apes/monkey2.png");
- Laya.stage.addChild(ape);
- return ape;
- }
- }
- }
- 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进行绘制直线曲线等操作流程