刮卡效果

assets/Scene/Home/Home.ts

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

assets/Scene/Scratch_ticket.meta

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

assets/Scene/Scratch_ticket/Scratch_ticket.fire.meta

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

assets/Scene/Scratch_ticket/Scratch_ticket.ts

@@ -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
+        });
+      }
+    }
+  }
+}

assets/Scene/Scratch_ticket/Scratch_ticket.ts.meta

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

assets/Scene/Scratch_ticket/Texture.meta

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

assets/Scene/Scratch_ticket/Texture/scratch_ticket.png.meta

@@ -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": {}
+    }
+  }
+}

assets/Scene/Scratch_ticket/Texture/single_color.png.meta

@@ -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": {}
+    }
+  }
+}

assets/Scene/Scratch_ticket/Texture/ticket_mask.png.meta

@@ -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": {}
+    }
+  }
+}