Re: [美術] 請教畫點圖(pixel art)的工具

作者: azureblaze (AzureBlaze)   2015-03-31 21:30:14
分享一下我畫點圖的流程
這是適合較高解析度遊戲的方法,而不是8bit風
(個人認為8bit要做得漂亮超困難,可以拿來表現的空間實在太小了)
範例:
http://azureblaze.idv.tw/run.gif
http://azureblaze.idv.tw/teddy.gif
(本來是60fps可是瀏覽器不願意放那麼快所以都變慢動作)
一開使用Photoshop或是任何你畫圖順手的工具
不過最好有一張圖同時開多個視窗的功能
(Photoshop: 視窗-> 排列 -> 最下面的新增視窗
Window Arrang New window for XXX)
一開始直接開需要尺寸邊長八倍大的畫布
(要128x128就狠狠的開1024x1024)
然後開第二個視窗縮成1/8用來預覽最終結果
八倍的目的是最後要縮小很多,所以線歪歪扭扭也沒關係,預覽圖ok就好了
另外也讓縮放旋轉變形等工具有些操作空間(小圖一轉角度就爛掉了)
如果要做動畫,PS的puppet warp會是神工具
這樣整個作業速度會快很多
畫的時候最好把色盤先決定好,顏色用少一點比較不會雜亂
陰影就算是PS還是得自己來,先在色盤上搞定就好了
我會在另外一個圖層上塗所有用到的顏色和他們的光影變化
之後從這邊用滴管吸就好了
如果只是要單張或是要用傳統動畫製作法
最後在縮成1/8(記得另存新檔)輸出就差不多了
不過如果想做動畫我會建議用Spriter
http://brashmonkey.com/spriter.htm
免費就很夠用了,付費功能引擎不見得可以配合
Spriter可以用骨架動畫的方式製作2D動畫
中間的移動旋轉縮放等都會幫你補間好,
只要設好Key frame就夠了。
各組件的圖也可在動畫中間切換
兩種配合的好效果應該不錯而且省事很多。
不過用法可能得自己學了
PS和spriter配合還需多一些步驟
我會在PS中開許多圖層資料夾用來存放各個組件
(頭 上半身 左上臂 右上臂 ...... )
然後在開層畫該組件需要的各種變化
(一般 向左 向右 表情變化 衣服擺動第n格 大破 ......)
輸出到spriter前先縮為1/4,也就是Spriter會拿到兩倍大的圖
兩倍大是為了給他的旋轉縮放等一些額外的資訊,不然很容易變醜
最後再把每個圖層轉存出來
這時候可以用ps script自動完成
http://azureblaze.idv.tw/layertofile.jsx
(改造過有點bug,可以用所以懶得修)
這會自動把psd裡的所有圖層依資料夾結構存出來
在Spriter裡編完動畫後再看你要直接給引擎用(Unity應該有spriter的lib)
或是轉成spritesheet都可以
ㄊㄡ
不過個人建議如果你還在學Unity那隨便 借 素材來頂著用就好了
反正哪天要公開要賣再重弄合法的就好了
同時弄兩邊你的興趣可能會先被燒光
學習階段能夠完成一點東西有成就感比較重要
不要想什麼都自己一次搞定
作者: Shinpachi (Shimura)   2015-04-01 10:02:00
圖做的好漂亮
作者: jfmf (jfmf)   2015-04-01 23:07:00
感謝前輩分享心得,我先用現成的好了
作者: jason7086 (神經病)   2015-04-13 01:03:00
很實用!

Links booklink

Contact Us: admin [ a t ] ucptt.com