今天学习《前端篇》第4章移植及优化的第13课,移植文本与图像。
学习目标
- 了解多端文本渲染的异同;
- 换一种方式实现渐变、阴影效果;
- 了解材质重复渲染可能存在的问题;
- 监听播放结束事件,使背景音乐循环播放;
- 游戏元素的参数调整;
- 在测试时静音。
主要知识点/技能点
- 三端对阴影和颜色渐变的支持是不同的,在模拟器中支持阴影和渐变色绘制,但手机上却不完全支持。
- PC微信客户端与微信开发发工具中的模块器是不同的执行环境。
- 小游戏在五端(模拟器、PC微信客户端、Mac微信客户端、iOS手机端、Android手机端)的实现都是不同的,我们的产品最终是在手机端与微信客户端与用户见面的,除模拟器之外的四端是上线前必须要认真测试的环境。
- 至少在2.19.5基础库版本中,Shadow和Gradient相关的功能都不好用,多端渲染结果可能不一致,在使用时要克制。
- 如果我们真的需要在游戏中绘制渐变文本、使用阴影效果怎么办?可以使用图片代替,在图片上设计好渐变、阴影效果,然后直接在项目中使用,使用图片没有限制。
- autoplay属性默认为false,将其设置为true,才会自动播放。
- 游戏代码中像挡板宽度、背景音乐的大小和位置这样在多个地方用到的信息,都不宜写死,都应该声明为常量或变量。
实践疑难点
- 注意小游戏中多端可用的本地路径写法:img.src = "static/images/mood.png"。
- 关于左挡板在底部不显示的问题,真正的原因在于材质填充对象panelPattern,因为我们使用了不重复填充,纵向材质被填充完了,因此未被显示。
- 使用pause方法暂停的音频,使用onStop监听不到停止事件,只有stop方法停止的音频,onStop才能监听到。
小结
现在,我们对原HTML5小游戏的基本移植已经完成了。