module laya {
import Sprite = Laya.Sprite;
import Stage = Laya.Stage;
import HitArea = Laya.HitArea;
import WebGL = Laya.WebGL;
export class Sprite_Guide
{
private red:Sprite;
private guideContainer:Sprite;
private tipContainer:Sprite;
private guideSteps:Array<any> =
[
{ x: 151, y: 575, radius:150, tip:"../../res/guide/help6.png", tipx:200, tipy:250 },
{ x: 883, y: 620, radius:100, tip:"../../res/guide/help4.png", tipx:730, tipy:380 },
{ x: 1128, y: 583, radius:110, tip:"../../res/guide/help3.png", tipx:900, tipy:300 }
];
private guideStep:number = 0;
private hitArea:HitArea;
private interactionArea:Sprite;
constructor()
{
Laya.init(1285, 727);
Laya.stage.alignH = Stage.ALIGN_CENTER;
Laya.stage.alignV = Stage.ALIGN_MIDDLE;
//绘制一个蓝色方块，不被抠图
var gameContainer:Sprite = new Sprite();
gameContainer.loadImage("../../res/guide/crazy_snowball.png");
Laya.stage.addChild(gameContainer);
// 引导所在容器
this.guideContainer = new Sprite();
// 设置容器为画布缓存
this.guideContainer.cacheAs = "bitmap";
Laya.stage.addChild(this.guideContainer);
gameContainer.on("click", this, this.nextStep);
//绘制遮罩区，含透明度，可见游戏背景
var maskArea:Sprite = new Sprite();
maskArea.alpha = 0.5;
maskArea.graphics.drawRect(0, 0, Laya.stage.width, Laya.stage.height, "#000000");
this.guideContainer.addChild(maskArea);
//绘制一个圆形区域，利用叠加模式，从遮罩区域抠出可交互区
this.interactionArea = new Sprite();
//设置叠加模式
this.interactionArea.blendMode = "destination-out";
this.guideContainer.addChild(this.interactionArea);
this.hitArea = new HitArea();
this.hitArea.hit.drawRect(0, 0, Laya.stage.width, Laya.stage.height, "#000000");
this.guideContainer.hitArea = this.hitArea;
this.guideContainer.mouseEnabled = true;
this.tipContainer = new Sprite();
Laya.stage.addChild(this.tipContainer);
this.nextStep();
}
private nextStep():void
{
if (this.guideStep == this.guideSteps.length)
{
Laya.stage.removeChild(this.guideContainer);
Laya.stage.removeChild(this.tipContainer);
}
else
{
var step:any = this.guideSteps[this.guideStep++];
this.hitArea.unHit.clear();
this.hitArea.unHit.drawCircle(step.x, step.y, step.radius, "#000000");
this.interactionArea.graphics.clear();
this.interactionArea.graphics.drawCircle(step.x, step.y, step.radius, "#000000");
this.tipContainer.graphics.clear();
this.tipContainer.loadImage(step.tip);
this.tipContainer.pos(step.tipx, step.tipy);
}
}
}
}
new laya.Sprite_Guide();
一、叠加模式
参考 HTML5-canvas实例：刮刮乐游戏
如下图，蓝色是目标图像（就是矩形），红色就是源图像（即手指划过的圆形）
图形组合 context.globalCompositeOperation=type
source-over（默认值）:在原有图形上绘制新图形
destination-over:在原有图形下绘制新图形
source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色
destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色
source-out:只显示新图形非交集部分
destination-out:只显示原有图形非交集部分
source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色
destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色
lighter:原有图形和新图形都显示，交集部分做颜色叠加
xor:重叠飞部分不现实
copy:只显示新图形
参考开头的源码，guideContainer就是运行中看到的黑色遮罩抠出一个洞的效果，并且每一步洞的位置不同。guideContainer先添加了一个alpha=0.5的全屏黑罩maskArea，然后添加了一个interactionArea.blendMode = "destination-out";这样每一步引导中，重绘interactionArea，洞的位置就不同了。
二、hitArea,unHit
/**
* 可点击区域，可以设置绘制一系列矢量图
* 作为点击区域（目前只支持圆形，矩形，多边形）
*/
public function get hit():Graphics {
if (!_hit) _hit = new Graphics();
return _hit;
}
/**
* 不可点击区域，可以设置绘制一系列矢量图
* 作为非点击区域（目前只支持圆形，矩形，多边形）
*/
public function get unHit():Graphics {
if (!_unHit) _unHit = new Graphics();
return _unHit;
}
参考开头的源码，初始化设置了遮罩层的hit区域，也就是说遮罩guideContainer会挡住下面gameContainer的鼠标事件。然后每一步会设置unHit，也就是会把洞留出来，能点击到gameContainer指定的引导区域。
gameContainer.on("click", this, this.nextStep);
this.hitArea = new HitArea();
this.hitArea.hit.drawRect(0, 0, Laya.stage.width, Laya.stage.height, "#000000");
this.guideContainer.hitArea = this.hitArea;
this.guideContainer.mouseEnabled = true;
//每一步重新设定哪些区域不挡鼠标事件
this.hitArea.unHit.clear();
this.hitArea.unHit.drawCircle(step.x, step.y, step.radius, "#000000");
网友评论