微信小游戏开发之项目、图片资源配置和构建运行

主题

记录Cocos Creator项目熟悉的过程：

• 项目基础设置
• 图片资源导入方式
• 节点创建和命名规范、UI布局
• 项目的主场景或者首先启动的场景怎么设置，浏览器和模拟器运行

正文

1. 项目基础设置

1.1 默认分辨率设置

创建新项目后，会自动创建一个未保存的场景，这时发现Canvas节点的Size默认是横屏的，而开发手机游戏是希望自动竖屏的，即size自动设置到我们的设计图分辨率，想要下次创建场景Canvas自动竖屏，可以到菜单栏->项目->项目设置->项目预览，按照如下图设置即可。

有以下几点需要注意：

• 微信官方建议使用的设计分辨率是iphone6的size，即750x1334，或者选择大众的720x1280都可以。
• 适配屏幕宽高度这两个选项，可以详细看官方文档的分辨率适配章节，当然尝试后发现根据官方文档的讲解，并不能很好的解决适配问题，而是需要在这个基础原理上自己扩展解决，具体的是后续的文章的内容了。
• 模拟器设置，会在选择了模拟器运行后，运行起来会按照这个尺寸出现弹窗

1.2 开启调试界面

选择模拟器运行，想进入debug调试，或者查看log怎么办呢？
在菜单栏->Cocos Creator->偏好设置->预览运行，如下图：

• 勾选“开启模拟器调试界面”，运行后会弹出一个控制面板
• 勾选“等待调试器连接”，类似debug模式启动，一运行弹窗直接断点停在界面出现前

浏览器模式的debug，类似网页调试，按F12即可

图片资源导入方式

按照以前经验，cmd+c->cmd+v,资源就导入，然而并没用，在assets目录上右键也没见导入图片的选项，哎，再去翻文档就发现，要从文件管理中手动拷贝到对应的目录下。

节点命名规范、UI布局

• 创建节点的方式有很多种：拖动资源到层级管理器、层级器右键选择、控件库拖动等，节点创建后都会默认有一个name，这个name标识组件的唯一性，可以用于脚本中获得组件的引用，所以最好不要出现重复，个人更习惯的命名方法是驼峰命名法，带空格的命名看起来有点奇怪。

• 场景制作或者说界面布局时，组件间的对齐一般用Widget和layout组件，有些效果不知道用什么组件时，你可以关键字去搜文档，如果没有搜索一下就有了，站在巨人的肩膀上，我们要放宽视野。

项目主场景，浏览器和模拟器运行

一开始我总在纠结，我怎么找不到在哪里设置主场景啊，找不到main我怎么运行，陷入这种思维也是很难受的。

后来在项目build时，看到初始场景的设置，我算是搞明白了，淦

浏览器运行时，因为想看不同界面尺寸下的适配情况，切换了界面尺寸，要刷新一下网页，要不然会发现界面并不适配，还纠结半天，这就搞笑了。

结尾

自己动手写，分解项目中的各个模块需求，通过查文档和搜索Cocos社区，解决碰到的问题，最终在微信上线了下面这款微信小游戏《成语锦衣卫》，欢迎大家扫码体验，并作为参考项目模版，开发出属于自己的小游戏

欢迎扫码体验

预告

下一节和朋友们说一说：编写脚本，VSCode配置快捷键、智能提示等，js代码command点击不跳转的痛点。