Cocos_随机生成方块

唐小旭

已于 2024-09-29 13:35:11 修改

阅读量781

点赞数 20

文章标签： typescript

于 2024-09-29 12:58:14 首次发布

本文链接：https://blog.csdn.net/weixin_44253237/article/details/142612421

版权

文章目录

前言
一、代表方块的预制体（Prefab）是什么？
二、case:随机生成方块
总结

前言

非盈利博客，只是学习笔记，如有雷同，十分抱歉。

一、代表方块的预制体（Prefab）是什么？

在 Cocos Creator 和其他游戏开发引擎中，预制体（Prefab）是一种用于重用对象的模板。它允许开发者创建一个场景中的对象，然后将其保存为可重复使用的设计模板。你可以把它看作是一个==“蓝图”==，可以根据需要多次实例化（生成）该对象。

二、case:随机生成方块

import { _decorator, Component, Prefab, instantiate, Node, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('RandomBlockSpawner')
export class RandomBlockSpawner extends Component {
    @property(Prefab)
    blockPrefab: Prefab = null; // 用于存放方块预制体的引用

    @property
    numberOfBlocks: number = 10; // 要生成的方块数量

    @property
    mapWidth: number = 1280; // 地图宽度

    @property
    mapHeight: number = 720; // 地图高度

    start() {
        this.spawnBlocks();
    }
    spawnBlocks() {
        const positions = new Set();
    
        for (let i = 0; i < this.numberOfBlocks; i++) {
            let randomX, randomY, positionKey;
    
            do {
                randomX = Math.random() * this.mapWidth - this.mapWidth / 2;
                randomY = Math.random() * this.mapHeight - this.mapHeight / 2;
                positionKey = `${randomX},${randomY}`;
            } while (positions.has(positionKey));
    
            positions.add(positionKey);
    
            const block = instantiate(this.blockPrefab);
            block.setPosition(new Vec3(randomX, randomY, 0));
            
            // 打印调试信息
            console.log(`Block ${i} position: (${randomX}, ${randomY})`);
    
            this.node.addChild(block);
        }
    }
    
}

1.代码结构

import { _decorator, Component, Prefab, instantiate, Node, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

导入模块：导入 Cocos Creator 中所需的模块和类，包括装饰器（_decorator）、组件（Component）、预制体（Prefab）、实例化（instantiate）、节点（Node）和向量（三维坐标）（Vec3）。

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

定义类：使用 @ccclass 装饰器定义一个名为 RandomBlockSpawner 的类，该类继承自 Component，这意味着它可以被附加到场景中的任何节点上。

使用 `@ccclass` 装饰器定义一个名为 `RandomBlockSpawner` 的类

在 Cocos Creator 中，使用 @ccclass 装饰器定义一个类的目的是为了将该类标记为一个 Cocos Creator 组件。具体来说，@ccclass 是一个特殊的装饰器，它让 Cocos Creator 能够识别并处理这个类，使其能够被附加到场景中的节点上。

什么是装饰器？

装饰器是一种特殊的语法，用于修改或增强类、方法、属性等的行为。在 TypeScript 和 JavaScript 中，装饰器可以用来提供额外的信息或功能。这种机制在 Cocos Creator 中被广泛使用，以允许开发者创建自定义组件和脚本。

`@ccclass` 的作用

标识组件：当你使用 @ccclass('RandomBlockSpawner') 时，你实际上是在告诉 Cocos Creator，这个类是一个可以作为组件使用的类，并且它的名称为 RandomBlockSpawner。这个名字将用于在编辑器中的界面显示。
编辑器友好：通过使用 @ccclass，Cocos Creator 可以在编辑器中显示这个类的公共属性（例如 @property 注解标记的属性），允许用户在编辑器中设置这些属性的值。这样，您就可以方便地调整游戏对象的行为，而无需直接修改代码。
生命周期管理：Cocos Creator 会自动管理包含 @ccclass 的组件的生命周期，例如调用 start(), update() 等生命周期方法。
属性定义

@property(Prefab)
blockPrefab: Prefab = null; // 用于存放方块预制体的引用

@property
numberOfBlocks: number = 10; // 要生成的方块数量

@property
mapWidth: number = 1280; // 地图宽度

@property
mapHeight: number = 720; // 地图高度

blockPrefab：这是一个预制体属性，用于存放要实例化的方块预制体。用户可以在 Cocos Creator 编辑器中将预制体拖到此字段中。
numberOfBlocks：设置要生成的方块数量，默认为 10。
mapWidth 和 mapHeight：定义生成方块的区域大小，这些值会影响方块的随机生成位置。

生命周期方法

start() {
    this.spawnBlocks();
}

start()：这是 Cocos Creator 的生命周期方法之一，它在组件启用后调用。这里我们调用 spawnBlocks() 方法来开始生成方块。
方块生成逻辑

spawnBlocks() {
    const positions = new Set();

spawnBlocks()：定义一个生成方块的方法。首先创建一个 Set 集合，用于存储已生成方块的位置，防止重复。

循环生成方块

for (let i = 0; i < this.numberOfBlocks; i++) {
    let randomX, randomY, positionKey;

    do {
        randomX = Math.random() * this.mapWidth - this.mapWidth / 2; // 随机生成 X 坐标
        randomY = Math.random() * this.mapHeight - this.mapHeight / 2; // 随机生成 Y 坐标
        positionKey = `${randomX},${randomY}`; // 创建唯一的位置键
    } while (positions.has(positionKey)); // 检查位置是否已存在

循环：循环 this.numberOfBlocks 次以生成指定数量的方块。
随机坐标生成：Math.random() 生成 0 到 1 之间的随机数，然后乘以 mapWidth 或 mapHeight 并减去一半，以确保坐标在可视区域内。
位置键：positionKey 用于存储当前随机位置的字符串表示形式，从而便于检查其是否已经生成过。
重复检查：通过 do…while 循环确保生成的位置是唯一的。

实例化方块

positions.add(positionKey); // 将位置添加到集合中

const block = instantiate(this.blockPrefab); // 实例化预制体
block.setPosition(new Vec3(randomX, randomY, 0)); // 设置位置

// 打印调试信息
console.log(`Block ${i} position: (${randomX}, ${randomY})`);

this.node.addChild(block); // 将方块添加到当前节点