網頁遊戲開發整理場景篇

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

網頁遊戲開發整理 場景篇