某些游戏里新手指引需要一个半透明遮罩,强制用户按照指引操作。
当然,有些游戏只是提示,用户依然可以点击其他的按钮,进行其他操作。
无遮罩的新手指引
有遮罩的指引
在主页场景里创建指引遮罩GuideMask
HomeScene.ts:
/** * 主页场景 * @author chenkai * @since 2017/7/4 */ class HomeScene extends eui.Component{ public constructor() { super(); this.skinName = "HomeSceneSkin"; } public childrenCreated(){ GuideMask.getInstance().show(560, 900, 80, 100, this); } }
指引遮罩,是在需要透明的区域四周,创建4个黑色半透明的Rect,来屏蔽其他按钮,用户只能点击指引要求点击的按钮。
GuideMask.ts:
/** * 新手指引的遮罩 * @author chenkai * @since 2017/7/4 * * 在不需遮罩的矩形区域四周,创建4个半透明rect。 * * example: * 在(100,100)位置,显示200x50的可点击区域 * GuideMask.getInstance().show(100,100,200, 50, this); * GuideMask.getInstance().hide(); */ class GuideMask extends eui.Group{ /**颜色 */ public color:number = 0x000000; /**透明度 */ public alpha:number = 0.5; public constructor() { super(); } public childrenCreated(){ this.touchEnabled = true; this.touchChildren = true; } //单例 private static instance:GuideMask; public static getInstance():GuideMask{ if(this.instance == null){ this.instance = new GuideMask(); } return this.instance; } /** * 显示指引半透明遮罩 * @x 不需遮罩的矩形区域x * @y 不需遮罩的矩形区域y * @w 不需遮罩的矩形区域宽度 * @h 不需遮罩的矩形区域高度 * @doc GuildMask显示的容器 */ public show(x:number, y:number, w:number, h:number, doc:egret.DisplayObjectContainer){ var stage:egret.Stage = egret.lifecycle.stage; //上部遮罩 var rectTop:eui.Rect = new eui.Rect(stage.stageWidth, y, this.color); rectTop.x = 0; rectTop.y = 0; this.addChild(rectTop); //下部遮罩 var rectFoot:eui.Rect = new eui.Rect(stage.stageWidth, stage.stageHeight - y - h, this.color); rectFoot.x = 0; rectFoot.y = h+y; this.addChild(rectFoot); //左边遮罩 var rectLeft:eui.Rect = new eui.Rect(x, h, this.color); rectLeft.x = 0; rectLeft.y = y; this.addChild(rectLeft); //右边遮罩 var rectRight:eui.Rect = new eui.Rect(stage.stageWidth - x - w, h, this.color); rectRight.x = x + w; rectRight.y = y; this.addChild(rectRight); doc.addChild(this); } /** * 隐藏 */ public hide(){ this.removeChildren(); this.parent && this.parent.removeChild(this); } }