首页 > 代码库 > 网页游戏开发整理——场景篇
网页游戏开发整理——场景篇
先说下背景,我们做的是2d场景加上3d人物,使用的away3d。黑多不愿意全3d的游戏或许会选择这样的混合搭配。方法还是比较多,这里简单记录下我之前想到的。
从7月开始,有很长一段时间没用as3了,有些记不清楚了,这里不会提及具体的away3d相关api和类,根据内容和概念自行选择相应实现。
先说说地图。
2d地图是按照斜45度角画的,要显示正常,需要用正交投影。开始用的flare3d没有正交投影,真的老火,就算那个视角调的再窄,还是和正交不一样。用一个板子(一个矩形平面,sprite或者mesh都可以)来贴这个地图,正对相机,才不会有拉伸。
如下图所示:
要让2d地图看上去没有拉伸和直接看图片是一样的,这个是必须的。
再来说说人物。
人物模型在地图上面,也要看起来是45°的。那囊个放诶?人物是3d的要看上去是45°,那就要和相机保持45°夹角。
像下面这样放上去就可以:
不过这样有问题,有多个人物并列,人物倒地,人物上面挂接特效,武器等情况下。人物和地图,人物和人物的遮挡关系会出错,而且人物倾斜45°在人物旋转,跟随等情况下处理起来麻烦。
人物倒地穿插地图,挂接物穿插地面,人物倒地和人物穿插。
人物自身坐标系和世界坐标系不在对应,人物旋转需要处理成绕自身旋转,移动需要安装世界坐标系方向,当人物的朝向不再是正xyz的时候移动,需要做转换。人物的子节点移动是按照人物的自身坐标系,会和地图以前其他人物出现遮挡问题。
当使用2d公告板来显示特效时问题更严重。
在上面的基础上。
为避免遮挡关系混乱,可以调整人物和地图以及人物与人物的空间位置。遮挡混乱是因为一个平面上物体倾斜造成,如果所有物体都和该平面垂直,各物体与各物体平行就没问题了。
所以调整人物和人物按照他自身坐标系的平面来分布。
地图的话有2个方式来处理:
- 可以调整成与人物保持足够远距离,比如比相机远裁剪面近一点,正交投影不会产生近大远小。
- 或者调整渲染层级地图始终最先渲染,并且不写深度值。
在这种人物的分布情况下和普通的3d场景中人物空间分布是一样的,不会出现遮挡问题。只需要根据视角倾斜度,人物的坐标,来计算出对应的高度即Y值。让他们站在一个斜坡上面,并且是垂直于该斜坡的。
和这个方式差不多的。
只要让地图和人物保持45°角,并且让相机和地图保持垂直,那么表现的效果就是对的。所以可以把地图倾斜,而人物不倾斜的方式。
当人物倾斜时,移动是按照2d的方式移动的,x和y的移动比例都是1。但当地图倾斜,人物不倾斜时,如果仍然按照x和y都是1的比例来移动的话,那么人物就不再是对应地图上面的坐标了。
这里涉及到一个45°游戏中移动问题,有些游戏为了仿真斜45°的影响,在y轴移动上会比x轴上慢。而有些游戏则是相同的。这里根据自己的需求来决定。如果需要移动的速度是一样的。那可以根据视角夹角,来对人物世界坐标和人物地图坐标做转换。
这里地图仍然需要最先绘制出来,方法可以和前面的一样。在这种方式里面,还有2种方法来处理地图和人物的合成效果。之前的都是用的一个相机,可以用2个相机来分开渲染,再合成。
渲染和合成方式:
- 正交相机渲染人物,生成渲染到纹理A。然后正交相机先绘制地图,再把纹理A绘制到地图上面。
- 使用多渲染窗口来合成,在away3d中可以是2个view。一个渲染地图,一个渲染人物。
至此,已经能达到一般要求2d游戏的效果了。
假如,还需要人物和地图有正常的遮挡关系,何为正常的遮挡关系?人物可以向下沉入地图中,被地图半遮挡或者完全遮挡。使用之前的方法可以加掩码渲染,或者改下shader,可能比较麻烦。
最后说一个方式来达到这种效果。
要想像正常3d游戏一样的遮挡那就像正常3d游戏一样的放就行了,是不是觉得顿时就很简单了?
慢着,这里不对啊,因为相机是正交的,而地图相对地图有45°,地图看上去会被缩小!
那么问题来了!其实很简单,根据视角夹角可以计算出,世界空间中x和y的缩放比例,将地图放大该倍数就行了。当然这还涉及到人物世界坐标和地图坐标的转换,也是一样的方式。
好,2d场景和3d人物混搭的方式到此结束。
网页游戏开发整理——场景篇