HTML5游戏前端开发秘籍

QQ空间Android版4.2和4.5上线的玩吧游戏“空间疯狂套牛”是一款使用HTML5开发的手机游戏。尽管它存在一些不足，但其中运用的部分技术与技巧值得分享，希望能帮助大家突破开发中的各种关卡，创造出更多优质的HTML5游戏。本秘籍主要聚焦于HTML + CSS技术方面。

一、自适应

Android手机屏幕碎片化问题严重，分辨率种类繁多，因此让游戏适配各种机型至关重要。我们先后尝试了多种方案。最初考虑使用JS根据分辨率动态设置相关元素的大小，但在某些机型中获取分辨率失败，或者在赋值缩放相关元素时导致游戏崩溃。

经过反复尝试，我们最终想到使用absolute定位来解决适配问题。关键代码如下：

.game {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}

上述代码将游戏容器进行绝对定位，使其上下左右四边与手机屏幕紧密贴合，从而实现了对各种屏幕的适配。接着，使用background-size: cover;让背景覆盖全屏，该代码可使背景自动缩放以覆盖容器大小。

对于内部元素，可根据其靠近的边进行动态布局。以下是一个示例：

.runbox {
position: absolute;
bottom: 110px;
left: 0;
width: 100%;
overflow: hidden;
padding-bottom: 10px;
}

此代码定义了牛跑动的跑道容器，使用bottom基于底边进行定位（因为绳子是自下而上套出，这样便于编写套牛逻辑），并且宽度设置为100%，确保牛从屏幕边缘出现。

下面是一个动态居中的示例：

.welcome {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -111px;
background-image: url("img/wel.png");
width: 222px;
height: 200px;
}

该代码先将元素进行绝对定位，然后使用top: 50%; left: 50%;将元素的左上角置于屏幕中心，再通过margin-left: -111px; margin-top: -100px;使元素偏移自身宽高值的一半，从而实现元素居中的效果。

通过以上两个示例，大家可以灵活运用这些方法实现自适应的动态布局。最终效果是，无论屏幕如何变化，游戏都能恰当显示。

二、帧动画

优秀的游戏离不开出色的动画效果。设计师为游戏带来了优美的视觉享受，我们在实现动画时应谨慎对待，避免辜负设计师的工作。

一般来说，游戏动画大致可分为两种：一种是元素自身的动作动画，类似于不断循环播放的GIF动画（以下称为帧动画）；另一种是该“GIF”移动时的运行动画。合理运用这两种动画，就能实现所需的效果。

以牛向前跑为例，帧动画可分解为牛的跑动和牛的移动。根据我们在PC与手机联动小游戏（如障碍越野赛、爬花藤、中秋小游戏）中的开发经验，结合手机浏览器主要采用webkit内核的特点，我们选用animation-timing-function: steps(4, start);来实现帧动画。其原理是不断移动背景图片，并且每种背景会保留一段时间。借助这种方式，我们可以方便地制作帧动画，同时还能利用animation的大量控制属性，深入控制帧动画的细节，如速度、方向、时间等，这里不再详细展开。

牛的跑动图片需要切成特定格式（要保证每种状态的图片大小一致，并合并到一张图片上）。具体代码如下：

.ox2 {
background-image: url("img/ox2.png");
-webkit-background-size: auto 73px;
background-size: auto 73px;
width: 97px;
height: 73px;
-webkit-animation: ox2 1s steps(4, start) 0ms infinite normal backwards;
animation: ox2 1s steps(4, start) 0ms infinite normal backwards;
}

@-webkit-keyframes ox2 {
0% {
background-position: 0 0
}
100% {
background-position: -388px 0
}
}

@keyframes ox2 {
0% {
background-position: 0 0
}
100% {
background-position: -388px 0
}
}

上述代码的要点如下：

• 元素的容器宽高即为元素的大小，设置为width: 97px;。
• 为了适配Retina屏幕，图片按2x大小制作，然后通过background-size: auto 73px;将图片缩小到1/2大小。
• 由于有4个状态，所以animation-timing-function设置为steps(4, start)。
• keyframes使用background-position来移动背景图。因为为了适配Retina将图片缩小了一半，所以移动位置也要缩放一半，即background-position: -388px 0。

这里的难点在于图片的处理，以下提供一些实例供大家参考。

另外，绳子有三个状态，需要分成三个CLASS来编写，以便在开发时切换不同状态：

• 状态一：绳子没套之前的旋转，该动画需循环播放。
• 状态二：绳子套出的动画，此动画只播放一次。
• 状态三：套中牛后牛的挣扎，主要是牛的动画，同时需要有一个没有动画的绳子来表现牛被套着。

三、CSS transform性能

牛除了帧动画，还有运行动画。或许你认为动态修改top、left值就可以实现，但在ISUX文章《被解放的GPU》和《High Performance Animations》中的实验和验证表明，充分发挥GPU的性能是提升游戏性能的快捷途径。

因此，在让素材移动时，应减少使用top、left等属性，而使用transform来触发手机的GPU，从而提升性能。牛的移动等元素移动动画均使用transform来实现。

四、描边字

除了上述重要的技术点，还有一些细节需要注意。设计稿中存在大量描边字，如果将其切成图片，会导致大量的图片素材，增加工作量，降低加载速度，且难以维护。

经过反复实验，我们发现使用text-shadow的多重属性可以实现描边效果。多重属性使用逗号分隔，可为元素设置多个不同参数的属性。关键代码如下：

.text-shadow {
color: #FFE339;
text-shadow: 1px 0 0 #622E00, -1px 0 0 #622E00, 0 1px 0 #622E00, 0 -1px 0 #622E00;
}

上述代码通过设置4个多重属性，分别位于元素的上下左右，从而实现了描边效果。需要注意的是，text-shadow的最后一个分号不能省略，因为CssGaga压缩时会删除最后一个属性的分号，导致页面出错，所以text-shadow不能放在最后。

五、扁平化

从技术角度来看，扁平化设计具有三大优点：

• 图片素材好制作：制作过程相对简单。
• 游戏打开速度快：减少了资源加载时间。
• 运行速度快：图片较小，占用内存少，运行速度更快，甚至还能节省电量。

以下是几个优秀的扁平化游戏示例：

• 中秋小游戏
• 障碍越野赛

我们非常期待设计师们在扁平化游戏设计上进行更多尝试。

六、2x图

最后，介绍一个CssGaga的BUG。在制作兼容Retina的2x图时，如果2x图的长宽不是偶数，那么最后生成的1x雪碧图会出现错位。因此，2x图的长宽必须为偶数大小。

如果你还不知道CssGaga是什么，它是一款强大的页面开发工具，可以自动合并CSS、生成雪碧图、生成兼容Retina的代码、同步资源、生成提单列表等，推荐大家使用。

以上就是HTML5游戏前端开发秘籍，希望能对大家有所帮助，也欢迎大家提出宝贵意见。