jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Spine Update

Browse source 
Spine loader added
Spine Runtime added
Spine Object added
Spine example added
This commit is contained in:
Mat Groves 2013-06-12 12:43:49 +01:00
parent 14830bf6da
commit 4b5ef3eba8
22 changed files with 11948 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
Gruntfile.js
View file

@ -34,6 +34,7 @@ module.exports = function(grunt) {
'<%= dirs.src %>/extras/Strip.js',
'<%= dirs.src %>/extras/Rope.js',
'<%= dirs.src %>/extras/TilingSprite.js',
'<%= dirs.src %>/extras/Spine.js',
'<%= dirs.src %>/extras/CustomRenderable.js',
'<%= dirs.src %>/textures/BaseTexture.js',
'<%= dirs.src %>/textures/Texture.js',
@ -43,6 +44,7 @@ module.exports = function(grunt) {
'<%= dirs.src %>/loaders/SpriteSheetLoader.js',
'<%= dirs.src %>/loaders/ImageLoader.js',
'<%= dirs.src %>/loaders/BitmapFontLoader.js',
'<%= dirs.src %>/loaders/SpineLoader.js',
'<%= dirs.src %>/Outro.js'
], banner = [
'/**',
@ -112,7 +114,8 @@ module.exports = function(grunt) {
'examples/example 8 - Dragging',
'examples/example 9 - Tiling Texture',
'examples/example 10 - Text',
'examples/example 11 - RenderTexture'
'examples/example 11 - RenderTexture',
'examples/example 12 - Spine'
]
},
connect: {

188
examples/example 12 - Spine/data/Pixie.json Normal file
View file

@ -0,0 +1,188 @@
{"frames": {
"L_foot.png":
{
"frame": {"x":401,"y":609,"w":68,"h":51},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":68,"h":51},
"sourceSize": {"w":68,"h":51}
},
"L_hand.png":
{
"frame": {"x":968,"y":365,"w":55,"h":64},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":55,"h":64},
"sourceSize": {"w":55,"h":64}
},
"L_lower_arm.png":
{
"frame": {"x":401,"y":576,"w":70,"h":31},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":70,"h":31},
"sourceSize": {"w":70,"h":31}
},
"L_lower_leg.png":
{
"frame": {"x":963,"y":546,"w":57,"h":65},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":57,"h":65},
"sourceSize": {"w":57,"h":65}
},
"L_upper_arm.png":
{
"frame": {"x":518,"y":486,"w":78,"h":74},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":78,"h":74},
"sourceSize": {"w":78,"h":74}
},
"L_upper_leg.png":
{
"frame": {"x":126,"y":587,"w":124,"h":71},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":124,"h":71},
"sourceSize": {"w":124,"h":71}
},
"R_foot.png":
{
"frame": {"x":473,"y":595,"w":68,"h":51},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":68,"h":51},
"sourceSize": {"w":68,"h":51}
},
"R_hand.png":
{
"frame": {"x":968,"y":299,"w":55,"h":64},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":55,"h":64},
"sourceSize": {"w":55,"h":64}
},
"R_lower_arm.png":
{
"frame": {"x":506,"y":562,"w":70,"h":31},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":70,"h":31},
"sourceSize": {"w":70,"h":31}
},
"R_lower_leg.png":
{
"frame": {"x":963,"y":479,"w":57,"h":65},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":57,"h":65},
"sourceSize": {"w":57,"h":65}
},
"R_upper_arm.png":
{
"frame": {"x":518,"y":410,"w":78,"h":74},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":78,"h":74},
"sourceSize": {"w":78,"h":74}
},
"R_upper_leg.png":
{
"frame": {"x":0,"y":587,"w":124,"h":71},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":124,"h":71},
"sourceSize": {"w":124,"h":71}
},
"backHair.png":
{
"frame": {"x":0,"y":410,"w":261,"h":175},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":261,"h":175},
"sourceSize": {"w":261,"h":175}
},
"foreWing.png":
{
"frame": {"x":263,"y":410,"w":253,"h":78},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":253,"h":78},
"sourceSize": {"w":253,"h":78}
},
"frontHair.png":
{
"frame": {"x":615,"y":0,"w":396,"h":297},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":396,"h":297},
"sourceSize": {"w":396,"h":297}
},
"groinal.png":
{
"frame": {"x":401,"y":490,"w":103,"h":84},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":103,"h":84},
"sourceSize": {"w":103,"h":84}
},
"head.png":
{
"frame": {"x":0,"y":0,"w":613,"h":408},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":613,"h":408},
"sourceSize": {"w":613,"h":408}
},
"jaw.png":
{
"frame": {"x":598,"y":479,"w":222,"h":124},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":222,"h":124},
"sourceSize": {"w":222,"h":124}
},
"midHair.png":
{
"frame": {"x":615,"y":299,"w":351,"h":178},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":351,"h":178},
"sourceSize": {"w":351,"h":178}
},
"neck.png":
{
"frame": {"x":252,"y":638,"w":65,"h":81},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":65,"h":81},
"sourceSize": {"w":65,"h":81}
},
"rearWing.png":
{
"frame": {"x":263,"y":490,"w":136,"h":146},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":136,"h":146},
"sourceSize": {"w":136,"h":146}
},
"vest.png":
{
"frame": {"x":822,"y":479,"w":139,"h":144},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":139,"h":144},
"sourceSize": {"w":139,"h":144}
}},
"meta": {
"app": "http://www.texturepacker.com",
"version": "1.0",
"image": "Pixie.png",
"format": "RGBA8888",
"size": {"w":1023,"h":719},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:d58d60a5edd2ac7a15c00bcd989497b2$"
}
}

BIN
examples/example 12 - Spine/data/Pixie.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 78 KiB

924
examples/example 12 - Spine/data/PixieSpineData.json Normal file
View file

@ -0,0 +1,924 @@
{
"bones": [
{ "name": "root" },
{ "name": "hip", "parent": "root", "x": -5.36, "y": 120.63 },
{ "name": "L leg upper", "parent": "hip", "length": 90.28, "x": -21.3, "y": -8.59, "rotation": -123.16 },
{ "name": "R leg upper", "parent": "hip", "length": 79.63, "x": 14.54, "y": -29.09, "rotation": -12.07 },
{ "name": "back", "parent": "hip", "length": 117.04, "x": 3.43, "y": 0.51, "rotation": 64.34 },
{ "name": "L arm upper", "parent": "back", "length": 88.01, "x": 120.71, "y": -25.79, "rotation": 108.03 },
{ "name": "L leg lower", "parent": "L leg upper", "length": 77.82, "x": 89.23, "y": 3.84, "rotation": -74.59 },
{ "name": "R arm upper", "parent": "back", "length": 82.87, "x": 107.42, "y": 16.92, "rotation": -108.18 },
{ "name": "R leg lower", "parent": "R leg upper", "length": 67.73, "x": 79.31, "y": -0.23, "rotation": -35.49 },
{ "name": "fore wing", "parent": "back", "length": 174.95, "x": 78.26, "y": 14.47, "rotation": 111.09 },
{ "name": "neck", "parent": "back", "length": 65.79, "x": 115.87, "y": -0.67, "rotation": -1.35 },
{ "name": "L arm lower", "parent": "L arm upper", "length": 57.67, "x": 84.14, "y": -0.57, "rotation": 35.83 },
{ "name": "L foot", "parent": "L leg lower", "length": 57.67, "x": 74.89, "y": -3.37, "rotation": 79.65 },
{ "name": "R arm lower", "parent": "R arm upper", "length": 58.76, "x": 80.97, "y": -3.48, "rotation": 56.62 },
{ "name": "R foot", "parent": "R leg lower", "length": 51.26, "x": 67.69, "y": -1.98, "rotation": 84.54 },
{ "name": "bone1", "parent": "fore wing", "x": 50.67, "y": 19.71 },
{ "name": "head", "parent": "neck", "length": 132.5, "x": 116.13, "y": 41.67, "rotation": -40.37 },
{ "name": "rear wing", "parent": "fore wing", "length": 123.2, "x": 2.22, "y": -11.57, "rotation": -30.89 },
{ "name": "L hand", "parent": "L arm lower", "length": 33.27, "x": 55.37, "y": 1.3, "rotation": 30.89 },
{ "name": "R hand", "parent": "R arm lower", "length": 33.34, "x": 58.46, "y": -1.24, "rotation": 25.65 },
{ "name": "hair back", "parent": "head", "length": 156.52, "x": 43.77, "y": 270.91, "rotation": 22.07 },
{ "name": "jaw", "parent": "head", "length": 139.22, "x": 8.71, "y": -33.25, "rotation": -46.82 },
{ "name": "hair mid", "parent": "hair back", "length": 191.57, "x": 155.16, "y": -89.36, "rotation": -17.61 },
{ "name": "hair front", "parent": "hair mid", "length": 202.73, "x": 48, "y": -100.58, "rotation": -18.29 }
],
"slots": [
{ "name": "L hand", "bone": "L hand", "attachment": "L_hand" },
{ "name": "L arm lower", "bone": "L arm lower", "attachment": "L_lower_arm" },
{ "name": "L arm upper", "bone": "L arm upper", "attachment": "L_upper_arm" },
{ "name": "rear wing", "bone": "rear wing", "attachment": "rearWing" },
{ "name": "L foot", "bone": "L foot", "attachment": "L_foot" },
{ "name": "L leg lower", "bone": "L leg lower", "attachment": "L_lower_leg" },
{ "name": "L leg upper", "bone": "L leg upper", "attachment": "L_upper_leg" },
{ "name": "R foot", "bone": "R foot", "attachment": "R_foot" },
{ "name": "R lower", "bone": "R leg lower", "attachment": "R_lower_leg" },
{ "name": "R upper", "bone": "R leg upper", "attachment": "R_upper_leg" },
{ "name": "hip", "bone": "hip", "attachment": "groinal" },
{ "name": "fore wing", "bone": "fore wing", "attachment": "foreWing" },
{ "name": "neck", "bone": "neck", "attachment": "neck" },
{ "name": "back", "bone": "back", "attachment": "vest" },
{ "name": "R arm upper", "bone": "R arm upper", "attachment": "R_upper_arm" },
{ "name": "R arm lower", "bone": "R arm lower", "attachment": "R_lower_arm" },
{ "name": "R hand", "bone": "R hand", "attachment": "R_hand" },
{ "name": "hair back", "bone": "hair back", "attachment": "backHair" },
{ "name": "hair front", "bone": "hair front", "attachment": "frontHair" },
{ "name": "head", "bone": "head", "attachment": "head" },
{ "name": "jaw", "bone": "jaw", "attachment": "jaw" },
{ "name": "hair mid", "bone": "hair mid", "attachment": "midHair" }
],
"skins": {
"default": {
"L arm lower": {
"L_lower_arm": { "x": 26.8, "y": 0.38, "rotation": -12.92, "width": 70, "height": 31 }
},
"L arm upper": {
"L_upper_arm": { "x": 43.44, "y": -0.75, "rotation": 43.61, "width": 78, "height": 74 }
},
"L foot": {
"L_foot": { "x": 25.73, "y": -3.97, "rotation": -37.09, "width": 68, "height": 51 }
},
"L hand": {
"L_hand": { "x": 16.53, "y": 5.33, "rotation": -19.13, "width": 55, "height": 64 }
},
"L leg lower": {
"L_lower_leg": { "x": 32.98, "y": 3.71, "rotation": 50.68, "width": 57, "height": 65 }
},
"L leg upper": {
"L_upper_leg": { "x": 34.37, "y": 6.89, "rotation": 14.72, "width": 124, "height": 71 }
},
"R arm lower": {
"R_lower_arm": { "x": 27.12, "y": 1.85, "rotation": -12.78, "width": 70, "height": 31 }
},
"R arm upper": {
"R_upper_arm": { "x": 40.47, "y": -2.66, "rotation": 43.84, "width": 78, "height": 74 }
},
"R foot": {
"R_foot": { "x": 19.53, "y": -8.7, "rotation": -36.33, "width": 68, "height": 51 }
},
"R hand": {
"R_hand": { "x": 17.09, "y": -3.59, "rotation": -38.44, "width": 55, "height": 64 }
},
"R lower": {
"R_lower_leg": { "x": 33.18, "y": -0.42, "rotation": 50.06, "width": 57, "height": 65 }
},
"R upper": {
"R_upper_leg": { "x": 26.1, "y": 2.57, "rotation": 14.14, "width": 124, "height": 71 }
},
"back": {
"vest": { "x": 47.37, "y": 12.63, "rotation": -64.34, "width": 139, "height": 144 }
},
"fore wing": {
"foreWing": { "x": 103.77, "y": -7.39, "rotation": -175.44, "width": 253, "height": 78 }
},
"hair back": {
"backHair": { "x": 71.84, "y": -6.96, "rotation": -44.69, "width": 261, "height": 175 }
},
"hair front": {
"frontHair": { "x": 144.79, "y": -43.44, "rotation": -8.77, "width": 396, "height": 297 }
},
"hair mid": {
"midHair": { "x": 98.77, "y": -24.19, "rotation": -27.07, "width": 351, "height": 178 }
},
"head": {
"head": { "x": 54.08, "y": 79.01, "rotation": -22.61, "width": 613, "height": 408 }
},
"hip": {
"groinal": { "x": -1.3, "y": -22.13, "width": 103, "height": 84 }
},
"jaw": {
"jaw": { "x": 37.24, "y": -10.62, "rotation": 16.36, "width": 222, "height": 124 }
},
"neck": {
"neck": { "x": 11.64, "y": 0.09, "rotation": -62.99, "width": 65, "height": 81 }
},
"rear wing": {
"rearWing": { "x": 72.18, "y": -9.33, "rotation": -144.54, "width": 136, "height": 146 }
}
}
},
"animations": {
"jump": {
"bones": {
"hip": {
"rotate": [
{ "time": 0, "angle": 0, "curve": "stepped" },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{
"time": 0,
"x": 0,
"y": 0,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{
"time": 0.3666,
"x": 48.25,
"y": 387.29,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"L leg upper": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3666, "angle": -52.49 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"R leg upper": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3666, "angle": 42.23 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"back": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3666, "angle": 17.45 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.3666, "x": -12.48, "y": 6.24 },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"L arm upper": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3666, "angle": -23.04 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"L leg lower": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3666, "angle": 21.33 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"R arm upper": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3666, "angle": -20.49 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"R leg lower": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3666, "angle": 18.73 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"fore wing": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.1333, "angle": -17.83 },
{ "time": 0.2333, "angle": -0.57 },
{ "time": 0.3333, "angle": -22.57 },
{ "time": 0.4333, "angle": 6.45 },
{ "time": 0.5333, "angle": -15.51 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"neck": {
"rotate": [
{ "time": 0, "angle": 0, "curve": "stepped" },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"L arm lower": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3666, "angle": 16.6 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"L foot": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3333, "angle": -19.99 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.3333, "x": -13.89, "y": -5.83 },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"R arm lower": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3666, "angle": 54.98 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"R foot": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3666, "angle": -4.87 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"bone1": {
"rotate": [
{ "time": 0, "angle": 0, "curve": "stepped" },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"head": {
"rotate": [
{
"time": 0,
"angle": 0,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{
"time": 0.3743,
"angle": 13.84,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"rear wing": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.1333, "angle": 30.94 },
{ "time": 0.2333, "angle": -24.35 },
{ "time": 0.3333, "angle": 25.11 },
{ "time": 0.4333, "angle": -6.54 },
{ "time": 0.5333, "angle": 24.65 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"L hand": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3666, "angle": 57.5 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"R hand": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3666, "angle": 3.65 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"hair back": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3333, "angle": 6.5 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"jaw": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3666, "angle": 5.72 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.3666, "x": -4.28, "y": 3.04 },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1 },
{ "time": 0.3666, "x": 1.169, "y": 1 },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"hair mid": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3333, "angle": 6.71 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
},
"hair front": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3333, "angle": -8.18 },
{ "time": 0.6666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.3333, "x": -17.24, "y": 20.35 },
{ "time": 0.6666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.6666, "x": 1, "y": 1 }
]
}
}
},
"running": {
"bones": {
"hip": {
"rotate": [
{ "time": 0, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 2.79 },
{ "time": 0.2333, "x": 0, "y": -15.43 },
{ "time": 0.5, "x": 0, "y": 8 },
{ "time": 0.7, "x": 0, "y": -8.92 },
{ "time": 0.9666, "x": 0, "y": 2.79 }
]
},
"R leg upper": {
"rotate": [
{
"time": 0,
"angle": 0,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{ "time": 0.5, "angle": -150.25 },
{ "time": 0.7, "angle": -110.91 },
{
"time": 0.8333,
"angle": -25.14,
"curve": [ 0.155, 0.16, 0.75, 1 ]
},
{ "time": 1, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.5, "x": -35.15, "y": 0 },
{ "time": 0.7, "x": -6.5, "y": 0 },
{ "time": 1, "x": 2.6, "y": 0 }
]
},
"R leg lower": {
"rotate": [
{
"time": 0,
"angle": 0,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{ "time": 0.5, "angle": 7.47 },
{ "time": 0.7, "angle": -53.49 },
{
"time": 0.8333,
"angle": -85.3,
"curve": [ 0.16, 0.21, 0.75, 1 ]
},
{ "time": 1, "angle": 0 }
],
"translate": [
{ "time": 0.7, "x": 2.5, "y": -1.47 },
{ "time": 0.8333, "x": 3.93, "y": -5.18 }
]
},
"R foot": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.2, "angle": 7.03 },
{ "time": 0.2333, "angle": 18.45 },
{ "time": 0.2666, "angle": 26.41 },
{ "time": 0.3, "angle": 29.63 },
{ "time": 0.5, "angle": -22.49 },
{ "time": 0.7, "angle": -30.93 },
{ "time": 0.8333, "angle": -50.37 },
{ "time": 1, "angle": 0 }
],
"translate": [
{ "time": 0.5, "x": 0.7, "y": -3.84 }
]
},
"L leg upper": {
"rotate": [
{
"time": 0,
"angle": -30.25,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{ "time": 0.2333, "angle": 77.26 },
{
"time": 0.5,
"angle": 104.21,
"curve": [ 0.25, 0, 0.29, 1 ]
},
{ "time": 1, "angle": -30.25 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.5, "x": 22.13, "y": -16.92 },
{ "time": 1, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1, "x": 1, "y": 1 }
]
},
"L leg lower": {
"rotate": [
{
"time": 0,
"angle": 22.34,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{
"time": 0.2333,
"angle": -65.53,
"curve": [ 0.094, -0.03, 0.678, 1.08 ]
},
{
"time": 0.5,
"angle": 43.39,
"curve": [ 0.25, 0, 0.287, 1 ]
},
{ "time": 1, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 1, "x": 0.58, "y": -1.74 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1, "x": 1, "y": 1 }
]
},
"L foot": {
"rotate": [
{ "time": 0, "angle": -22.23 },
{ "time": 0.2333, "angle": -1.44 },
{ "time": 0.5, "angle": 5.06 },
{ "time": 0.6333, "angle": 27.11 },
{ "time": 0.6666, "angle": 50.34 },
{ "time": 1, "angle": -12.47 }
],
"translate": [
{ "time": 0, "x": -4.13, "y": -3.42 },
{ "time": 0.6333, "x": 1.22, "y": 1.73 },
{ "time": 0.6666, "x": -0.56, "y": 5.49 },
{ "time": 1, "x": -0.87, "y": -0.96 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1, "x": 1, "y": 1 }
]
},
"back": {
"rotate": [
{ "time": 0, "angle": -1.79 },
{ "time": 0.2333, "angle": -10.71 },
{ "time": 0.5, "angle": -2.16 },
{ "time": 0.7, "angle": -10.27 },
{ "time": 0.9666, "angle": -1.79 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.2333, "x": 5.2, "y": -6.5 },
{ "time": 0.5, "x": 1.3, "y": -2.6 },
{ "time": 0.7, "x": 7.81, "y": -6.5 },
{ "time": 0.9666, "x": 0, "y": 0 }
]
},
"R arm upper": {
"rotate": [
{
"time": 0,
"angle": 0,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{ "time": 0.5, "angle": 235.62 },
{ "time": 0.7, "angle": -57.38 },
{ "time": 0.9666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1 }
]
},
"R arm lower": {
"rotate": [
{
"time": 0,
"angle": 0,
"curve": [ 0.068, 0, 0.632, 1.14 ]
},
{ "time": 0.5, "angle": -34.21 },
{
"time": 0.7,
"angle": 17.35,
"curve": [ 0.221, 0.26, 0.75, 1 ]
},
{ "time": 0.9666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1 }
]
},
"R hand": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.5, "angle": 30.13 },
{ "time": 0.7, "angle": 3.91 },
{ "time": 0.9666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1 }
]
},
"L arm upper": {
"rotate": [
{
"time": 0,
"angle": 0,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{
"time": 0.5,
"angle": -190.85,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{ "time": 0.9666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9666, "x": 0, "y": 0 }
]
},
"L hand": {
"rotate": [
{
"time": 0,
"angle": 0,
"curve": [ 0.25, 1, 0.75, 1 ]
},
{
"time": 0.5,
"angle": -15.76,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{ "time": 0.9666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9666, "x": 0, "y": 0 }
]
},
"L arm lower": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.3, "angle": 45.27 },
{ "time": 0.5, "angle": -20.97 },
{ "time": 0.9666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9666, "x": 0, "y": 0 }
]
},
"fore wing": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.2333, "angle": 17.36 },
{ "time": 0.5333, "angle": -2.27 },
{ "time": 0.7333, "angle": 20.14 },
{ "time": 0.9666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9666, "x": 0, "y": 0 }
]
},
"rear wing": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.2333, "angle": 17.36 },
{ "time": 0.5333, "angle": -2.27 },
{ "time": 0.7333, "angle": 20.14 },
{ "time": 0.9666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9666, "x": 0, "y": 0 }
]
},
"head": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.2666, "angle": -13.61 },
{ "time": 0.5, "angle": 0 },
{ "time": 0.7333, "angle": -11.08 },
{ "time": 0.9666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.2666, "x": 4.54, "y": -38.81 },
{ "time": 0.5, "x": 0, "y": 0 },
{ "time": 0.7333, "x": 0.32, "y": -40.1 },
{ "time": 0.9666, "x": 0, "y": 0 }
]
},
"jaw": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.2333, "angle": -3.93 },
{ "time": 0.4666, "angle": 8.79 },
{ "time": 0.7333, "angle": 13.97 },
{ "time": 0.9666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.2333, "x": 4.63, "y": 6.7 },
{ "time": 0.4666, "x": 6.67, "y": -4.82 },
{ "time": 0.7333, "x": 6.8, "y": -7.61 },
{ "time": 0.9666, "x": 0, "y": 0 }
]
},
"hair back": {
"rotate": [
{
"time": 0,
"angle": 0,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{
"time": 0.2333,
"angle": -3.9,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{
"time": 0.5,
"angle": 0,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{
"time": 0.7666,
"angle": -4,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{ "time": 0.9666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.2333, "x": -1.3, "y": -6.5 },
{ "time": 0.5, "x": 0, "y": 0 },
{ "time": 0.7666, "x": -3.49, "y": -10.15 },
{ "time": 0.9666, "x": 0, "y": 0 }
]
},
"hair front": {
"rotate": [
{
"time": 0,
"angle": 0,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{
"time": 0.2333,
"angle": -3.9,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{
"time": 0.5,
"angle": 0,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{
"time": 0.7666,
"angle": -4,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{ "time": 0.9666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9666, "x": 0, "y": 0 }
]
},
"hair mid": {
"rotate": [
{
"time": 0,
"angle": 0,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{
"time": 0.2333,
"angle": -3.9,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{
"time": 0.5,
"angle": 0,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{
"time": 0.7666,
"angle": -4,
"curve": [ 0.25, 0, 0.75, 1 ]
},
{ "time": 0.9666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9666, "x": 0, "y": 0 }
]
}
}
}
}
}

332
examples/example 12 - Spine/data/dragonBones.json Normal file
View file

@ -0,0 +1,332 @@
{"frames": {
"L_front_leg.png":
{
"frame": {"x":279,"y":1379,"w":84,"h":57},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":84,"h":57},
"sourceSize": {"w":84,"h":57}
},
"L_front_thigh.png":
{
"frame": {"x":193,"y":1379,"w":84,"h":72},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":84,"h":72},
"sourceSize": {"w":84,"h":72}
},
"L_rear_leg.png":
{
"frame": {"x":471,"y":600,"w":206,"h":177},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":206,"h":177},
"sourceSize": {"w":206,"h":177}
},
"L_rear_thigh.png":
{
"frame": {"x":569,"y":1228,"w":91,"h":149},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":91,"h":149},
"sourceSize": {"w":91,"h":149}
},
"L_wing01.png":
{
"frame": {"x":195,"y":1121,"w":191,"h":256},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":191,"h":256},
"sourceSize": {"w":191,"h":256}
},
"L_wing02.png":
{
"frame": {"x":388,"y":1147,"w":179,"h":269},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":179,"h":269},
"sourceSize": {"w":179,"h":269}
},
"L_wing03.png":
{
"frame": {"x":736,"y":1045,"w":186,"h":207},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":186,"h":207},
"sourceSize": {"w":186,"h":207}
},
"L_wing04.png":
{
"frame": {"x":763,"y":908,"w":188,"h":135},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":188,"h":135},
"sourceSize": {"w":188,"h":135}
},
"L_wing05.png":
{
"frame": {"x":251,"y":472,"w":218,"h":213},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":218,"h":213},
"sourceSize": {"w":218,"h":213}
},
"L_wing06.png":
{
"frame": {"x":1,"y":1018,"w":192,"h":331},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":192,"h":331},
"sourceSize": {"w":192,"h":331}
},
"L_wing07.png":
{
"frame": {"x":854,"y":339,"w":159,"h":255},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":159,"h":255},
"sourceSize": {"w":159,"h":255}
},
"L_wing08.png":
{
"frame": {"x":854,"y":156,"w":164,"h":181},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":164,"h":181},
"sourceSize": {"w":164,"h":181}
},
"L_wing09.png":
{
"frame": {"x":217,"y":687,"w":204,"h":167},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":204,"h":167},
"sourceSize": {"w":204,"h":167}
},
"R_front_leg.png":
{
"frame": {"x":679,"y":600,"w":101,"h":89},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":101,"h":89},
"sourceSize": {"w":101,"h":89}
},
"R_front_thigh.png":
{
"frame": {"x":625,"y":1118,"w":108,"h":108},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":108,"h":108},
"sourceSize": {"w":108,"h":108}
},
"R_rear_leg.png":
{
"frame": {"x":625,"y":937,"w":116,"h":100},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":116,"h":100},
"sourceSize": {"w":116,"h":100}
},
"R_rear_thigh.png":
{
"frame": {"x":924,"y":1115,"w":91,"h":149},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":91,"h":149},
"sourceSize": {"w":91,"h":149}
},
"R_wing01.png":
{
"frame": {"x":788,"y":596,"w":219,"h":310},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":219,"h":310},
"sourceSize": {"w":219,"h":310}
},
"R_wing02.png":
{
"frame": {"x":1,"y":711,"w":203,"h":305},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":203,"h":305},
"sourceSize": {"w":203,"h":305}
},
"R_wing03.png":
{
"frame": {"x":580,"y":95,"w":272,"h":247},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":272,"h":247},
"sourceSize": {"w":272,"h":247}
},
"R_wing04.png":
{
"frame": {"x":299,"y":95,"w":279,"h":144},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":279,"h":144},
"sourceSize": {"w":279,"h":144}
},
"R_wing05.png":
{
"frame": {"x":299,"y":241,"w":251,"h":229},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":251,"h":229},
"sourceSize": {"w":251,"h":229}
},
"R_wing06.png":
{
"frame": {"x":423,"y":779,"w":200,"h":366},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":200,"h":366},
"sourceSize": {"w":200,"h":366}
},
"R_wing07.png":
{
"frame": {"x":206,"y":856,"w":200,"h":263},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":200,"h":263},
"sourceSize": {"w":200,"h":263}
},
"R_wing08.png":
{
"frame": {"x":552,"y":344,"w":234,"h":254},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":234,"h":254},
"sourceSize": {"w":234,"h":254}
},
"R_wing09.png":
{
"frame": {"x":1,"y":357,"w":248,"h":204},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":248,"h":204},
"sourceSize": {"w":248,"h":204}
},
"back.png":
{
"frame": {"x":1,"y":1351,"w":190,"h":185},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":190,"h":185},
"sourceSize": {"w":190,"h":185}
},
"chest.png":
{
"frame": {"x":625,"y":813,"w":136,"h":122},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":136,"h":122},
"sourceSize": {"w":136,"h":122}
},
"chin.png":
{
"frame": {"x":1,"y":563,"w":214,"h":146},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":214,"h":146},
"sourceSize": {"w":214,"h":146}
},
"front_toeA.png":
{
"frame": {"x":854,"y":95,"w":29,"h":50},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":29,"h":50},
"sourceSize": {"w":29,"h":50}
},
"front_toeB.png":
{
"frame": {"x":788,"y":417,"w":56,"h":57},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":56,"h":57},
"sourceSize": {"w":56,"h":57}
},
"head.png":
{
"frame": {"x":1,"y":95,"w":296,"h":260},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":296,"h":260},
"sourceSize": {"w":296,"h":260}
},
"logo.png":
{
"frame": {"x":1,"y":1,"w":897,"h":92},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":897,"h":92},
"sourceSize": {"w":897,"h":92}
},
"rear-toe.png":
{
"frame": {"x":625,"y":1039,"w":109,"h":77},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":109,"h":77},
"sourceSize": {"w":109,"h":77}
},
"tail01.png":
{
"frame": {"x":900,"y":1,"w":120,"h":153},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":120,"h":153},
"sourceSize": {"w":120,"h":153}
},
"tail02.png":
{
"frame": {"x":679,"y":691,"w":95,"h":120},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":95,"h":120},
"sourceSize": {"w":95,"h":120}
},
"tail03.png":
{
"frame": {"x":471,"y":472,"w":73,"h":92},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":73,"h":92},
"sourceSize": {"w":73,"h":92}
},
"tail04.png":
{
"frame": {"x":788,"y":344,"w":56,"h":71},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":56,"h":71},
"sourceSize": {"w":56,"h":71}
},
"tail05.png":
{
"frame": {"x":788,"y":476,"w":52,"h":59},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":52,"h":59},
"sourceSize": {"w":52,"h":59}
},
"tail06.png":
{
"frame": {"x":924,"y":1045,"w":95,"h":68},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":95,"h":68},
"sourceSize": {"w":95,"h":68}
}},
"meta": {
"app": "http://www.texturepacker.com",
"version": "1.0",
"image": "dragonBones.png",
"format": "RGBA8888",
"size": {"w":1021,"h":1537},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:c753ed84c4fd09adbd6ca3b2ea2d4206$"
}
}

BIN
examples/example 12 - Spine/data/dragonBones.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 721 KiB

36
examples/example 12 - Spine/data/powerUp.json Normal file
View file

@ -0,0 +1,36 @@
{"frames": {
"star.png":
{
"frame": {"x":139,"y":0,"w":76,"h":72},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":76,"h":72},
"sourceSize": {"w":76,"h":72}
},
"token.png":
{
"frame": {"x":0,"y":152,"w":123,"h":122},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":123,"h":122},
"sourceSize": {"w":123,"h":122}
},
"wing.png":
{
"frame": {"x":0,"y":0,"w":137,"h":150},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":137,"h":150},
"sourceSize": {"w":137,"h":150}
}},
"meta": {
"app": "http://www.texturepacker.com",
"version": "1.0",
"image": "powerUp.png",
"format": "RGBA8888",
"size": {"w":215,"h":274},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$"
}
}

BIN
examples/example 12 - Spine/data/powerUp.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 55 KiB

787
examples/example 12 - Spine/data/spineboy.anim Executable file
View file

@ -0,0 +1,787 @@
{
"bones": [
{ "name": "root" },
{ "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 },
{ "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 },
{ "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 },
{ "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 },
{ "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 },
{ "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 },
{ "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 },
{ "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 },
{ "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 },
{ "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 },
{ "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 },
{ "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 },
{ "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 },
{ "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 },
{ "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 },
{ "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 },
{ "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 }
],
"slots": [
{ "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" },
{ "name": "left arm", "bone": "left arm", "attachment": "left-arm" },
{ "name": "left hand", "bone": "left hand", "attachment": "left-hand" },
{ "name": "left foot", "bone": "left foot", "attachment": "left-foot" },
{ "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" },
{ "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" },
{ "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" },
{ "name": "right foot", "bone": "right foot", "attachment": "right-foot" },
{ "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" },
{ "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" },
{ "name": "torso", "bone": "torso", "attachment": "torso" },
{ "name": "neck", "bone": "neck", "attachment": "neck" },
{ "name": "head", "bone": "head", "attachment": "head" },
{ "name": "eyes", "bone": "head", "attachment": "eyes" },
{ "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" },
{ "name": "right arm", "bone": "right arm", "attachment": "right-arm" },
{ "name": "right hand", "bone": "right hand", "attachment": "right-hand" }
],
"skins": {
"default": {
"left shoulder": {
"left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 }
},
"left arm": {
"left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 }
},
"left hand": {
"left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 }
},
"left foot": {
"left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 }
},
"left lower leg": {
"left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 }
},
"left upper leg": {
"left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 }
},
"pelvis": {
"pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 }
},
"right foot": {
"right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 }
},
"right lower leg": {
"right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 }
},
"right upper leg": {
"right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 }
},
"torso": {
"torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 }
},
"neck": {
"neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 }
},
"head": {
"head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 }
},
"eyes": {
"eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 },
"eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 }
},
"right shoulder": {
"right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 }
},
"right arm": {
"right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 }
},
"right hand": {
"right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 }
}
}
},
"animations": {
"walk": {
"bones": {
"left upper leg": {
"rotate": [
{ "time": 0, "angle": -26.55 },
{ "time": 0.1333, "angle": -8.78 },
{ "time": 0.2666, "angle": 9.51 },
{ "time": 0.4, "angle": 30.74 },
{ "time": 0.5333, "angle": 25.33 },
{ "time": 0.6666, "angle": 26.11 },
{ "time": 0.8, "angle": -7.7 },
{ "time": 0.9333, "angle": -21.19 },
{ "time": 1.0666, "angle": -26.55 }
],
"translate": [
{ "time": 0, "x": -3, "y": -2.25 },
{ "time": 0.4, "x": -2.18, "y": -2.25 },
{ "time": 1.0666, "x": -3, "y": -2.25 }
]
},
"right upper leg": {
"rotate": [
{ "time": 0, "angle": 42.45 },
{ "time": 0.1333, "angle": 52.1 },
{ "time": 0.2666, "angle": 5.96 },
{ "time": 0.5333, "angle": -16.93 },
{ "time": 0.6666, "angle": 1.89 },
{
"time": 0.8,
"angle": 28.06,
"curve": [ 0.462, 0.11, 1, 1 ]
},
{
"time": 0.9333,
"angle": 58.68,
"curve": [ 0.5, 0.02, 1, 1 ]
},
{ "time": 1.0666, "angle": 42.45 }
],
"translate": [
{ "time": 0, "x": 8.11, "y": -2.36 },
{ "time": 0.1333, "x": 10.03, "y": -2.56 },
{ "time": 0.4, "x": 2.76, "y": -2.97 },
{ "time": 0.5333, "x": 2.76, "y": -2.81 },
{ "time": 0.9333, "x": 8.67, "y": -2.54 },
{ "time": 1.0666, "x": 8.11, "y": -2.36 }
]
},
"left lower leg": {
"rotate": [
{ "time": 0, "angle": -10.21 },
{ "time": 0.1333, "angle": -55.64 },
{ "time": 0.2666, "angle": -68.12 },
{ "time": 0.5333, "angle": 5.11 },
{ "time": 0.6666, "angle": -28.29 },
{ "time": 0.8, "angle": 4.08 },
{ "time": 0.9333, "angle": 3.53 },
{ "time": 1.0666, "angle": -10.21 }
]
},
"left foot": {
"rotate": [
{ "time": 0, "angle": -3.69 },
{ "time": 0.1333, "angle": -10.42 },
{ "time": 0.2666, "angle": -17.14 },
{ "time": 0.4, "angle": -2.83 },
{ "time": 0.5333, "angle": -3.87 },
{ "time": 0.6666, "angle": 2.78 },
{ "time": 0.8, "angle": 1.68 },
{ "time": 0.9333, "angle": -8.54 },
{ "time": 1.0666, "angle": -3.69 }
]
},
"right shoulder": {
"rotate": [
{
"time": 0,
"angle": 20.89,
"curve": [ 0.264, 0, 0.75, 1 ]
},
{
"time": 0.1333,
"angle": 3.72,
"curve": [ 0.272, 0, 0.841, 1 ]
},
{ "time": 0.6666, "angle": -278.28 },
{ "time": 1.0666, "angle": 20.89 }
],
"translate": [
{ "time": 0, "x": -7.84, "y": 7.19 },
{ "time": 0.1333, "x": -6.36, "y": 6.42 },
{ "time": 0.6666, "x": -11.07, "y": 5.25 },
{ "time": 1.0666, "x": -7.84, "y": 7.19 }
]
},
"right arm": {
"rotate": [
{
"time": 0,
"angle": -4.02,
"curve": [ 0.267, 0, 0.804, 0.99 ]
},
{
"time": 0.1333,
"angle": -13.99,
"curve": [ 0.341, 0, 1, 1 ]
},
{
"time": 0.6666,
"angle": 36.54,
"curve": [ 0.307, 0, 0.787, 0.99 ]
},
{ "time": 1.0666, "angle": -4.02 }
]
},
"right hand": {
"rotate": [
{ "time": 0, "angle": 22.92 },
{ "time": 0.4, "angle": -8.97 },
{ "time": 0.6666, "angle": 0.51 },
{ "time": 1.0666, "angle": 22.92 }
]
},
"left shoulder": {
"rotate": [
{ "time": 0, "angle": -1.47 },
{ "time": 0.1333, "angle": 13.6 },
{ "time": 0.6666, "angle": 280.74 },
{ "time": 1.0666, "angle": -1.47 }
],
"translate": [
{ "time": 0, "x": -1.76, "y": 0.56 },
{ "time": 0.6666, "x": -2.47, "y": 8.14 },
{ "time": 1.0666, "x": -1.76, "y": 0.56 }
]
},
"left hand": {
"rotate": [
{
"time": 0,
"angle": 11.58,
"curve": [ 0.169, 0.37, 0.632, 1.55 ]
},
{
"time": 0.1333,
"angle": 28.13,
"curve": [ 0.692, 0, 0.692, 0.99 ]
},
{
"time": 0.6666,
"angle": -27.42,
"curve": [ 0.117, 0.41, 0.738, 1.76 ]
},
{ "time": 0.8, "angle": -36.32 },
{ "time": 1.0666, "angle": 11.58 }
]
},
"left arm": {
"rotate": [
{ "time": 0, "angle": -8.27 },
{ "time": 0.1333, "angle": 18.43 },
{ "time": 0.6666, "angle": 0.88 },
{ "time": 1.0666, "angle": -8.27 }
]
},
"torso": {
"rotate": [
{ "time": 0, "angle": -10.28 },
{
"time": 0.1333,
"angle": -15.38,
"curve": [ 0.545, 0, 1, 1 ]
},
{
"time": 0.4,
"angle": -9.78,
"curve": [ 0.58, 0.17, 1, 1 ]
},
{ "time": 0.6666, "angle": -15.75 },
{ "time": 0.9333, "angle": -7.06 },
{ "time": 1.0666, "angle": -10.28 }
],
"translate": [
{ "time": 0, "x": -3.67, "y": 1.68 },
{ "time": 0.1333, "x": -3.67, "y": 0.68 },
{ "time": 0.4, "x": -3.67, "y": 1.97 },
{ "time": 0.6666, "x": -3.67, "y": -0.14 },
{ "time": 1.0666, "x": -3.67, "y": 1.68 }
]
},
"right foot": {
"rotate": [
{ "time": 0, "angle": -5.25 },
{ "time": 0.2666, "angle": -4.08 },
{ "time": 0.4, "angle": -6.45 },
{ "time": 0.5333, "angle": -5.39 },
{ "time": 0.8, "angle": -11.68 },
{ "time": 0.9333, "angle": 0.46 },
{ "time": 1.0666, "angle": -5.25 }
]
},
"right lower leg": {
"rotate": [
{ "time": 0, "angle": -3.39 },
{ "time": 0.1333, "angle": -45.53 },
{ "time": 0.2666, "angle": -2.59 },
{ "time": 0.5333, "angle": -19.53 },
{ "time": 0.6666, "angle": -64.8 },
{
"time": 0.8,
"angle": -82.56,
"curve": [ 0.557, 0.18, 1, 1 ]
},
{ "time": 1.0666, "angle": -3.39 }
]
},
"hip": {
"rotate": [
{ "time": 0, "angle": 0, "curve": "stepped" },
{ "time": 1.0666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{
"time": 0.1333,
"x": 0,
"y": -7.61,
"curve": [ 0.272, 0.86, 1, 1 ]
},
{ "time": 0.4, "x": 0, "y": 8.7 },
{ "time": 0.5333, "x": 0, "y": -0.41 },
{
"time": 0.6666,
"x": 0,
"y": -7.05,
"curve": [ 0.235, 0.89, 1, 1 ]
},
{ "time": 0.8, "x": 0, "y": 2.92 },
{ "time": 0.9333, "x": 0, "y": 6.78 },
{ "time": 1.0666, "x": 0, "y": 0 }
]
},
"neck": {
"rotate": [
{ "time": 0, "angle": 3.6 },
{ "time": 0.1333, "angle": 17.49 },
{ "time": 0.2666, "angle": 6.1 },
{ "time": 0.4, "angle": 3.45 },
{ "time": 0.5333, "angle": 5.17 },
{ "time": 0.6666, "angle": 18.36 },
{ "time": 0.8, "angle": 6.09 },
{ "time": 0.9333, "angle": 2.28 },
{ "time": 1.0666, "angle": 3.6 }
]
},
"head": {
"rotate": [
{
"time": 0,
"angle": 3.6,
"curve": [ 0, 0, 0.704, 1.61 ]
},
{ "time": 0.1666, "angle": -0.2 },
{ "time": 0.2666, "angle": 6.1 },
{ "time": 0.4, "angle": 3.45 },
{
"time": 0.5333,
"angle": 5.17,
"curve": [ 0, 0, 0.704, 1.61 ]
},
{ "time": 0.7, "angle": 1.1 },
{ "time": 0.8, "angle": 6.09 },
{ "time": 0.9333, "angle": 2.28 },
{ "time": 1.0666, "angle": 3.6 }
]
}
}
},
"jump": {
"bones": {
"hip": {
"rotate": [
{ "time": 0, "angle": 0, "curve": "stepped" },
{ "time": 0.9333, "angle": 0, "curve": "stepped" },
{ "time": 1.3666, "angle": 0 }
],
"translate": [
{ "time": 0, "x": -11.57, "y": -3 },
{ "time": 0.2333, "x": -16.2, "y": -19.43 },
{
"time": 0.3333,
"x": 7.66,
"y": -8.48,
"curve": [ 0.057, 0.06, 0.712, 1 ]
},
{ "time": 0.3666, "x": 15.38, "y": 5.01 },
{ "time": 0.4666, "x": -7.84, "y": 57.22 },
{
"time": 0.6,
"x": -10.81,
"y": 96.34,
"curve": [ 0.241, 0, 1, 1 ]
},
{ "time": 0.7333, "x": -7.01, "y": 54.7 },
{ "time": 0.8, "x": -10.58, "y": 32.2 },
{ "time": 0.9333, "x": -31.99, "y": 0.45 },
{ "time": 1.0666, "x": -12.48, "y": -29.47 },
{ "time": 1.3666, "x": -11.57, "y": -3 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"left upper leg": {
"rotate": [
{ "time": 0, "angle": 17.13 },
{ "time": 0.2333, "angle": 44.35 },
{ "time": 0.3333, "angle": 16.46 },
{ "time": 0.4, "angle": -9.88 },
{ "time": 0.4666, "angle": -11.42 },
{ "time": 0.5666, "angle": 23.46 },
{ "time": 0.7666, "angle": 71.82 },
{ "time": 0.9333, "angle": 65.53 },
{ "time": 1.0666, "angle": 51.01 },
{ "time": 1.3666, "angle": 17.13 }
],
"translate": [
{ "time": 0, "x": -3, "y": -2.25, "curve": "stepped" },
{ "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" },
{ "time": 1.3666, "x": -3, "y": -2.25 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"left lower leg": {
"rotate": [
{ "time": 0, "angle": -16.25 },
{ "time": 0.2333, "angle": -52.21 },
{ "time": 0.4, "angle": 15.04 },
{ "time": 0.4666, "angle": -8.95 },
{ "time": 0.5666, "angle": -39.53 },
{ "time": 0.7666, "angle": -27.27 },
{ "time": 0.9333, "angle": -3.52 },
{ "time": 1.0666, "angle": -61.92 },
{ "time": 1.3666, "angle": -16.25 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"left foot": {
"rotate": [
{ "time": 0, "angle": 0.33 },
{ "time": 0.2333, "angle": 6.2 },
{ "time": 0.3333, "angle": 14.73 },
{ "time": 0.4, "angle": -15.54 },
{ "time": 0.4333, "angle": -21.2 },
{ "time": 0.5666, "angle": -7.55 },
{ "time": 0.7666, "angle": -0.67 },
{ "time": 0.9333, "angle": -0.58 },
{ "time": 1.0666, "angle": 14.64 },
{ "time": 1.3666, "angle": 0.33 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"right upper leg": {
"rotate": [
{ "time": 0, "angle": 25.97 },
{ "time": 0.2333, "angle": 46.43 },
{ "time": 0.3333, "angle": 22.61 },
{ "time": 0.4, "angle": 2.13 },
{
"time": 0.4666,
"angle": 0.04,
"curve": [ 0, 0, 0.637, 0.98 ]
},
{ "time": 0.6, "angle": 65.55 },
{ "time": 0.7666, "angle": 64.93 },
{ "time": 0.9333, "angle": 41.08 },
{ "time": 1.0666, "angle": 66.25 },
{ "time": 1.3666, "angle": 25.97 }
],
"translate": [
{ "time": 0, "x": 5.74, "y": 0.61 },
{ "time": 0.2333, "x": 4.79, "y": 1.79 },
{ "time": 0.3333, "x": 6.05, "y": -4.55 },
{ "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" },
{ "time": 1.0666, "x": 4.79, "y": 1.79 },
{ "time": 1.3666, "x": 5.74, "y": 0.61 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"right lower leg": {
"rotate": [
{ "time": 0, "angle": -27.46 },
{ "time": 0.2333, "angle": -64.03 },
{ "time": 0.4, "angle": -48.36 },
{ "time": 0.5666, "angle": -76.86 },
{ "time": 0.7666, "angle": -26.89 },
{ "time": 0.9, "angle": -18.97 },
{ "time": 0.9333, "angle": -14.18 },
{ "time": 1.0666, "angle": -80.45 },
{ "time": 1.3666, "angle": -27.46 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"right foot": {
"rotate": [
{ "time": 0, "angle": 1.08 },
{ "time": 0.2333, "angle": 16.02 },
{ "time": 0.3, "angle": 12.94 },
{ "time": 0.3333, "angle": 15.16 },
{ "time": 0.4, "angle": -14.7 },
{ "time": 0.4333, "angle": -12.85 },
{ "time": 0.4666, "angle": -19.18 },
{ "time": 0.5666, "angle": -15.82 },
{ "time": 0.6, "angle": -3.59 },
{ "time": 0.7666, "angle": -3.56 },
{ "time": 0.9333, "angle": 1.86 },
{ "time": 1.0666, "angle": 16.02 },
{ "time": 1.3666, "angle": 1.08 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"torso": {
"rotate": [
{ "time": 0, "angle": -13.35 },
{ "time": 0.2333, "angle": -48.95 },
{ "time": 0.4333, "angle": -35.77 },
{ "time": 0.6, "angle": -4.59 },
{ "time": 0.7666, "angle": 14.61 },
{ "time": 0.9333, "angle": 15.74 },
{ "time": 1.0666, "angle": -32.44 },
{ "time": 1.3666, "angle": -13.35 }
],
"translate": [
{ "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" },
{ "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" },
{ "time": 1.3666, "x": -3.67, "y": 1.68 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"neck": {
"rotate": [
{ "time": 0, "angle": 12.78 },
{ "time": 0.2333, "angle": 16.46 },
{ "time": 0.4, "angle": 26.49 },
{ "time": 0.6, "angle": 15.51 },
{ "time": 0.7666, "angle": 1.34 },
{ "time": 0.9333, "angle": 2.35 },
{ "time": 1.0666, "angle": 6.08 },
{ "time": 1.3, "angle": 21.23 },
{ "time": 1.3666, "angle": 12.78 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"head": {
"rotate": [
{ "time": 0, "angle": 5.19 },
{ "time": 0.2333, "angle": 20.27 },
{ "time": 0.4, "angle": 15.27 },
{ "time": 0.6, "angle": -24.69 },
{ "time": 0.7666, "angle": -11.02 },
{ "time": 0.9333, "angle": -24.38 },
{ "time": 1.0666, "angle": 11.99 },
{ "time": 1.3, "angle": 4.86 },
{ "time": 1.3666, "angle": 5.19 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"left shoulder": {
"rotate": [
{
"time": 0,
"angle": 0.05,
"curve": [ 0, 0, 0.62, 1 ]
},
{
"time": 0.2333,
"angle": 279.66,
"curve": [ 0.218, 0.67, 0.66, 0.99 ]
},
{
"time": 0.5,
"angle": 62.27,
"curve": [ 0.462, 0, 0.764, 0.58 ]
},
{ "time": 0.9333, "angle": 28.91 },
{ "time": 1.0666, "angle": -8.62 },
{ "time": 1.1666, "angle": -18.43 },
{ "time": 1.3666, "angle": 0.05 }
],
"translate": [
{ "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" },
{ "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" },
{ "time": 1.3666, "x": -1.76, "y": 0.56 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"left hand": {
"rotate": [
{ "time": 0, "angle": 11.58, "curve": "stepped" },
{ "time": 0.9333, "angle": 11.58, "curve": "stepped" },
{ "time": 1.3666, "angle": 11.58 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"left arm": {
"rotate": [
{ "time": 0, "angle": 0.51 },
{ "time": 0.4333, "angle": 12.82 },
{ "time": 0.6, "angle": 47.55 },
{ "time": 0.9333, "angle": 12.82 },
{ "time": 1.1666, "angle": -6.5 },
{ "time": 1.3666, "angle": 0.51 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"right shoulder": {
"rotate": [
{
"time": 0,
"angle": 43.82,
"curve": [ 0, 0, 0.62, 1 ]
},
{
"time": 0.2333,
"angle": -8.74,
"curve": [ 0.304, 0.58, 0.709, 0.97 ]
},
{
"time": 0.5333,
"angle": -208.02,
"curve": [ 0.462, 0, 0.764, 0.58 ]
},
{ "time": 0.9333, "angle": -246.72 },
{ "time": 1.0666, "angle": -307.13 },
{ "time": 1.1666, "angle": 37.15 },
{ "time": 1.3666, "angle": 43.82 }
],
"translate": [
{ "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" },
{ "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" },
{ "time": 1.3666, "x": -7.84, "y": 7.19 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"right arm": {
"rotate": [
{ "time": 0, "angle": -4.02 },
{ "time": 0.6, "angle": 17.5 },
{ "time": 0.9333, "angle": -4.02 },
{ "time": 1.1666, "angle": -16.72 },
{ "time": 1.3666, "angle": -4.02 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"right hand": {
"rotate": [
{ "time": 0, "angle": 22.92, "curve": "stepped" },
{ "time": 0.9333, "angle": 22.92, "curve": "stepped" },
{ "time": 1.3666, "angle": 22.92 }
],
"translate": [
{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3666, "x": 0, "y": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
},
"root": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.4333, "angle": -14.52 },
{ "time": 0.8, "angle": 9.86 },
{ "time": 1.3666, "angle": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
{ "time": 1.3666, "x": 1, "y": 1 }
]
}
}
}
}
}

196
examples/example 12 - Spine/data/spineboy.json Executable file
View file

@ -0,0 +1,196 @@
{"frames": {
"head":
{
"frame": {"x":1,"y":122,"w":121,"h":132},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":121,"h":132},
"sourceSize": {"w":121,"h":132}
},
"torso":
{
"frame": {"x":1,"y":28,"w":68,"h":92},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":68,"h":92},
"sourceSize": {"w":68,"h":92}
},
"left-pant-bottom":
{
"frame": {"x":1,"y":4,"w":44,"h":22},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":44,"h":22},
"sourceSize": {"w":44,"h":22}
},
"right-pant-bottom":
{
"frame": {"x":47,"y":8,"w":46,"h":18},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":46,"h":18},
"sourceSize": {"w":46,"h":18}
},
"right-upper-leg":
{
"frame": {"x":71,"y":50,"w":44,"h":70},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":44,"h":70},
"sourceSize": {"w":44,"h":70}
},
"pelvis":
{
"frame": {"x":95,"y":1,"w":63,"h":47},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":63,"h":47},
"sourceSize": {"w":63,"h":47}
},
"left-upper-leg":
{
"frame": {"x":117,"y":53,"w":33,"h":67},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":33,"h":67},
"sourceSize": {"w":33,"h":67}
},
"right-foot":
{
"frame": {"x":160,"y":224,"w":67,"h":30},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":67,"h":30},
"sourceSize": {"w":67,"h":30}
},
"left-shoulder":
{
"frame": {"x":124,"y":201,"w":34,"h":53},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":34,"h":53},
"sourceSize": {"w":34,"h":53}
},
"left-ankle":
{
"frame": {"x":229,"y":222,"w":25,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":25,"h":32},
"sourceSize": {"w":25,"h":32}
},
"left-foot":
{
"frame": {"x":160,"y":192,"w":65,"h":30},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":65,"h":30},
"sourceSize": {"w":65,"h":30}
},
"neck":
{
"frame": {"x":124,"y":171,"w":34,"h":28},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":34,"h":28},
"sourceSize": {"w":34,"h":28}
},
"right-arm":
{
"frame": {"x":124,"y":124,"w":21,"h":45},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":21,"h":45},
"sourceSize": {"w":21,"h":45}
},
"right-ankle":
{
"frame": {"x":227,"y":190,"w":25,"h":30},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":25,"h":30},
"sourceSize": {"w":25,"h":30}
},
"left-hand":
{
"frame": {"x":147,"y":131,"w":35,"h":38},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":35,"h":38},
"sourceSize": {"w":35,"h":38}
},
"left-arm":
{
"frame": {"x":184,"y":161,"w":35,"h":29},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":35,"h":29},
"sourceSize": {"w":35,"h":29}
},
"eyes-closed":
{
"frame": {"x":221,"y":161,"w":34,"h":27},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":34,"h":27},
"sourceSize": {"w":34,"h":27}
},
"right-lower-leg":
{
"frame": {"x":152,"y":65,"w":51,"h":64},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":51,"h":64},
"sourceSize": {"w":51,"h":64}
},
"right-foot-idle":
{
"frame": {"x":184,"y":131,"w":53,"h":28},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":53,"h":28},
"sourceSize": {"w":53,"h":28}
},
"left-lower-leg":
{
"frame": {"x":205,"y":65,"w":49,"h":64},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":49,"h":64},
"sourceSize": {"w":49,"h":64}
},
"right-shoulder":
{
"frame": {"x":160,"y":12,"w":52,"h":51},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":52,"h":51},
"sourceSize": {"w":52,"h":51}
},
"eyes":
{
"frame": {"x":214,"y":36,"w":34,"h":27},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":34,"h":27},
"sourceSize": {"w":34,"h":27}
},
"right-hand":
{
"frame": {"x":214,"y":2,"w":32,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
"sourceSize": {"w":32,"h":32}
}},
"meta": {
"app": "http://www.texturepacker.com",
"version": "1.0",
"image": "spineboy.png",
"format": "RGBA8888",
"size": {"w":256,"h":256},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:93f9a66503bccd3c31cdba2ae4b91285$"
}
}

BIN
examples/example 12 - Spine/data/spineboy.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 65 KiB

101
examples/example 12 - Spine/index.html Normal file
View file

@ -0,0 +1,101 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 12 Spine</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
<script src="../../src/pixi/loaders/SpineLoader.js"></script>
<script src="../../src/pixi/extras/Spine.js"></script>
</head>
<body>
<script>
// create an array of assets to load
var assetsToLoader = ["data/spineboy.json", "data/spineboy.anim"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoader);
// use callback
loader.onComplete = onAssetsLoaded
//begin load
loader.load();
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
// create a renderer instance
var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
// set the canvas width and height to fill the screen
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
function onAssetsLoaded()
{
var spineBoy = new PIXI.Spine("data/spineboy.anim");
spineBoy.position.x = window.innerWidth/2;
spineBoy.position.y = window.innerHeight;
spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400;
// set up the mixes!
spineBoy.stateData.setMixByName("walk", "jump", 0.2);
spineBoy.stateData.setMixByName("jump", "walk", 0.4);
spineBoy.state.setAnimationByName("walk", true);
stage.addChild(spineBoy);
stage.click = function()
{
spineBoy.state.setAnimationByName("jump", false);
spineBoy.state.addAnimationByName("walk", true);
}
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = window.innerWidth
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = window.innerHeight - 70;
logo.setInteractive(true);
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
}
requestAnimFrame(animate);
function animate() {
requestAnimFrame( animate );
renderer.render(stage);
}
</script>
</body>
</html>

94
examples/example 12 - Spine/index_dragon.html Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 12 Spine</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// create an array of assets to load
var assetsToLoader = ["../../logo_small.png", "data/dragonBones.json", "data/dragonBonesData.json"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoader);
// use callback
loader.onComplete = onAssetsLoaded
//begin load
loader.load();
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
// create a renderer instance
var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
// set the canvas width and height to fill the screen
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
function onAssetsLoaded()
{
var dragon = new PIXI.Spine("data/dragonBonesData.json");
var scale = 1;//window.innerHeight / 700;
dragon.position.x = window.innerWidth/2;
dragon.position.y = window.innerHeight/2 + (450 * scale);
dragon.scale.x = dragon.scale.y = scale
dragon.state.setAnimationByName("flying", true);
stage.addChild(dragon);
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = window.innerWidth
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = window.innerHeight - 70;
logo.setInteractive(true);
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
}
requestAnimFrame(animate);
function animate() {
requestAnimFrame( animate );
renderer.render(stage);
}
</script>
</body>
</html>

148
examples/example 12 - Spine/index_pixie.html Normal file
View file

@ -0,0 +1,148 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 12 Spine</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// create an array of assets to load
var assetsToLoader = ["../../logo_small.png", "data/PixieSpineData.json", "data/Pixie.json", "data/iP4_BGtile.jpg", "data/iP4_ground.jpg"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoader);
// use callback
loader.onComplete = onAssetsLoaded;
//begin load
loader.load();
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
// create a renderer instance
var renderer = new PIXI.autoDetectRenderer(1024, 640);
// set the canvas width and height to fill the screen
renderer.view.style.display = "block";
renderer.view.style.width = "100%"
renderer.view.style.height = "100%"
// add render view to DOM
document.body.appendChild(renderer.view);
var postition = 0;
var background;
var background2;
function onAssetsLoaded()
{
background = PIXI.Sprite.fromImage("data/iP4_BGtile.jpg");
background2 = PIXI.Sprite.fromImage("data/iP4_BGtile.jpg");
stage.addChild(background);
stage.addChild(background2);
foreground = PIXI.Sprite.fromImage("data/iP4_ground.jpg");
foreground2 = PIXI.Sprite.fromImage("data/iP4_ground.jpg");
stage.addChild(foreground);
stage.addChild(foreground2);
foreground.position.y = foreground2.position.y = 640 - foreground2.height;
var dragon = new PIXI.Spine("data/PixieSpineData.json");
var scale = 0.3;//window.innerHeight / 700;
dragon.position.x = 1024/3;
dragon.position.y = 500
dragon.scale.x = dragon.scale.y = scale
//dragon.state.setAnimationByName("running", true);
stage.addChild(dragon);
dragon.stateData.setMixByName("running", "jump", 0.2);
dragon.stateData.setMixByName("jump", "running", 0.4);
dragon.state.setAnimationByName("running", true);
stage.click = function()
{
dragon.state.setAnimationByName("jump", false);
dragon.state.addAnimationByName("running", true);
}
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = 1024
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 640 - 70;
logo.setInteractive(true);
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
requestAnimFrame(animate);
}
function animate() {
postition += 10;
background.position.x = -(postition * 0.6);
background.position.x %= 1286 * 2;
if(background.position.x<0)background.position.x += 1286 * 2;
background.position.x -= 1286;
background2.position.x = -(postition * 0.6) + 1286;
background2.position.x %= 1286 * 2;
if(background2.position.x<0)background2.position.x += 1286 * 2;
background2.position.x -= 1286;
foreground.position.x = -postition;
foreground.position.x %= 1286 * 2;
if(foreground.position.x<0)foreground.position.x += 1286 * 2;
foreground.position.x -= 1286;
foreground2.position.x = -postition + 1286;
foreground2.position.x %= 1286 * 2;
if(foreground2.position.x<0)foreground2.position.x += 1286 * 2;
foreground2.position.x -= 1286;
requestAnimFrame( animate );
renderer.render(stage);
}
</script>
</body>
</html>

7452
examples/example 12 - Spine/pixi.js Normal file
View file

File diff suppressed because it is too large Load diff

2
src/pixi/Stage.js
View file

@ -28,6 +28,8 @@ PIXI.Stage = function(backgroundColor, interactive)
this.setBackgroundColor(backgroundColor);
this.worldVisible = true;
this.stage.dirty = true;
}
// constructor

1446
src/pixi/extras/Spine.js Normal file
View file

File diff suppressed because it is too large Load diff

5
src/pixi/loaders/AssetLoader.js
View file

@ -29,10 +29,13 @@ PIXI.AssetLoader = function(assetURLs)
"jpeg": PIXI.ImageLoader,
"png": PIXI.ImageLoader,
"gif": PIXI.ImageLoader,
"json": PIXI.SpriteSheetLoader,
"json": PIXI.JsonLoader,
"anim": PIXI.SpineLoader,
"xml": PIXI.BitmapFontLoader,
"fnt": PIXI.BitmapFontLoader
};
};
/**

55
src/pixi/loaders/JsonLoader.js
View file

@ -18,6 +18,8 @@ PIXI.JsonLoader = function (url, crossorigin) {
this.url = url;
this.baseUrl = url.replace(/[^\/]*$/, "");
this.crossorigin = crossorigin;
this.loaded = false;
};
// constructor
@ -46,7 +48,57 @@ PIXI.JsonLoader.prototype.onJSONLoaded = function () {
if (this.ajaxRequest.readyState == 4) {
if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) {
this.json = JSON.parse(this.ajaxRequest.responseText);
this.onLoaded();
if(this.json.frames)
{
// sprite sheet
var scope = this;
var textureUrl = this.baseUrl + this.json.meta.image;
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
var frameData = this.json.frames;
this.texture = image.texture.baseTexture;
image.addEventListener("loaded", function (event) {
scope.onLoaded();
});
for (var i in frameData) {
var rect = frameData[i].frame;
if (rect) {
PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {
x: rect.x,
y: rect.y,
width: rect.w,
height: rect.h
});
if (frameData[i].trimmed) {
//var realSize = frameData[i].spriteSourceSize;
PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize;
PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w)
// calculate the offset!
}
}
}
image.load();
}
else if(this.json.bones)
{
// spine animation
var spineJsonParser = new spine.SkeletonJson();
var skeletonData = spineJsonParser.readSkeletonData(this.json);
PIXI.AnimCache[this.url] = skeletonData;
this.onLoaded();
}
else
{
this.onLoaded();
}
} else {
this.onError();
}
@ -58,6 +110,7 @@ PIXI.JsonLoader.prototype.onJSONLoaded = function () {
* @private
*/
PIXI.JsonLoader.prototype.onLoaded = function () {
this.loaded = true;
this.dispatchEvent({
type: "loaded",
content: this

76
src/pixi/loaders/SpineLoader.js Normal file
View file

@ -0,0 +1,76 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
* based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi
*
* Awesome JS run time provided by EsotericSoftware
* https://github.com/EsotericSoftware/spine-runtimes
*
*/
/**
* The Spine loader is used to load in JSON spine data
* To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format
* Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load
* See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source
* You will need to generate a sprite sheet to accompany the spine data
* When loaded this class will dispatch a "loaded" event
* @class Spine
* @constructor
* @extends
* @param {String} url the url of the sprite sheet JSON file
* @param {Boolean} crossorigin
*/
PIXI.SpineLoader = function(url, crossorigin)
{
PIXI.EventTarget.call(this);
this.url = url;
this.crossorigin = crossorigin;
this.loaded = false;
}
PIXI.SpineLoader.constructor = PIXI.SpineLoader;
PIXI.SpineLoader.prototype.load = function()
{
new PIXI.JsonLoader(this.url, this.crossorigin);
jsonLoader.addEventListener("loaded", function (event) {
scope.json = event.content.json;
scope.onJSONLoaded();
});
jsonLoader.load();
};
PIXI.SpineLoader.prototype.load = function () {
var scope = this;
var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
jsonLoader.addEventListener("loaded", function (event) {
scope.json = event.content.json;
scope.onJSONLoaded();
});
jsonLoader.load();
};
/**
* Invoke when JSON file is loaded
* @private
*/
PIXI.SpineLoader.prototype.onJSONLoaded = function (event) {
var spineJsonParser = new spine.SkeletonJson();
var skeletonData = spineJsonParser.readSkeletonData(this.json);
PIXI.AnimCache[this.url] = skeletonData;
this.onLoaded();
};
PIXI.SpineLoader.prototype.onLoaded = function()
{
this.loaded = true;
this.dispatchEvent({type: "loaded", content: this});
};

3
src/pixi/renderers/WebGLBatch.js
View file

@ -233,6 +233,7 @@ PIXI.WebGLBatch.prototype.split = function(sprite)
//console.log(val + " SAME?");
var batch = new PIXI.WebGLBatch(this.gl)//PIXI._getBatch(this.gl);
batch.init(sprite);
batch.texture = this.texture;
batch.tail = this.tail;
//console.log("id is " +batcheee.id)
@ -439,7 +440,6 @@ PIXI.WebGLBatch.prototype.update = function()
tx = worldTransform[2];
ty = worldTransform[5];
this.verticies[index + 0 ] = a * w1 + c * h1 + tx;
this.verticies[index + 1 ] = d * h1 + b * w1 + ty;
@ -525,6 +525,7 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
{
this.refresh();
this.dirty = false;
}
if (this.size == 0)return;

104
src/pixi/renderers/WebGLRenderGroup.js
View file

@ -275,8 +275,8 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
child.textureChange = false;
if(child.worldVisible)
{
this.removeDisplayObject(child)
this.addDisplayObject(child)
//this.addDisplayObject(child);
this.updateTexture(child);
}
// update texture!!
}
@ -288,6 +288,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
};
}
PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
{
// we know this exists..
// is it in a batch..
// check batch length
if(displayObject.batch.length == 1)
{
// just one! this guy! so simply swap the texture
displayObject.batch.texture = displayObject.texture.baseTexture;
return;
}
// early out!
if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
if(displayObject.batch.head == displayObject)
{
//console.log("HEAD")
var currentBatch = displayObject.batch;
var index = this.batchs.indexOf( currentBatch );
var previousBatch = this.batchs[index-1];
currentBatch.remove(displayObject);
if(previousBatch)
{
if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode)
{
previousBatch.insertAfter(displayObject, previousBatch.tail);
}
else
{
// add it before..
var batch = PIXI.WebGLRenderer.getBatch();
batch.init(displayObject);
this.batchs.splice(index-1, 0, batch);
}
}
else
{
// we are 0!
var batch = PIXI.WebGLRenderer.getBatch();
batch.init(displayObject);
this.batchs.splice(0, 0, batch);
}
}
else if(displayObject.batch.tail == displayObject)
{
var currentBatch = displayObject.batch;
var index = this.batchs.indexOf( currentBatch );
var nextBatch = this.batchs[index+1];
currentBatch.remove(displayObject);
if(nextBatch)
{
if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode)
{
nextBatch.insertBefore(displayObject, nextBatch.head);
return;
}
else
{
// add it before..
var batch = PIXI.WebGLRenderer.getBatch();
batch.init(displayObject);
this.batchs.splice(index+1, 0, batch);
}
}
else
{
// we are 0!
var batch = PIXI.WebGLRenderer.getBatch();
batch.init(displayObject);
this.batchs.push(batch);
}
}
else
{
// console.log("MIDDLE")
var currentBatch = displayObject.batch;
// split the batch into 2
// AH! dont split on the current display object as the texture is wrong!
var splitBatch = currentBatch.split(displayObject);
// now remove the display object
splitBatch.remove(displayObject);
var batch = PIXI.WebGLRenderer.getBatch();
var index = this.batchs.indexOf( currentBatch );
batch.init(displayObject);
this.batchs.splice(index+1, 0, batch, splitBatch);
}
}
PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
{
// add a child to the render group..