egret 白鹭h5新手引导页面开发原理简介

每个玩法新奇的游戏基本要做一个新手引导。对于egret而言没有提供现成的方法。本文做简介。
本质上新手引导利用的是一张图片透明区域可以穿透点击至下层的子元素。
比如下面是一张中间是多边形透明区域的图片。

中间为透明区域的图片.png

然后对这张图片设置如下属性。

this.p_hole.pixelHitTest = true;

将这张图片覆盖在主场景上，对主场景添加点击事件。

图片.png

点击图片透明区域，会触发主场景的点击事件。
点击图片其他不透明区域区域，不会出发主场景的点击事件。

如果设置this.p_hole.pixelHitTest = false;（默认为false），那么不管点击该图片哪个区域，都不会触发主场景的点击事件。
利用这个原理，就可以做出简易的新手指引。

在egret的api中解释pixelHitText如下。

    /**
         * 是否开启精确像素碰撞。设置为true显示对象本身的透明区域将能够被穿透。<br/>
         * 注意：若图片资源是以跨域方式从外部服务器加载的，将无法访问图片的像素数据，而导致此属性失效。
         * @default false
         * @version Egret 2.4
         * @platform Web,Native
         * @language zh_CN
         */

希望对大家有帮助。
后面会出更为详细的新手指引教程。