【边玩边学】十分钟带你轻松掌握Cocos Creator 3.8.1物理画线

2023-01-16 11:34:51

物理画线：用 Cocos Creator 3.8.1 创造物理世界

引言

物理画线是一个令人兴奋且富有创意的技巧，它允许你在游戏中动态创建物理形状。想象一下，你可以用手指在屏幕上画一条线，这条线会成为一个固定的物体，与游戏中的其他物体交互。这就是物理画线的魔力！在这篇博客中，我们将深入了解如何在 Cocos Creator 3.8.1 中实现物理画线。准备好让你的游戏栩栩如生吧！

原理剖析

物理画线玩法的核心在于通过绘画组件画线，并为绘制的线添加刚体组件。这样，当游戏中的物体与这些线碰撞时，就会产生物理反应，从而实现各种有趣的效果。

创建新项目

1. 打开 Cocos Creator

首先，你需要打开 Cocos Creator 并创建一个新项目。选择“空项目”作为项目模板，并点击“创建”。

2. 添加 Graphics 组件

在场景中添加一个空节点作为画布。然后，为画布节点添加 Graphics 组件。Graphics 组件负责绘制线条。在“材质”属性中，选择一个合适的材质。

3. 添加刚体组件

为画布节点添加刚体组件。刚体组件负责处理物理碰撞。在“类型”属性中，选择“Static”。这表示画布是一个固定的物体，不会移动。

4. 添加脚本

在“脚本”文件夹中创建一个新的脚本。将脚本命名为“DrawLine”。在脚本中添加以下代码：

import { _decorator, Component, Graphics, Vec2 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('DrawLine')
export class DrawLine extends Component {

    @property({ type: Graphics })
    graphics: Graphics | null = null;

    @property({ type: [Vec2] })
    points: Vec2[] = [];

    start() {
        this.graphics.lineWidth = 5;
        this.graphics.strokeColor = new Color(0, 0, 0, 255);
    }

    update(deltaTime: number) {
        if (this.points.length > 0) {
            this.graphics.moveTo(this.points[0].x, this.points[0].y);
            for (let i = 1; i < this.points.length; i++) {
                this.graphics.lineTo(this.points[i].x, this.points[i].y);
            }
            this.graphics.stroke();
        }
    }

    onEnable() {
        this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    }

    onDisable() {
        this.node.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    }

    onTouchMove(event: EventTouch) {
        let touchLoc = event.getUILocation();
        touchLoc = this.node.convertToNodeSpaceAR(touchLoc);
        this.points.push(touchLoc);
    }
}