【100个Cocos实例】完蛋，你看我在刮刮乐中刮到了什么？

news2024/11/22 18:51:59

在这里插入图片描述

引言

什么？还能刮出这个？

相信大家对刮刮乐都不陌生，昨天听到小伙伴说花了20买了张刮刮乐，结果刮中了20，白忙活一场。

假如我们要在Cocos游戏开发中实现刮刮乐效果，应该怎么做呢？

本文将介绍一下如何实现能刮出美女的刮刮乐效果。

本文源工程可在文末获取，小伙伴们自行前往。

1.实现原理

想要实现刮刮乐的效果，我们需要借助Mask遮罩组件和Graphics自定义图形组件。

1.遮罩组件

在这里插入图片描述

Mask组件是一个用于实现遮罩效果的关键组件。

通过使用Mask，你可以在游戏中创建各种形状的遮罩，用于显示或隐藏特定区域的内容，常用于实现圆形的头像。

2.自定义图形组件

在这里插入图片描述

Graphics组件是一个用于绘制2D图形和路径的强大工具，可通过代码动态创建形状、线条和填充，为游戏界面和特效提供灵活的绘图功能。

笔者在写文章和教程的时候就最喜欢用Graphics组件，因为它真的好用。

2.资源准备

既然想要在刮刮乐中刮出美女，那么我们就要准备一张美女图，和一张盖在美女上面的遮罩图，所以，这次就委屈Cocos您了。

在这里插入图片描述

将图片放进去Creator，然后简单编辑一下UI。层级结构如下：

在这里插入图片描述

给Mask节点添加Mask组件，并且勾选Inverted反向遮罩。添加Mask组件，系统会自动帮忙添加一个Graphics组件：

在这里插入图片描述

3.编写代码

首先创建一个ScratchTicket组件，包含对Mask组件的引用、Graphics组件的引用和isScratching变量用于判断是否正在刮刮刮乐。

import { _decorator, Component, Graphics, Mask, Node, UITransform, v3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ScratchTicket')
export class ScratchTicket extends Component {
    @property({ type: Mask })
    mask: Mask = null;

    graphics: Graphics;

    private isScratching: boolean = false;
}

在start方法中获取Graphics组件以及添加鼠标事件的监听。

start() {
    this.graphics = this.mask.getComponent(Graphics);
    this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
    this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
}

onTouchStart和onTouchEnd方法主要处理isScratching的状态。

onTouchStart(event) {
    this.isScratching = true;
}

onTouchEnd(event) {
    this.isScratching = false;
}

onTouchMove中主要实现刮刮乐的核心逻辑：

通过event.getLocation()获取鼠标位置。
通过convertToNodeSpaceAR实现坐标转换。
通过circle方法画圆。
通过fill进行填充。

onTouchMove(event) {
    if (!this.isScratching) return;
    const pos = this.node.getComponent(UITransform).convertToNodeSpaceAR(v3(event.getLocation().x, event.getLocation().y, 0));
    this.graphics.circle(pos.x, pos.y, 30);
    this.graphics.fill();
}