什么是微信小游戏
微信小游戏是微信小程序的基础上添加了游戏库 API。
小游戏只能运行在小程序环境中，所以小游戏既不是原生游戏，也不完全等同于 HTML5 游戏。
但实际上小游戏面向的就是 HTML5 游戏开发者，为了能够让 HTML5 游戏可以尽可能低成本得移植，小游戏尽可能复用了 WebGL、JavaScript 等源自浏览器的 HTML5 技术。
可以说小游戏是使用 HTML5 技术搭建，具有原生体验的微信内游戏产品。
注册账号
账号注册
根据指引填写信息和提交相应的资料，服务类目应选择“游戏”，子类目可以先选择“休闲游戏”，就可以拥有自己的小游戏帐号
根据指引填写信息和提交相应的资料，服务类目一定要选择“游戏”，子类目可以先选择“休闲游戏”，提交后就可以拥有自己的小游戏帐号
回到可视化工具编辑器部分，打开作品设置，选择上传到MP，此处AppID列表会展示当前登录微信账号名下所有小游戏MP账号（必须是开发者或者管理员 权限）
制作流程
Step1: 在浏览器中打开制作工具
Step2: 通过 [新建小游戏/复制示例/改编他人作品] 等方式创建一个游戏项目
Step3: 导入素材，编辑场景，拖入积木，完善游戏
Step4: 在电脑上运行调试
Step5: 在移动端预览调试，也可以分享给他人体验
Step6: 发布到MP平台，完成小游戏
设计相关
官方设定的设计尺寸是：750*1334，也就是iPhone 7的尺寸，可以完美的展示，为了适配iphoneX等长屏幕，尽量背景某方向大一些
-
精灵，可以通过相对场景布局，来适配不同设备屏幕，保证其某方向位置保持
相对定位
工作中需求描述
设计稿：
- 官方设定的设计尺寸是：7501334（375667比例），也就是iPhone 7的尺寸
复杂的背景平铺尽量使用iPhoneX的高度，414*896的比例
设计时候，不用设计7501334，图片质量太高，服务器请求也慢，375667我觉得就好了
- 背景尽量使用纯色，不要使用渐变色，降低素材占用空间
富媒体素材
- 音频素材，背景音乐，尽量使用十几秒或不超过30秒，能首位呼应循环的音乐，音频也占用资源（尽量）
角色动图
- 以人物动画为例（如行走的人），提供逐帧图片即可，命名为 （角色-行走1.png、角色-行走2.png、角色-行走3.png、.....）
- 能用10帧完成动画，不用20帧，减少素材体积
场景动画
- 场景动画，可以提供下大概的思路，我会用现有的动画积木内查找，尽量向设计方向靠近
如果小程序提供的动画，无法达到需求效果，可以后续使用 如(角色动画)的逐帧动画，来做
小程序体积限制
大小不超过4MB
上传与审核
- 上传游戏
基本流程： 申请的账号的微信号，扫码打开小游戏制作工具后，在
作品设置-上传到MP- 上传到微信公众平台，上传完毕后，即可在公众平台查看版本，以及进行后续的提审工作上传到MP时候，需要注意 选择上传到MP账号：
AppID列表会展示当前登录微信账号名，下所有小游戏MP账号（必须是开发者或者管理员）
不要上传到错误的 微信小游戏 账号下，（微信小程序账号不会显示在此处列表内）
- 配置MP资源白名单
打包资源来自小游戏开发工具域名，所以在微信公众平台 开发白名单中，需要把开发工具域名输入，防止资源加载不出（音频）
注意事项：
发布为独立小游戏时必须在MP管理后台，【开发-开发设置-服务器域名】中设置downloadFile合法域名，能将素材加载到用户本地以便于再次启动时更快，不设置此项，声音资源可能会加载失败。 服务器域名设置：
https://game.weixin.qq.com;https://gamemaker.qpic.cn;https://gamemaker.weixin.qq.com;
提交小游戏审核时，引擎选择
游戏引擎一栏可以在[输入其他引擎]中输入《小游戏可视化制作工具》或者《微信小游戏制作工具》提审小游戏时，游戏资质需要提交附件
- 个人主体需提交：2个，《计算机软件著作权登记证书》、《游戏自审自查报告》
- 棋牌类目、需开通支付游戏需额外提交：《广电总局版号批文》
- 非个人主体需要提供： 《广电总局版号批文》 、《文化部备案信息》、《计算机软件著作权登记证书》、《游戏自审自查报告》
开发笔记
基本操作
视图编辑区域 ctrl+滚轮 - 放大或者缩小
视频编辑区域 空格 + 鼠标左键，进行视图拖拽 ---- (制作横版关卡类游戏必备)
- 基本配置
-
[横竖屏问题] - 小游戏横竖屏，在创建项目时候，可以设置，后续未找到修改位置
横竖屏设置
- 场景
-
主场景 右上角有房子的为主场景
主场景 换主场景 - 多场景中，可以通过场景列表右上角三个点菜单，来切换
入口事件：
- 主场景中 可使用「当游戏开始时」作为启动事件，此事件只会触发一次 - (这个积木使用限制较多，只推荐在做简单的demo时使用)
- 其他场景 可通过「当场景启动时」作为启动事件 - （推荐所有入口都用此入口，作为启动场景的入口事件）
销毁场景
-
如果场景中存在动画，那么场景切换后，在回来，如希望动画为初始状态，则先销毁再跳转
场景切换重置状态 - 如不存在移动和克隆体等、可直接跳转不用销毁
重启场景
- 「重启游戏」清除所有场景和数据，从主场景重新进入游戏
- 「重启当前场景」清除当前场景并重新进入，相当于销毁并切换，如果只是单独的关卡，建议使用此积木，但注意要手动重置变化的数据
- 游戏适配模式
- [适配模式] 调整在移动端的适配模式，推荐竖屏游戏使用宽度适配，横屏游戏使用高度适配
- iphone7竖屏游戏背景采用 宽度适配，在iphoneX上，存在顶部背景铺不满的情况，如何解决？
方法一，可以将背景尽量拉高，以iphoneX能用来做标准， - (推荐此方法)
方法二，可以使用高度适配，但存在宽度溢出屏幕的情况，
- 数据面板 - 通知
通知 在积木只有两个，一个在控制中发送通知，一个在事件里接收通知
当开始按钮被点击时，通知所有人开始游戏，是常用使用场景，通知对象是多众多目标
如果被通知对象唯一，那么建议准确的选择而不是通知所有人，避免不必要的消耗 - (官方优化建议)
- [添加事件] - 当收到通知XXX
- [控制] - 通知 XXX XXX
遥控杆是插件
资源管理 - 添加素材 - 插件TAB[行为] - 平台
-
二段跳的实现
二段跳 -
角色触碰尖刺 双向弹开
双向弹开 角色转向
移动方向是 方向控制行为下新增的
比较逻辑是运算下的，比较符号存在BUG，拖出来后，比较符可能会减少，--（注：提前选好比较符号，再拖出来）
- [行为] - 物理
-
二段跳的实现
通过精灵身上添加变量，跳跃次数为2，在接收到跳跃通知时候，如果[物理]行为的垂直速度小于10，且存在可跳跃次数，设置物理行为的速度和方向，并减少1次跳跃次数即可
物理行为实现二段跳跃
- 文本相关
- [外观] - 修改 XXX 内容为 XXX
- [外观] - 获取 XXX 的文本
- 移动
- [动画] - 自己在X秒滑行至XXX位置
- [行为-缓动] - XX 在 X 秒缩放至X:xxx Y:xxx
- 关于精灵的旋转和面向
- 旋转 - 精灵内
显示素材的操作 - 面向 - 精灵的
移动方向的操作
- 精灵私有变量
- 只有在精灵身上时候，才可以通过 [数据] - 变量XXX 获取
- 只有在精灵身上时候，才可以通过 [数据] - 将XXX 设置成 XXX
- 精灵上私有变量修改，在精灵上会相互冲突
8.全局变量
- [数据] - 将XXX设置成XXX
- [数据] - 变量XXX
不同场景中，如何防止精灵相互干扰
重新通过 添加素材 可以反复加入精灵，选择相同素材，会成为独立的精灵场景切换相关
- 页面A跳转页面B，页面B完成一系列动画操作，返回页面A，再次跳转页面B，页面B会保留之前动画状态，而非初始状态。
解决方法：
页面A启动时候，销毁页面B，以及重置页面B中的全局变量
- 摄影机 - 横版动作游戏
设置摄影机的跟随对象为运动的精灵
设置XXX为摄像机的世界区域
注意触发其行为的生命周期
+ 当游戏开始 - 设置自己为摄像机的世界区域
+ 当场景启动时 - 将自己移除摄像机镜头
+ 当场景启动时 - 设置摄像机的跟随对象为自己
实例 - 横版过关游戏:
- 需要对角色进行设置 - 当游戏开始 - 设置摄像机的跟随对象为 自己
- 针对血条、积分 需要绑定在屏幕上的元素 设置 - 当游戏开始 - 将 自己 移除 摄像机镜头
- [行为] - 遮罩
添加遮罩行为，然后设置遮罩类型，有原型、矩形、扇形、精灵
遮挡的部分为显示的区域，可以通过变化精灵大小，实现图案类型的遮罩过场动画
遮罩行为中，可以控制遮罩的走向，如宽度、高度 - (增加减少)，来实现不同效果
积木脚本
- 在积木脚本中，像经过XX秒进行XXX动画，都是逐一执行的，而非并行
- 判断：
具有动画的积木是逐行执行的，而设置数据的积木虽然也是逐行执行，但可以看成是并行的，同步设置完成的 - 解决：
将所有需要动画的精灵，通过通知进行动画，动画积木在精灵自身上编写，即可实现并行动画
- 重复执行会阻挡后续代码执行
官方优化建议
及时销毁不再显示的克隆体
比如：射击子弹、无限产生的敌人、爆炸碎片等，当这些克隆体移出屏幕或发生碰撞、点击等事件后被废弃隐藏，需要及时使用「删除此克隆体」清理对象、释放内存，避免内存随时间增长而逐渐耗尽。统一在精灵本体中管理「克隆」动作，避免克隆体自身克隆自己
如果在克隆体的生命周期过程中产生再次克隆的操作，就会造成精灵数量指数增长，最终卡死进程。避免在持续触发的事件中使用「重复执行」积木
「当角色被按下」、「当屏幕被按下」、「当」+ 成功条件、「当角色移出屏幕」，这些事件一旦达成触发条件，将会以约16.67毫秒一次的频率持续触发，以实现流畅的动画效果。因此如果在这些事件积木中再使用「重复执行」积木，「重复执行」积木中包含的动作将会触发意向不到多的次数合理的使用物理引擎
一个精灵一旦「开启物理引擎」，需要消耗更多的CPU运算来模拟真实世界的特效。按需对精灵开启物理引擎，避免CPU的过度消耗。精简游戏资源
- 删除没有使用的精灵、造型、音乐素材
- 精灵选择合适宽高的@2x图，过大的图片系统无法将其纳入合图并且具有较长的加载时间
- 系统会默认对图片进行质量压缩
- 游戏逻辑无需即时绘制的精灵，选择隐藏它而不是将其拖出画布外或者设置透明度为0。
- 精简游戏逻辑
- 可以利用容器复用积木，减少逻辑重复
- 善用行为完成游戏效果
- 碰撞注意事项
- 不参与碰撞的精灵，就不要设置任何与碰撞相关的积木和事件
- 避免设置大量参与碰撞的精灵，这可能会造成游戏卡顿。
实战开发问题
- 素材相关
上传图片过大超过2048像素的问题
- 如果是横版通关游戏，可以将游戏背景裁切几份，然后分别上传，然后拼接组成一个容器，方便后续调整位置
- 如果是一个中心有核心元素，其余部分纯色渐变的浮层，考虑背景镂空的iphoneX宽屏手机，要很大的浮层；
可以将核心元素切出来，其余部分通过上传一个纯色背景色块拉伸拼接上下左右，组成容器，完成浮层制作
资源管理器中添加的素材有容量限制，最大不超过50MB
音频无法调节音量的问题
- 将音频文件通过第三方软件，降低音量
- 调试音效时候，记得多使用资源面板中的替换音效功能，而不是直接删除再添加，会省力的多
- 横版通关游戏中，游戏场景过大，摄像机不跟随，范围错误。
可能是将场景启动 弄错为 当游戏开始
正确的逻辑：
- 当游戏开始 - 设置自己为摄像机的世界区域
- 当场景启动时 - 将自己移除摄像机镜头
- 当场景启动时 - 设置摄像机的跟随对象为自己
如果使用 当游戏开始 逻辑，会在场景重启时候恢复正常，但是第一次会出错。
临时办法:
通过按钮点击来触发，将XXX移除摄像机镜头、设置摄像机的跟随对象为XXX
对多个浮层一起操作，可以通过容器实现
同一个场景内，选择多个浮层，右键 - 将选中的浮层组成容器函数的使用
-
新建删除
新建函数 - 编辑函数: 右键可以编辑函数，也可在素材列表最下找到函数点击编辑
- 重命名与删除: 素材列表最下，右键可以选择重命名和删除
- 函数参数设置: 通过编辑函数，点击-+，进行函数参数减少与增加
-
怎么获取函数参数: 函数参数参加运算时候，通过拖拽参数实现
获取函数参数 - 函数调用: 函数调用直接在右侧函数菜单，拖拽需要的函数即可
-
函数不生效: 函数参数重命名后，调用的函数需要删除，再重新拖拽，否则会出现调用不生效的情况
通过设置多个参数，方便解决多个场景下，某个场景内多逻辑的问题
- 自定义加载 (所有界面加载完成后，开始小游戏)
- 添加插件资源管理 开启
- 作品设置 - 资源加载方式 - 切换场景时加载
- 添加全局变量(已加载场景数量，初始值为0)，添加数据列表(列为待加载场景的数量，值均为0)
- 新建一个场景，作为自定义加载的界面(设置为主场景)
- 在这个自定有加载界面，当场景启动时候，预加载(其他所有的场景)的资源，并调用下面资源加载函数
- 新建一个函数，函数名为资源加载函数，内容为 重复执行包裹，如果场景1加载完毕(修改下loading文案1 为场景1加载了)，根据场景索引值，修改数据列表索引项值为1(如果为0时候修改，保证后续+1操作只执行1次)，并将已加载场景数量+1，如果场景2加载完毕依此雷同
- 将loading文案2，设置为
向上取整((已加载场景数量 / 待加载场景总数)*100)+'%' - 如果进度为100%跳转到游戏的开始页
注:
- 循环执行积木同级后面，不管写什么都不会执行，因此需要特别注意函数调用的位置
- 因为监测单个场景加载完毕与否，是被反复执行包裹的，因此数据列表是一个单纯的节流开关，防止反复执行
加载单个场景的逻辑:
官方推荐的视频https://www.bilibili.com/video/BV1hb4y1f7ma/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=948598a2d43866b02bf79d40339f8de5
- 音频与切换场景、重启场景
- 重启场景，音频会停止播放，因此在需要重启的场景，在场景启动时候，需要重新播放下音乐
- 暂停音频，再次播放，音频会继续之前的暂停点播放
- 停止音频，再次播放，音频会从头播放
-
二次或者多次进入场景，场景内精灵不会重置的问题
反复进入一个场景，场景内移动、旋转、显示、隐藏等操作会保留为上一次状态，不会因为场景重新进入而重置
解决:
给场景设置一个局部变量作为开关，初次进入没事儿，再次进入根据开关的值，刷新场景
注意:
从其他场景播放的音乐，音频文件会在刷新当前场景时候失效，需要添加逻辑二次添加
场景重置的问题 角色横版过关游戏的移动
- 没有使用摇杆的插件，通过给一个色块添加
平台角色，作为移动核心，因为有高台、深坑，所以将重力设置为0 - 色块在场景内的左侧与右侧尽头，添加竖着长方体，设置行为
固体 - 屏幕上面以中间为风格，左侧右侧各放置一个很大的热区，将这两个热区合并为一个容器
- 设置色块视线跟随: 场景启动 - 设置摄像机的跟随对象为自己
- 设置热区容器固定屏幕: 场景启动 - 将自己移出摄像机镜头
- 建立通知，屏幕上的热区按下，移动核心接收通知，调用平台角色左(右)移
- 上传一个人物角色连续动画，一组是关于站立的动画逐帧图，一组是关于行走(奔跑)的动画逐帧图
- 将人物角色造型内，添加一个站立动画，一个行走动画，默认站立
- 给人物角色，添加局部变量作为转身的开关，根据热区点击位置的通知，进行造型水平翻转以及转身变量数值的修改
- 根据
平台角色行为的是否在水平方向移动，来判断人物角色造型的站立，还是行走(奔跑)
注:
- 设置摄像机跟随对象为自己后，如果希望角色移动过程中，靠屏幕一侧，
可以使用设置摄像机的X轴偏移为xxx，相应场景内涉及到的浮层，也要修改对应的坐标，防止位置错误
8-2. 造型的切换嵌套
- 局部变量与行为
- 局部变量区别与全局变量，局部变量只有在添加的精灵内可以获取和修改
- 行为类似局部变量，只能在添加了这个行为的精灵内使用
注:
添加局部变量后，需要切换下精灵才可以看到
- 摇杆插件的使用
需求:
通过摇杆控制精灵运动，碰到固体会停止
方式1:
- 添加插件 - 摇杆
-
给待运动精灵添加行为 - 方向控制
精灵方向控制的参数设置
缺点: 方向的旋转需要自己去写
方式2:
- 添加插件 - 摇杆
-
给待运动精灵添加行为 - 方向控制
精灵方向控制的参数设置 -
设置精灵的旋转朝向
旋转朝向
- 区域范围的手指拖拽滚动
方式一: 移动、抬起均有动画的滚动效果 - (滚动很舒服，两侧极限位置有弹性效果)
- 添加素材 - 插件 - 滚动列表
- 配置插件基本参数 - 设置( 滚动方向、宽度、高度、间距、循环体、循环个数、背景色、背景透明度 )
- 给循环体添加点击事件，通过
自己的列表索引进行后续逻辑判断 - 给循环体添加造型，使用
作为克隆体启动时，修改自己的列表索引等于某个数字时候，切换其造型
注:
- BUG - 切换场景再次返回滚动列表场景，循环体消失了，一个不剩?
解决:
针对 滚动列表 添加当场景启用时 - 设置自己的总个数为xxx解决 -
自己的列表索引从1开始
方式二: 移动或抬起有动画的滚动
- 将列表项目与放置列表的元素，组成一个容器，针对此容器进行后续拖动
- 为拖动容器添加行为 - 缓动
- 创建4个变量，分别为 移动前X坐标，移动后X坐标，移动距离，是否移动中
- 针对拖动容器，添加当精灵按下时，当精灵放开时，分别记录两次X坐标，进行差值，被容器当前X坐标减去，就是容器将要移动的目标点
- 放开时候，通过是否移动中，进行拖拽节流
-
限制两侧极限值，如果要过极限位置，设置缓动方式back到极限位置，模拟弹性效果，其余使用linear缓动
按下
放开
注:
由于容器无法设置坐标中心点，因此，容器贴近左侧窗口边界的x坐标的负值，就是右侧极限值
在-389 ~ +389之间就移动x到 (自己的x - 移动的距离)
否则根据超过哪一侧，使用back缓动方式直接移动到那一侧的极限位置即可
为了更好的效果，计算移动距离时候，最好乘以一个系数，提高滑动的距离
如果容器宽高错误，可以添加一个纯色块，进行拉伸，删除容器后，将它与其他精灵重新融合为容器
像javascript中编写拖拽的操作，mousedown嵌套mousemove以及mouseup的绑定行为不支持
因为事件与生命周期积木无法嵌套；如果使用函数也无法做到嵌套事件，因为函数内没有事件积木
- 克隆体使用
- 复制自己
- 作为克隆体使用时
- 删除此克隆体
注:
- 被克隆的精灵如果是隐藏的，那么克隆体也是隐藏的，需再显示
- 分辨出被克隆的精灵，进行定制化操作
目前知道有克隆两种，一个是普通克隆，一个是通过插件-列表，克隆列表项
第一种：
创建两个变量，一个全局变量用于累积数字，克隆体上挂一个局部变量作为操作标识
挂载个抖动行为，直观看到效果，只有ID为3，可以动一动
第二种，示例demo - 列表LIST
点击每个克隆体，可以直接通过 侦测-自己的列表索引 获取，
以及在作为克隆体启动时，根据上面索引设置每个精灵的定制化的初始操作
但是暂时没有找到，获取除当前克隆体以外的其他克隆体们的方式
小游戏体感以及提示
小游戏-显示消息提示框 -- 黑底半透明文字提示 -- 最简单的调试以及说明使用
小游戏-触发短振动 -- 适用于按钮被点击的交互
小游戏-触发长振动 -- 适用于角色受伤-
判断两个精灵是否接触
问题:
虽然声明周期内提供了 xxx碰到xx 的钩子，但为触碰瞬间触发，而无法进行延时以及附加条件的判断，如当手指抬起时候，判断两个精灵是否触碰
所以，需要针对两个精灵的坐标进行判断，由于小游戏的坐标系中心点在页面水平垂直的中心处，所以判断公式推测如下:
小游戏判断两个精灵是否接触
- javascript的判断写法:
if( (math.abs(A.x-B.x) - A.width*0.5 - B.width*0.5<0) && (math.abs(A.y-B.y) - A.height*0.5 - B.height*0.5<0) ){
//-- 两个精灵触碰了
}
-
小游戏积木:
绝对值运算
注:
通过两个判断是否小于0然后通过并且来连接，反复不成功，嵌套了两个条件判断就可以了
- 拖拽小人做类似米加小镇，拖拽小人，放开手后，完成某一操作
- 给小人添加两个全部变量，一个是判断被触碰的精灵索引，一个判断是否拖动中
- 场景启动给小人任意方向拖动的控制积木
- 当精灵
按下时候，修改小人局部变量拖动中为1，然后进行造型修改 - 给精灵触碰不同物体，修改被触碰的精灵索引为最后一个物体的编号，用于后续判断碰撞函数
- 当精灵
放开时候，修改是否拖动中开关，修改造型，并进行碰撞函数的检测 - 把最新被触碰的精灵索引，做为参数传递到碰撞监测中
- 根据14条的判断逻辑来进行后续行为操作
- 如果函数最终行为是跳转，那么需要在场景启动时候重置局部参数，并设置场景重置开关，重置精灵的初始位置
注:
要使用按下，不要使用按住，否则触发最终目的是切换场景的话，返回时候拖动精灵，依然会是拖动状态，而非放开状态，猜测是 拖动控制与鼠标的按住存在冲突
未完待续....