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

[[75195]]

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

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

UI編輯器

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

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

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

動(dòng)畫編輯器

對(duì)于美術(shù)設(shè)計(jì)師來說，不光只是做UI設(shè)計(jì)， 他需要做人物、動(dòng)物，還需要去做花花草草，而且我們還需要讓這些花花草草動(dòng)起來，這就需要?jiǎng)赢嬀庉嬈鳌Ｍ瑯游覀兿葋砜匆欢我曨l，“我們看到把一堆構(gòu)成這個(gè)色塊所有的角色拖到我們的編輯區(qū)，拼接成一個(gè)角色。下面是我們用于設(shè)定關(guān)鍵幀的，這個(gè)動(dòng)畫是我做的。作為一個(gè)技術(shù)，我覺得能把動(dòng)畫做成這樣我還是挺滿意的，所以大家湊合看吧。這是一個(gè)快速創(chuàng)建幀的功能，非常快。”  

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

骨骼系統(tǒng)是動(dòng)畫編輯器里面一個(gè)非常重要的部分。骨骼系統(tǒng)是什么？舉個(gè)例子，我站在這里，我是由骨骼撐起來的，因?yàn)闆]有骨骼我會(huì)癱在這兒了。我所有的 動(dòng)作，全部是由我的骨骼去驅(qū)動(dòng)的。那么骨骼系統(tǒng)在我們動(dòng)畫編輯器里面也是做這個(gè)事情的。骨骼動(dòng)畫有什么好處呢？首先我們骨骼動(dòng)畫是一個(gè)關(guān)鍵幀動(dòng)畫，傳統(tǒng)的 動(dòng)畫編輯方式一般都會(huì)使用到序列幀動(dòng)畫。骨骼動(dòng)畫比序列幀動(dòng)畫優(yōu)勢在哪里？一個(gè)動(dòng)畫設(shè)計(jì)師要做一個(gè)人的動(dòng)畫，他如果做序列幀的話差不多要做10多張圖。他 如果要把所有的動(dòng)作全部做完的話，差不多估計(jì)這個(gè)角色得上百張圖了。我們假如說這個(gè)動(dòng)畫設(shè)計(jì)師辛辛苦苦的把這個(gè)角色畫完，這個(gè)時(shí)候我們策劃說你這個(gè)角色設(shè) 計(jì)得不夠性感，我想要性感一點(diǎn)。這個(gè)美術(shù)要哭了，因?yàn)樗枰匦掳阉械膭?dòng)作再去畫一遍。可能在座的一些資深動(dòng)畫設(shè)計(jì)師，他會(huì)說我們用3DMAX，這樣的話就不需要全部畫了，因?yàn)榭梢杂萌侄?這是一個(gè)好的方法。但是當(dāng)你把所有的動(dòng)作，不同身材的角色全部創(chuàng)建完之后給程序，程序員跑過來了，說你這個(gè)動(dòng)畫用到的圖太多了，我的內(nèi)存都撐爆了，要減 圖。估計(jì)這個(gè)時(shí)候這個(gè)美術(shù)的表情應(yīng)該是這個(gè)樣子的。如果這個(gè)動(dòng)畫設(shè)計(jì)師他說沒關(guān)系，我可以畫，我可以減幀。這個(gè)時(shí)候我們策劃就跑過來跟動(dòng)畫設(shè)計(jì)師說，你做 了一個(gè)走的動(dòng)作，你又做了一個(gè)砍的動(dòng)作，現(xiàn)在我想要一個(gè)一邊走一邊砍的動(dòng)作。這個(gè)美術(shù)師哭了，因?yàn)樵谛蛄袔锩妫绻鲆粋€(gè)一邊走一邊砍的動(dòng)作的話， 需要再畫這么多張圖，或者說重新去渲染。如果說我們把這個(gè)東西畫完了之后，這個(gè)策劃又跑過來說，我想要一個(gè)趴著砍人的動(dòng)作，我想要一個(gè)跑著砍人的動(dòng)作，我 還想要一個(gè)喝著水砍人的動(dòng)作，估計(jì)這個(gè)時(shí)候設(shè)計(jì)師就要砍這個(gè)策劃了。

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

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

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

數(shù)據(jù)編輯器與場景編輯器

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

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

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