網頁遊戲開發整理——情境篇

標籤：網頁遊戲   away3d   flash   2d地圖   3d人物   

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

網頁遊戲開發整理——情境篇