code style

8/09/2014

也來寫卡牌遊戲好了(一)

這年頭不寫個卡牌遊戲好像跟不上時代。

遙想去年敝人也是在台北某間大樓的52樓裡面的某間公司在進行一個卡牌遊戲改版的動作!

只可惜遊戲做完了,公司也收起來了。C'est la vie~


****************************阿公講古分隔線********************************

今天不說別的,就來談談卡牌遊戲的貼圖怎麼優化最佳化!

還記得我寫過TexturePacker的文章嗎?

所謂的Texture Atlas就是把零散的小貼圖集合成一張大貼圖,不僅可以加速貼圖載入的速度,也可以避免OpenGL的texture swap cost。

但是!但是~卡牌角色衣服總是要多露有多露、胸部要多大有多大~
胸部都那麼大了,你卡片解析度不加大也說不過去吧? (都是視網膜螢幕害的)

我們假設卡牌解析度是512x640,以iOS最大貼圖解析度2048x2048來看,最多可以塞個12張。PNG格式大約是4-5MB,PVR格式是2MB,PVR CCZ格式可以壓到1.5MB左右。

看起來還不錯是吧?你忘了卡牌遊戲動輒數百張的卡片數量,光是計算PVR的時間就可以看部藍光DVD了!更別說哪天某張卡片圖樣要更新,又得重算一次。

再來如果說遊戲要同時呈現數張卡片,好死不死,每張卡片都散落在不同的Texture Atlas,那麼貼圖記憶體的使用量也會倍增。

嗯嗯~所以Texture Atlas雖說檔案大小是很優化最佳化,但是在這種使用情境下,就....不那麼理想。

糾竟遊戲工程師該怎麼辦呢?讓我們繼續看下去~

幸好有神人發明了Vector Quantization Algorithms。來~跟我說一遍~
V e c t o r  Q u a n t i z a t i on  A l g o r i t h m s (英國腔)

中文翻譯是向量量化演算法,雖然我看得懂中文,恩~也看得懂英文。但是我看不懂這是什麼東西 (咳)

好!不懂原理沒關係,我們懂得怎麼用就好!

http://pngquant.org/ 很貼心的蒐集了各作業系統的貼圖轉換工具。
使用V e c t o r  Q u a n t i z a t i on  A l g o r i t h m s (英國腔)可以幫我們把PNG減肥最多7成以上,而且還支援透明度,我都要痛哭流涕了~

逆看看,偶當場就縮了四分之一!

當然天下沒有白吃的午餐,我們還是得犧牲一些圖像品質來得到這樣的壓縮比。其實它就是把全彩貼圖轉換256色貼圖,失真是一定的唷~

貼圖維持PNG格式的好處就是 iOS 跟 Android 都能夠無痛使用,不再為 PVR、ETC1 等格式煩惱了~呀比~

說了這麼多,你還不趕快去用用看 (丟筆)

2/04/2014

TinySWF - a simple SWF player

最近看到GREE一個開源專案LWF,提供遊戲開發者一套免費的FLASH framework。

剛好之前也寫過類似的專案,現在就共襄盛舉、野人獻曝一下。


https://github.com/jbyu/tinyswf

TinySWF


為了方便讓美術人員製作UI與過場動畫,最好是有一套健全的GUI編輯器讓大家使用,當然為了這個理由而花費龐大的資源與時間來開發一套編輯器,必定是勞民傷財(還很可能吃力不討好、惹人嫌)。所以TinySWF就是為了直接利用Adobe Flash這套編輯器而產生的!

Features
  • Bitmap
  • Motion Tween
  • Text
  • Shape
  • Button
  • MovieClip
  • Mask
  • Sound
  • SWF3 action model
    • play
    • stop
    • gotoAndPlay
    • nextFrame
    • fscommand


TinySWF可以直接解析SWF檔案,不需要轉檔。其繪圖核心目前提供了OpenGL與cocos2d-x的介面,當然大家也可以設計自己的繪圖核心。

TinySWF提供了三個抽象介面讓大家界接:
  • Renderer       繪圖核心
  • Speaker         音效核心
  • FontHandler   字型處理


在開發TinySWF之前,我其實使用過開山鼻祖 gameswf 這套,Scaleform 就是基於它改良而成的。然而SWF實在是個很龐大的架構,如果只是想利用其中幾個功能而已,花費大把時間移植到mobile平台上就顯得不太划算。於是乎,便開始著手寫一個小巧的flash player,開發宗旨就是力求精簡!

雖然TinySWF不比LWF支援unity, html5。不過TinySWF支持向量圖型、遮照,也算是方便的功能。如果想做些複雜的碰撞偵測的話,可以利用向量圖型做polygon test。

TinySWF算是我第一個比較有系統的開源專案,希望大家可以多多給予批評指教~