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

主题

记录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点击不跳转的痛点。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章