cocosCreator 图片和图集的加载

本文介绍如何在Cocos2d-x中加载不同类型的图片资源,包括本地文件系统中的图片、SpriteAtlas图集中的图片以及从网络加载的图片。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

cc.Class({
    extends: cc.Component,

    properties: {

    },
     onLoad () {
     },
    start () {
        //加载图片
        var spriteNode = cc.find('sprite');
        var loadReCallBack = function(err,sFrame)
        {
         spriteNode.getComponent(cc.Sprite).spriteFrame = sFrame;
        }
        cc.loader.loadRes("head_4",cc.SpriteFrame,loadReCallBack);
        var spriteNode1 = cc.find('SP');

        //加载SpriteAtlas(图集),并获取其中一张图片
        cc.loader.loadRes('poker_card',cc.SpriteAtlas,function(err,atlas){
        var sp = spriteNode1.getComponent(cc.Sprite);
        sp.spriteFrame = atlas.getSpriteFrame('poke0');
    })
        //加载网络图片
        var url = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2498043367,2120146601&fm=26&gp=0.jpg';
        var spritNode2 = cc.find('SP1');
        cc.loader.load(url,function(err,texture){        
            var sp1 = spritNode2.getComponent(cc.Sprite);           
            var sFrame =new cc.SpriteFrame(texture,new cc.Rect(0,0,texture.width,texture.height),false,cc.Vec2.ZERO,new cc.Size(1080,760));
            sp1.spriteFrame = sFrame;
           // cc.loder.setAutoRelease(audioUrl, true);
        })
    },
});

 

### 如何在 Cocos Creator 3.0 中加载图集Cocos Creator 3.0 中,图集是一种用于优化资源管理渲染性能的重要机制。它允许开发者将多个图像打包到单个纹理文件中,从而减少绘制调用次数并提高效率。 #### 图集的定义与作用 图集通常由两部分组成:一个是包含所有子图片的实际纹理文件(通常是 PNG 或 JPG),另一个是一个描述这些子图片位置尺寸的信息文件(通常是 JSON)。这种组合可以显著提升游戏运行时的表现[^1]。 #### 加载图集的方法 要加载一个图集,在脚本中可以通过 `cc.resources.load` 方法实现。此方法可以从项目的资源目录中异步加载指定类型的资源。对于图集来说,其类型为 `cc.SpriteAtlas`。 下面是一段示例代码展示如何加载以及应用图集中的精灵: ```javascript // 假设我们有一个名为 'atlas' 的图集位于 resources 文件夹下 cc.resources.load('atlas', cc.SpriteAtlas, function (err, atlas) { if (!err) { let spriteFrame = atlas.getSpriteFrame('sprite_name'); // 获取特定名称的 SpriteFrame let node = new cc.Node(); // 创建一个新的节点 let sprite = node.addComponent(cc.Sprite); // 添加 Sprite 组件至该节点 sprite.spriteFrame = spriteFrame; // 设置 SpriteFrame 到组件上 this.node.addChild(node); // 将新创建的节点添加到当前场景的一个父级节点之下 } else { console.error(err); } }); ``` 上述代码片段展示了从资源管理器加载图集的过程,并选取其中某个具体的精灵帧来设置给一个新建的游戏对象上的 Sprite 组件[^4]。 #### 注意事项 - 确保所使用的图集已经正确导入到项目资源库中。 - 路径应相对于 Resources 文件夹。 - 如果遇到任何错误,请检查控制台日志以获取更多信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值