cocos creator 游戏UI背包实现

最新推荐文章于 2025-08-24 19:40:43 发布

原创

最新推荐文章于 2025-08-24 19:40:43 发布 · 4.7k 阅读

14 ·

CC 4.0 BY-SA版权

本文介绍如何在Cocos Creator中实现游戏UI背包功能。通过创建精灵节点作为背景，添加关闭、整理、使用按钮，结合滚动视图布局，将元素设置为预制体。在游戏运行时，利用instantiate()函数动态生成并填充物品图标到各个格子中。

首先创建一个精灵节点使用背景图然后添加关闭整理使用按钮滚动视图将图标，格子和整个界面作为预制体加载后用instantiate（）函数生成多个格子然后把图标贴上去

效果图：
在这里插入图片描述

cc.Class({
   
   
    extends: cc.Component,

    properties: {
   
   
        scroll: cc.ScrollView,//添加属性绑定滚动视图
    },

    onClickButton(event, data) {
   
   //按钮点击事件  
        if (data == "close") {
   
   
            this.node.destroy();
        }
        else if (data == "reset") {
   
   
        } else if (data == "use") {
   
   
        }
    },

    onClickItem(node) {
   
   // 点击物品的选中操作
        if (this.old) {
   
    //this.old 为下面保存的节点
            this.old.getChildByName("select")