Cocos学习之基础概念（三）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

本文主要是知识点cocos学习之基础概念（一）实践的第二部分，
实践的第一部分参考cocos学习之基础概念（二）

---

案例6：动态加载远程图片

目标：通过 URL 加载网络图片并显示。

代码：

import { _decorator, Component, Sprite, SpriteFrame, Asset, assetManager } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('LoadRemoteImage')
export class LoadRemoteImage extends Component {
 start() {
     // 远程图片URL
     const url = 'https://example.com/image.png';
     assetManager.loadRemote<ImageAsset>(url, (err, imageAsset) => {
         if (err) {
             console.error(err);
             return;
         }
         // 创建SpriteFrame
         const spriteFrame = new SpriteFrame(imageAsset);
         // 获取Sprite组件并设置图片
         const sprite = this.node.getComponent(Sprite);
         if (sprite) {
             sprite.spriteFrame = spriteFrame;
         }
     });
 }
}

⚠️ 注意：需配置跨域权限（如部署到服务器或使用CORS代理）。

案例7：音效管理

目标：播放背景音乐和点击音效。

步骤：

  1. **导入音效文件**
     - 将 `.mp3` 文件拖入资源管理器。
  2. **脚本控制音效**

import { _decorator, Component, AudioSource, AudioClip } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('AudioManager')
export class AudioManager extends Component {
 @property({ type: AudioClip })
 bgm: AudioClip | null = null;

 @property({ type: AudioClip })
 clickSound: AudioClip | null = null;

 start() {
     // 播放背景音乐（循环）
     if (this.bgm) {
         const audioSource = this.node.getComponent(AudioSource) || this.node.addComponent(AudioSource);
         audioSource.clip = this.bgm;
         audioSource.loop = true;
         audioSource.play();
     }
 }

 playClickSound() {
     if (this.clickSound) {
         const audioSource = this.node.getComponent(AudioSource) || this.node.addComponent(AudioSource);
         audioSource.playOneShot(this.clickSound);
     }
 }
}

案例8：计时器与自动旋转

目标：创建一个每2秒自动旋转45度的方块，并显示计时。

步骤：

1. 创建节点

   • 新建一个 Sprite 节点，命名为 RotatingCube。

2. 编写脚本 RotateTimer.ts

   import { _decorator, Component, Label, Node } from 'cc';
   const { ccclass, property } = _decorator;
   
   @ccclass('RotateTimer')
   export class RotateTimer extends Component {
       @property({ type: Label })  // 暴露Label组件到编辑器
       timerLabel: Label | null = null;
   
       private timer: number = 0;
       private rotateInterval: number = 2; // 间隔2秒
   
       onLoad() {
           this.timer = 0;
       }
   
       update(dt: number) {
           this.timer += dt;
           // 更新计时器显示
           if (this.timerLabel) {
               this.timerLabel.string = `Time: ${this.timer.toFixed(2)}s`;
           }
           // 每2秒旋转45度
           if (this.timer >= this.rotateInterval) {
               this.node.angle += 45;
               this.timer = 0; // 重置计时器
           }
       }
   }
   

3. 关联UI组件

   • 在场景中添加一个 Label 节点显示计时。
   • 将 Label 节点拖拽到脚本的 timerLabel 属性。

4. 运行观察

   • 方块每2秒旋转一次，Label 持续更新计时。

案例9：生命周期验证

目标：通过日志输出观察生命周期执行顺序。

代码：

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

@ccclass('LifecycleDemo')
export class LifecycleDemo extends Component {
 onLoad() {
     console.log('onLoad - 组件加载完成');
 }

 start() {
     console.log('start - 首次更新前调用');
 }

 update(dt: number) {
     console.log(`update - 帧间隔: ${dt.toFixed(3)}秒`);
 }

 onDestroy() {
     console.log('onDestroy - 组件被销毁');
 }
}

操作验证：

  1. 运行时查看控制台输出顺序
  2. 在编辑器中删除节点，触发 `onDestroy`

---

案例10：属性暴露与编辑器交互

技巧：使用 @property 将变量暴露到编辑器，方便非程序员调整参数。

代码片段：

@ccclass('Enemy')
export class Enemy extends Component {
 @property({ type: Node })  // 暴露节点引用
 target: Node | null = null;

 @property({ tooltip: "移动速度" })  // 添加属性提示
 speed: number = 100;

 @property({ type: [SpriteFrame] }) // 暴露数组资源
 idleFrames: SpriteFrame[] = [];
}

在编辑器中会显示可配置字段

---

总结

主要分享cocos creator基础概念的5个例子