本發(fā)明涉及一種cocos游戲編輯器控件界面管理方法。

背景技術(shù)：

cocos編輯器是cocos的工具，包括UI編輯器、動(dòng)畫編輯器等，其界面通常包括如圖1所示的菜單欄、工具欄、對(duì)象面板、資源面板、畫布面板、屬性面板、動(dòng)畫面板、輸出窗口、狀態(tài)欄九部分組成。

為了方便游戲開發(fā)人員的操作，cocos提供了大量的控件來(lái)實(shí)現(xiàn)不同的游戲效果。由于控件數(shù)量較多，且每個(gè)控件都需要設(shè)置像動(dòng)畫屬性等的參數(shù)，而控件的管理界面空間有限，當(dāng)使用的控件數(shù)量很多后勢(shì)必會(huì)超出管理界面的空間范圍，但是由于整個(gè)編輯器的范圍有限，如果采用多個(gè)界面對(duì)已使用控件進(jìn)行管理的話，會(huì)造成用戶操作過(guò)程不連貫、顯示不直觀的問(wèn)題。

綜上，現(xiàn)有的控件管理界面讓用戶操作不方便，用戶體驗(yàn)較差。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明的目的在于克服現(xiàn)有技術(shù)中由于管理界面空間有限，造成使用控件較多后，對(duì)每個(gè)控件的操作（如設(shè)置動(dòng)畫屬性等參數(shù)）時(shí)，界面控件不足的問(wèn)題，提供一種在不擴(kuò)大現(xiàn)有界面的前提下，使得用戶可以很好的管理所使用的控件的控件界面管理方法。

為了實(shí)現(xiàn)上述發(fā)明目的，本發(fā)明提供了以下技術(shù)方案：

一種cocos游戲編輯器控件界面管理方法，將控件以豎型列表的形式展現(xiàn)，豎型列表中的每個(gè)單元格對(duì)應(yīng)一個(gè)控件；與控件對(duì)應(yīng)的單元格內(nèi)顯示有該控件的標(biāo)識(shí)，將豎型列表的最上方視為根節(jié)點(diǎn)，所述豎型列表中的控件的渲染優(yōu)先級(jí)根據(jù)其距離根節(jié)點(diǎn)的遠(yuǎn)近依次增大或減小。

進(jìn)一步的，所述豎型列表的各個(gè)單元格中還顯示有對(duì)應(yīng)控件的顯示狀態(tài)、鎖定狀態(tài)、控件類型中的一種或幾種的標(biāo)識(shí)。

進(jìn)一步的，擁有子控件的控件定義為父控件，每個(gè)父控件對(duì)應(yīng)的單元格還顯示有展開標(biāo)識(shí)，當(dāng)用戶點(diǎn)擊所述展開標(biāo)識(shí)時(shí)，對(duì)應(yīng)父控件的所有子控件以豎型列表的形式展現(xiàn)在所述父控件對(duì)應(yīng)單元格的下方；同時(shí)所述展開標(biāo)識(shí)變?yōu)槭掌饦?biāo)識(shí)；

當(dāng)用戶點(diǎn)擊所述父控件上的收起標(biāo)識(shí)時(shí)，所述父控件的子控件全部隱藏。

進(jìn)一步的，通過(guò)將控件欄中的控件直接拖動(dòng)至豎型列表中的方式添加控件。

進(jìn)一步的，所述豎型列表中的控件通過(guò)拖拽的方式改變位置，從而調(diào)整其渲染優(yōu)先級(jí)。

進(jìn)一步的，右鍵點(diǎn)擊控件對(duì)應(yīng)的單元格后彈出菜單，所述菜單中包括剪切、粘貼、復(fù)制、粘貼、刪除以及屬性標(biāo)識(shí)，所述屬性標(biāo)識(shí)包括一屬性子菜單，屬性子菜單中包含有該控件對(duì)應(yīng)的位置、選擇、縮放、傾斜、顏色、圖片、層級(jí)、顯示標(biāo)識(shí)。

進(jìn)一步的，所述屬性標(biāo)識(shí)的屬性子菜單中部分屬性標(biāo)識(shí)默認(rèn)為選中狀態(tài)，并標(biāo)識(shí)有選中標(biāo)識(shí)。

進(jìn)一步的，所述單元格上還包含有對(duì)應(yīng)控件的隱藏標(biāo)識(shí)，當(dāng)用戶點(diǎn)擊所述隱藏標(biāo)識(shí)，對(duì)應(yīng)控件隱藏，同時(shí)所述隱藏標(biāo)識(shí)變?yōu)轱@示標(biāo)識(shí)，用戶點(diǎn)擊所述顯示標(biāo)識(shí)后，對(duì)應(yīng)控件顯示。

進(jìn)一步的，所述單元格上還包含對(duì)應(yīng)控件的鎖定標(biāo)識(shí)，當(dāng)用戶點(diǎn)擊所述鎖定標(biāo)識(shí)，對(duì)應(yīng)控件被鎖定；同時(shí)，所述鎖定標(biāo)識(shí)變?yōu)榻怄i標(biāo)識(shí)，當(dāng)用戶點(diǎn)擊所述解鎖標(biāo)識(shí)，所述控件解除鎖定。

進(jìn)一步的，以上的各個(gè)標(biāo)識(shí)為文字標(biāo)識(shí)和/或圖形標(biāo)識(shí)。

與現(xiàn)有技術(shù)相比，本發(fā)明的有益效果：本發(fā)明通過(guò)將編輯過(guò)程中使用的控件以豎型列表的形式展現(xiàn)，并根據(jù)控件距離根節(jié)點(diǎn)的遠(yuǎn)近關(guān)系設(shè)置渲染優(yōu)先級(jí)，同時(shí)可以采用拖動(dòng)的方式增減使用的控件、改變控件優(yōu)先級(jí)；使得用戶可以在更加簡(jiǎn)潔的界面下操作所有使用的控件，并對(duì)控件進(jìn)行復(fù)制、粘貼、屬性設(shè)置等操作，方便了用戶使用，改善了用戶體驗(yàn)。

附圖說(shuō)明：

圖1為現(xiàn)有技術(shù)中cocos界面的典型布局。

圖2為本發(fā)明提供的控件界面示例。

圖3為本發(fā)明中一父控件及其子控件示例。

圖4為本發(fā)明中單一控件右鍵菜單示例。

圖5為本發(fā)明中多選控件時(shí)右鍵菜單示例。

圖6為本發(fā)明中控件的顯示標(biāo)識(shí)、隱藏標(biāo)識(shí)示例。

圖7為本發(fā)明中控件的鎖定標(biāo)識(shí)、解鎖標(biāo)識(shí)示例。

具體實(shí)施方式

下面結(jié)合附圖及具體實(shí)施例對(duì)本發(fā)明作進(jìn)一步的詳細(xì)描述。但不應(yīng)將此理解為本發(fā)明上述主題的范圍僅限于以下的實(shí)施例，凡基于本發(fā)明內(nèi)容所實(shí)現(xiàn)的技術(shù)均屬于本發(fā)明的范圍。

如圖2所示，本實(shí)施例為解決現(xiàn)有cocos游戲編輯界面中，當(dāng)使用的控件增多時(shí)，現(xiàn)有的控件管理界面不能方便的對(duì)各個(gè)控件進(jìn)行操作管理的問(wèn)題，提供一種采用豎型列表對(duì)已使用控件進(jìn)行管理操作的控件界面管理方法，將游戲編輯過(guò)程中已使用控件以豎型列表的形式展現(xiàn)，豎型列表中的每個(gè)單元格對(duì)應(yīng)一個(gè)控件；與控件對(duì)應(yīng)的單元格內(nèi)顯示有該控件的標(biāo)識(shí)，該標(biāo)識(shí)可以是文字標(biāo)識(shí)，也可以是圖形標(biāo)識(shí)，同時(shí)，將豎型列表的最上方視為根節(jié)點(diǎn)，所述豎型列表中的控件的渲染優(yōu)先級(jí)根據(jù)其距離根節(jié)點(diǎn)的遠(yuǎn)近依次增大或減?。槐緦?shí)施例中，以豎型列表中控件的渲染優(yōu)先級(jí)根據(jù)其距離根節(jié)點(diǎn)的遠(yuǎn)近關(guān)系依次增大為例，如圖3所示，由于label1比button1控件距離根節(jié)點(diǎn)更遠(yuǎn)，因此其渲染優(yōu)先級(jí)更高，當(dāng)label1控件與button1控件重疊使用時(shí)，label1控件的渲染效果會(huì)遮擋button1控件的渲染效果；應(yīng)說(shuō)明的是，圖3中l(wèi)abel1的陰影效果為鼠標(biāo)懸停效果，即當(dāng)鼠標(biāo)懸停在任意單元格時(shí)，該單元格響應(yīng)鼠標(biāo)懸停操作，單元格背景顯示為陰影。

進(jìn)一步的，所述豎型列表的各個(gè)單元格中還顯示有對(duì)應(yīng)控件的顯示狀態(tài)、鎖定狀態(tài)、控件類型中的一種或幾種的標(biāo)識(shí)，該標(biāo)識(shí)同樣可以為文字表示或圖形標(biāo)識(shí)；單元格中顯示控件類型用于在用戶對(duì)空間進(jìn)行改名后，還能第一時(shí)間明白該控件是何種類別。

進(jìn)一步的，擁有子控件的控件定義為父控件，每個(gè)父控件對(duì)應(yīng)的單元格還顯示有展開標(biāo)識(shí)，如圖2所示，本實(shí)施例中，展開標(biāo)識(shí)用一個(gè)角向下的三角形表示，當(dāng)用戶點(diǎn)擊所述展開標(biāo)識(shí)時(shí)，對(duì)應(yīng)父控件的所有子控件以豎型列表的形式展現(xiàn)在所述父控件對(duì)應(yīng)單元格的下方；同時(shí)所述展開標(biāo)識(shí)變?yōu)槭掌饦?biāo)識(shí)；本實(shí)施例中，所述收起標(biāo)識(shí)采用一個(gè)角為水平指向的三角形表示。

當(dāng)用戶點(diǎn)擊所述父控件上的收起標(biāo)識(shí)時(shí)，所述父控件的子控件全部隱藏。

進(jìn)一步的，通過(guò)將控件欄中的控件直接拖動(dòng)至豎型列表中的方式添加控件。但應(yīng)注意的是，新加控件在豎型列表中的位置應(yīng)與其現(xiàn)有邏輯一致，即，當(dāng)要把如圖2中的Label1控件從控件列表中新加入豎型列表中時(shí)，其僅能加入到與其邏輯等級(jí)相同的Button1控件同一列表中（Button1控件與Label1控件均為Sprite1的子控件），而不能加入到與其不存在直接邏輯關(guān)系的Mainscene控件下；但在一些實(shí)施例中，Label1控件可以從Sprite1控件下拖動(dòng)至Sprite2控件下，從而從Sprite1控件的子控件變?yōu)镾prite2控件的子控件。

用戶能直接將控件欄的控件拖動(dòng)到控件和控件之間作為這兩個(gè)控件的父控件的子控件，并插入到這兩個(gè)控件之間；同時(shí)，原有父控件沒(méi)有子控件時(shí)不顯示展開標(biāo)識(shí)或收起標(biāo)識(shí)，當(dāng)起包含有子控件后，顯示展開標(biāo)識(shí)或收起標(biāo)識(shí)；用戶可根據(jù)控件是否顯示展開標(biāo)識(shí)或收起標(biāo)識(shí)判斷該控件是否包含子控件。

進(jìn)一步的，所述豎型列表中的控件通過(guò)拖拽的方式改變位置，從而調(diào)整其渲染優(yōu)先級(jí)，用戶能拖動(dòng)控件列表中的控件調(diào)整層級(jí)、父子關(guān)系，調(diào)整后在渲染區(qū)的渲染效果保持同步；此時(shí)所述控件的位置同樣應(yīng)在其原有的邏輯下調(diào)整；同樣如圖2所示，Label1控件可通過(guò)拖拽與Button1控件調(diào)整位置，從而改變兩者的渲染優(yōu)先級(jí)，但顯然不能通過(guò)拖拽將Label1拖拽至其父控件Sprite1控件上方。

進(jìn)一步的，右鍵點(diǎn)擊控件對(duì)應(yīng)的單元格后彈出如圖4所示的菜單，所述菜單中包括剪切、粘貼、復(fù)制、粘貼、刪除以及屬性標(biāo)識(shí)，所述屬性標(biāo)識(shí)包括一屬性子菜單，屬性子菜單中包含有該控件對(duì)應(yīng)的位置、選擇、縮放、傾斜、顏色、圖片、層級(jí)、顯示標(biāo)識(shí)；同時(shí)，本實(shí)施例中，菜單中各個(gè)選項(xiàng)對(duì)應(yīng)的單元格中還顯示有該選項(xiàng)的快捷操作方式；如，Shift鍵+選擇控件為連續(xù)選擇控件：Ctrl鍵（Mac 下為Command）+選擇控件為不連續(xù)選擇控件： Ctrl+A（Mac 下為Command+A）為全選控件；多選控件后畫布上相應(yīng)的控件也需要有選中效果，渲染區(qū)控件選中效果參考畫布（渲染區(qū)）PRD文檔；應(yīng)注意的是，當(dāng)用戶選擇多選控件后，右鍵單擊彈出如圖5所示的菜單，菜單包含剪切、粘貼、復(fù)制、粘貼、刪除以及對(duì)齊標(biāo)識(shí)，其中對(duì)齊標(biāo)識(shí)下包含有對(duì)齊子菜單；該對(duì)齊子菜單包含左對(duì)齊、水平中齊、右對(duì)齊、頂對(duì)齊、垂直中齊、底對(duì)齊、垂直平均分布、水平平均分布等標(biāo)識(shí)；其用于對(duì)被多選的控件進(jìn)行相應(yīng)操作；而當(dāng)用戶選擇控件剪切或復(fù)制后進(jìn)行粘貼時(shí)，粘貼的控件在選中的控件同級(jí)最后增加新的控件，渲染區(qū)上控件在x軸、y軸都有一定位移，命名規(guī)則為”控件類型_X”,X是數(shù)字并遞增。

用戶任何在豎型列表中對(duì)控件的操作（如移動(dòng)、復(fù)制、添加、刪除），該控件在舞臺(tái)或渲染區(qū)也會(huì)作出同步調(diào)整；單擊單元格表示選中該單元格對(duì)應(yīng)的控件；一些實(shí)施例中，用戶可選擇用上下鍵調(diào)節(jié)焦點(diǎn)的方式選擇單元格，當(dāng)被選中單元格為父控件時(shí)，用戶可選擇用左右鍵展開或隱藏該父控件的子控件。

進(jìn)一步的，所述屬性標(biāo)識(shí)的子菜單中部分屬性標(biāo)識(shí)默認(rèn)為選中狀態(tài)，并標(biāo)識(shí)有選中標(biāo)識(shí)，如圖4所示，本實(shí)施例中所述選中標(biāo)識(shí)為對(duì)號(hào)。

進(jìn)一步的，所述單元格上還包含有對(duì)應(yīng)控件的隱藏標(biāo)識(shí)，圖6中MainScene控件中深色眼睛的圖形即為隱藏標(biāo)識(shí)；當(dāng)用戶點(diǎn)擊所述隱藏標(biāo)識(shí)，對(duì)應(yīng)控件隱藏，同時(shí)所述隱藏標(biāo)識(shí)變?yōu)轱@示標(biāo)識(shí)，圖6中sprite1控件中淺色眼睛的圖像即為顯示標(biāo)識(shí)；用戶點(diǎn)擊所述顯示標(biāo)識(shí)后，對(duì)應(yīng)控件顯示；當(dāng)父控件狀態(tài)切換為隱藏狀態(tài)后，子控件的顯示狀態(tài)變?yōu)榘胪该饕员硎居捎诟缚丶[藏，子控件的顯示效果被覆蓋，但仍可以修改。

進(jìn)一步的，所述單元格上還包含對(duì)應(yīng)控件的鎖定標(biāo)識(shí)，本實(shí)施例中，圖7中Sprite1控件中深色鎖子的圖形即為鎖定標(biāo)識(shí)，當(dāng)用戶點(diǎn)擊所述鎖定標(biāo)識(shí)，對(duì)應(yīng)控件被鎖定；同時(shí)，所述鎖定標(biāo)識(shí)變?yōu)榻怄i標(biāo)識(shí)，圖7中Button1控件中淺色鎖子圖形即為解鎖標(biāo)識(shí)；當(dāng)用戶點(diǎn)擊所述解鎖標(biāo)識(shí)，所述控件解除鎖定；鎖定控件后子控件在舞臺(tái)上也被鎖定，該鎖定狀態(tài)不影響預(yù)覽游戲和最終輸出的效果；應(yīng)注意的是，當(dāng)父控件被鎖定后，子控件的鎖定狀態(tài)變?yōu)榘胪该饕员硎居捎诟缚丶i定，子控件的鎖定效果被覆蓋；被鎖定的控件不能進(jìn)行如下操作：a)再渲染區(qū)通過(guò)單擊選擇或者框選選中該控件；b)無(wú)法在列表中選中該控件；c)不能再列表中拖動(dòng)該控件；d)不能將其他控件拖動(dòng)到該控件下作為子控件；e)在控件的豎型列表、渲染區(qū)全選和多選需要排除已鎖定的控件。

以上所有標(biāo)識(shí)均可根據(jù)需要選用圖像標(biāo)識(shí)或文字標(biāo)識(shí)；對(duì)于文字標(biāo)識(shí)，用戶可選擇雙擊單元格的方式修改其對(duì)應(yīng)控件的名稱。