网页游戏开发整理——场景篇

先说下背景,我们做的是2d场景加上3d人物,使用的away3d。黑多不愿意全3d的游戏或许会选择这样的混合搭配。方法还是比较多,这里简单记录下我之前想到的。

从7月开始,有很长一段时间没用as3了,有些记不清楚了,这里不会提及具体的away3d相关api和类,根据内容和概念自行选择相应实现。

先说说地图。

2d地图是按照斜45度角画的,要显示正常,需要用正交投影。开始用的flare3d没有正交投影,真的老火,就算那个视角调的再窄,还是和正交不一样。用一个板子(一个矩形平面,sprite或者mesh都可以)来贴这个地图,正对相机,才不会有拉伸。

如下图所示:

要让2d地图看上去没有拉伸和直接看图片是一样的,这个是必须的。

再来说说人物。

人物模型在地图上面,也要看起来是45°的。那囊个放诶?人物是3d的要看上去是45°,那就要和相机保持45°夹角。

像下面这样放上去就可以:

不过这样有问题,有多个人物并列,人物倒地,人物上面挂接特效,武器等情况下。人物和地图,人物和人物的遮挡关系会出错,而且人物倾斜45°在人物旋转,跟随等情况下处理起来麻烦。

人物倒地穿插地图,挂接物穿插地面,人物倒地和人物穿插。

人物自身坐标系和世界坐标系不在对应,人物旋转需要处理成绕自身旋转,移动需要安装世界坐标系方向,当人物的朝向不再是正xyz的时候移动,需要做转换。人物的子节点移动是按照人物的自身坐标系,会和地图以前其他人物出现遮挡问题。

当使用2d公告板来显示特效时问题更严重。

在上面的基础上。

为避免遮挡关系混乱,可以调整人物和地图以及人物与人物的空间位置。遮挡混乱是因为一个平面上物体倾斜造成,如果所有物体都和该平面垂直,各物体与各物体平行就没问题了。

所以调整人物和人物按照他自身坐标系的平面来分布。

地图的话有2个方式来处理:

  1. 可以调整成与人物保持足够远距离,比如比相机远裁剪面近一点,正交投影不会产生近大远小。
  2. 或者调整渲染层级地图始终最先渲染,并且不写深度值。

在这种人物的分布情况下和普通的3d场景中人物空间分布是一样的,不会出现遮挡问题。只需要根据视角倾斜度,人物的坐标,来计算出对应的高度即Y值。让他们站在一个斜坡上面,并且是垂直于该斜坡的。

和这个方式差不多的。

只要让地图和人物保持45°角,并且让相机和地图保持垂直,那么表现的效果就是对的。所以可以把地图倾斜,而人物不倾斜的方式。

当人物倾斜时,移动是按照2d的方式移动的,x和y的移动比例都是1。但当地图倾斜,人物不倾斜时,如果仍然按照x和y都是1的比例来移动的话,那么人物就不再是对应地图上面的坐标了。

这里涉及到一个45°游戏中移动问题,有些游戏为了仿真斜45°的影响,在y轴移动上会比x轴上慢。而有些游戏则是相同的。这里根据自己的需求来决定。如果需要移动的速度是一样的。那可以根据视角夹角,来对人物世界坐标和人物地图坐标做转换。

这里地图仍然需要最先绘制出来,方法可以和前面的一样。在这种方式里面,还有2种方法来处理地图和人物的合成效果。之前的都是用的一个相机,可以用2个相机来分开渲染,再合成。

渲染和合成方式:

  1. 正交相机渲染人物,生成渲染到纹理A。然后正交相机先绘制地图,再把纹理A绘制到地图上面。
  2. 使用多渲染窗口来合成,在away3d中可以是2个view。一个渲染地图,一个渲染人物。

至此,已经能达到一般要求2d游戏的效果了。

假如,还需要人物和地图有正常的遮挡关系,何为正常的遮挡关系?人物可以向下沉入地图中,被地图半遮挡或者完全遮挡。使用之前的方法可以加掩码渲染,或者改下shader,可能比较麻烦。

最后说一个方式来达到这种效果。

要想像正常3d游戏一样的遮挡那就像正常3d游戏一样的放就行了,是不是觉得顿时就很简单了?

慢着,这里不对啊,因为相机是正交的,而地图相对地图有45°,地图看上去会被缩小!

那么问题来了!其实很简单,根据视角夹角可以计算出,世界空间中x和y的缩放比例,将地图放大该倍数就行了。当然这还涉及到人物世界坐标和地图坐标的转换,也是一样的方式。

好,2d场景和3d人物混搭的方式到此结束。

时间: 2024-08-06 10:50:35

网页游戏开发整理——场景篇的相关文章

网页游戏开发流程小结

哥们转手游了,把之前的东西分享一下,不过不是很全...就列了大纲,大家可以给点意见... xmind文件地址是:http://www.xmind.net/m/FtFq/ 网页游戏开发流程小结,布布扣,bubuko.com

HTML5 2D平台游戏开发——地图绘制篇

此前已经完成了一部分角色的动作,现在还缺少可以交互的地图让游戏看起来能玩.不过在开始之前应当考虑清楚使用什么类型的地图,就2D平台游戏来说,一般有两种类型的地图,Tile-based和Art-based,即基于瓦片风格和美术风格两种.Tile-based的典型代表是<Super Mario>(超级马里奥),Art-based记不太清楚了,能够回想起来的是去年出的一款叫做<Owlboy>(猫头鹰男孩)的游戏.      Super Mario  Owlboy 由于Art-based的

【转】 [Unity3D]手机3D游戏开发:场景切换与数据存储(PlayerPrefs 类的介绍与使用)

http://blog.csdn.net/pleasecallmewhy/article/details/8543181 在Unity中的数据存储和iOS中字典的存储基本相同,是通过关键字实现数据存储与调用. 下面来介绍一下Unity用来存储数据的PlayerPrefs 类. 使用PlayerPrefs可以在在游戏会话中保持并访问玩家偏好设置. 在Mac OS X上PlayerPrefs存储在-/Library/PlayerPrefs文件夹, 名文unity/[companyname]\[pro

Cocos2d-x游戏开发之第一篇《创建工程》

前言 以我的工作环境配置而言,只供大家参考,请知悉! 一.cocos2d-x-2.2.5如何创建一个工程 1.打开cmd控制台,cd到D:\cocos2d-x-2.2.5\tools\project-creator: 2.输入命令:create_project.py -project MyGame -package com.gzd.game -language cpp 后,如果看到如下内容(Have Fun!): 就说明创建工程成功了,会在D:\cocos2d-x-2.2.5\projects目

关于微信网页/H5游戏开发中二维码无法识别的解决方法

我接触微信H5开发已经有一年多了,做过很多案例也遇到很多的问题.今天我把困扰我半年之久的问题分享出来,也就是关于微信网页/H5游戏开发中二维码无法识别的解决方法. 我在百度搜索了许久,关于微信H5网页/游戏开发问题以及解决方案的相关文章少之又少,在相关前端交流群中问别人,一问三不知,平时这些群就会上班吹牛逼,真正交流问题的人少又少,真是揪心啊,最后还是得靠自己解决了. [这里,我先举个栗子] 上面这个页面,相信从事微信H5开发的人应该很熟悉,就是常见的分享到朋友圈的页面,通常以[引导分享图标]+

Unity3D游戏开发之开发游戏带来的问题

昨日曾就某投资人把移动团队失败原因之中的一个归于选择Unity引擎进行了一番评论,工具本身无罪,但怎样理解工具.正确使用Unity引擎确实须要讨论,在选择Unity之前你也许须要了解下这个引擎实际开发过程中的技术特点.以及适应的游戏产品类型,热心读者Fxcarl昨天就这个问题专门撰文一篇,来帮助大家了解Unity游戏开发.分享心得,推荐阅读. 代码驱动带来的技术题 游戏碎片化.U3D 引擎有个非常有力的特色,就是实时编译执行.这意味着不管在不论什么时候,仅仅要按下执行图标,当前的场景就会进入可执

Unity3D游戏开发之如何截屏的技能培训

下面我们开始今天的Unity3D技能培训. 我们学习Unity3D培训目标:让U3D初学者可以更快速的掌握U3D技术,自行制作修改素材,可以独立完成2D.3D小规模游戏及网页游戏开发. 今天我们来做点简单的东西,做个什么呢?答案就是截屏.作为一名热爱单机游戏的玩家,每次在玩游戏的同时截取游戏中比较喜欢的画面,特别是学习了Unity3D以后玩游戏的时候更多地是从一个游戏设计者的角度来看待游戏,换句话说,可能关注技术的成分更多一点吧.比如在写<Unity3D游戏开发之自由视角下的角色控制>和<

Unity3D游戏开发之网络游戏服务器架构设计培训(如何做一名好主程)

在我们初期学习Unity3D培训目标:让U3D初学者可以更快速的掌握U3D技术,自行制作修改素材,可以独立完成2D.3D小规模游戏及网页游戏开发.后面就应该朝着主程的方面前进 今天给大家讲一下如何做一个好的主程 入手 假如,我现在接手一个新项目,我的身份还是主程序.在下属人员一一到位之前,在和制作人以及主策划充分沟通后,我需要先独自思考以下问题: 1.服务器跑在什么样的操作系统环境下?2.采用哪几种语言开发?主要是什么?3.服务器和客户端以什么样的接口通讯?4.采用哪些第三方的类库? 除了技术背

Unity3D游戏开发之网络游戏服务器架构设计培训

下面我们开始今天的Unity3D游戏开发技能培训. 我们专业培养"游戏主程",挑战20W年薪,初期学习Unity3D培训目标:让U3D初学者可以更快速的掌握U3D技术,自行制作修改素材,可以独立完成2D.3D小规模游戏及网页游戏开发. 今天给大家讲一下如何做一个好的主程 入手 假如,我现在接手一个新项目,我的身份还是主程序.在下属人员一一到位之前,在和制作人以及主策划充分沟通后,我需要先独自思考以下问题: 1.服务器跑在什么样的操作系统环境下?2.采用哪几种语言开发?主要是什么?3.服