1. 快速開始
SpinePlayer 2D骨骼動(dòng)畫播放器 - 微信小程序版
可用于播放 Spine 導(dǎo)出的動(dòng)畫文件。支持版本：3.8、4.1（這兩個(gè)版本的官方資源測(cè)試通過）
1.1 應(yīng)用場(chǎng)景
- 動(dòng)畫師：K完動(dòng)畫，交給領(lǐng)導(dǎo)審核。對(duì)方不在電腦邊。又不想浪費(fèi)時(shí)間錄一大堆GIF。
- 動(dòng)畫師：動(dòng)畫導(dǎo)給開發(fā)，他代碼有BUG非說我導(dǎo)出有問題。
- 程序員：美工導(dǎo)出的動(dòng)畫文件不對(duì)，非說我程序有BUG。
- 策劃：想仔細(xì)驗(yàn)收每個(gè)角色的動(dòng)作和皮膚，但動(dòng)畫師沒空。
- 直接發(fā)給已付款的甲方預(yù)覽，能有效避免對(duì)方程序甩鍋。
1.2 用法簡(jiǎn)介
-
動(dòng)畫師：
把導(dǎo)出的文件打包成 zip 通過微信聊天發(fā)給：主美、策劃、已付款的甲方。 -
主美、策劃、甲方：
打開微信小程序，從聊天消息中選擇 zip，加載完成后，選擇【角色名】單獨(dú)預(yù)覽，或點(diǎn)擊【播放全部】一起預(yù)覽。
1.3 播放器預(yù)覽 VS 錄屏動(dòng)畫預(yù)覽
- 真實(shí)的播放2D骨骼動(dòng)畫：驗(yàn)收時(shí)可以自由切換
角色、動(dòng)畫、皮膚。 - 真實(shí)的播放2D骨骼動(dòng)畫：而非錄制的逐幀效果。
- 真實(shí)的播放2D骨骼動(dòng)畫：以官方資源9個(gè)角色為例 zip 大小 3.18M，遠(yuǎn)小于GIF。
- 小程序上播放成功，能證明動(dòng)畫師導(dǎo)出文件正常，已圓滿完成任務(wù)。
- 小程序上播放成功，排除了導(dǎo)出文件異常的可能，同樣能提高開發(fā)人員調(diào)試效率。
1.4 平臺(tái)支持
| 功能模塊 | 安卓 | 蘋果 | PC（需要附魔） |
|---|---|---|---|
| 動(dòng)畫播放 | 是 | 是 | 是 |
| 調(diào)試 | 是 | 是 | 是 |
| 序列幀（導(dǎo)出） | 是 | 是 | 否 |
| 錄屏 | 是 | 是（有偏色） | 否 |
掃碼體驗(yàn)小程序
1.5 演示視頻
界面預(yù)覽
- 選擇運(yùn)行庫版本
- 前往選擇文件
- 打到聊天信息
- 選好文件，確認(rèn)
- 點(diǎn)擊
角色名稱單個(gè)預(yù)覽。 - 點(diǎn)擊
播放按鈕一起預(yù)覽。
- 沒了。。。
使用說明
1. 操作流程
分角色舉例：動(dòng)畫師（K動(dòng)畫）、策劃（驗(yàn)收）、甲方（驗(yàn)收）
-
動(dòng)畫師做好動(dòng)畫后導(dǎo)出 skel、json、atlas、png 等文件，打包為 zip 包。
1.2. 注意：別用中文 畢竟底層還是人家老外做的。
1.3. 注意：不要改擴(kuò)展名 系統(tǒng)是按skel、json、atlas、png來識(shí)別和加載文件的，找不到就出錯(cuò)。
1.4. 多個(gè)角色可以打包在同一個(gè)zip中直接加載，但是必須保證每個(gè)角色名稱唯一。
-
通過微信發(fā)給要
策劃，并告知運(yùn)行庫版本。（不知道的可咨詢程序）
2.1. 強(qiáng)烈建議動(dòng)畫師開工前，先與程序確認(rèn)好使用哪個(gè)版本。 -
策劃打開小程序，進(jìn)入相應(yīng)版本，點(diǎn)擊選擇文件從則才的微信聊天中選擇 zip 文件。
3.1. 信不過那幫美工，自己試也行。能播放就是對(duì)了。 -
確認(rèn)后回到上一界面，會(huì)顯示加載到的
角色列表。 -
點(diǎn)擊單個(gè)角色，預(yù)覽動(dòng)畫?；螯c(diǎn)擊
播放動(dòng)畫預(yù)覽全部角色。 -
策劃驗(yàn)收無誤，將zip包轉(zhuǎn)發(fā)給已付款的甲方，如上告知預(yù)覽方法。 -
千叮嚀萬囑咐，讓
甲方關(guān)注笨笨。 -
打完收功。
2. PC端附魔方法
官方表示：小程序PC端不支持選擇文件的API wx.chooseMessageFile(Object object)
因此無法從電腦上選擇 zip 包，但是PC端選擇圖片的API wx.chooseMedia(Object object) 是正常的。
所以我們通過附魔讓ZIP讓PNG當(dāng)干爹，這就可以正常使用了。
- 先收下附魔卷軸：這段符文復(fù)制到文本文件中，然后改名為
附魔卷軸.bat注意擴(kuò)展名是bat
echo iVBORw0KGgoAAAANSUhEUg==>_________
copy /b _________ + /b %1 %~nx1.png
del /q _________
- 在正常選擇ZIP包播放動(dòng)畫前，先將zip拖到
附魔卷軸.bat上，然后就會(huì)生成一個(gè)附魔后的文件。教程如下：Spine播放器1.4.1-PC附魔教程
參考資料
測(cè)試文件
給沒有CSDN賬號(hào)的同學(xué)準(zhǔn)備的。（有CSDN賬號(hào)的在帖子頂上找，直接免費(fèi)下載即可）
這是一個(gè)內(nèi)含圖（紳士都懂）測(cè)試包就在里面
用法：
- 將圖片另存到本地。
- 用解壓工具打開，即可看到資源 zip
百度盤分享
喜歡用百度盤的也可以到這里下：https://pan.baidu.com/s/1wgsM4lPToEWiNquynZGSMQ?pwd=s4il
相關(guān)文檔
esotericsoftware 官方運(yùn)行庫
esotericsoftware Spine運(yùn)行時(shí)文檔
esotericsoftware API 參考文檔
微信小程序 - 官方文檔 API
MDN WebGL - Web API 接口參考
版本歷史
2023-09-07
- 會(huì)完成對(duì) 3.8 運(yùn)行庫版本的支持。
2023-09-10
- 修復(fù) iOS 加載出錯(cuò)的bug。
2023-09-12
- 添加對(duì) 4.1 運(yùn)行庫的支持。
- 加載過程添加進(jìn)度提示，優(yōu)化用戶體驗(yàn)。
- 整體優(yōu)化UI樣式。
2023-09-20
- 新增單指按住平移視圖（iOS要注意一下按下拖動(dòng)的時(shí)機(jī)，太快可能會(huì)被系統(tǒng)自帶的下拉刷新截胡）
1.1. 添加重置（平移、縮放）功能。
1.2. 重置平移：進(jìn)行過平移操作后右下角會(huì)出現(xiàn)【歸中】按鈕點(diǎn)擊即可重置。
1.3. 重置縮放：點(diǎn)擊縮放滑動(dòng)條邊上的【X】按鈕。
1.4. 重置平移+縮放：雙擊視圖 - 優(yōu)化縮放。
細(xì)化了縮放因子的步進(jìn)值，縮放更加絲滑。
2023-09-30
- 新增錄屏功能。
1.2. 部分iOS設(shè)備錄屏結(jié)果可能存在偏色。 - 優(yōu)化頁面樣式。
視頻
2023-11-21
SpinePlayer 2D骨骼動(dòng)畫播放器 v1.4.0
- 所有滑動(dòng)條，點(diǎn)擊左側(cè)名稱或右側(cè)數(shù)值，都可以重置其值。
- 優(yōu)化樣式，優(yōu)化操作體驗(yàn)。
1.1. 單指按住平穩(wěn)。二指縮放。三指輕點(diǎn)還原位移和縮放。
1.2. 角色、動(dòng)畫、皮膚列表支持展開折疊。
1.3. 動(dòng)畫列表：猴頭可以切換動(dòng)畫名顯示、列表循環(huán)播放動(dòng)畫、隨機(jī)播放動(dòng)畫列表。 - 新功能：調(diào)試面板。
2.1. 預(yù)乘Alpha通道：勾選后顯示預(yù)乘Alpha通道效果。
2.2. 循環(huán)：循環(huán)播放動(dòng)畫。（支持單個(gè)動(dòng)畫和隊(duì)列動(dòng)畫）
2.3. 動(dòng)畫名稱：在畫布左下角顯示當(dāng)前動(dòng)名。
2.4. 播放速度：在畫布左下角顯示當(dāng)前播放速度。
2.5. 進(jìn)度條：在畫布頂部顯示當(dāng)前播放進(jìn)度。
2.6. 調(diào)試：展開詳細(xì)的調(diào)試選項(xiàng)?？梢苑謩e勾選，支持反選。
2.6. 縮放XY：對(duì)X、Y分別進(jìn)行縮放。
2.7. 速度：調(diào)整動(dòng)畫的播放速度。
2.8. 倒放：切換動(dòng)畫正放倒放。（支持單個(gè)動(dòng)畫和隊(duì)列動(dòng)畫。3.8 不支持倒放）
2.9. 動(dòng)畫過渡：設(shè)置兩個(gè)動(dòng)畫之間的過渡時(shí)間。 - 新功能：導(dǎo)出序列幀。
3.1. 進(jìn)度條：點(diǎn)擊右側(cè)的數(shù)值，可以重置當(dāng)前模塊。
3.2. 支持調(diào)整高寬。
3.3. 支持設(shè)置留邊。
3.4. 支持調(diào)整FPS。默認(rèn)24一般是夠用的。
3.5. 逐幀提取PNG：點(diǎn)擊后開始逐幀提取圖片，完成后會(huì)激活【預(yù)覽】和【轉(zhuǎn)發(fā)】按鈕。
3.6. 預(yù)覽：直接預(yù)覽每幀圖片。長(zhǎng)按可以對(duì)當(dāng)前圖片：轉(zhuǎn)發(fā)、保存、收藏。
3.7. 轉(zhuǎn)發(fā)：將所有序列圖打包的ZIP轉(zhuǎn)發(fā)到聊天。 - 新功能：支持全屏、橫屏。
4.1. 雙擊切換全屏。
4.2. 橫屏?xí)r，只允許全屏。想出去先回豎屏。
4.3. 手機(jī)設(shè)置要開啟自動(dòng)旋轉(zhuǎn)。（有些手機(jī)不用開也行，手機(jī)放橫后會(huì)出現(xiàn)提示按鈕，點(diǎn)一下就能轉(zhuǎn)了）
界面
視頻：詳細(xì)演示
2023-12-14
SpinePlayer 2D骨骼動(dòng)畫播放器 v1.5.3
新功能：工具箱 > 龍骨拆分圖集(json)
- 界面
- 演示視頻
Spine播放器1.5.0_PC端演示文章來源：http://www.zghlxwxcb.cn/news/detail-705830.html
Spine播放器1.5.1_移動(dòng)端演示文章來源地址http://www.zghlxwxcb.cn/news/detail-705830.html
到了這里，關(guān)于Spine2D骨骼動(dòng)畫播放器 - 微信小程序版的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
