Skip to content

Commit 6db49ea

Browse files
yiiqiiyiiqii
committed
init
0 parents  commit 6db49ea

File tree

151 files changed

+54097
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

151 files changed

+54097
-0
lines changed

‎.babelrc

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"env": {
3+
"test": {
4+
"presets": [
5+
["env"], "stage-0"
6+
]
7+
}
8+
}
9+
}

‎.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.eslintrc

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"extends": "standard",
3+
"root": true,
4+
"env": {
5+
"es6": true,
6+
"browser": true
7+
},
8+
"parser": "babel-eslint",
9+
"globals": {
10+
"Tiny": true,
11+
"window": true,
12+
"Image": true
13+
},
14+
"rules": {
15+
"semi": ["error", "always"],
16+
"spaced-comment": 0,
17+
"space-before-function-paren": 0,
18+
"comma-dangle": [1, "always-multiline"],
19+
"sort-imports": 0
20+
}
21+
}

‎.gitignore

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.idea
2+
.tmp
3+
node_modules
4+
.DS_Store
5+
npm-debug.log
6+
coverage
7+
dist
8+
docs
9+
/index.js
10+
/index.debug.js
11+
/main.js

‎CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
## 1.0.0
2+
3+
`2020-05-25`
4+
5+
- 首次发布

‎LICENSE

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
The MIT License
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.
20+
21+
---
22+
23+
Some pieces taken from SPINE-LICENSE under this license:
24+
25+
---
26+
27+
Spine Runtimes License Agreement
28+
Last updated May 1, 2019. Replaces all prior versions.
29+
30+
Copyright (c) 2013-2019, Esoteric Software LLC
31+
32+
Integration of the Spine Runtimes into software or otherwise creating
33+
derivative works of the Spine Runtimes is permitted under the terms and
34+
conditions of Section 2 of the Spine Editor License Agreement:
35+
http://esotericsoftware.com/spine-editor-license
36+
37+
Otherwise, it is permitted to integrate the Spine Runtimes into software
38+
or otherwise create derivative works of the Spine Runtimes (collectively,
39+
"Products"), provided that each user of the Products must obtain their own
40+
Spine Editor license and redistribution of the Products in any form must
41+
include this license and copyright notice.
42+
43+
THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE LLC "AS IS" AND ANY EXPRESS
44+
OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
45+
OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
46+
NO EVENT SHALL ESOTERIC SOFTWARE LLC BE LIABLE FOR ANY DIRECT, INDIRECT,
47+
INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
48+
BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS
49+
INTERRUPTION, OR LOSS OF USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY
50+
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
51+
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
52+
EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

‎README.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# tinyjs-plugin-spine
2+
3+
> Spine implementation for TinyJS
4+
5+
## 查看demo
6+
7+
http://tinyjs.net/plugins/tinyjs-plugin-spine.html#demo
8+
9+
## 引用方法
10+
11+
- 推荐作为依赖使用
12+
13+
- `npm install tinyjs-plugin-spine --save`
14+
15+
- 也可以直接引用线上cdn地址，注意要使用最新的版本号，例如：
16+
17+
- https://gw.alipayobjects.com/os/lib/tinyjs-plugin-spine/1.0.0/index.js
18+
- https://gw.alipayobjects.com/os/lib/tinyjs-plugin-spine/1.0.0/index.debug.js
19+
20+
## 起步
21+
首先当然是要引入，推荐`NPM`方式，当然你也可以使用`CDN`或下载独立版本，先从几个例子入手吧！
22+
23+
##### 1、最简单的例子
24+
25+
引用 Tiny.js 源码
26+
``` html
27+
<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.3.1/tiny.js"></script>
28+
```
29+
``` js
30+
var spine = require('tinyjs-plugin-spine');
31+
// 或者
32+
// import spine from 'tinyjs-plugin-spine';
33+
```
34+
35+
## 依赖
36+
- `Tiny.js`: [Link](http://tinyjs.net/api)
37+
38+
## API文档
39+
40+
http://tinyjs.net/plugins/tinyjs-plugin-spine.html#docs
41+
42+
``` js
43+
// loader params
44+
interface IMetadata {
45+
spineSkeletonScale?: number; // 缩放
46+
spineAtlas?: any;
47+
spineAtlasSuffix?: string; // 如：.atlas（也是默认值）
48+
spineAtlasFile?: string; // 使用自定义 atlas 文件链接，不使用和 .json 文件相对的拼接路径
49+
spineMetadata?: any; // spine 自定义 metadata 属性值
50+
imageNamePrefix?: string; // atlas 对应图片的文件名前缀，会拼接上 _atlas_page_，如：${name}_atlas_page_
51+
atlasRawData?: string;
52+
imageLoader?: any;
53+
images?: any;
54+
imageMetadata?: any;
55+
image?: any;
56+
}
57+
```

‎demo/alien.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>tinyjs-plugin-spine Demo</title>
6+
<meta content="yes" name="apple-mobile-web-app-capable"/>
7+
<meta content="yes" name="apple-touch-fullscreen"/>
8+
<meta content="telephone=no,email=no" name="format-detection"/>
9+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
10+
<style>
11+
html, body, p, div {margin:0;padding:0;}
12+
html, body {height:100%;width:100%;}
13+
</style>
14+
</head>
15+
<body>
16+
17+
<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.3.1/tiny.debug.js"></script>
18+
<script src="../index.debug.js"></script>
19+
20+
<script type="text/javascript">
21+
// 新建 App
22+
var app = new Tiny.Application({
23+
// debug: true,
24+
dpi: 2,
25+
showFPS: true,
26+
width: 320,
27+
height: 568,
28+
fixSize: true,
29+
renderOptions: {
30+
backgroundColor: 0x2a3145,
31+
},
32+
});
33+
34+
var spineInstance;
35+
var loader = new Tiny.loaders.Loader();
36+
var container = new Tiny.Container();
37+
var onAssetsLoaded = function(loader, res) {
38+
spineInstance = new Tiny.spine.Spine(res.spineRes.spineData);
39+
container.addChild(spineInstance);
40+
41+
var localRect = spineInstance.getLocalBounds();
42+
43+
spineInstance.setPivot(container.width / 2, container.height / 2);
44+
spineInstance.setPosition(Tiny.WIN_SIZE.width / 2 - localRect.x, Tiny.WIN_SIZE.height / 2 - localRect.y);
45+
spineInstance.state.setAnimation(0, 'run', true);
46+
47+
changeAnimation(container, spineInstance);
48+
}
49+
50+
loader
51+
.add('spineRes', './res/alien/alien.json')
52+
.load(onAssetsLoaded);
53+
app.run(container);
54+
55+
// changeAnimation
56+
function changeAnimation(container, spineInstance) {
57+
var singleAnimations = ['death', 'hit', 'jump'];
58+
var loopAnimations = ['run'];
59+
var allAnimations = [].concat(singleAnimations, loopAnimations);
60+
61+
container.setEventEnabled(true);
62+
container.hitArea = new Tiny.Rectangle(0, 0, Tiny.WIN_SIZE.width, Tiny.WIN_SIZE.height);
63+
container.on('pointerdown', function() {
64+
var animation = '';
65+
var currentAnimation = spineInstance.state.getCurrent(0).animation.name;
66+
67+
do {
68+
animation = Tiny.randomFromArray(allAnimations);
69+
} while (animation === currentAnimation);
70+
71+
console.log(animation);
72+
spineInstance.skeleton.setToSetupPose();
73+
spineInstance.state.setAnimation(0, animation, loopAnimations.indexOf(animation) !== -1);
74+
});
75+
}
76+
</script>
77+
</body>
78+
</html>

‎demo/coin.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>tinyjs-plugin-spine Demo</title>
6+
<meta content="yes" name="apple-mobile-web-app-capable"/>
7+
<meta content="yes" name="apple-touch-fullscreen"/>
8+
<meta content="telephone=no,email=no" name="format-detection"/>
9+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
10+
<style>
11+
html, body, p, div {margin:0;padding:0;}
12+
html, body {height:100%;width:100%;}
13+
</style>
14+
</head>
15+
<body>
16+
17+
<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.3.1/tiny.debug.js"></script>
18+
<script src="../index.debug.js"></script>
19+
20+
<script type="text/javascript">
21+
// 新建 App
22+
var app = new Tiny.Application({
23+
dpi: 2,
24+
showFPS: true,
25+
width: 320,
26+
height: 568,
27+
fixSize: true,
28+
renderOptions: {
29+
backgroundColor: 0x2a3145,
30+
},
31+
});
32+
33+
var spineInstance;
34+
var loader = new Tiny.loaders.Loader();
35+
var container = new Tiny.Container();
36+
var onAssetsLoaded = function(loader, res) {
37+
spineInstance = new Tiny.spine.Spine(res.spineRes.spineData);
38+
container.addChild(spineInstance);
39+
40+
var localRect = spineInstance.getLocalBounds();
41+
42+
spineInstance.setPivot(container.width / 2, container.height / 2);
43+
spineInstance.setPosition(Tiny.WIN_SIZE.width / 2 - localRect.x, Tiny.WIN_SIZE.height / 2 - localRect.y);
44+
spineInstance.state.setAnimation(0, 'animation', true);
45+
}
46+
47+
loader
48+
.add('spineRes', './res/coin/coin.json')
49+
.load(onAssetsLoaded);
50+
app.run(container);
51+
</script>
52+
</body>
53+
</html>

‎demo/dragon.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>tinyjs-plugin-spine Demo</title>
6+
<meta content="yes" name="apple-mobile-web-app-capable"/>
7+
<meta content="yes" name="apple-touch-fullscreen"/>
8+
<meta content="telephone=no,email=no" name="format-detection"/>
9+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
10+
<style>
11+
html, body, p, div {margin:0;padding:0;}
12+
html, body {height:100%;width:100%;}
13+
</style>
14+
</head>
15+
<body>
16+
17+
<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.3.1/tiny.debug.js"></script>
18+
<script src="../index.debug.js"></script>
19+
20+
<script type="text/javascript">
21+
// 新建 App
22+
var app = new Tiny.Application({
23+
dpi: 2,
24+
showFPS: true,
25+
width: 320,
26+
height: 568,
27+
fixSize: true,
28+
renderOptions: {
29+
backgroundColor: 0x2a3145,
30+
},
31+
});
32+
33+
var spineInstance;
34+
var loader = new Tiny.loaders.Loader();
35+
var container = new Tiny.Container();
36+
var onAssetsLoaded = function(loader, res) {
37+
spineInstance = new Tiny.spine.Spine(res.spineRes.spineData);
38+
spineInstance.skeleton.setToSetupPose();
39+
spineInstance.update(0);
40+
spineInstance.autoUpdate = false;
41+
container.addChild(spineInstance);
42+
43+
var localRect = spineInstance.getLocalBounds();
44+
45+
spineInstance.setPivot(container.width / 2, container.height / 2);
46+
spineInstance.setPosition(Tiny.WIN_SIZE.width / 2 - localRect.x, Tiny.WIN_SIZE.height / 2 - localRect.y);
47+
spineInstance.state.setAnimation(0, 'flying', true);
48+
}
49+
50+
loader
51+
.add({
52+
name: 'spineRes',
53+
url: './res/dragon/dragon.json',
54+
metadata: {
55+
spineSkeletonScale: 0.8,
56+
}
57+
})
58+
.load(onAssetsLoaded);
59+
app.run(container);
60+
app.onUpdate(function() {
61+
spineInstance && app.getCurrentFPS() && spineInstance.update(1 / app.getCurrentFPS());
62+
});
63+
</script>
64+
</body>
65+
</html>

0 commit comments

Comments
 (0)