首先先說一下我的團隊，我的團隊，包括我以前都是做游戲的。我以前是在捕魚達人的團隊里面做游戲開發(fā)，在做捕魚的時候，我是遇到很多的問題。那個時候我們是用Cocos2D-X引擎，那個引擎是非常強大的，但是缺少一套非常完整的工具。沒有這些工具的話，我們想做一些動畫，想做一些特效，我們就只能 用代碼去寫。美術想實現的一些功能，也要等我們把代碼寫完之后他才能看到，有可能這個效果也不是他們想要的，這么一來一去的話就會增加很多溝通成本。所以從那個時候我們就覺得，有一套完整的開發(fā)工具是一個非常重要的事情，所以我從這個游戲開發(fā)團隊離開，然后組建一個團隊，我們來做CocoStudio。

[[75195]]

相信大家應該跟我有相同的體會，所以我今天就把我們一個階段性的成果和大家分享一下。CocoStudio是基于Cocos2D-X的，Cocos2D-X里邊有很多非常炫的工具，但是這里我要說CocoStudio不光是一個簡單的工具，是由很多的工具組成，我們稱它為一套完整的游戲開發(fā)體系。

中間這個是我們CocoStudio的Logo，旁邊四個石頭代表我們CocoStudio是由四部分組成。有些引擎只有一套工具，功能貌似也很強大， 又能做動畫，也能做UI，還能寫代碼。但是這樣的工具通常會造成最終很難分工，也很難合并。而且這樣的一個工具對于一個設計師來說通常比較復雜，很難上 手。如果我是一個UI設計師，我只想去設計UI，我不想做別的，更不想寫代碼，這個時候有一個非常強大的工具在他面前，他可能無從下手，因為這個東西太復 雜了。現在我給你一個UI編輯器，這個UI編輯器非常純粹，它的功能非常干凈，除了UI編輯，其他什么都沒有，我估計這個UI設計師他一定會用得非常爽， 這就是我們所說的CocoStudio。

UI編輯器

我先從UI編輯器先講起，我們介紹的第一個工具是UI編輯器。我們先來看一段視頻，“界面左邊是一排控件，我們把所有的控件拖到界面當中去，調整坐標，在右邊設置它們的屬性。因為這個視頻就是我們開發(fā)人員錄的，我們也沒有找專業(yè)的美術，所以做得可能不是很專業(yè)。這個視頻演示了幾個不常用的控件。大家 可以看到，除了編輯功能，其他什么都沒有，很簡單。”

首先我想說一下UI控件，首先看一下我們UI編輯器目前所支持的控件，這些是Cocos2D-X目前所有的控件，全部支持。我們來繼續(xù)看，下面冒出來是12個問號，這是什么呢？我先不告訴大家。我想說的是，我們在每一個版本里面都會開放一些新的控件，我們團隊的一個小伙子會負責這套UI系統(tǒng)和UI編輯器的長期維護。這個小伙子不光擅長UI，更擅長表演，所以我在這里情不自禁的給大家秀一張海報，右邊這個小伙就是我們這個做UI的，可能他更大的夢想是想當一名演員。

UI編輯器是支持碎圖合并功能，大家通過剛才的視頻也看到我們拖了很多的控件，用到了很多的圖，我們導出的時候可能有很多圖。大家都清楚，圖片數量 如果非常多的話，在程序里面加載會非常低效。所以通常大家會使用一些第三方工具，將圖合并成一張。這樣的話，在程序里面的運行效率會比較高，我們現在把這 個功能也直接集成到UI編輯器里面。這樣的話，大家在導出的時候就不需要再借助一些第三方工具再去合圖。我們來看一下，下面這一堆亂七八糟的圖就是剛才視 頻里面所用到的基礎的碎圖。通過這個碎圖合并功能，我們可以直接把它合并成一整張圖，相信這樣就會獲得比較高的效率。多分辨率適配，這應該是很多開發(fā)者非 常關注的一個問題。在我們UI編輯器里面，我們首先可以自己去設定一些分辨率，我們把所有的控件按照分辨率自適配自己的尺寸和坐標，通過這種形式，我們可 以非常完美的去支持多分辨率。自定義UI模板是我介紹的UI編輯器的第三種功能，我們在做這個游戲的時候，比如我們做了一個商店界面或者一個設置界面，我 下一個游戲的時候還需要這個界面，我不想重復造輪子，我可以把這個界面保存成模板，我在下一個項目當中把這個模板導進來，我們替換相應的資源，保證我們制作上是非常高效的。這就是我剛才介紹的UI編輯器，當然它還有很多其他的功能，希望大家會后下載，可以自己去體驗。

動畫編輯器

對于美術設計師來說，不光只是做UI設計， 他需要做人物、動物，還需要去做花花草草，而且我們還需要讓這些花花草草動起來，這就需要動畫編輯器。同樣我們先來看一段視頻，“我們看到把一堆構成這個色塊所有的角色拖到我們的編輯區(qū)，拼接成一個角色。下面是我們用于設定關鍵幀的，這個動畫是我做的。作為一個技術，我覺得能把動畫做成這樣我還是挺滿意的，所以大家湊合看吧。這是一個快速創(chuàng)建幀的功能，非?？?。”  

看完視頻之后，我先給大家看一張圖。和剛才那個編輯器不是很像，這是我之前在做捕魚項目的時候。因為當時，我們缺少做動畫的工具，所以我們做了一個簡單的動畫編輯器，把這張圖放在這兒。這是剛才視頻里面演示的，也是這次我們要公布的新的動畫編輯器的界面。兩個編輯器對比起來我們會發(fā)現，現在的編輯器比以前要專業(yè)一些。為什么要放這兩張圖，我想說的是，動畫編輯器是給美術設計師用的，所以我 們在界面設計上是盡量參考美術經常使用的一些軟件，無論是從界面上還是快捷鍵這些功能，盡量是保持美術的習慣。他們在使用這個動畫編輯器的時候就非常容易 上手，不存在什么門檻。同樣我們動畫編輯器就是只能做動畫，我們動畫設計師在使用這個編輯器的時候，它的功能是非常純粹的。這樣的話，我們這個編輯器所表 現的動畫功能，相信它會比其他工具的動畫編輯功能更專業(yè)。

骨骼系統(tǒng)是動畫編輯器里面一個非常重要的部分。骨骼系統(tǒng)是什么？舉個例子，我站在這里，我是由骨骼撐起來的，因為沒有骨骼我會癱在這兒了。我所有的 動作，全部是由我的骨骼去驅動的。那么骨骼系統(tǒng)在我們動畫編輯器里面也是做這個事情的。骨骼動畫有什么好處呢？首先我們骨骼動畫是一個關鍵幀動畫，傳統(tǒng)的 動畫編輯方式一般都會使用到序列幀動畫。骨骼動畫比序列幀動畫優(yōu)勢在哪里？一個動畫設計師要做一個人的動畫，他如果做序列幀的話差不多要做10多張圖。他 如果要把所有的動作全部做完的話，差不多估計這個角色得上百張圖了。我們假如說這個動畫設計師辛辛苦苦的把這個角色畫完，這個時候我們策劃說你這個角色設 計得不夠性感，我想要性感一點。這個美術要哭了，因為他需要重新把所有的動作再去畫一遍。可能在座的一些資深動畫設計師，他會說我們用3DMAX，這樣的話就不需要全部畫了，因為可以用三渲二， 這是一個好的方法。但是當你把所有的動作，不同身材的角色全部創(chuàng)建完之后給程序，程序員跑過來了，說你這個動畫用到的圖太多了，我的內存都撐爆了，要減 圖。估計這個時候這個美術的表情應該是這個樣子的。如果這個動畫設計師他說沒關系，我可以畫，我可以減幀。這個時候我們策劃就跑過來跟動畫設計師說，你做 了一個走的動作，你又做了一個砍的動作，現在我想要一個一邊走一邊砍的動作。這個美術師哭了，因為在序列幀里面，他如果要做一個一邊走一邊砍的動作的話， 需要再畫這么多張圖，或者說重新去渲染。如果說我們把這個東西畫完了之后，這個策劃又跑過來說，我想要一個趴著砍人的動作，我想要一個跑著砍人的動作，我 還想要一個喝著水砍人的動作，估計這個時候設計師就要砍這個策劃了。

如果使用我們這個骨骼系統(tǒng)的話，就能解決這個問題。 我們只需要做一張角色的圖，把不同的部件拆開，給他套上骨骼。通過這個骨骼驅動就可以做很多的動作，包括跑、走、跳、砍，這里面不需要再額外多浪費其他的 圖，可能最后只需要四五張圖就可以。這個資源差不多是幾十倍的節(jié)約，而且這個東西在程序里面運行都非常高效。骨骼動畫還有一個好處，就是如果說我們這個項 目用了100個角色，如果序列幀的話，美術就要給每一個角色都要設計10幾套動作，最終的圖量是非常龐大的。用我們骨骼動畫的話，我們可以在第一個角色身 上把動作設計好，定義成模板，套在其他的角色身上，就可以共用這個動畫，這是非常方便的。這里是簡單的演示了一下骨骼動畫的視頻。大家看到藍色和灰色的東 西就是骨骼，套在角色的部位上，就可以驅動它的動作，這是我們的一個技術，用自己非常不專業(yè)的技能去做一個人開槍的動作，所以希望下面如果有一些比較專業(yè)的動畫設計師不要嘲笑。

碎圖合并，因為剛才我們UI編輯器是有碎圖合并，而且我們使用得非常爽，所以我們把這個功能也合并到我們動畫編輯器。如果我們做了一個動畫，最終我們可以合并成一張圖，而且這個東西在我們動畫編輯器和UI編輯器導出的時候是自動的。剛才提到骨骼動畫的時候，我說了很多序列幀不好的地方，但是序列幀確實在做一些動畫，或者是有一些特效還是非常有用的。比如說我們在做角色動作的時候，序列幀還是非常關鍵的，包括我們做一些爆炸特效，做一些火焰特效的話，序列幀實現的效果比較好。動畫編輯器依然支持序列幀，而且我們把序列幀做得非常簡單，非常高效。剛才大家也看到了，我們只需要三個操作就可以把序列幀完成。

相信在座肯定有做頁游的，或者我們之前的游戲是用Flash做的。如果用這個工具的話，我們之前做的Flash會不會浪費呢？我們動畫編輯器支持 Flash動畫直接導入到我們的動畫編輯器里面，我們在動畫編輯器里面再做二次編輯。這樣的話我們導出來的資源是可以完美的支持到Cocos2D-X。編輯碰撞區(qū)域我覺得在動畫編輯器里面去做這個事情是非常合適的，因為我們動畫編輯器是可視化的，所以在這里面可以繪制碰撞區(qū)域，可以保證碰撞的精準。參考點是什么意思？我們在動畫層面上定義一個點，讓它完成某些功能。比如說我要騎馬，我是一個動畫，馬是一個動畫，我在馬背上設計一個參考點，這樣的話我騎馬才不會騎到馬屁股。如果我想騎著的話，我在我的胯下設置一個參考點，實現騎馬的動作。同樣我們可以用這種功能去做換裝和換武器。

數據編輯器與場景編輯器

UI編輯器和動畫編輯器都是給美術用的，下面我們介紹兩個編輯器是給策劃用的，先說數據編輯器。數據編輯器非常簡單，它就是把策劃用的Excel數 值表分解，然后轉化成Cocos2D-X可以識別的格式，雖然說這個功能非常簡單，可能大家覺得不重要。但是我們之前做游戲的話，我們的策劃是一直在用 Excel做數值表的。這是我們的數據編輯器，中間我們會去分析這里面每一個表單，然后把它列在上面，右邊是顯示我們的數值，我們可以轉換和拷出，把一張 非常大的表分解成每一個小表。數據編輯器可以配合場景編輯器來使用，大家看一下這個方塊是什么，這里面我來解釋一下，我們這個場景編輯器是基于實體和組件的模式，我們創(chuàng)建一些實體，就是一個一個的方塊。把所有的功能設計成一個一個組件，分別綁在這些實體上。我們看到創(chuàng)建了一個實體，綁定一個動畫組件就可以實現一個動畫加入到場景中，場景編輯器就是實現將所有的資源整合在一起。

在這里要提到一個框架，叫FrameWorkforCocoStudio。簡單來說是對于我們場景編輯器導出資源的一個解析。這套 FrameWork是基于Cocos2D-X的，基于實體和組件開發(fā)的?，F在我們是把它開放給大家去試用，而且我們會有一個團隊一直在維護這套框架?？蚣?本身是支持Javascript腳本的，如果大家想去快速的開發(fā)游戲原型，相信這個框架是非常適合的，因為我們配合這個場景編輯器，配合我們 CocoStudio其他的工具，再配合這個框架，可以快速的做出游戲原型。場景編輯器可以整合我們之前CocoStudio其他編輯器的資源，構成當前 的游戲關卡，同時也支持第三方的工具模式，剛才大家也看到了里面噴泉的粒子效果。后續(xù)我們在場景編輯器里面也會開發(fā)插件系統(tǒng)，大家可以二次開發(fā)自定義的控 件。

以上就是我今天介紹的四個工具，我想說的就是，所有的工具合在一起是構成一套完整的游戲開發(fā)體系，分工更明確，讓每一個人干自己最專業(yè)的事，而不去 管他人的事。某一個程序員會跳出來，說這里面怎么沒有給我的工具？我想說的是，如果我們把這四個工具給我們的開發(fā)團隊提供出去的話，我們的程序程序員就可 以安心的寫代碼，不用再去關心動畫，也不用再去關心UI。這里面再強調一下，我們這套CocoStudio是完全免費的。你可以到www.cocostudio.org去下載最新版本，歡迎大家的使用！