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

    先说下背景，我们做的是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人物混搭的方式到此结束。