HTML52D游戏开发游戏开发:图形和动画图形和动画
简介:简介: 在本系列文章中,HTML5 专家 David Geary 将告诉您如何一步一个脚印地实现 HTML5 的 2D 视频游戏。本期文章将
介绍 Canvas 图形和 HTML5 动画。您将了解如何绘制游戏的图形,以及如何让它们运动起来。您还将学习利用 HTML5 实现
动画的最佳方式,如何滚动背景,以及如何实现视差,从而模拟三维效果。
图形和动画是任何视频游戏最根本的方面,所以在本文中,我将从 Canvas2D API 的简要介绍开始,对 Snail Bait 的中央动画
的实现进行讨论。在本文中,您将学习如何:
将图像和图形基元绘制到画布上
创建流畅的、无闪烁的动画
实现游戏循环
以帧数每秒为单位监视动画的速度
滚动游戏的背景
使用视差来模拟三维效果
实现基于时间的运动
本文中所讨论的代码的最终结果如图 1 所示:
图 1. 滚动背景并监视帧速率
背景和平台水平滚动。这些平台在前景中,所以它们的移动明显快于背景,这样会形成一个温和的视差效果。在游戏开始时,
背景由右至左滚动。在结束某个级别时,背景和平台开始逆转方向。
在开发的这个阶段,跑步者不动。此外,游戏还没有经过碰撞检测,所以当跑步者的下面没有平台时,她会漂浮在半空中。
最后,游戏画布的上方和左侧的图标会显示剩余生命的数量(如 本系列第一篇文章中的图 1 所示)。目前,该游戏会在这个
位置上显示当前动画速度(以帧数每秒为单位)。
即时模式图形即时模式图形
Canvas 是一个即时模式 图形系统,这意味着它会即时绘制您指定的内容,然后即时忘记。可伸缩矢量图形 (Scalable Vector
Graphics, SVG) 等其他图形系统实现了保留模式 图形,这意味着它们会保存一个将要绘制的对象的列表。由于不会因保存显
示列表而产生开销,所以 Canvas 的速度比 SVG 更快一些;但是,如果您想保存一个用户可以操作的对象列表,则必须自己
在 Canvas 中实现该功能。
创建了这样的游戏,就会更容易理解相关的代码。(请参阅 下载,获得本期的 Snail Bait 实现。)
HTML5 Canvas 概述概述
Canvas 2D 上下文提供了一个广泛的图形 API,让您可以在平台视频游戏中实现文本编辑器中的一切。在我撰写这篇文章的
时候,该 API 包含了超过 30 个方法,但 Snail Bait 只使用了其中的极少数,如表 1 所示:
表表 1. Snail Bait 使用的使用的 Canvas 2D 上下文方法上下文方法
方法 描述