Cocos_随机生成方块

文章目录

前言
一、代表方块的预制体（Prefab）是什么？
二、case:随机生成方块
- 1.代码结构
- - 使用 `@ccclass` 装饰器定义一个名为 `RandomBlockSpawner` 的类
  - 什么是装饰器？
  - `@ccclass `的作用
  - 实例化方块
- 2. 讨论预制体如何才能显示
- - 预制体设置
  - 导致无法显示的原因：
总结

前言

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

一、代表方块的预制体（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; // 用于存放方块预制体的引用@propertynumberOfBlocks: number = 10; // 要生成的方块数量@propertymapWidth: number = 1280; // 地图宽度@propertymapHeight: 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); // 将方块添加到当前节点