《HTML5 2D游戏编程核心技术》——第3章,第3.9节使用视差产生视深的假象
本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第3章,第3.9节使用视差产生视深的假象,作者[美] 戴维·吉尔里,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
3.9 使用视差产生视深的假象
如果你曾在行驶中的汽车座椅上观察到自己的手相对于电线杆在高速运动,你就会知道,接近你的物体比远离你的物体移动得快。这种现象称为视差。
Snail Bait游戏是一个二维平台游戏,但它也应用了一些视差特效,使得游戏中的平台看起来比游戏背景更接近跑步小人。Snail Bait游戏是通过让平台比背景滚动的速率更快来实现这种视差的,如图3.10所示。顶部截图显示了在特定时间点的背景,底部截图显示了经过一些游戏帧后的背景。从这两个截图中你可以看到,在相同的时间内,平台移动的速度要比背景快得多。
图3.10 视差:平台(近的)滚动比背景(远的)滚动快
为了实现视差,我们需要做的是要修订drawPlatforms()函数,如程序清单3.18所示。
程序清单3.18 修订后的drawPlatforms()函数
原始版本的drawPlatforms()函数简单地遍历平台数据,对每一个数据实例调用drawPlatforms()函数,如程序清单3.3所示。修订后的drawPlatforms()函数将游戏canvas元素的坐标系向左平移platformOffset个像素点,遍历数据,然后再将坐标系平移回调用drawPlatforms()函数之前所处的位置。
修订后的drawPlatforms()函数在实现滚动平台时,同程序清单3.14中列出的函数drawBackground()滚动背景类似。Snail Bait游戏使用两个偏移量来分别滚动背景和平台:一个用于背景,另一个用于平台。
既然要使用平台偏移量来滚动平台,就必须计算该数值。程序清单3.19显示了Snail Bait游戏中setPlatformOffset()函数的实现,该函数计算平台偏移量的方法同程序清单3.15中setBackgroundOffset()函数计算背景偏移量的方法类似。
程序清单3.19 设置平台速度和偏移量
视差效果的最后一个问题是如何更新draw()函数,来完成滚动平台。修订版本的draw()函数如程序清单3.20所示。
程序清单3.20 修改过的draw()函数
对于每一个动画帧来说,draw()函数通过setPlatformVelocity()函数设置平台的移动速率,接着设置偏移量,然后绘制背景、跑步小人以及平台。
《HTML5 2D游戏编程核心技术》——导读 本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的目录,作者[美] 戴维·吉尔里,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
相关文章
- Cocos2D:塔防游戏制作之旅(二)
- (NO.00003)iOS游戏简单的机器人投射游戏成形记(四)
- 【已解决】[求助] 求虚拟机防检测代码-VM虚拟机防游戏检测(虚拟机躲避游戏检测工具)
- java实现取球游戏
- 教你怎么做游戏运营数据分析
- 亲历H5移动端游戏微信支付接入及那些坑(一)——支付方式与坑
- 【刷题】面筋-游戏平衡性
- 【贪心】LeetCode 55. 跳跃游戏【中等】
- 6个免费的C++图形和游戏库
- 6步搭建一个飞机大战游戏
- Flask开发成语接龙游戏,闲来无事手机玩玩自己写的游戏吧!
- 【面试攻略】C++面试-紫龙游戏
- Python游戏开发入门:pygame事件处理机制-3
- 【COCOS2DX-游戏开发之三三】TMX边界控制与小窗体内预览TMX
- 介绍自己上架的第一个游戏
- 游戏制作之路(44)地形设置