526互联

web页面播放spine动画及播放相关使用及总结spine-player.js

发布时间 2023-04-19 19:05:32作者: 靖儿

1.官方git,里面有些例子可以参考。

https://github.com/EsotericSoftware/spine-runtimes.git

2.官方播放器：

http://zh.esotericsoftware.com/spine-player

目前测试4.0以上的js支持动画模型透明

3.最基本的资源初始化

html代码里面：<div id="player-container" style="width: 640px; height: 480px;"></div>
三种最基本资源：.json、.atlas、.png 文件。
js:
new spine.SpinePlayer("player-container", {
 // Absolute URLs
 jsonUrl: "https://esotericsoftware.com/files/examples/4.0/spineboy/export/spineboy-pro.json",//json文件
 atlasUrl: "https://esotericsoftware.com/files/examples/4.0/spineboy/export/spineboy-pma.atlas"//资源文件里面有贴图文件路径，贴图png要跟这资源放一起（还没试过单独修改指定）
});

 

            window.obj = new spine.SpinePlayer("player-container", {
                jsonUrl: "./assets3/151302.json",//json资源
                atlasUrl: "./assets3/151302.atlas",//贴图动画信息
                //backgroundColor: "#ff00ffff", // 设置背景颜色
                animations: ['touch1','touch2' ], // 配置动画名称列表
                alpha: true, // 是否背景透明
                showControls: false, // 是否显示播放器控制台
                success: function (player) {//等success里面的player对象产生后，obj才有值，且和player一样
                    console.log(player==obj)
                    console.log(obj.animationState.data.skeletonData.animations,'1111') //动画列表
                    //obj.setAnimation('touch1')//主动调用播放动画
                    //player.skeleton.setAttachment("weapon", "sword");
                    //player.animationState.setAnimation(0, "jump");
                    //player.animationState.addAnimation(0, "walk", true, 0);
                }
            });

4.spine导出的动画png图片可以去tinypng.com 压缩一下，估计能压缩70%

官方其他版本js:

 

<script  src="https://zh.esotericsoftware.com/files/spine-player/3.8/spine-player.js"></script>
    <link rel="stylesheet" href="http://esotericsoftware.com/files/spine-player/3.8/spine-player.css" />


<script  src="https://zh.esotericsoftware.com/files/spine-player/4.0/spine-player.js"></script>
    <link rel="stylesheet" href="http://esotericsoftware.com/files/spine-player/4.0/spine-player.css" />


<script  src="https://zh.esotericsoftware.com/files/spine-player/4.1/spine-player.js"></script>
    <link rel="stylesheet" href="http://esotericsoftware.com/files/spine-player/4.1/spine-player.css" />