絕!2D素材3D效果!

2021-02-15 Creator星球遊戲開發社區

用2D素材實現3D效果!

前言

好久沒寫教程筆記了，不知大夥是否想念教程了？

溫馨提示：所有內容純屬個人瞎玩研究，如要上線項目，請自行評估~ oh

最近逛論壇，看到有一位小夥伴想實現下面這種透視效果。

預期效果

接著，去找了(扒)這個遊戲的素材，都是2d圖片。

圖片素材

這想到兩個方案去實現：

純2d實現：對一張圖片的每個頂點做一次投影變換，算出每個頂點在2d屏幕中的坐標。用3d實現：調整相機參數，圖片放在 Quad (四方形) 上，布置3d場景。

綜合考慮，用3d實現相對方便一點，行動起來吧！

實現

本次主要實現兩個點：

布置場景

新建場景後，在場景中添加4個四方形(Quad)，通過旋轉平移縮放，圍成長方體的四個面。

四個四方形圍成的四個面

接著創建材質（牆/地板/天花板），採用 builtin-unlit.effect(無光照)，並選取對應的texture，再把材質加在對應的四方形上。

創建材質

所有都創建完後，是這個樣子的。

山洞效果

這個洞的深處應該有個漸變黑影，把這個資源類型改成sprite-frame，並加入場景的UI層。

修改資源類型

接著調整一下攝像機的參數，讓這個漸變黑影在中間，預覽運行，結果如下。

山洞效果+陰影遮罩幀動畫

金幣素材是2d的幀動畫，要在3d實現透視效果這裡同樣採用四方形。

原素材有點擠，我們稍微處理一下，讓其每一幀的圖片位置均勻。

這邊用的是 shoebox 拆圖，然後放在ps裡調位置，導出的圖片長寬需要是2的n次冪。

更程式設計師的做法是寫個腳本分割圖片，再重新生成圖片（或者找美術爸爸出圖）

金幣圖片處理

同樣的，也建一個金幣材質，選擇builtin-unlit.effect，選擇transparent(透明)的通道（因為該圖要用到透明），修改tillingOffset(紋理縮放偏移)參數。

創建金幣材質

創建一個四方形，選擇金幣材質，添加動畫，修改tillingOffset中的偏移參數。

創建金幣動畫1

再把動畫過程調成Const，可以看到初步效果。

創建金幣動畫2

最後，多放幾個金幣在場景中，加一些牆紙放牆上～

最後效果預覽更多可能

如果你想繼續把這個做成遊戲的話，可以參考以下幾個步驟：

地圖生成：把地圖塊做成預製體，根據相機的位置，不斷回收前面的和生成後面的地圖塊。碰撞檢測：同樣可以根據攝像機的位置以及角色的位置，和帶檢測物體的位置判斷。

「點讚「 」在看」 鼓勵一下▼


相關焦點

  • ​不用插件,Cinema 4D也可以創建程序化2D和3D裝飾風格教程
    我將告訴你如何渲染2d風格的圖像和3d效果。此外，我們使用Photoshop與您的調色板組成具有alpha in color版本的渲染白色蒙版。作者Alexey Brin 是一名擁有8年以上工作經驗的動畫設計師。喜歡用技術場景創建簡單和複雜的場景。
  • 一起做ROS-DEMO:基於find_object_2d的目標模板匹配識別
    -2d $ sudo apt-get install ros-hydro-find-object-2d2、功能包的可視化使用該功能包有兩個節點find_object_2d及find_object_3d，其中find_object_3d是為kinect之類的深度相機準備的，可以通過在匹配目標後識別目標中心的深度信息輸出目標的三維坐標。
  • 國內外最好的3D列印素材庫
    ，www.yobi3d.com以及www.stlfinder.com來尋找自己想要的素材外，還可以直接登陸素材網站下載。3D Content Centralhttp://www.3dcontentcentral.com免費分享2D和3D素材，包括工程類和影視類，用戶也可以根據自己的要求索取想要的素材，屬於達索。
  • Facebook新研究:加強版CNN,2D照片也能模擬3D效果
    2018年推出的3D功能雖然，FB 在2018已經推出的3D照片功能，並且能夠以一種全新的沉浸式的格式與家人和朋友共享照片。複雜場景的2D照片轉換3D效果也不錯尋找創建3D體驗的新方法除了改進深度學習算法之外，Facebook還致力為手機等行動裝置提供更質量的3D視頻，準確的說是提供深度估算。
  • 深圳木狼科技|Spine2D動畫師、Unity3D
    為了提高《夢中的你》這款作品的2d動畫表現，特別招聘一位擅長2d立繪表情動作的動畫師。《夢中的你》是木狼成立以來最有野心，製作規模最大的商業遊戲。預計今年夏季正式上線。現在加入木狼，有機會在高期待作品上線前期加入團隊，負責《夢中的你》的動畫表現。成為木狼的核心動畫設計師。
  • 2D場景變成3D呈現,Steam上的這款紅白機模擬器非常有意思
    經過了大約五年的研發，作者「Tran Vu Truc」認為《3dSen PC》已經有資格在Steam上出售，讓大家體驗2D變3D的效果。博士告訴大夥：要把紅白機遊戲內的所有圖形轉換成立體像素、多邊形其實是很費工夫的事情。
  • 這幾百個3D卡通素材,讓你的PPT更加生動有趣
    編者語：很長一個階段，我開始使用了新版的
  • PAINT 3D,連小學生都能學會的三維設計大殺器
    你從此擁有了一個龐大無比的三維素材庫。很多模型你可能自己做不出來，但是你可以去下載呀。網上很多三維模型都是免費的。而且質量超高。效果屌到飛起！有同學會問，基本2d對我夠用了，我為什麼要去學3d？我們不得不承認一件事情。從2016年，3D列印，VR和AR的井噴出現，這個世界已經進入了3D的世界了。以後很可能的工作場景就是利用虛擬實境。而進入現實，意味著任何的設計，工作場景都要三維化。甚至我們最普通的PPT。
  • 無需建模,2D圖片秒變3D效果,視角隨意換,高清VR感…
    你有想法，盡情一試~靜態圖片，合成逼真3D效果我們先來看下NeRF，在合成數據集(synthetic dataset)上的效果。NeRF確實強，但在輸入上還需要多張照片……那麼有沒有方法，一張圖片就能玩3D效果呢？問就有。之前，Adobe的實習生就提出了一個智能景深算法，單張2D圖片秒變3D。讓我們感受下效果。
  • 教程丨利用Egret Pro開發3D跑酷遊戲
    最後點擊預覽（內置）（或者預覽瀏覽器）按鈕，就可以看到下面的效果了。攝像機的這個角度看上去有點彆扭，你可以在運行界面，通過調試攝像機的TransForm參數來調整攝像機的位置與角度達到畫面看上去比較舒服。
  • Unity2019.3最新2D/骨骼/IK/動畫/換裝/全面指南!
    想製作這樣的人物動畫效果，需要一些基本的必須準備：Package Manager中下載：2D Animation、2D PSD importer、IK（preview）選中導入的圖片後，在 Inspector 窗口裡點擊 Sprite Editor 。在打開的窗口右上角選擇 Skinning Editor 進入主要操作的界面。
  • 3D場景理解中的點雲深度學習
    具體在3d場景理解中，3d物體識別的應用AI不僅僅在場景理解中有用，產品設計圖片集合中圖片之間的關係。FAQ：   1、 PointNet沒考慮點與點之間的關係，在PointNet ++ 中有考慮。
  • 視頻特效調色預設素材工具包(ffx+3D LUTS) Cinepunch
    這是一組非常棒的國外付費素材，官網售價59美刀，這套素材內容分類非常多，具體請下載後查看，就不一一做介紹了。素材包含3套視頻調色特效預設包+8套光效轉場視頻素材包+2套音效包+1套PR轉場預設+1套AE調色預設包：電影特效預設包(ffx格式，僅支持AE)視頻損壞老效果預設包(ffx格式，僅支持AE)3D LUTS調色預設包(cube/3dl等格式，支持AE/
  • Unity3d-C#入門基礎
    Unity3d-C#入門基礎Unity主要支持3種語言: C# (pronounced C-sharp), an industry-standard language similar to Java or C++; UnityScript
  • 超全3D材質貼圖,這些網站能填滿你的素材庫
    —— 2 —— https://www.textures.com/browse/3d-objects/114553 這個網站呢，類別比較全面註冊之後每天可以免費下載15MB的素材當然了，如果是高級帳號就可以下載更大解析度的素材
  • 3D視覺 | 機器人3D手眼標定實驗(上)
    函數接口：1.void getMatsEth(int* other_info, char* point3d_str, char* point2d_str, char* robot_str, double* mtx33_l, double* mtx33_r, double* mtx44_l, double* mtx44_r)2.void getMatsEih
  • 【收藏】13個「另類」素材網站,打造屬於你的圖紙風格
    本文轉自 AS國際建築與空間（ID：aslearn）畫圖會用到大量的素材來製作分析圖和效果圖，有的一些學生可能不會找得到適合自己的素材
  • Ai教程||3D立體字效果
    今天7君教大家如何使用Ai製作超實用的3D立體字效果，感興趣的7友們快跟著我們的步伐，動手做起來吧。看教程之前，咱們先來欣賞一些立體字海報。今天我們要聊的是在Ai軟體裡利用3d效果做出的一種簡單效果。先來看一些我們經常見到的立體字海報類型。
  • 2D圖片轉3DGif動畫
    軟體簡介如果你想將自己電腦中的某些2d位圖轉換成為3D圖片的話，其實根本做不到，不過你還是可以通過2D To 3D Gif免費版來將位圖轉換偽3D圖片，而且你還要在選擇圖像的時候選擇層次分明的圖像，這樣你在使用2D To 3D Gif免費版的時候才可以更好的生成gif效果，讓你可以對於圖片的轉換更加得心應手！
  • 開發經驗 | 選擇2D美術資源的解析度
    這意味著原始美術素材的一個像素在屏幕上會顯示為2×2、4×4或8×8的實際像素方塊。 所以通常對於像素美術，不必太過注重屏幕解析度，你可以根據素材本身和傳達的感覺，例如復古風、NES風格、高解析度「現代」像素藝術等來調整大小。 Unity現在以資源包的形式提供Pixel Perfect解決方案。