天天看點

[學習筆記]cocos creator 3.0,實作飛行射擊遊戲的雷射鞭(一)二、元件準備

      最近在做個飛行射擊遊戲當練手,順便熟悉一下ccc3.0的開發流程,大多數飛行射擊遊戲都有雷射炮這種子彈,但看了一些教程,實作效果都是與螢幕方向平行,沒有弧度的雷射,實作後發現效果沒達到自己預期,于是看到了下圖這種雷射效果(我稱為雷射鞭),覺得很酷炫,想要着手實作。

希望實作的效果

[學習筆記]cocos creator 3.0,實作飛行射擊遊戲的雷射鞭(一)二、元件準備

最終實作的效果

[學習筆記]cocos creator 3.0,實作飛行射擊遊戲的雷射鞭(一)二、元件準備

      前期調研了一些資料,本來計劃使用Graphic元件+shader實作,但因為沒有shader基礎,放棄了,後來經過cocos論壇的大神指導,嘗試使用Line元件來實作這個效果。

        肯定有效果更好的實作方式,還望大佬能夠繼續指點。

注:

1、本次實作未使用到對象池,用對象池對性能優化肯定更好。

一、實作思路

        其實實作思路不難,飛機通過發射普通子彈,并收集這些普通子彈的坐标存入數組,将該數組賦給Line元件的拐點參數,使用Line元件繪制雷射。

二、元件準備

2.1 Line元件

        建立一個Node,添加Line元件,如下:

[學習筆記]cocos creator 3.0,實作飛行射擊遊戲的雷射鞭(一)二、元件準備

 參數說明:

Texture:Line元件的貼圖,傳一個橫向的雷射貼圖即可。

[學習筆記]cocos creator 3.0,實作飛行射擊遊戲的雷射鞭(一)二、元件準備

WorldSpace:後續Line元件每個拐點的坐标是否基于世界坐标,因為我其他類型子彈的坐标都是基于世界坐标計算的,是以這個部分也給勾上了。

Positions:拐點的數量,最終會使用貼圖将這些拐點連接配接起來,拐點越多,最終雷射鞭的效果會越平滑,後續使用代碼設定,此處先放空。

Widh:雷射鞭的寬度

Tile:貼圖平鋪設定,我設定為:1,1,設定成不同值會有什麼效果,自行嘗試即可。

Offset:偏移量,沒明白啥意思,先放着不管了

color:預設的白色即可。

2.1 新添加一個Camera

         之是以要添加一個相機是因為COCOS無法同時渲染顯示Line元件和Canvas等2D元件,二者疊加的部分無法顯示Line元件(即便在Line元件上加上UIMeshRenderer也沒用)。

        是以需要單獨使用一個Camera單獨照這個Line元件,首先增加一個Layer:Laser_Bullet,之後把上面的Line元件的Layer設定為:Laser_Bullet。

        之後開始設定Camera的參數:

[學習筆記]cocos creator 3.0,實作飛行射擊遊戲的雷射鞭(一)二、元件準備

 部分參數說明:

Priority:渲染優先級,我把兩個camera的優先級都設定為0,如果雷射鞭的camera的優先級比畫布的優先級數字小的話,可能會被後渲染的畫布給覆寫掉。

Visibility:把之前添加的Laser_Bullet給勾上就可以了,因為我們隻需要他顯示雷射鞭。

Projection:選擇正交

OrthoHeight:480和另一個Camera保持一緻

        添加一個Canvas(設定與主Canvas一緻即可),将這個新添加的Camara設定為這個Canvas的2D渲染相機。

[學習筆記]cocos creator 3.0,實作飛行射擊遊戲的雷射鞭(一)二、元件準備

        此時的節點樹如下:

[學習筆記]cocos creator 3.0,實作飛行射擊遊戲的雷射鞭(一)二、元件準備

下一篇:

[學習筆記]cocos creator 3.0,實作飛行射擊遊戲的雷射鞭(二)

繼續閱讀