Cocos studio初使用（一）

男娘i 2022-08-19 13:27 9阅读 0赞

文中使用了网上找的一些游戏资源，如果有相关版权问题，请联系我。

cocos提供了Cocos studio这个工具，具体的场景设计、帧动画创建、位置适配等都可以在这里面进行。可以将设计和编码分开，提高开发效率。

一、创建工程

首先，打开之前下载安装的Cocos，选择新建一个项目：

![计算机生成了可选文字:打 开 项 目 0 选 择 项 目 类 型 （ 0 〔 os 项 目 登 录 示 例 新 建 项 目 牛 仔 动 画 示 例 关 卡 选 泽 示 例 英 雄 动 画 示 例 难 度 选 泽 示 例 新 建 项 目 怪 兽 动 画 示 例 任 务 选 择 示 例][_ _ _ 0 _ _ _ _ _ _ _ 0 _ os _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _]

可以看到，官方提供了很多的示例工程，可以打开学习其中的实现，我这里创建一个空项目。

![计算机生成了可选文字:cocos2d-x-3.9 O Lua O JavaScript][cocos2d-x-3.9 O Lua O JavaScript]

其实这里创建的工程和之前使用命令行创建的工程有功能是重复的。我会只使用其中的设计功能，设计好后直接发布到之前创建的工程目录中。设置在：项目\-项目设置：

![计算机生成了可选文字:项 设 置 发 布 内 容 打 包 全 部 发 布 ℃ S 设 置 。 发 布 资 源 与 项 目 文 件 AndroQN 仅 发 布 项 目 文 件 发 布 路 径 \[Users/wangfeng/Desktop/HelloWorldDemo/Resources/res/][_ _ _ _ _ _ _ _ _ _ _ _ _ S _ _ _ _ _ _ _ _ _ _ _ _ AndroQN _ _ _ _ _ _ _ _ _ _ _ _Users_wangfeng_Desktop_HelloWorldDemo_Resources_res]

直接选择我们工程的发布路径就可以。

二、场景设计

1、导入资源

将相关文件导入工程，可以右键，也可以直接拖文件进去

![计算机生成了可选文字:新 建 文 件 … 新 建 文 件 央 导 人 资 源 ， 创 建 序 列 帻 动 一 复 制 文 件 重 命 名 打 开 所 在 文 件 夹 项 目 设 置 一 \*D][_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _D]

![计算机生成了可选文字:尸 ~ nct | dairy HelloWorldDemo][_ nct _ dairy HelloWorldDemo]

2、创建精灵

精灵是cocos的常用组件，这里很多元素我直接使用精灵来创建，包括背景等。创建精灵也是可以在左上角选择，也可以直接将图片拖到中间编译框中：

![计算机生成了可选文字:][SouthEast]

然后可以在右边选择相关属性，主要设置锚点、位置、大小等，锚点的定义在官网有，这里简单说一下，因为精灵有自己的大小，锚点就是指以精灵上的哪一个点，来计算与其他节点的位置，如0.5,0.5就表示以精灵的中心点，来计算在坐标系中的位置。这个位置可以选择用相对坐标百分比，也可以使用绝对坐标像素。

其他还有缩放、是否可见、位置固定和拉伸等。

![计算机生成了可选文字:27.0 15.0 固 定 与 拉 伸][27.0 15.0 _ _ _ _]

位置固定和拉伸这个有点常用，记一下，哪边的选中，就表示这个位置固定。常用于屏幕适配。

3、添加按钮

在左边的控件区选择按钮，拖到编辑区。注意起名字，以后代码中要用。

![计算机生成了可选文字:uoune][uoune]

在特性\->背景样式中，给三种状态选择图片，双击弹出选择或直接将文件拖放到这里：

![计算机生成了可选文字:][SouthEast 1]

添加按钮后的场景如图：

![计算机生成了可选文字:][SouthEast 2]

4、创建帧动画

帧动画的创建非常简单，首先创建一个精灵(也可以在另外创建一个节点来保存动画，以便复用)，然后将所有帧直接拖放到下面的精灵上：

![计算机生成了可选文字:@He110W0rld.png scene Button\_play Button\_hall Button\_ga me 1 Button\_game2][He110W0rld.png scene Button_play Button_hall Button_ga me 1 Button_game2]

然后选择播放间隔，是否重复就可以了。

![计算机生成了可选文字:][SouthEast 3]

最后效果如图：

![计算机生成了可选文字:-44 大 淘 汰 麌 O : 03][-44 _ _ _ _ O _ 03]

三、资源发布

可以使用菜单：项目--发布与打包，也可以使用快捷发布：

![Image 1][]![Center][]

发布后，主要是在配置的目录下，生成一个csb二进制发布文件，以及相应的图片等资源。csb文件直接可以用cocos studio模拟器来打开，后续文章中会讲怎么在代码中使用。

[_ _ _ 0 _ _ _ _ _ _ _ 0 _ os _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _]: /images/20220731/27937f98a094463192d523ab9eca42f6.png
[cocos2d-x-3.9 O Lua O JavaScript]: /images/20220731/f824e37d62f8468aa1acf3c3266d615b.png
[_ _ _ _ _ _ _ _ _ _ _ _ _ S _ _ _ _ _ _ _ _ _ _ _ _ AndroQN _ _ _ _ _ _ _ _ _ _ _ _Users_wangfeng_Desktop_HelloWorldDemo_Resources_res]: /images/20220731/90c2a5d04e894867814b677b3aed898f.png
[_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _D]: /images/20220731/8b429ab9c9524272b248cfbbb331e077.png
[_ nct _ dairy HelloWorldDemo]: /images/20220731/cece9be0007e43818373b61ac113b37e.png
[SouthEast]: /images/20220731/c68965c7e00b4151a6506fc4b3a3aa65.png
[27.0 15.0 _ _ _ _]: /images/20220731/35cb4aa490704ef98299313f87c93554.png
[uoune]: /images/20220731/022b62eb0f094b61b18c0625715b252c.png
[SouthEast 1]: /images/20220731/49ca900df0994a23aa390c6d30ac3032.png
[SouthEast 2]: /images/20220731/ba94e6d137164a4589313865c5b8d2e0.png
[He110W0rld.png scene Button_play Button_hall Button_ga me 1 Button_game2]: /images/20220731/3a1db3c167e94b549d9dae321a62ec0b.png
[SouthEast 3]: /images/20220731/a45c2208b06a49bd96f63f5f477c4c1c.png
[-44 _ _ _ _ O _ 03]: /images/20220731/a15dc87af4a84965bf2b2a65003d3d3e.png
[Image 1]: 
[Center]: /images/20220731/281e3d9bac9d4b7697f4210f878b77dc.png