spine动画显示工具实现（cocos版）

立即下载用AI写一个

发布时间：2020-07-27

15人 | 浏览：5831次 | 收藏 |

技术：cocos2dx + lua + c# WFM

概述

目前，spine动画的使用，在游戏开发中，比较常用的。此工具，采用cocos 引擎作为底层支持（unity引擎太过庞大，启动慢，不适用），cocos2dx + lua 作为开发方式， c#窗体程序作为入口，非常方便的展示spine效果，方便cocos 游戏程序员及特效人员使用，简单方便，很有效的提高工作效率。

详细

# 前言
    spine文件查看工具，一直都没有非常方便的工具， 使用的多为CocosCreator，但软件太大，不能很快很好的查看spine效果，之前，我自己开发过一个spine工具，使用的是love2d 游戏引擎作为底层支持，有想了解的，可以看看下面的文章：[spine查看工具实现（love2d版）](http://www.demodashi.com/demo/16938.html )。 但是love2d游戏引擎，国内很少很少有人使用过，所有此篇文章将采用cocos游戏引擎，重写工具，方便那些使用cocos引擎的程序员与特效制作人员使用。
#运行效果展示
 视频效果地址： https://pan.baidu.com/s/14Ha-yVNlH0ciEuRx_w98TA 提取码：5psy
 截图如下 
![使用效果](/contentImages/image/20200725/0fvULCyHJ1kdOO8HjvD.png "使用效果")

# 工具实现过程
## 	1. 准备cocos运行环境
     此工具的实现核心是，运行cocos2dx，进行效果的展示。所以，首先，需要到 [cocos2dx官网](https://www.cocos.com/cocos2dx "cocos2dx官网")，下载文件， 然后打开 build/文件夹下的 .sln文件，如下图。 然后选择 lua-tests 作为启动首选项，进行编译运行，完成之后就会生成 对用的 cocos2dx+lua 运行demo，如下图所示。 双击 lua-test.exe,即可运行 官方demo案例， 此工具 spine显示功能，就是在此基础上，修改代码，进行实现的。
![cocos运行文件](/contentImages/image/20200726/t971qgg53eFwCxDFijj.png "cocos运行文件")
![所用文件](/contentImages/image/20200726/QeAgfRpzgDXLZmbn81t.png "所用文件")
## 2. 开发c# WFM窗体应用程序（作为入口）
	为了方便程序及特效人员使用， 此工具采用 c# WFM窗体应用作为入口，为spine 相关的展示/ cocos2dx的运行做准备工作。使用此c# WFM 的优点是，支持拖拽，各种文件操作都很方便，开发快，很贴合win系统，效果很不错。
### 1. 创建窗体程序
	如下图，创建窗体程序，以及相关的控件（按钮/输入框等）
![创建窗体](/contentImages/image/20200726/XyONqcYlmeOBvD0sY9S.png "创建窗体")
![创建窗体2](/contentImages/image/20200726/e0YIPE3QjGqpj677XtO.png "创建窗体2")
### 2. 实现拖拽/文件复制/读取/替换等基本功能
	此工具的使用流程是 拖拽任意位置 的.json 文件， 拷贝对应路径的spine所需的文件 到指定 文件夹下， 配置读取相关参数，把参数写入到对应的lua 文件夹下，运行lua_test.exe,进行显示。所以，第一步，需要把文件读取/替换等操作实现。具体如下
#### 	1.文件拖拽功能
      如图，添加对应的窗体方法
![](/contentImages/image/20200726/E64ZrMu5RJikMRpWCwi.png)

private void Form1_DragOver(object sender, DragEventArgs e)
        {
			string fileInfo = ((System.Array)e.Data.GetData(DataFormats.FileDrop)).GetValue(0).ToString();
            if (fileInfo.EndsWith(".json") && !curInfo.Equals(fileInfo))
            {
                curInfo = fileInfo;
                richTextBox2.Text = fileInfo;
                dealShowAction();
            }else if (fileInfo.EndsWith(".png"))
            {
                textBox3.Text = fileInfo;
                Common.deleteBgImg();
                Common.copyBgImg(textBox3.Text);
            }
	   }
#### 2.文件 复制/拷贝等功能
    因为网上有很多很多相关的例子，此处就不再多述，其他方法请自行百度
	`   /// <summary>
        /// 复制  文件是否存在 
        /// </summary>
        /// <returns></returns>
        public static int CopyFolder(string sourceFolder, string destFolder)
        {
            try
            {
                if (!System.IO.Directory.Exists(destFolder))
                {
                    System.IO.Directory.CreateDirectory(destFolder);
                }
                string[] files = System.IO.Directory.GetFiles(sourceFolder);
                foreach (string file in files)
                {
                    string name = System.IO.Path.GetFileName(file);
                    string dest = System.IO.Path.Combine(destFolder, name);
                    System.IO.File.Copy(file, dest);//复制文件
                }

string[] folders = System.IO.Directory.GetDirectories(sourceFolder);
                foreach (string folder in folders)
                {
                    string name = System.IO.Path.GetFileName(folder);
                    string dest = System.IO.Path.Combine(destFolder, name);
                    CopyFolder(folder, dest);//构建目标路径,递归复制文件
                }
                return 1;
            }
            catch (Exception e)
            {
                return 0;
            }
        }`
### 3. 解析 spine 动画名（重点）
    spine动画的配置信息在 。json文件中，对应“animations” 字符串后面的 值就是 对应的动画名，需要解析出来，放在 cocos2dx+lua 对应的文件夹下，供cocos直接使用。代码如下

------------
	`public static List<String> dealJsonFile() {
            string jsonPath = fileName + @"\res\spine\" + spineName + ".json";
            StreamReader m_sr = new StreamReader(jsonPath);
            string orgInfo = m_sr.ReadToEnd();
            m_sr.Close();
            orgInfo = orgInfo.Replace("\n", "").Replace(" ", "").Replace("\t", "").Replace("\r", "");

string strDealInfo = orgInfo.Substring(orgInfo.IndexOf("animations\":{")).Substring(13);
            int tempSymbolNum = 0;
            bool isRecording = true;
            string strKeyPaty = "";

List<String> keyList = new List<String>();
            for (int i = 0; i < strDealInfo.Length; i++)
            {
                string strTemp = strDealInfo.Substring(i, 1);
                if (isRecording)
                {
                    strKeyPaty = strKeyPaty + strTemp;
                }
                if ("{".Equals(strTemp))
                {
                    tempSymbolNum = tempSymbolNum + 1;
                    if (isRecording)
                    {
                        keyList.Add(strKeyPaty);
                        isRecording = false;
                        strKeyPaty = "";
                    }
                }
                else if ("}".Equals(strTemp))
                {
                    tempSymbolNum = tempSymbolNum - 1;
                    if (tempSymbolNum == 0)
                    {
                        isRecording = true;
                    }
                }
            }
            for (int i = 0; i < keyList.ToArray().Length; i++)
            {
                keyList[i] = keyList[i].Replace("\":{", "").Replace("\"", "").Replace(",", "");
            }
            return keyList;
        }`

### 4.配置信息的读写
	spine运行，有窗体的大小/缩放等信息，也需要写入/读取，核心代码如下
	`public static string winWidth = "12801";
        public static string winHeight = "7201";
        public static string spineScale = "11";

public static string strWidth = "runWidth";
        public static string strHeight = "runHeight";
        public static string strScale = "runScale";public static void readConfigInfo()
        {
            string dirFilePath = fileName + @"\src\spineConfig.lua";
            StreamReader m_rd = new StreamReader(dirFilePath);

string strLine = m_rd.ReadLine();
            while(strLine != null)
            {
                if (strLine.StartsWith(strWidth)) {
                    winWidth = strLine.Replace(" ", "").Replace(strWidth + "=", "");
                } else if (strLine.StartsWith(strHeight)) {
                    winHeight = strLine.Replace(" ", "").Replace(strHeight + "=", "");
                }else if (strLine.StartsWith(strScale)){
                    spineScale = strLine.Replace(" ", "").Replace(strScale + "=", "");
                }
                strLine = m_rd.ReadLine();
            }
            m_rd.Close();
        }`
### 5. 代码实现，执行CMD命令
	因为是纯点击按钮实现功能， 需要把运行lua-test.exe 方法改为 代码实现。自此，c# WFM的功能做完了，接下来开发cocos 对应的代码。cmd 代码实现如下
	`public static void runExe()
        {
            string resultStr = "";
            string strCmdStr = "start " + fileName + @"\lua-tests.exe ";
            string[] cmdK = { strCmdStr };
            RunCMDCommand(out resultStr, cmdK);
        }

private static void RunCMDCommand(out string outPut, params string[] command)
        {
            using (Process pc = new Process())
            {
                Console.WriteLine("8545648948");
                pc.StartInfo.FileName = "cmd.exe";
                pc.StartInfo.CreateNoWindow = false;//隐藏窗口运行
                pc.StartInfo.RedirectStandardError = true;//重定向错误流
                pc.StartInfo.RedirectStandardInput = true;//重定向输入流
                pc.StartInfo.RedirectStandardOutput = true;//重定向输出流
                pc.StartInfo.UseShellExecute = false;
                pc.Start();
                int lenght = command.Length;
                foreach (string com in command)
                {
                    pc.StandardInput.WriteLine(com);//输入CMD命令
                }
                pc.StandardInput.WriteLine("exit");//结束执行，很重要的
                pc.StandardInput.AutoFlush = true;

outPut = pc.StandardOutput.ReadToEnd();//读取结果

pc.WaitForExit();
                pc.Close();
            }
        }`
## 开发cocos 相关功能
### 	1.整理官方demo
	因为官方demo带了cocos2dx所有的功能，此处仅仅需要spine对应的功能，所以删除一些没有用的代码。整理后的结构如下图，资源全都删除即可，也需要改一下相关代码，接下来会讲。
![结构](/contentImages/image/20200726/KdXgaDjStot5AYZMpb6.png "结构")
###   2.lua 代码编写准备
	接下来，进行lua代码的编写， 不熟悉cocos2dx+lua的同学，可以网上百度，简单学习一下。（或者下载此案例，包含了所有源代码，简单了解，很快会上手）
	在上述c# WFM 窗体应用中，已经创建了 spineConfig.lua / info.lua 文件，里面的内容为
	
	info.lua ： 动画名
	`tblAnimName = {"death", "hit", "idle", "jump", "run", "shoot", "test", "walk", }`
	spineConfig.lua：配置信息
	`runWidth=1280
	runHeight=720
	runScale=0.5
	runSpineName="spineboy"
	runSpineStartIndexN=1
	runSpineEndIndexN=8`
### 3.运行cocos相关代码修改
	 需要修改 controller.lua 文件，把 spineConfig.lua / info.lua 文件进行 require， 读取配置，修改默认的缩放模式，代码如下
	 
	require "spineConfig
	require "info"
	if nil == glView then 
		glView = cc.GLViewImpl:createWithRect("Lua Tests", cc.rect(0,0,runWidth, runHeight))
		director:setOpenGLView(glView)
	end
	director:setDisplayStats(true)
	director:setAnimationInterval(1.0 / 60)
	local screenSize = glView:getFrameSize()
	-- local designSize = {width = 480, height = 320}
	local designSize = {width = 1280, height = 720}
	-- if screenSize.height > 320 then
	--     local resourceSize = {width = 960, height = 640}
	--     cc.Director:getInstance():setContentScaleFactor(resourceSize.height/designSize.height)
	-- end
	glView:setDesignResolutionSize(designSize.width, designSize.height, cc.ResolutionPolicy.FIXED_HEIGHT)`
### 4.spine展示效果实现 （重点）
    通过以上几步，基本差不多了，就差spine 对用的lua 代码的实现了，按钮的点击（左右切换），动画名的显示。所以，需要修改 mainMenu.lua 文件，对应的CreateTestMenu() 方法，改为自己所需的即可。代码如下
	`local curSpineIndex  = 1
	local tblAllSpineName = {}
	local nodeSpine
	local textInfo

function initArges()
		for i = runSpineStartIndexN,runSpineEndIndexN do
			table.insert(tblAllSpineName, tblAnimName[i])
		end
	end

function CreateTestMenu()
		initArges()

local size = cc.Director:getInstance():getWinSize()
		local layer = cc.Layer:create()
		local nodeCenter = cc.Node:create()
		layer:addChild(nodeCenter)
		nodeCenter:setPosition(cc.p(size.width/ 2, size.height/2))

-- 图片
		local imgPath = "useBg.png"
		if cc.FileUtils:getInstance():isFileExist(imgPath) then
			local spTimp = cc.Sprite:create(imgPath)
			nodeCenter:addChild(spTimp)
		end

-- 按钮
		nodeCenter:addChild(createBtn(false, size))
		nodeCenter:addChild(createBtn(true, size))
		-- spine
		nodeSpine = cc.Node:create()
		nodeCenter:addChild(nodeSpine)

-- 文字
		textInfo = cc.Label:createWithTTF("dasd", "arial.ttf", 32)
		nodeCenter:addChild(textInfo)
		textInfo:setAnchorPoint(cc.p(0, 1))
		textInfo:setPosition(cc.p(-size.width/ 2 + 20, size.height/2 - 20))
		textInfo:setOpacity(150)
		 runSpineAction()
		return layer
	end
	-- 运行spine 方法
	function runSpineAction() 
		nodeSpine:removeAllChildren()
		local spine = sp.SkeletonAnimation:create("spine/" .. runSpineName .. ".json", "spine/" .. runSpineName .. ".atlas", 1)
		spine:setAnimation(0, tblAllSpineName[curSpineIndex], true)
		nodeSpine:addChild(spine)
		spine:setScale(runScale)
		textInfo:setString(tblAllSpineName[curSpineIndex])
	end

function createBtn(isRight, size) --创建按钮
		local function touchEvent(sender,eventType)
			if eventType == ccui.TouchEventType.ended then
				curSpineIndex = isRight and  curSpineIndex + 1 or curSpineIndex - 1
				if curSpineIndex > #tblAllSpineName then curSpineIndex = 1 end    
				if curSpineIndex <= 0 then curSpineIndex = #tblAllSpineName end 
				runSpineAction()
			end
		end
		local button = ccui.Button:create()
		button:setTouchEnabled(true)
		button:setScale9Enabled(true)
		button:loadTextures("btn_bg.png", "btn_bg.png", "")
		button:addTouchEventListener(touchEvent)
		button:setPosition(cc.p(0, 0))
		if isRight then
			button:setAnchorPoint(cc.p(0, 0.5))
		else
			button:setAnchorPoint(cc.p(1, 0.5))
		end
		button:setContentSize(cc.size(size.width/ 2 -10, size.height-10))
		button:setOpacity(0)
		return button
	end`
### 	5.cocos使用总结
	自此，所有的功能都实现了，比较复杂的是， 上方的代码， 包含了展示/切换/文字修改/按钮点击 等内容，不熟悉的同学，请多多练习理解官方demo，相信很快就会上手。
	
# 总结
	此工具真的很方便，通过c# WFM + cocos2dx+lua ，多维度编程，把各个语言的优点发挥到极致，以最小最少的开发成本，实现比较好的效果。 c# WFM + XX 的开发模式，对任何不管什么方向的程序员都很重要，可以编写 “所需的运行代码”，会大大提高工作效率，单纯的c# WFM 开发 也很重要，对于经常使用 windows系统的人来说，所有的cmd 命令，几乎所有软件的实现（比如ps，录屏软件等等），所有的鼠标操作，等等功能，统统都可以 自己使用 c# WFM 实现，将会有效提高自身的工作效率。
	c# WFM + cocos2dx+lua 不仅仅只是 spine 动画查看的实现，许多许多 cocos2dx 相关的内容，比如精灵/shader/粒子 等等 的使用， 都可以采用此方法，后续我也会多多尝试。希望大家多多尝试使用。
	最后，编写不易，请多多支持。（后续会有更多的内容！）

# 项目结构图
![](/contentImages/image/20200726/AvQ6tDiwJMesAYkCD8w.png)

![](/contentImages/image/20200726/4jzMRFesWHnVkB2yuVK.png)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

spine动画显示工具实现（cocos版）

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子