同時也發(fā)到我的公眾號了。
計劃寫個系列小教程——“火柴人跑酷”小游戲。
涉及工具列表：
ShoeBox：切圖
TexturePacker：合圖
Cocos Creator：制作游戲動畫
Photoshop：畫火柴人
今天先讓“火柴人”動起來。
1. 新建項目
image
2. 切圖合圖
為什么切開又合成？
-
畫圖時為了對比動作，畫都在一張圖，切開是為了得到每個“火柴人”小圖
- 小圖再合成大圖，軟件幫生成一個坐標文檔plist（含小圖名、坐標等）。根據(jù)坐標，不用切割大圖，也能找到是哪個小圖。既方便了管理（只存一個大圖），又能找到小圖
image
image
3. 新建游戲場景，場景可以理解為一個環(huán)境
Cocos Creator 中，場景由節(jié)點樹組成。默認包括“ Canvas > Main Camera ”（下圖）。
image
image
節(jié)點（Node）是承載組件的實體，各種功能的 組件（Component） 掛載到節(jié)點。（啥意思？立刻講）下圖創(chuàng)建空節(jié)點（就是不帶組件）。節(jié)點只有位置坐標、旋轉(zhuǎn)角度、大小等信息。
image
要插入圖片怎么辦？就在節(jié)點“添加組件”叫Sprite（顯示圖像組件）
拖動就能關(guān)聯(lián)，超級簡單
image
要插入動畫怎么辦？就在節(jié)點“添加組件”叫Animation（驅(qū)動動畫組件）
image
組件有了，但是沒有動畫剪輯數(shù)據(jù)（Animation Clip）啊，新建個唄。
image
image
下圖剪輯動畫還挺復雜。為啥叫序列幀動畫，最慘的就是，動作一幀一幀全畫出來，我不會其他的，只能這樣做了。
image
image
做完啦！
錄的gif，中間暫停是，播放完了又重頭來。
image
