cocos creator学习（八）自动图集+构建发布h5

自动图集

有时候做cocos，小碎图太多，如果挨个导出来就很占位置，请求数太多加载速度也会变慢，这时我们就可以用自动图集

创建

只需要在图片的文件夹里面新建一个自动图集就可以了，如图：

配置

自动图集可以自定义宽高，点击新建的自动图集，看属性检查器，改成你想要的数值后点击右上角的绿色应用按钮

等构建发布后，自动图集就会把它同级和下级们可以放在一张指定大小图上的小图片合成一张张图，比如这个例子就把每张单独动作的小人变成一张图两个人：

但也要注意，

不是自动图集的大小越大，图片总大小越小的，需要把控好这个度

构建发布

点击菜单栏的项目—构建发布

会弹出构建发布面板，因为我做的都是h5，所以发布平台选择的是Web Mobile

设备方向一般情况下我需要的都是竖屏：

都设置好后点击构建按钮就构建发布完成了！

预览：可以点击运行按钮或预览URL后的网址进行PC端预览，也可将URL的网址发送到手机，用手机端进行预览

点击发布路径后面的打开按钮，双击默认选中的文件夹，就可以看到构建发布的内容，因为我选择的发布平台是Web Mobile，所以构建完的文件夹名默认为web-mobile

构建发布完的文件结构

如图，

res是我们的图片音乐这些资源，里面有import文件夹和raw-assets文件夹
import里面都是json文件，里面有各个资源的位置大小倍数资源路径等信息
raw-assets里面就是各种资源，你的图片和音乐都在这里

src里面有两个js文件，
其中setting不用管，是一些设置，project是你自己写的js文件，合成了一个js

如果想改loading页，需要更改的文件是index.html、main.js、style-mobile.css

具体的大家可以根据自己的需求去操作。

---

cocos笔记链接：
cocos creator学习（一）页面+动画
cocos creator学习（二）js绑定动画
cocos creator学习（三）预制节点
cocos creator学习（四）全局变量+类之间的函数调用
cocos creator学习（五）定时器
cocos creator学习（六）组件Mask（超出部分隐藏）
cocos creator学习（七）音乐
cocos creator学习（八）自动图集+构建发布h5
cocos creator学习（九）构建后更改图片和层级设置
cocos creator学习（十）cocos自带扩展插件-压缩