Cocos 插件教程:編寫帶擴展屬性插件的經驗分享

2020-12-25 CSDN技術社區

這兩天用cocos插件編寫了一個2d粒子控制項。很明顯的感受是官方文檔不是很完善,那篇超級長的說明脈絡也不是很清晰,以至於我在此期間掉了不少坑走了不少彎路,不過這次cocos放出來的插件系統還是很靈活很強大的,從編輯到最終輸出都可以由我們自定義實現。這篇教程就來分享下我這兩天做擴展屬性過程中總結的經驗,探討在插件的編寫過程中的一些技巧,幫助下後來者。

一、如何開始?

可能大家之前看過這篇《Cocos Studio 擴展說明》(下稱《說明》):

http://cn.cocos2d-x.org/tutorial/show?id=2650

這說明篇幅之大之長,估計嚇退了不少小夥伴。鼓起勇氣讀下去的估計半路上也睡倒了一片。(我就看到睡著了幾次,信息量實在太大了,催眠神器啊有木有。。。)

實際插件的編寫並沒那麼複雜,直接修改官方提供的sample工程即可。

打開sample工程。(sample工程的路徑請看《說明》第3點「示例工程位置」)

可以看到裡邊有這麼多文件:

說明:

其中DataModel、Templates和ViewModel是官方的一個Custom控制項的示例,Lua文件夾下也有類似的三個文件夾,這個是帶文本sprite插件的源碼。

Editor是屬性區自定義控制項的例子。

PublishExtend是自定義導出數據格式的例子。

AddinConfig是插件的配置文件,配置當前插件所依賴的模塊,目前我們不需要改動。

複製一份插件工程,保留我們希望使用的例子來作為模版,其他文件刪除。

我期望寫個粒子插件,不需要自定義Editor和導出數據格式,因而我只保留ExtensionModel和Lua兩個文件夾,並將「Lua」重命名為「Particle」,如下所示:

然後根據我們的需要對剩下的文件做一些修改:

1. LuaObject.addin.xml文件

修改為T4模版生成的類。

2. ViewModel下的CustomParticleObject.cs文件

這個文件需要改三處

a.這四個屬性主要用於編輯器顯示控制項的一些信息。還有CustomParticleObject繼承的類型也需要根據自己的需要修改。(具體看《說明》中的「視圖模型」部分)

 

b.創建插件時的默認名稱。

 

c.依賴的lua文件。即LuaScript文件夾下對應本插件的Lua文件。

3.DataModel的CustomParticleObjectData.cs修改如下兩處:

4. Lua文件夾下的CustomParticleObject.tt模板文件,修改繼承的對象類型和ViewModel類的類名。(具體看《說明》「Lua 代碼生成模板」部分)

OK,改完這些,我們就配置完一個插件工程了。接下來我們還需要在lua中完成對引擎的擴展,然後在編輯器中調用lua的接口。

PS:2.2.1升級至2.2.5之後,需要相應地升級插件工程,具體可看新版本示例工程中Addins/Addins.Sample/Lua/修改記錄.txt

二、 編寫對應的Lua文件

這一步主要是將我們的接口準備好,給上邊配置的C#工程調用。

首先是必須做的四件事:

1.在文件的最後返回一個table給插件工程,此後插件工程會在這個table上找需要的接口。這裡我們稱這個table為「container」

2.為「container」添加CreateCustomNode的工廠函數,創建一個我們擴展的Cocos2d-x對象並返回。

3.為「container」添加一個GetBaseType函數,返回我們插件的基礎類型。(之後我們的插件也會有這個基礎類型的編輯接口。)

4.把編寫出來的文件放到cocos文檔路徑的Addins/LuaScript下

然後在1所述的table上添加一些屬性接口來跟插件工程進行數據交換,可交換的數據只能是如下這些數據類型,且一次只能交換一個數據:

Bool

Int

String

Double

Float

Color

ResourceData

PS:lua下沒有區分Float、Double和Int,這些都用double來承載。

技巧:

1.插件工程在table上查找欄位的方式不是用rawget方式,因此元表還是可用的,我們可以給table設置__index元表,重定向到我們的所擴展的2d-x對象,某些我們所擴展的對象已經有的簡單接口用元表定位即可,不需要在table中再寫一次,減少一點工作量。

2.如果這個lua文件出錯了,cocos不會給什麼有用的調試信息。我們先在一個2d-lua工程裡邊調試,直到所有接口都正常工作後再放到cocos中,這樣能節約不少時間。

3.這個文件跟最終導出的數據不一定有關聯。

三、 在插件工程中添加與lua層交換數據的接口

主要是給視圖模型(ViewModel文件夾下那個對象)編寫一些property,每編寫一個property編輯器就會在屬性區生成一個屬性控制項。然後就可以用這些屬性控制項來進行可視化編輯。

與lua的通訊需要通過LuaValueConverter來調用Lua層的接口,進行數據交換。

一個基本的property大概是這樣的:

        [UndoPropertyAttribute]

        [DisplayName("TangentialAccel")]

        [Category("Group_Feature")]

        [PropertyOrder(-99)]

        [Browsable(true)]

        public float TangentialAccel

        {

            get 

            {

              return luaValueConverter.GetFloatValue("getTangentialAccel");

            }

            set

            {

              luaValueConverter.SetFloatValue("setTangentialAccel",value);

                this.RaisePropertyChanged(() => this.TangentialAccel);

            }

        }

首先是幾個用中括號包著的attribute、當前property的聲明然後是getter、setter定義。Attribute值的作用可以看看《說明》的「屬性區擴展」一節。

其次還有setValue函數。這個函數在進行克隆操作時發揮作用。將上述寫的property賦值給傳進來的cObject對象相對應的property即可。

技巧:

1.如果有比較多的屬性的話,可以先寫同一類型的擴展屬性,調試到可用後複製黏貼,修改名字。

2.可以用Cocos Studio.Basic.LogConfig.Output.Info(String )在C#插件工程中輸出錯誤信息。

3.調試時使用VS的「調試」-「附加到進程」,附加到Cocos Studio主進程進行調試,C#代碼出錯時,VS會幫你指出出錯的位置並且有詳細的調試信息。所有導致崩潰的錯誤一般都能夠定位到。

4.目前lua下沒有輸出錯誤信息的接口,少量的調試信息可以用一個text控制項放在創建的節點上做輸出。Lua下socket和io模塊還能夠使用,我們可以利用這兩個模塊來輸出調試信息,我使用的是socket,大家可以參考下我的源碼。cocos的研發同學表示會儘快提供log接口,到時就沒那麼麻煩了。

四、 編輯DataModel

即CustomParticleObjectData.cs文件,以property的方式聲明下各個需要被保存到csd文件的性質,前面寫上[ItemProperty] [JsonProperty]。這樣這些數據就會被保存到csd文件當中了,我們關掉編輯器再次打開,編輯過的數據就不會丟失了。生成T4模板的時候,模板裡邊引用的值也是從這裡來的。

注意顏色類型的性質要用ColorData聲明(是的我被坑過)。這裡可能出錯的點是數據類型寫錯,現象是不能保存也不能導出。

五、 代碼生成模板

即Lua文件夾下的CustomParticleObject.tt模板文件。功能是將編輯器編輯出來的值按特定模板輸出出來。

技巧:

如果你看過我的lua文件和T4模板的話,你會發現二者之間毫無關聯。我的lua文件中的CreateCustomNode是創建了一個node對象然後再建一個particle對象做為node的子對象。這樣做的目的是為了能夠實現更換粒子模板的效果(更換粒子模板需要重新生成粒子對象)。

其實T4就是根據模板將值填寫到字符串中,最終保存到文件裡,願意的話,生成C++代碼都沒問題。

相關焦點

  • Cocos Creator 3D 插件教程(一):看你骨骼驚奇,我帶你上車!
    3D 編輯器中,點擊菜單欄中的擴展->擴展管理器}    ]  }}如上所示,增加contributions屬性,並在裡面增加menu來自定義插件菜單。path:插件菜單的顯示位置,支持a/b/c表示多級菜單。contributions是 Creator 3D 插件中非常重要的一個配置屬性,大部分插件功能都是配置在裡面。2.在編輯器中查看插件菜單回到編輯器中,發現菜單欄並沒有出現剛剛我們定義的新菜單。我們打開擴展管理器,點擊重啟(必要情況下,可能得重啟下編輯器)。
  • 編寫jquery插件的分享
    作為一個前段程式設計師,肯定經常用到一些javascript插件吧,不得不承認,jquery是其中的比較優秀的插件之一,那麼我們有沒有想過我們自己也可以來封裝一個插件呢,下面我給大家分享一些方法,希望對大家有些幫助。
  • wordpress表格插件 TablePress 及插件擴展響應式表格的使用教程
    使用教程安裝插件之後,您可以在 WordPress 控制面板的「TablePress」頁面創建或者管理表格。tablepress responsive tables要想解決手機端錯誤的情況,就得用這個tablepress的擴展插件。
  • Chrome插件修改教程(一款GitHub的插件為例,附樣品)
    把transform和left屬性強制刪除,設置就行(unset)在下面的class裡找到設置右側屬性的類(本例中見下圖)本方法因為沒有使用transform屬性,移動動畫會丟失。不想加animation動畫,又沒想到更好的方法。。。湊活用吧,反正主要不是看動畫的。強迫症患者
  • 2020年,前端開發者必備的10個VS Code擴展插件
    它最大的一個特點是,插件多可自定義。MarketPlace(插件商店)提供了大量擴展插件,開發人員完全可以根據需求進行自定義設置,這也有助於編寫高質量的代碼。ESLint我難以評價該插件,因為它有很多追隨者,但也有很多開發者不喜歡它。而毋庸置疑的是,該插件有助於編寫簡潔代碼,如果你是JavaScript開發者,那這個下載量達2400萬次的擴展插件是最好的選擇。3.
  • Sketchup 2017 全套插件+教程!【附Skatter軟體+教程】
    第三部分--擴展插件篇第四部分--擴展插件篇+視頻教程--價值:399元的插件高端·系統教程限時鉅惠活動價:僅 99元  統一為購買成功者發送課程文件+配套視頻+素材大禮包本套高端系統插件教程致力於將娛樂社交的元素融入在線學習中,通過「社交+教育」的模式,讓更多的用戶帶著樂趣分享實惠,享受全新的共享式學習體驗。
  • 8款耀眼的jQuery/HTML5焦點圖滑塊插件
    jQuery是一款非常強大的Javascript框架,我們在html5tricks上也分享不少關於jQuery的教程和應用。今天我們要來分享一些jQuery結合HTML5實現的超酷焦點圖滑塊插件,一起來看看。
  • 南方CASS測繪全套演示插件合集!教程+講解+插件!必備資料
    「最新版南方CASS測繪全套演示插件合集,(教程+講解+插件)超詳細匯總!」「最新版南方CASS測繪全套演示插件合集,(教程+講解+插件)超詳細匯總!」目錄:1.CASS9.1教程2.CASS初學者視頻教程3.CASS文檔教程及小程序插件4.CASS多種土方計算教程
  • 「插件」AE/PR的視頻特效擴展包插件Motion Factory全解鎖特別版
    Motion Factory是一款適用於AE和PR的視頻特效擴展包,能夠幫助你製作出各種各樣的視頻特效。軟體包含了多個插件,可構建不一樣的視覺效果,豐富了特效設計功能。今天為大家帶來了這款軟體的安裝教程,需要的用戶可下載體驗,下載地址在文章結尾處。
  • WordPress插件 Table of Contents Plus 文章目錄索引/層級輸出所有分類、頁面及使用教程
    插件特點說一下它們的不同之處:1、Table of Contents Plus插件可以選擇背景色。如圖:2、Table of Contents Plus插件只能可視化全局設置,在文章中需要用短代碼設置。3、Table of Contents Plus插件可以在頁面中創建層級輸出所有分類和頁面的頁面。
  • 20款常用PS擴展插件!美工設計電腦必備
    每款瀏覽器基本都可以安裝擴展程序,其實PS軟體同樣有類似的功能,比如我們前幾天測評的油猴管理器,用過的人估計都已經感受到它的強大了吧,其實PS同樣如此,安裝一些插件後,對你做設計或者修圖都會極大的便利。
  • 【PyQGIS】構建Python插件(QGIS3)
    插件是擴展QGIS功能的好方法。
  • 職場Excel表格插件-《Power Click》分享
    職場Excel表格-Power Click插件經過4個月密集調試。今天終於可以發布分享出來供大家自由下載和安裝了。由於個人可支配時間越來越少,白天上班,下班還要帶娃。所以開發時間上斷斷續續整體耗時比較長,總體發布日期滯後於當初預計的12月底,晚了2天。在此對經常關注我私信我,催我趕緊分享的朋友們,表示歉意了。
  • C4D插件大全,C4D插件怎麼安裝/怎麼使用(含C4D如何使用教程)
    今天,世紀man給大家分享幾款常用的C4D插件和一些C4D教程。我們知道,作為一款3D圖形圖像軟體,C4D在設計領域有著重要的地位。而C4D插件則為這款軟體添加更加強大的功能。下面,世紀man就給大家分享下幾款插件以及C4D插件怎麼安裝,怎麼使用。
  • 南方CASS教程+視頻講解+插件匯總,小白快速上手的測繪神器
    南方CASS教程+視頻講解+插件匯總,小白快速上手的測繪神器自CASS軟體推出以來,市場佔有率遙遙領先,已經成為業內應用最廣、使用最方便快捷的軟體品牌。也是用戶量最大、升級最快、服務最好的主流成圖和土石方計算軟體系統。
  • Chrome 沒插件,香味少一半,用Chrome瀏覽器這些插件怎麼能沒有
    俗話說Chrome 沒插件,香味少一半,Chrome 最大的優勢還是其支持眾多強大好用的擴展程序,使用Chrome瀏覽器的最大魅力就是插件了,今天,小編就來一起盤點一下chrome上那些相見恨晚的擴展。
  • 影樓PS人像精修插件DR3使用教程
    今天給大家介紹一款更專業快捷的PS磨皮插件:Delicious Retouch Panel 3.0(簡稱DR3)。這是一款Photoshop人像美容擴展面板插件,而且使用面板中包含多種適用於人像修飾的功能,例如完美皮膚、一鍵磨皮、高低頻、皮膚紋理、雙曲線加深減淡等功能,可以快速進行人像美容修飾,比較適合影樓和獨立攝影師用於快速處理皮膚。溫馨提示:這個版本的插件和安裝方法適用於Photoshop CC及以上版本,如果你還是CS6,太OUT了吧!
  • Cocos Creator for Lua 1.1 新升級,插件形式即用即所得
    原標題:Cocos Creator for Lua 1.1 新升級,插件形式即用即所得   Cocos Creator for Lua 之前的版本雖然已經支持 Creator的大部分功能,但使用起來確實很不方便,嚴重影響各位擼友的效率。
  • 50個最好的免費PS擴展插件
    【PConline 教程】對於設計師來說,PS是基本工具。如何將工具利用的更好呢?那麼不得不提到那些強悍的插件咯,有了這些功能擴展的插件後,PS將會如虎添翼,會更加高效全能的幫您完善設計工作。一個好的插件能夠打造優良的效果,而且用起來方便順手。
  • 最新整理AutoCAD軟體+插件+教程講義大合集!高清版分享
    最新整理AutoCAD軟體+插件+教程講義大合集!完整版分享CAD現在是個什麼狀態就不用我過多說了,由於CAD它有自己的素材庫、自己獨立的圖庫、素材。深受現在人的喜歡,方便又簡單!【完整版看文末】【完整版看文末】這次整理的CAD軟體不僅有教程講義還有各種實用小插件