Cocos Studio images文件与CSB的路径相对关系

Cocos Studio 新版本CSB文件图片路径的相对关系

版本使用的是最新的Cocos Studio 2.3.1。相对于完全使用代码搭界面调坐标的繁琐,Cocos Studio 在搭建界面方面有很大的优势,所见即所得,这给我们搭建界面带来了很大的方便。


首先我们先看一下cocos studio 和cocos2d-x所需的工程目录结构

Cocos Studio 工程目录结构: 在工程中,如图Start为工程名,下面的image和layout文件夹为我们一般认的目录结构;其中image存放我们所需的图片素材,在image中我们将图片素材放在场景文件夹中,如图中的开始场景Startimage;layout存放最后生成的csb文件,此时在工程发布前layout中存放的是csd文件,在工程发布后我们就可以在该目录下看到生成的csb文件


生成后打开csb文件(注意不是csd文件,csd文件是二进制格式的),如图可以查看图片素材的路径,图中阴影部分。


Cocos2d-x 工程下Resources目录结构:在Resources目录下,我们需要按照在cocos studio中的结构建立相同的目录,即image存放个场景的图片素材,layout中存放各场景的csb文件,如图:

image目录下的场景文件:如图的Startimage文件和CardImage文件



layout下的各csb文件: 如图的StartScene.csb文件和Card.csb文件



CSB文件图片素材、csd文件介绍:

csb是二进制文件,是cocos studio工程建好后发布后生成的,csb文件存放的是整个界面中所有小图片属性包括图片的大小,坐标,颜色,锚点以及路径等属性,其中最重要的是路径,因为只有csb文件我们是不能生成界面的,必须通过路径找到图片素材,然后由Cocos2d-x引擎渲染出来。csd文件是文本文件,是csb文件的文本形式,打开csb文件我们就可以看见各个小图的上述属性,所以csb文件是csd文件的一种翻译,正因为如此我们在后面使用时是直接让csb文件替代相对路径下的csd文件


旧版本Cocos Studio

在旧版本中,生成的csb文件图片资源是一种相对关系,即图片资源位置是相对于csb文件位置的,cocos2d引擎通过csb文件中的相对路径找到图片资源然后渲染出图片。例如在cocos studio工程中我们建了layout文件夹用来放csd文件,image文件夹用来放图片资源,image文件里存放的是各个场景的文件夹,里面存放的是该场景的图片例如A.png,那么在csd文件中我们看到的路径是../image/A.png,即图片资源路径是相对于csb文件的。


新版本Cocos Studio 2.3.1

在2.3.1版本中,路径关系变了,图片资源不再相对于csb文件的路径了,他改为直接相对于Cocos2d中的Resources了,这给我们带来了很大的理解上的方便,同样我们在Resources目录下建了image和layout文件,作用同上,我们在使用cocos studio时应该按照该目录结构建立工程结构,image文件下再建场景文件用来存放图片,这样在发布之后我们需要将csb文件和场景文件拷入到cocos2d工程Resources中的Layout和image文件夹下,在实现时我们只需要带上csb文件的路径(相对于Resources的)就可以了,他会按照csb中读到的路径在Resources下找图片,这样我们只需要记住所有路径都只相对于Resources就可以了。例如csb文件路径为Resources/layout/StartScene.csb,则我们在代码中使用csload::create(“layout/StartScene.csb”)来生成结点,它会根据csb文件中读到的路径找图片,此时图片路径即为image/Startimage/StartBg.png,如上面csb截图中的阴影部分标注的路径,它相对的路径是Resources。


新旧版本使用上的差别:

从使用上来讲如果cocos2d中资源目录结构与Cocos Studio目录结构是一致的,新旧版本使用起来是一样的,但在旧版本中如果我们新建了其他文件夹套住image和layout文件夹的话也是可以使用的,因为他是相对路径,但是这样的结果就是无论哪种形式都可以,文件结构比较混乱(如果出现多种结构的话),我就是在新版cocos studio 中按照旧版的相对路径放置资源,外面套了新建的其他文件夹,这样就总是找不到图片资源。新版本中应该是统一了资源的路径结构,这样要更加规范一些。

注意点: Cocos2d工程中资源的目录结构与Cocos Studio中的目录结构一定要是一样的,否则就破坏了路径关系,这样是绝对找不到图片资源的。

相关文章

    本文实践自 RayWenderlich、Ali Hafizji 的文章《...
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@1...
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从C...
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《...
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试...