刮卡效果

This commit is contained in:
ifengzp 2020-04-05 21:16:36 +08:00
parent bc3370acd4
commit e7e1d86f59
13 changed files with 1548 additions and 1 deletions

View File

@ -7,7 +7,8 @@ enum sceneList {
'Coin_fly_to_wallet' = '金币落袋效果', 'Coin_fly_to_wallet' = '金币落袋效果',
'Magnifying_mirror' = '局部缩放效果', 'Magnifying_mirror' = '局部缩放效果',
'Change_clothes' = '换装', 'Change_clothes' = '换装',
'Typer' = '打字机效果' 'Typer' = '打字机效果',
'Scratch_ticket' = '刮刮卡实现'
} }
@ccclass @ccclass

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "92256264-46a3-4594-8512-abd2123e644b",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,7 @@
{
"ver": "1.2.6",
"uuid": "e613032d-7fc6-420f-bc64-a57e756187c0",
"asyncLoadAssets": false,
"autoReleaseAssets": false,
"subMetas": {}
}

View File

@ -0,0 +1,120 @@
const { ccclass, property } = cc._decorator;
const CALC_RECT_WIDTH = 40;
const CLEAR_LINE_WIDTH = 40;
@ccclass
export default class Scratch_ticket extends cc.Component {
@property(cc.Node)
maskNode: cc.Node = null;
@property(cc.Node)
ticketNode: cc.Node = null;
@property(cc.Label)
progerss: cc.Label = null;
onLoad() {
this.reset();
this.ticketNode.on(cc.Node.EventType.TOUCH_START, this.touchStartEvent, this);
this.ticketNode.on(cc.Node.EventType.TOUCH_MOVE, this.touchMoveEvent, this);
this.ticketNode.on(cc.Node.EventType.TOUCH_END, this.touchEndEvent, this);
this.ticketNode.on(cc.Node.EventType.TOUCH_CANCEL, this.touchEndEvent, this);
}
beforeDestroy() {
this.ticketNode.off(cc.Node.EventType.TOUCH_START, this.touchStartEvent, this);
this.ticketNode.off(cc.Node.EventType.TOUCH_MOVE, this.touchMoveEvent, this);
this.ticketNode.on(cc.Node.EventType.TOUCH_END, this.touchEndEvent, this);
this.ticketNode.on(cc.Node.EventType.TOUCH_CANCEL, this.touchEndEvent, this);
}
touchStartEvent(event) {
let point = this.ticketNode.convertToNodeSpaceAR(event.getLocation());
this.clearMask(point);
}
touchMoveEvent(event) {
let point = this.ticketNode.convertToNodeSpaceAR(event.getLocation());
this.clearMask(point);
}
touchEndEvent() {
this.tempDrawPoints = [];
this.calcProgress();
}
calcDebugger: boolean = false; // 辅助开关,开启则会绘制划开涂层所属的小格子
calcProgress() {
let hitItemCount = 0;
let ctx = this.ticketNode.getComponent(cc.Graphics);
this.polygonPointsList.forEach((item) => {
if (!item.isHit) return;
hitItemCount += 1;
if (!this.calcDebugger) return;
ctx.rect(item.rect.x, item.rect.y, item.rect.width, item.rect.height);
ctx.fillColor = cc.color(216, 18, 18, 255);
ctx.fill();
});
this.progerss.string = `已经刮开了 ${Math.ceil((hitItemCount / this.polygonPointsList.length) * 100)}%`;
}
tempDrawPoints: cc.Vec2[] = [];
clearMask(pos) {
let mask: any = this.maskNode.getComponent(cc.Mask);
let stencil = mask._graphics;
const len = this.tempDrawPoints.length;
this.tempDrawPoints.push(pos);
if (len <= 1) {
// 只有一个点,用圆来清除涂层
stencil.circle(pos.x, pos.y, CLEAR_LINE_WIDTH / 2);
stencil.fill();
// 记录点所在的格子
this.polygonPointsList.forEach((item) => {
if (item.isHit) return;
const xFlag = pos.x > item.rect.x && pos.x < item.rect.x + item.rect.width;
const yFlag = pos.y > item.rect.y && pos.y < item.rect.y + item.rect.height;
if (xFlag && yFlag) item.isHit = true;
});
} else {
// 存在多个点,用线段来清除涂层
let prevPos = this.tempDrawPoints[len - 2];
let curPos = this.tempDrawPoints[len - 1];
stencil.moveTo(prevPos.x, prevPos.y);
stencil.lineTo(curPos.x, curPos.y);
stencil.lineWidth = CLEAR_LINE_WIDTH;
stencil.lineCap = cc.Graphics.LineCap.ROUND;
stencil.lineJoin = cc.Graphics.LineJoin.ROUND;
stencil.strokeColor = cc.color(255, 255, 255, 255);
stencil.stroke();
// 记录线段经过的格子
this.polygonPointsList.forEach((item) => {
item.isHit = item.isHit || cc.Intersection.lineRect(prevPos, curPos, item.rect);
});
}
}
polygonPointsList: { rect: cc.Rect; isHit: boolean }[] = [];
reset() {
let mask: any = this.maskNode.getComponent(cc.Mask);
mask._graphics.clear();
this.tempDrawPoints = [];
this.polygonPointsList = [];
this.progerss.string = '已经刮开了 0%';
this.ticketNode.getComponent(cc.Graphics).clear();
// 生成小格子,用来辅助统计涂层的刮开比例
for (let x = 0; x < this.ticketNode.width; x += CALC_RECT_WIDTH) {
for (let y = 0; y < this.ticketNode.height; y += CALC_RECT_WIDTH) {
this.polygonPointsList.push({
rect: cc.rect(x - this.ticketNode.width / 2, y - this.ticketNode.height / 2, CALC_RECT_WIDTH, CALC_RECT_WIDTH),
isHit: false
});
}
}
}
}

View File

@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "d30e17f4-f036-4e30-8e70-b9f4cc969379",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "19698126-b55a-4d28-97a7-1d2bd93feee6",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "9db9d60f-857e-4c9b-89ea-45725dfc3dc8",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 676,
"height": 478,
"platformSettings": {},
"subMetas": {
"scratch_ticket": {
"ver": "1.0.4",
"uuid": "007d56b3-d617-41fa-aec8-020894559897",
"rawTextureUuid": "9db9d60f-857e-4c9b-89ea-45725dfc3dc8",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": -0.5,
"offsetY": -0.5,
"trimX": 0,
"trimY": 1,
"width": 675,
"height": 477,
"rawWidth": 676,
"rawHeight": 478,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 B

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "6e930562-0cce-4912-afa6-6e711eaed38c",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 2,
"height": 2,
"platformSettings": {},
"subMetas": {
"single_color": {
"ver": "1.0.4",
"uuid": "6f431892-2e43-49d9-a9c9-3d7cf91ae2e9",
"rawTextureUuid": "6e930562-0cce-4912-afa6-6e711eaed38c",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 2,
"height": 2,
"rawWidth": 2,
"rawHeight": 2,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "9a8148c8-a077-4c5d-9bd6-0b3d14e9a339",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 486,
"height": 234,
"platformSettings": {},
"subMetas": {
"ticket_mask": {
"ver": "1.0.4",
"uuid": "3947437a-6f46-41e0-926c-270f7cd145c8",
"rawTextureUuid": "9a8148c8-a077-4c5d-9bd6-0b3d14e9a339",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 486,
"height": 234,
"rawWidth": 486,
"rawHeight": 234,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}