当前位置： 首页 > article >正文

Cocos Creator 3.8 版本开发 2D 游戏常用组件和方法

article 2025/2/19 14:12:29

Cocos Creator 3.8 版本开发 2D 游戏常用组件和方法

一、常用组件

1. Node（节点）

  • 功能：Cocos Creator 中的所有元素都基于 Node（节点）对象，包括精灵、标签、按钮等。每个节点可以包含多个子节点。
  • 常用方法：
    • node.active = true/false：控制节点的显示与隐藏。
    • node.setPosition(x, y)：设置节点位置。
    • node.setRotation(rotation)：设置节点的旋转角度。
    • node.setScale(scale)：设置节点的缩放比例。
    • node.setParent(parentNode)：将节点设置为另一个节点的子节点。
    • node.getChildByName(name)：通过节点名称获取子节点。

2. Sprite（精灵）

  • 功能：用于显示图像或动画。
  • 常用方法：
    • sprite.spriteFrame = new cc.SpriteFrame(texture)：设置精灵的图片。
    • sprite.node.setScale(x, y)：缩放精灵节点。
    • sprite.node.setRotation(angle)：旋转精灵。
    • sprite.node.opacity = 255：设置精灵的透明度。
    • sprite.node.runAction(cc.sequence(action1, action2))：对精灵进行多种动作的组合。

3. Label（标签）

  • 功能：用于显示文本。
  • 常用方法：
    • label.string = "文本内容"：设置标签的文本内容。
    • label.fontSize = 30：设置字体大小。
    • label.node.setPosition(x, y)：设置标签位置。
    • label.node.color = new cc.Color(255, 0, 0)：设置标签颜色。
    • label.lineHeight = 50：设置标签行高。

4. Button（按钮）

  • 功能：用于交互，点击时触发事件。
  • 常用方法：
    • button.node.on('click', this.onClick, this)：为按钮添加点击事件。
    • button.interactable = false/true：控制按钮是否可点击。
    • button.node.setScale(0.8)：为按钮添加缩放动画效果。

5. TileMap（地图）

  • 功能：用于实现 2D 网格地图，通常用于地图场景的创建。
  • 常用方法：
    • tilemap.getTileGIDAt(x, y)：获取指定位置的 tile ID。
    • tilemap.setTileGIDAt(gid, x, y)：设置指定位置的 tile ID。
    • tilemap.getTileSize()：获取 tile 的尺寸。
    • tilemap.getLayer('layerName')：获取指定名称的地图层。

6. ParticleSystem（粒子系统）

  • 功能：实现粒子效果，如火焰、烟雾等。
  • 常用方法：
    • particleSystem.resetSystem()：重新开始粒子系统。
    • particleSystem.stopSystem()：停止粒子系统。
    • particleSystem.startColor = cc.Color(255, 255, 0)：设置粒子系统的起始颜色。
    • particleSystem.endColor = cc.Color(255, 255, 255)：设置粒子系统的结束颜色。

7. AudioSource（音频源）

  • 功能：播放音效和背景音乐。
  • 常用方法：
    • audioSource.play()：播放音频。
    • audioSource.stop()：停止播放音频。
    • audioSource.volume = 0.5：设置音量。
    • audioSource.loop = true：设置音频循环播放。

8. Collider（碰撞体）

  • 功能：用于处理物体之间的碰撞。
  • 常用方法：
    • collider.enabled = true/false：开启或关闭碰撞体。
    • collider.node.on('collision', callback)：碰撞事件。
    • collider.node.on('triggers', callback)：触发器事件。

9. Rigidbody2D（刚体）

  • 功能：用于物理模拟，如重力、速度等。
  • 常用方法：
    • rigidbody2D.applyForce(new cc.Vec2(0, -9.8))：施加力。
    • rigidbody2D.gravityScale = 1：设置重力缩放。
    • rigidbody2D.linearVelocity = new cc.Vec2(x, y)：设置刚体的线性速度。

10. Animation（动画）

  • 功能：用于创建和播放动画。
  • 常用方法：
    • animation.play('animationName')：播放指定名称的动画。
    • animation.stop('animationName')：停止指定的动画。
    • animation.getAnimationState('animationName')：获取动画状态。
    • animation.setCurrentTime(time)：设置动画的当前播放时间。

二、常用方法

1. 定时器与延时操作

  • 功能：用于执行延迟或者周期性任务。
  • 常用方法：
    • this.scheduleOnce(callback, delay)：延时执行某个方法。
    • this.schedule(callback, interval)：定时执行某个方法。
    • this.unschedule(callback)：停止定时器。
    • this.scheduleUpdate()：每帧调用，适用于帧数依赖的逻辑。

2. 事件系统

  • 功能：用于触发和监听自定义事件。
  • 常用方法：
    • this.node.on('eventName', callback)：监听事件。
    • this.node.emit('eventName', data)：触发事件。
    • cc.systemEvent.on('touchstart', callback)：监听触摸事件。
    • cc.systemEvent.off('touchstart', callback)：取消触摸事件监听。

3. 动画

  • 功能：实现节点或精灵的动画效果。
  • 常用方法：
    • cc.tween(node).to(duration, { position: cc.v2(x, y) }).start()：节点的平移动画。
    • cc.tween(node).by(duration, { scale: 1.5 }).start()：节点的缩放动画。
    • cc.tween(node).call(callback).start()：执行完动画后调用回调。

4. 序列化与数据存储

  • 功能：存储和加载游戏数据。
  • 常用方法：
    • cc.sys.localStorage.getItem('key')：获取存储的数据。
    • cc.sys.localStorage.setItem('key', value)：设置数据。
    • cc.sys.localStorage.removeItem('key')：移除数据。
    • cc.sys.localStorage.clear()：清空所有存储的数据。

5. 界面控制

  • 功能：处理界面的切换和显示。
  • 常用方法：
    • cc.director.loadScene('SceneName')：加载场景。
    • cc.director.getScene()：获取当前场景。
    • cc.director.pushScene(newScene)：将新场景压入场景栈。

6. WebSocket（网络通信）

  • 功能：用于实时通信，如多人游戏。
  • 常用方法：
    • ws.send(data)：发送数据。
    • ws.onmessage = function (event) {}：监听消息。
    • ws.onopen = function (event) {}：连接成功后的回调。
    • ws.close()：关闭连接。

7. 资源加载与管理

  • 功能：加载并管理资源，如图片、音效、场景等。
  • 常用方法：
    • cc.loader.loadRes('path/to/resource', callback)：加载资源。
    • cc.assetManager.loadBundle('bundleName', callback)：加载资源包。
    • cc.assetManager.loadRemote('url', callback)：从远程加载资源。

8. 性能优化

  • 功能：优化游戏性能，提高帧率。
  • 常用方法：
    • cc.view.setDesignResolutionSize(width, height, policy)：设置分辨率适配模式。
    • cc.game.setFrameRate(fps)：设置帧率。
    • cc.director.getScheduler().setTimeScale(scale)：调整游戏时间比例（用于加速/减速）。

9. 高级物理系统

  • 功能：用于处理复杂的物理模拟，例如重力、碰撞、反弹等。
  • 常用方法：

    • Rigidbody2D：

      • rigidbody2D.applyForce(new cc.Vec2(x, y), true)：施加一个力，并且可以选择是否相对于刚体的位置应用。
      • rigidbody2D.applyLinearImpulse(new cc.Vec2(x, y), point, true)：施加一个线性冲击力。
      • rigidbody2D.isAwake()：判断刚体是否处于激活状态（即是否参与物理模拟）。
      • rigidbody2D.setGravityScale(0)：关闭刚体的重力影响。

    • Collider：

      • collider.enabled = false：禁用碰撞体。
      • collider.node.on('collision-enter', callback)：触发碰撞进入事件。
      • collider.node.on('collision-exit', callback)：触发碰撞退出事件。

    • ContactListener（碰撞监听）：

      • contactListener.onContactBegin(callback)：当物体碰撞开始时调用。
      • contactListener.onContactEnd(callback)：当物体碰撞结束时调用。

    • World Gravity（全局重力）：

      • cc.director.getPhysicsManager().gravity = new cc.Vec2(0, -9.8)：设置全局重力，影响所有物理物体。

10. Shader（着色器）

  • 功能：用于渲染效果的定制，例如自定义的动画、粒子效果等。
  • 常用方法：

    • 创建一个自定义 Shader：

      let effect = cc.shaderManager.createProgram(cc.Vec2(1.0, 1.0), cc.Color(255, 255, 255, 255));
effect.setShader(cc.shader3d);

    • 使用自定义 Shader：

      let customShader = cc.shader.getBuiltinProgram('2d-gray-sprite');
sprite.setMaterial(0, customShader);

    • Material 和 Shader：

      • sprite.setMaterial(0, customMaterial)：为精灵设置自定义材质。
      • material.setProperty('color', new cc.Color(255, 0, 0))：修改材质的颜色属性。

11. Tween（缓动动画）

  • 功能：实现复杂的缓动动画，例如平移、缩放、旋转等效果。
  • 常用方法：

    • 基本的平移动画：

      cc.tween(node)
  .to(1, { position: cc.v2(300, 300) }, { easing: 'sineInOut' })
  .start();

    • 缩放动画：

      cc.tween(node)
  .to(0.5, { scale: 1.5 })
  .to(0.5, { scale: 1 })
  .start();

    • 颜色变化动画：

      cc.tween(node)
  .to(1, { color: cc.Color(255, 0, 0) })
  .to(1, { color: cc.Color(0, 255, 0) })
  .start();

    • 旋转动画：

      cc.tween(node)
  .to(1, { rotation: 360 })
  .start();

12. 多语言支持

  • 功能：为游戏实现多语言支持，方便国际化。
  • 常用方法：

    • 加载多语言资源：

      cc.loader.loadRes("lang/en", cc.JsonAsset, function (err, res) {
  if (err) return console.error(err);
  cc.sys.localStorage.setItem("languageData", res.json);
});

    • 获取翻译文本：

      let langData = JSON.parse(cc.sys.localStorage.getItem("languageData"));
let translatedText = langData["welcome"];
label.string = translatedText;

    • 动态切换语言：

      function switchLanguage(lang) {
  cc.loader.loadRes("lang/" + lang, cc.JsonAsset, function (err, res) {
    if (err) return console.error(err);
    cc.sys.localStorage.setItem("languageData", res.json);
  });
}

13. 资源管理与优化

  • 功能：管理和优化游戏中的资源加载，避免内存泄漏和性能问题。
  • 常用方法：

    • 资源加载：

      • cc.assetManager.loadBundle('myBundle', function (err, bundle) {}：加载资源包。
      • cc.assetManager.loadRemote('url', callback)：从远程加载资源。

    • 资源卸载：

      cc.assetManager.releaseAsset(asset);
cc.assetManager.releaseBundle('myBundle');

    • 内存池（Object Pool）：

      • 实现对象复用，避免频繁的实例化和销毁，减少内存分配压力。
      • 示例：
      let bulletPool = new cc.NodePool();
let bullet = bulletPool.get();
if (!bullet) {
  bullet = cc.instantiate(this.bulletPrefab);
}
bulletPool.put(bullet);

    • 批量资源加载：

      cc.assetManager.loadBundle('myBundle', (err, bundle) => {
  if (err) {
    console.error(err);
  } else {
    bundle.load('sprites/mySprite', cc.SpriteFrame, (err, spriteFrame) => {
      sprite.spriteFrame = spriteFrame;
    });
  }
});

14. UI 适配与屏幕分辨率

  • 功能：确保游戏在不同设备上的显示效果一致。
  • 常用方法：

    • 设置设计分辨率：

      cc.view.setDesignResolutionSize(1920, 1080, cc.ResolutionPolicy.FIXED_WIDTH);

    • 自适应屏幕适配：

      cc.view.setResizeCallback(() => {
  let designResolution = cc.view.getDesignResolutionSize();
  let frameSize = cc.view.getFrameSize();
  let scaleFactor = frameSize.width / designResolution.width;
  cc.view.setScaleFactor(scaleFactor);
});

15. 调试与性能监控

  • 功能：调试游戏性能，找出性能瓶颈。
  • 常用方法：

    • 开启 FPS 显示：

      cc.debug.setDisplayStats(true);

    • 性能监控：

      cc.debug.setTimeOfDay(false);
cc.debug.setClearColor(cc.Color.WHITE);

    • Profiler（性能分析）：

      • 使用浏览器的开发者工具中的 Profiler 来分析 JavaScript 代码执行的时间和内存占用。

16. 多平台发布与适配

  • 功能：支持将游戏发布到不同的平台（例如：Web、iOS、Android、PC等），并根据不同平台做适配。

  • 常用方法：

    • 检查平台：

      if (cc.sys.isBrowser) {
  // 浏览器平台
} else if (cc.sys.isNative) {
  // 原生平台（iOS/Android）
} else if (cc.sys.isMobile) {
  // 移动端平台
}

    • 平台特有的代码：有时需要根据平台差异调整行为，比如 iOS 与 Android 上的资源路径或者触摸事件：

      if (cc.sys.os === cc.sys.OS_IOS) {
  // iOS特有逻辑
} else if (cc.sys.os === cc.sys.OS_ANDROID) {
  // Android特有逻辑
}

    • 优化移动端性能：确保在低性能设备上游戏运行流畅。

      • 禁用高特效或高分辨率资源，设置适配分辨率：
      cc.view.setDesignResolutionSize(1080, 1920, cc.ResolutionPolicy.EXACT_FIT);

    • 自动适配不同分辨率：

      cc.view.setDesignResolutionSize(1920, 1080, cc.ResolutionPolicy.FIXED_WIDTH);
cc.view.adjustViewPort(true);

    • 触摸事件：适配不同平台的触摸行为

      if (cc.sys.isMobile) {
  // 移动端触摸事件
  cc.systemEvent.on(cc.SystemEvent.EventType.TOUCH_START, this.onTouchStart, this);
} else {
  // PC端鼠标事件
  cc.systemEvent.on(cc.SystemEvent.EventType.MOUSE_DOWN, this.onMouseDown, this);
}

17. 异步操作与资源加载

  • 功能：处理游戏中的异步操作，尤其是资源加载和网络请求。

  • 常用方法：

    • 异步加载资源：

      cc.assetManager.loadRes('path/to/asset', cc.SpriteFrame, (err, spriteFrame) => {
  if (err) {
    console.error('Error loading asset:', err);
  } else {
    sprite.spriteFrame = spriteFrame;
  }
});

    • 加载资源包（异步）：

      cc.assetManager.loadBundle('bundleName', (err, bundle) => {
  if (err) {
    console.error('Error loading bundle:', err);
  } else {
    bundle.load('assets/texture', cc.SpriteFrame, (err, spriteFrame) => {
      if (err) {
        console.error('Error loading sprite frame:', err);
      } else {
        sprite.spriteFrame = spriteFrame;
      }
    });
  }
});

    • 异步操作与 Promise：
      使用 Promise 来简化回调嵌套，使代码更加清晰。

      function loadAssetAsync(path) {
  return new Promise((resolve, reject) => {
    cc.assetManager.loadRes(path, cc.SpriteFrame, (err, asset) => {
      if (err) reject(err);
      resolve(asset);
    });
  });
}

loadAssetAsync('assets/sprite')
  .then((spriteFrame) => {
    sprite.spriteFrame = spriteFrame;
  })
  .catch((err) => {
    console.error('Failed to load asset:', err);
  });

    • 等待多个资源加载完成：

      Promise.all([
  loadAssetAsync('assets/texture1'),
  loadAssetAsync('assets/texture2')
])
  .then(([texture1, texture2]) => {
    sprite1.spriteFrame = texture1;
    sprite2.spriteFrame = texture2;
  })
  .catch((err) => {
    console.error('Failed to load assets:', err);
  });

18. 多人游戏支持（实时联网）

  • 功能：在游戏中实现多人互动、实时对战等功能，通常需要通过 WebSocket、HTTP 请求或者第三方服务来实现多人游戏支持。

  • 常用方法：

    • WebSocket 通信：

      let socket = new WebSocket('ws://yourserver.com');
socket.onopen = function() {
  console.log('WebSocket connection established');
  socket.send(JSON.stringify({ action: 'join', playerId: playerId }));
};

socket.onmessage = function(event) {
  let data = JSON.parse(event.data);
  if (data.action === 'update') {
    // 处理来自服务器的玩家位置更新
  }
};

socket.onerror = function(error) {
  console.error('WebSocket error:', error);
};

socket.onclose = function() {
  console.log('WebSocket connection closed');
};

    • 实时多人游戏逻辑：
      使用服务器来同步玩家的状态，并且处理实时互动。

      function sendPlayerPosition(playerId, x, y) {
  socket.send(JSON.stringify({
    action: 'move',
    playerId: playerId,
    position: { x, y }
  }));
}

function updatePlayerPosition(playerId, x, y) {
  // 更新玩家的位置
  let player = findPlayerById(playerId);
  if (player) {
    player.setPosition(x, y);
  }
}

    • 多人游戏中的匹配系统：
      需要服务器端支持进行匹配，找到合适的对手或队友。

      socket.send(JSON.stringify({ action: 'match', playerId: playerId }));

    • 多人对战场景切换：
      使用场景加载与网络同步来实现多人游戏中的场景切换。

      cc.director.loadScene('battle', () => {
  socket.send(JSON.stringify({ action: 'startBattle', playerId: playerId }));
});

19. 虚拟货币系统与内购

  • 功能：管理游戏中的虚拟货币（如金币、钻石等），并且集成应用商店的内购功能。

  • 常用方法：

    • 虚拟货币管理：
      在游戏中增加虚拟货币（如金币、钻石）并进行管理。

      let playerCurrency = {
  coins: 1000,
  diamonds: 50
};

function addCurrency(type, amount) {
  playerCurrency[type] += amount;
}

function spendCurrency(type, amount) {
  if (playerCurrency[type] >= amount) {
    playerCurrency[type] -= amount;
  } else {
    console.log('Not enough ' + type);
  }
}

    • 内购功能（以 iOS 为例）：
      在 Cocos Creator 中集成应用商店的内购功能：

      if (cc.sys.os === cc.sys.OS_IOS) {
  // iOS 内购代码
  cc.iap.requestProductInfo(productID, (err, productInfo) => {
    if (err) {
      console.error('Failed to fetch product info:', err);
    } else {
      console.log('Product Info:', productInfo);
    }
  });

  cc.iap.purchase(productID, (err, purchase) => {
    if (err) {
      console.error('Purchase failed:', err);
    } else {
      console.log('Purchase successful:', purchase);
      // 增加金币或钻石
      addCurrency('coins', 1000);
    }
  });
}

    • 内购商品管理：
      通过服务器或本地存储来同步玩家购买的商品（如解锁道具、解锁功能）。

      function unlockItem(itemID) {
  let purchasedItems = JSON.parse(cc.sys.localStorage.getItem('purchasedItems')) || [];
  purchasedItems.push(itemID);
  cc.sys.localStorage.setItem('purchasedItems', JSON.stringify(purchasedItems));
}

function isItemUnlocked(itemID) {
  let purchasedItems = JSON.parse(cc.sys.localStorage.getItem('purchasedItems')) || [];
  return purchasedItems.includes(itemID);
}

20. 游戏社交与分享功能

  • 功能：在游戏中集成社交功能，例如分享至社交媒体、好友邀请等。

  • 常用方法：

    • 分享功能：
      if (cc.sys.isNative) {
  // Native 平台使用本地分享功能
  cc.game.share('Check out this awesome game!', 'https://gameurl.com');
} else {
  // Web 平台使用 Web 分享
  let shareData = {
    title: 'Awesome Game',
    text: 'Check out this game!',
    url: 'https://gameurl.com'
  };

http://www.kler.cn/a/546718.html

相关文章：

  • 快速设置 Docker 网络代理配置
  • 一天急速通关SpringMVC
  • 能源行业智能运维一体化监控解决方案
  • 第十五天 学习并实践HarmonyOS应用的基本结构、页面导航和状态管理
  • 今日AI和商界事件(2025-02-14)
  • 【从零开始入门unity游戏开发之——C#篇57】C#补充知识点——C#9 记录类型（Records）与模式匹配详解
  • 30天开发操作系统 第 20 天 -- API
  • Java 实战：在图片指定位置贴二维码或条形码生成海报
  • Spring 框架数据库操作常见问题深度剖析与解决方案
  • 处理项目中存在多个版本的jsqlparser依赖
  • 【Python】如何在 Linux/Windows 系统中设置 PYTHONPATH 环境变量
  • Debian系发行版通用软件彻底卸载指南
  • 哈希：LeetCode49. 字母异位词分组 128.最长连续序列
  • 深度学习项目--基于RNN的阿尔茨海默病诊断研究(pytorch实现)
  • 【Elasticsearch】runtime_mappings搜索请求中定义运行时字段
  • 【MySQL】索引篇
  • 【深度学习模型分类】
  • Spring JDBC中SqlQuery的使用与实例解析
  • 牛客网-小美的加法（C++）
  • Go语言sync包使用指南