(1)了解cocostudio基礎


操作界面

  Cocos Studio的界面主要分為菜單欄、工具欄、對象面板、資源面板、畫布面板、屬性面板、動畫面板、輸出窗口、狀態欄九部分組成,如下圖: 

菜單欄

  菜單欄為Cocos Studio提供了功能入口,它由文件、編輯、視圖、項目、窗口、語言、幫助7個命令菜單組成,Mac和Windows菜單項中包含的功能是一樣的,只是排序和位置不同而已,下面就以Windows為例對每一個下拉菜單中的菜單項進行介紹

1.文件

  新建項目:新建cocos項目,快捷鍵為Ctrl+Shift+N(Win)、Command+Shift+N(Mac)。

  新建文件:新建場景、圖層、節點、合圖、3d場景文件,快捷鍵為Ctrl+N(Win)、Command+N(Mac)。

  打開項目:打開cocos項目功能,快捷鍵為Ctrl+O(Win)、Command+O(Mac)。

  最近打開的項目:最近用cocos編輯的項目路徑,最多可顯示10個項目,最后打開的項目其項目路徑顯示在最上面。

  關閉XXXX.csd/csi:關閉當前打開的XXXX.csd/csi項目文件。

  關閉項目:關閉當前打開的cocos項目。

  保存XXXX.csd/csi:保存當前正在編輯的XXXX.csd/csi,快捷鍵為Ctrl+S(Win)、Command+S(Mac)。

  全部保存:保存整個項目中所有的項目文件,快捷鍵為Ctrl+Shift+S(Win)、Command+Shift+S(Mac)。

  另存為:將cocos項目另存到自定義路徑下。

  導入->導入資源...:將資源從磁盤導入資源面板。

  導入->導入1.6版本項目...: 將Cocos Studio 1.6的項目文件轉換為當前版本的項目文件。

  退出:退出Cocos Studio編輯器,快捷鍵為Alt+F4(Win)、Command+Q(Mac)。

2.編輯

  撤銷:在編輯器中做一些操作之后,返回到上一步的狀態,快捷鍵為Ctrl+Z(Win)、Command+Z(Mac)。

  重做:撤銷到上一步后再回撤到修改后的狀態,快捷鍵為Ctrl+Y(Win)、Command+Y(Mac)。

  偏好設置:快捷鍵為Ctrl+,(Win)、Command+,(Mac)。

  通用:

  1、控件:是否簡化控件初始資源。

  2、鼠標:是否禁用鼠標滾輪縮放。

  平台:

   Android相關路徑:

   設置SDK、NDK、ANT、JDK路徑,以供后續在項目中打包與運行所用,具體請參考:打包與運行環境配置

   分辨率:

   可以對分辨率設置的下拉列表顯示狀態進行修改,添加、編輯、上移、下移、移除、重置,修改后點擊確定,工具欄中的下拉菜單同步刷新。

3.項目

  運行項目...:

  Windows:可以選擇在Windows平台上運行,在Android設備上運行,以及瀏覽器運行(僅JS語言項目支持)。

  Mac:在iOS設備上運行,Mac平台上運行,Android設備上運行,以及瀏覽器運行(僅JS語言項目支持)。

  如何運行在各個平台,具體請參考:打包與運行環境配置

   發布與打包:

   發布 - > 選擇發布類型:

  1)發布資源:把編輯器編輯的資源與項目文件發布為Cocos 2d-x引擎所使用的資源,發布后的資源加載速度快,體積小。

  2)發布為Visual Studio工程:發布資源后並使用Visual Studio打開當前項目,方便進一步編碼。

  打包 - > 選擇打包類型:

  1)Android 安裝包(.apk):將當前項目打包為.apk文件,Windows與Mac運行的Cocos Studio都支持,c++、js、lua都支持。

  2)iOS安裝包(.ipa):將當前項目打包為.ipa文件,僅Mac運行的Cocos Studio支持,c++、js、lua項目都支持。

  3)HTML5: 將當前項目打包為HTML5包,Windows與Mac運行的Cocos Studio都支持,僅js項目支持。

  使用上次設置發布與打包:若上次做的發布操作,則繼續使用上次設置發布,若上次做的打包操作,則繼續使用上次設置打包

  項目設置

   發布:

   發布內容:

   1)發布資源與項目文件:把編輯所用的資源拷貝到發布路徑以及把csd、csi文件發布為Cocos 2d-x所使用的資源。注意:當資源較多的時候,拷貝速度比較慢,建議使用僅發布項目文件。

   2)僅發布項目文件:僅把csd、csi文件發布為Cocos 2d-x所使用的資源。

   發布路徑:可以自定義資源的發布路徑,支持絕對與相對路徑。 數據格式:csd文件轉換為的供引擎加載的數據格式。

   csb:使用Flatbuffers上輸出二進制,解析效率高,體積小,安全性好,適用於c++與lua項目。

   Json:輕量級的數據交換格式,可讀性強,JavaScript原生支持,適用於js項目。

   自定義:用戶擴展的數據格式放在這里,如何擴展參考Cocos Studio自定義工程導出

   打包:

   具體請參考:打包與運行環境配置

4.視圖

   錨點:控制錨點在渲染區的顯示與隱藏,快捷鍵為Ctrl+Shift+A(Win)、Command+Shift+A(Mac)。

   標尺:控制標尺的顯示與隱藏,快捷鍵為:Ctrl+Shift+R(Win)、Command+Shift+R(Mac)。

   參考線:控制參考線的顯示與隱藏,快捷鍵為:Ctrl+;(Win)、Command+;(Mac)。

   鎖定參考線:當點擊鎖定參考線時,將無法選中或移動參考線;取消鎖定參考線時,可以在渲染區選中並移動參考線。快捷鍵為:Ctrl+Alt+;(Win)、Command+Alt+;(Mac)。

   清除參考線:當在渲染區添加參考線后,點擊清除參考線,所有參考線將被刪除。

   新建參考線:添加參考線到渲染區。

5.窗口

   對象、資源、動畫、輸出、屬性:控制對象、資源、動畫、輸出、屬性面板的顯示與隱藏。

   啟動Launcher:在編輯器中啟動Launcher,若已啟動則將Launcher界面置頂。

   恢復默認布局:若對編輯器中的窗口布局進行修改后,點擊恢復默認布局,可還原成初始狀態

6.語言

   編輯器目前支持英文版,簡體中文和繁體中文,若切換語言需要重啟編輯器后才能生效;

7.幫助

   查看幫助:Cocos官網教程鏈接

   檢查更新:檢查用戶當前版本是否為最新版本

   關於Cocos Studio:Cocos版本及版權信息等,以及官網、微博、論壇入口

工具欄

   工具欄包含八個部分:新建文件按鈕、分辨率調整工具、預覽按鈕、發布/打包按鈕、平台運行切換工具、對齊排列工具、移動畫布控制按鈕、鼠標左鍵狀態組。

   新建文件——用於新建場景、圖層、節點、合圖、3D場景。

   分辨率設置、屏幕方向切換按鈕——用於設置當前項目的設計分辨率。

   預覽按鈕——用於在模擬器中預覽當前項目文件,目前只有2D/3D場景,動畫項目文件支持模擬器預覽。

   發布與打包按鈕——用於發布項目資源或項目工程,打包iOS(.ipa)安裝包、Android(.apk)、HTML5 包。

   平台運行切換工具——在不同的平台下運行項目

   對齊、排列——針對畫布多選控件時的操作,提供了常用的對齊、排列方式。從左到右依次為中心對齊、左對齊、垂直居中、右對齊、上對齊、水平居中、下對齊、水平分布、垂直分布。

   移動畫布控制按鈕——選中手狀按鈕 ,可在渲染區拖動畫布,鼠標狀態也變成手型,快捷鍵為Q。

   僅出現在編輯場景,圖層,節點,合圖這四類文件。

   選中箭頭狀按鈕 ,鼠標樣式切換到默認狀態,快捷鍵為W。

  僅出現在編輯3D場景文件。

  默認選擇“平移“狀態,可以通過點擊對應x軸,y軸,z軸進行切換,決定在沿着哪個坐標軸進行平移。

  “旋轉”狀態下拖拽鼠標,可以通過點擊對應x軸,y軸,z軸進行切換,決定將選中物體圍繞着哪個坐標軸進行旋轉。

  “縮放”狀態下拖拽鼠標,可以通過點擊對應x軸,y軸,z軸進行切換,決定將選中物體沿着哪個坐標軸進行縮放。

對象面板

   控件面板會根據編輯項目類型不同顯示不同控件

   1.編輯場景、圖層、節點、合圖的時候時,對象面板默認分為基礎對象、控件、容器、自定義控件四部分。 顯示如下

   添加控件:左鍵選中控件,然后拖拽控件到畫布面板,然后松開鼠標左鍵,可以實現添加一個控件的操作。

   2.編輯3D場景時。3D狀態下的控制面板僅顯示3D控件。如:3D攝像機、模型、3D粒子等。如下圖所示:

   無論在2D狀態和3D狀態下,控件面板中鼠標懸停時在控件圖標上會在右上角出現一個“i”按鈕,點擊按鈕會出現有關這個控件的描述信息,並提供一個擴展鏈接以打開瀏覽器獲取更多關於這個控件的幫助信息。如下圖所示。

資源面板

   資源面板是游戲項目中所有文件的展示面板,實現導入資源、新建、重命名、復制、刪除文件等功能。

   在Cocos Studio中可以通過右鍵菜單“導入資源”功能將資源導入到資源面板,從而進行控件賦值,與資源的管理,也可以將資源通過資源面板拖動到其他區域,以完成資源工作流程。

   特別說明:資源面板所展示的文件結構和磁盤上的文件結構是一致的,當您在磁盤上刪除一個文件時,已經引用這個資源的控件會顯示資源丟失樣式。如下圖標紅文件:

   Cocos Studio的標准操作流程是:

   先把游戲將要用到的資源拖拽到資源面板,然后從對象面板拖拽需要用到的控件到畫布面板新建控件,然后從資源面板把資源給新建的控件賦值,然后修改控件的屬性,進行界面、場景、動畫的編輯。

畫布面板

   注意:此面板根據編輯內容不同而動態調整

   1)當編輯場景、圖層時,顯示畫布如下:

   畫布面板是Cocos Studio中最常使用的面板,在該面板中可以進行控件的位置、旋轉、縮放的調整、對控件錨點的修改、復制、粘貼等操作,在畫布面板中可以單選或多選控件,選中后通過右鍵菜單或屬性面板可以對控件進行進一步的設置。

   按住空格,鼠標拖動空白處可以對畫布進行移動或者按下鼠標中間對畫布進行移動。

   畫布面板的黑色區域代表了您所設置的分辨率大小。

   2)當編輯節點資源時,顯示畫布:

   3)當編輯合圖資源,顯示畫布:

   4)當編輯3D場景資源時,顯示3D畫布。

動畫面板

   動畫面板分為六部分,對象結構樹、時間軸、緩動界面、動畫控制工具、動畫編輯工具、動畫列表。

時間軸

Cocos Studio對每個文件提供一個動畫時間軸,在該時間軸上可以添加關鍵幀,編輯器將自動在兩幀之間添加動畫曲線,以實現動畫效果。

緩動界面

   動畫在兩幀之間默認做勻速運動,而當在前一幀添加緩動效果后,動畫會從前一幀到后一幀漸進加速或減速運動,它會使您的動畫看起來更逼真。 動畫控制工具

   動畫控制工具能夠控制當前時間軸上的動畫:

   image:移動到第0幀。

   image:移動到前一幀。

   image:播放動畫。

   image:移動到后一幀。

   image:移動到最后一幀。

   image:是否為循環動畫。

   image:控制動畫播放哪個速度。

   動畫編輯工具

   動畫編輯工具提供了一些編輯動畫時常用的操作:

   :添加動畫幀,點擊后會在時間軸上您選中的位置上添加一關鍵幀。

   :點擊后您所做的變化會被記錄在當前幀,成為關鍵幀,通過在不同的幀上修改控件的屬性,被修改的屬性會添加到image ,通過不同屬性的變化創造出豐富多彩的動畫效果。

   :鏡像參考又稱洋蔥皮,能夠以當前幀為基礎,將當前幀前后的幀通過線框的形式展現出來輔助動畫編輯的操作,如下圖:

    動畫列表可實現新建動畫、刪除、重命名等功能。

   :新建動畫,標識動畫的起始幀與結束幀,並把起始幀與結束幀保存下來作為一個動畫,比如,如下圖:

   動畫名稱為:animation0,從第0幀到第16幀。

對象結構樹

   對象結構樹表示當前項目文件中所有控件如按鈕、地圖、聲音、粒子等等的在當前項目文件的結構,它與畫布面板中顯示的控件一一對應,將對象面板的控件直接拖動到對象結構樹中即可添加相應的對象到該位置(同時在畫布面板上被渲染),該結構樹提供了一個可視化的調整項目文件中的控件掛載結構的方式,通過對象結構樹,可以添加控件、刪除控件、調整控件渲染順序、調整控件父子結構的功能。

   :點擊這個按鈕,可以展開控件的動畫屬性,當前動畫影響的控件的哪些屬性,比如: , 表示Panel_InfoBox_3當前只改變傾斜,縮放,坐標這三個屬性。

   :控制控件在畫布面板是否隱藏。

   :鎖定該控件在畫布面板的編輯,不會被點選以及框選。

   注意:對象結構樹上設置某個控件在畫布面板是否隱藏,或鎖定該控件在畫布面板的編輯,但在對象結構樹的面板中不論鎖定還是隱藏,都只會影響畫布面板的顯示或編輯的效果,這個效果不會輸出到最終的游戲和模擬器,如果您需要對控件的顯隱、是否接受交互在游戲最終效果上有所調整請在屬性面板修改控件的屬性。

   父子結構:Cocos Studio采用父子結構這一概念,使任何對象成為另一對象的子對象,將欲移動的子對象拖動到目標的父對象中即可建立父子關系,子對象會繼承父對象的移動、旋轉路徑,需要注意的是子對象並不會繼承父對象的不透明度和顏色疊加屬性。

屬性面板

   屬性面板展示了控件的所有屬性,方便您進行調整和修改。

   頂部是固定的標題區,屬性面板有位置與尺寸,常規,九宮格,特性和高級屬性等幾個頁簽。

   標題區域:標題區域展示了當前選中的控件類型,您可以通過定義的名稱在程序中獲取當前的控件。

   位置與尺寸屬性包含了關於錨點、位置、尺寸的一些常規設置。除此之外,還設置了自適應布局功能,布局功能UI布局與多分辨率適配

   常規屬性包含了一些控件的基礎設置,如可見性、旋轉角度、傾斜角度、翻轉等,大部分控件的常規屬性是統一的,但也有一些控件有特殊情況,具體控件的使用方法請參考在線幫助,如下圖:

   高級屬性:包括幀事件的設置和回調屬性的設置。當您在畫布面板選中了一個或多個控件時屬性面板會出現相應的屬性,可以通過輸入數值、添加文件等方式調整。

   九宮格

   高級屬性:

   1,幀事件

   2,回調特性

   3,用戶數據


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM