火星網(wǎng)校
玩游戲就要把3D模型搬上2D舞臺 | 火星時代教育
發(fā)布時間：2024-05-16 12:35:52 瀏覽量：218次
引言
玩游戲就要把3D模型搬上2D舞臺
在游戲開發(fā)中常常需要在UI界面上展示一個3D模型，比如時裝界面里角色換裝展示、Boss挑戰(zhàn)界面里選擇Boss展示等等。
本文將介紹一下在Cocos游戲開發(fā)中實現(xiàn)和平精英中3D模型渲染到2D界面的模型展示效果。
火星時代教育是一家專注數(shù)字藝術(shù)教育的培訓(xùn)機構(gòu)，已有30年歷史。我們開設(shè)包括游戲設(shè)計、動畫培訓(xùn)、AI繪畫、影視后期制作等多門課程。想了解更多？點擊咨詢
本期知識點
1.RenderTexture
渲染貼圖是Camera或Canvas組件的渲染目標(biāo)對象，渲染管線會使用它的RenderWindow作為渲染的目標(biāo)窗口。
我們可以將相機畫面渲染到它上，然后將精靈Sprite的貼圖資源設(shè)置成它。
2.Camera
渲染場景中的相機對象，由項目層的Camera管理。
我們可以通過它的targetTexture指定此相機的渲染輸出目標(biāo)貼圖，默認(rèn)為屏幕。
3.SpriteFrame
精靈幀資源。
我們通過SpriteFrame的texture設(shè)置貼圖對象資源，可以是TextureBase類型。
玩轉(zhuǎn)游戲世界，讓3D模型登上2D舞臺
想要在你的游戲中實現(xiàn)和平精英中3D模型渲染到2D界面的模型展示效果嗎？下面為你詳細講述實現(xiàn)步驟。
1.環(huán)境
引擎版本：Cocos Creator 3.8.1
編程語言：TypeScript
2.資源準(zhǔn)備
創(chuàng)建一個新工程，按照指定結(jié)構(gòu)布局UI界面。確保你已準(zhǔn)備好所有資源。
將商城上的角色預(yù)制體嵌入到你的項目中，準(zhǔn)備好各個元素。
3.編寫代碼
根據(jù)需求編寫代碼，確保ModelRtt組件可以在ModelSprite上實現(xiàn)。設(shè)定各項屬性，包括模型路徑、偏移、視角高度等。
最后，加載模型并渲染到相應(yīng)的Sprite上。
export class ModelRtt extends Component { @property(CCString) modelUrl: string = ""; @property(CCFloat) modelOffsetY: number = 0; @property(CCFloat) orthoHeight: number = 0; modelSprite: Sprite = null;}完成以上步驟后，3D模型渲染到2D界面的效果即可實現(xiàn)。
- 創(chuàng)建大小為512、1024或2048的RenderTexture。
const size = this.node.getComponent(UITransform).contentSize;const modelRtt = new RenderTexture();modelRtt.reset({ width: size.width, height: size.height});- 創(chuàng)建模型，并設(shè)置偏移。
const newNode = new Node();newNode.parent = find("/");const modelNode: Node = instantiate(prefab);modelNode.parent = newNode;modelNode.setPosition(new Vec3(0, this.modelOffsetY, 0));- 實現(xiàn)拖拽事件監(jiān)聽和模型轉(zhuǎn)動效果。
let flag = false;this.node.on(NodeEventType.TOUCH_START, () => { flag = true; }, this);this.node.on(NodeEventType.TOUCH_END, () => { flag = true; }, this);this.node.on(NodeEventType.TOUCH_MOVE, (event: EventTouch) => { if (flag) { modelNode.eulerAngles = new Vec3(0, modelNode.eulerAngles.y + event.getDeltaX(), 0); }}, this);- 獲取創(chuàng)建的相機并設(shè)置相關(guān)參數(shù)。（動態(tài)添加的相機暫不做研究）
// const camera = new Node("Camera").addComponent(Camera); //todo：動態(tài)添加的Camera模型不會動 const camera = this.node.getComponentInChildren(Camera);camera.clearFlags = Camera.ClearFlag.SOLID_COLOR; //設(shè)置緩沖清楚標(biāo)志位camera.projection = renderer.scene.CameraProjection.ORTHO; //設(shè)置相機投影類型camera.orthoHeight = this.orthoHeight; //設(shè)置正交視角高度camera.clearColor = new Color(0, 0, 0, 0); //設(shè)置透明camera.targetTexture = modelRtt; //設(shè)置目標(biāo)RenderTexturecamera.node.parent = newNode;camera.node.position = new Vec3(0, 0, 10);- 設(shè)置目標(biāo)精靈的精靈幀。
const spriteFrame = new SpriteFrame();spriteFrame.texture = modelRtt;spriteFrame.flipUVY = true;this.modelSprite.spriteFrame = spriteFrame;4.效果演示
【100個Cocos實例】實現(xiàn)和平精英中3D模型渲染到2D界面的模型展示效果
原文鏈接：
https://juejin.cn/post/7311603519601147945
熱門課程推薦
熱門資訊
-
探討游戲引擎的文章，介紹了10款游戲引擎及其代表作品，涵蓋了RAGE Engine、Naughty Dog Game Engine、The Dead Engine、Cry Engine、Avalanche Engine、Anvil Engine、IW Engine、Frostbite Engine、Creation引擎、Unreal Engine等引擎。借此分析引出了游戲設(shè)計領(lǐng)域和數(shù)字藝術(shù)教育的重要性，歡迎點擊咨詢報名。
-
2. 手機游戲如何開發(fā)(如何制作傳奇手游，都需要準(zhǔn)備些什么？)
?如何制作傳奇手游，都需要準(zhǔn)備些什么？提到傳奇手游相信大家都不陌生，他是許多80、90后的回憶；從起初的端游到現(xiàn)在的手游，說明時代在進步游戲在更新，更趨于方便化移動化。而如果我們想要制作一款傳奇手游的
-
3. B站視頻剪輯軟件「必剪」：免費、炫酷特效，小白必備工具
B站視頻剪輯軟件「必剪」，完全免費、一鍵制作炫酷特效，適合新手小白?？靵碓囋嚕?/span>
-
游戲中玩家將面臨武俠人生的掙扎抉擇,戰(zhàn)或降?殺或放?每個抉定都將觸發(fā)更多愛恨糾葛的精彩奇遇?！短烀嬗肪哂卸嗑€劇情多結(jié)局,不限主線發(fā)展,高自由...
-
5. Bigtime加密游戲經(jīng)濟體系揭秘，不同玩家角色的經(jīng)濟活動
Bigtime加密游戲經(jīng)濟模型分析，探討游戲經(jīng)濟特點，幫助玩家更全面了解這款GameFi產(chǎn)品。
-
6. 3D動畫軟件你知道幾個?3ds Max、Blender、Maya、Houdini大比拼
當(dāng)提到3D動畫軟件或動畫工具時,指的是數(shù)字內(nèi)容創(chuàng)建工具。它是用于造型、建模以及繪制3D美術(shù)動畫的軟件程序。但是,在3D動畫軟件中還包含了其他類型的...
-
7. 3D動漫建模全過程，不是一般人能學(xué)的會的，會的多不是人?
步驟01:面部,頸部,身體在一起這次我不準(zhǔn)備設(shè)計圖片,我從雕刻進入。這一次,它將是一種純粹關(guān)注建模而非整體繪畫的形式。像往常一樣,我從Sphere創(chuàng)建它...
-
8. 如何自己開發(fā)一款游戲(游戲開發(fā)入門必看：五大獨立游戲開發(fā)技巧)
?游戲開發(fā)入門必看：五大獨立游戲開發(fā)技巧無論您是剛剛起步開發(fā)自己的第一款游戲，還是已經(jīng)制作了幾款游戲，本篇文章中的5大獨立游戲開發(fā)技巧都可以幫助您更好地設(shè)計下一款游戲。無論你對游戲有著什么樣的概念，都
-
?三昧動漫對于著名ARPG游戲《巫師》系列，最近CD Projekt 的高層回應(yīng)并不會推出《巫師4》。因為《巫師》系列在策劃的時候一直定位在“三部曲”的故事框架，所以在游戲的出品上不可能出現(xiàn)《巫師4》
-
10. 3D打印技巧揭秘！Cura設(shè)置讓你的模型更堅固
想讓你的3D打印模型更堅固？不妨嘗試一下Cura參數(shù)設(shè)置和設(shè)計技巧，讓你輕松掌握！
最新文章
