开发者社区> 华章计算机> 正文

《HTML5 2D游戏编程核心技术》——第3章,第3.9节使用视差产生视深的假象

简介:
+关注继续查看

本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第3章,第3.9节使用视差产生视深的假象,作者[美] 戴维·吉尔里,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.9 使用视差产生视深的假象
如果你曾在行驶中的汽车座椅上观察到自己的手相对于电线杆在高速运动,你就会知道,接近你的物体比远离你的物体移动得快。这种现象称为视差。
Snail Bait游戏是一个二维平台游戏,但它也应用了一些视差特效,使得游戏中的平台看起来比游戏背景更接近跑步小人。Snail Bait游戏是通过让平台比背景滚动的速率更快来实现这种视差的,如图3.10所示。顶部截图显示了在特定时间点的背景,底部截图显示了经过一些游戏帧后的背景。从这两个截图中你可以看到,在相同的时间内,平台移动的速度要比背景快得多。

图3.10 视差:平台(近的)滚动比背景(远的)滚动快


535cae4d992e9aea31e14c78e510a8f83b1292a0

为了实现视差,我们需要做的是要修订drawPlatforms()函数,如程序清单3.18所示。
程序清单3.18 修订后的drawPlatforms()函数


f36f01f88643001add018ba04ef966e9619eb2a8

原始版本的drawPlatforms()函数简单地遍历平台数据,对每一个数据实例调用drawPlatforms()函数,如程序清单3.3所示。修订后的drawPlatforms()函数将游戏canvas元素的坐标系向左平移platformOffset个像素点,遍历数据,然后再将坐标系平移回调用drawPlatforms()函数之前所处的位置。
修订后的drawPlatforms()函数在实现滚动平台时,同程序清单3.14中列出的函数drawBackground()滚动背景类似。Snail Bait游戏使用两个偏移量来分别滚动背景和平台:一个用于背景,另一个用于平台。
既然要使用平台偏移量来滚动平台,就必须计算该数值。程序清单3.19显示了Snail Bait游戏中setPlatformOffset()函数的实现,该函数计算平台偏移量的方法同程序清单3.15中setBackgroundOffset()函数计算背景偏移量的方法类似。
程序清单3.19 设置平台速度和偏移量


584a14bd42ee666b86cce5c9868f67b65f0cf16b

视差效果的最后一个问题是如何更新draw()函数,来完成滚动平台。修订版本的draw()函数如程序清单3.20所示。
程序清单3.20 修改过的draw()函数


4dcb83f26109e1715f7d11b40b698e3a47beca58

对于每一个动画帧来说,draw()函数通过setPlatformVelocity()函数设置平台的移动速率,接着设置偏移量,然后绘制背景、跑步小人以及平台。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗?
尤雨溪在发布 Vite 之后写了一条推,感觉不会在用 webpack 了(Vue-cli 基于 Webpack 开发,并配置了 Webpack 打包规则),Sean 是 Webpack 核心开发者,会一些中文,在尤大这条下面直接感叹。Vue-cli 一直是 Vue 2 默认官方脚手架工具,Vue-cli 基于 Webpack 开发。Vue 3 发布后,尤大同时发布了 Vite ,那么 Vue 3 同时有两个前端打包工具 Vite 和 Vue CLI,那么他们俩应该怎么选呢?
12 0
Thymeleaf 5 分钟教程
Thymeleaf 是一个用于 web 和独立环境的现代服务器端 Java 模板引擎。 Thymeleaf 的主要目标是为开发工作流程带来优雅的自然模板ー HTML,它既可以在浏览器中正确显示,也可以作为静态原型工作,从而加强开发团队之间的协作。 有了 Spring Framework 的模块、大量与您最喜欢的工具集成的功能,以及插入您自己功能的能力,Thymeleaf 是现代 HTML5 JVM web 开发的理想选择ーー尽管它可以做的还有很多。 用 Thymeleaf 语言编写的 HTML 模板看起来和工作方式仍然类似于 HTML,使得在应用程序中运行的实际模板仍然可以作为有用的设计工件工
7 0
用惯了其他人的库,自己来实现一个动图图表生成工具,真香!
用惯了其他人的库,自己来实现一个动图图表生成工具,真香!
9 0
前端面试常问cookie、session、localStrorage、sessionStrorage区别以及应用场景
以上文章讲述的是【线上系统打如何正确打日志】接下来我总结一下【前端面试常问sessionStrorage、localStrorage、cookie、session的区别以及应用场景】。
6 0
markdown 替代品 asciidoc 介绍
AsciiDoc,它的设计初衷就是为了解决写书规模的问题,并且是 O’Reilly 的在线出版平台 Atlas 的推荐语言。经过一番学习,我觉得 Asciidoc 确实很适合电子书制作。 AsciiDoc 相比 Markdown 支持更多的格式,包括而不限于: • 文档属性,设置作者、版本信息等。 • 语法高亮。 • 表格。 • Include 功能,将大文档拆分几个文件。 • 自定义块语法,可扩展性。
9 0
2022面试不完全指南
2022面试不完全指南
10 0
Python web服务器2: http协议
Python web服务器2: http协议
12 0
用Python分析BOSS直聘的薪资数据,年后找工作有方向了!
用Python分析BOSS直聘的薪资数据,年后找工作有方向了!
5 0
数据库五章其四 ——数据库设计
数据库五章其四 ——数据库设计
4 0
牛逼!TCP 粘拆包问题及 Netty 中的解决方案
本文选自 Doocs 开源社区旗下“源码猎人”项目,作者 AmyliaY。
6 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载