[ts] More demo work

spine-ts/webgl/demos/assets/alien.atlas

@@ -1,153 +1,146 @@
 
 alien.png
-size: 1024,512
+size: 512,512
 format: RGBA8888
 filter: Linear,Linear
 repeat: none
 back_foot
-  rotate: true
+  rotate: false
-  xy: 1016, 366
+  xy: 145, 175
-  size: 8, 6
+  size: 5, 3
-  orig: 8, 6
+  orig: 5, 3
   offset: 0, 0
   index: -1
 back_shin
   rotate: false
-  xy: 28, 2
+  xy: 468, 437
-  size: 21, 24
+  size: 13, 14
-  orig: 21, 24
+  orig: 13, 14
   offset: 0, 0
   index: -1
 back_thigh
   rotate: false
-  xy: 2, 2
+  xy: 194, 237
-  size: 24, 24
+  size: 14, 14
-  orig: 24, 24
+  orig: 14, 14
   offset: 0, 0
   index: -1
 backarmor
   rotate: false
-  xy: 933, 295
+  xy: 2, 2
-  size: 81, 91
+  size: 49, 55
-  orig: 81, 91
+  orig: 49, 55
   offset: 0, 0
   index: -1
 blown_up_nck
   rotate: false
-  xy: 2, 28
+  xy: 97, 147
-  size: 77, 52
+  size: 46, 31
-  orig: 77, 52
+  orig: 46, 31
   offset: 0, 0
   index: -1
 body
-  rotate: true
+  rotate: false
-  xy: 781, 167
+  xy: 97, 180
-  size: 98, 118
+  size: 59, 71
-  orig: 98, 118
+  orig: 59, 71
   offset: 0, 0
   index: -1
 burst01
   rotate: false
-  xy: 788, 355
+  xy: 380, 417
-  size: 143, 155
+  size: 86, 93
-  orig: 143, 155
+  orig: 86, 93
   offset: 0, 0
   index: -1
 burst02
   rotate: false
-  xy: 630, 329
+  xy: 2, 143
-  size: 156, 181
+  size: 93, 108
-  orig: 156, 181
+  orig: 93, 108
   offset: 0, 0
   index: -1
 front_foot
-  rotate: true
+  rotate: false
-  xy: 1016, 376
+  xy: 455, 411
-  size: 10, 6
+  size: 6, 4
-  orig: 10, 6
+  orig: 6, 4
   offset: 0, 0
   index: -1
 front_lower_arm
-  rotate: true
+  rotate: false
-  xy: 81, 25
+  xy: 468, 472
-  size: 55, 63
+  size: 33, 38
-  orig: 55, 63
+  orig: 33, 38
   offset: 0, 0
   index: -1
 front_shin
-  rotate: true
+  rotate: false
-  xy: 287, 55
+  xy: 468, 453
-  size: 25, 28
+  size: 15, 17
-  orig: 25, 28
+  orig: 15, 17
   offset: 0, 0
   index: -1
 front_thigh
   rotate: false
-  xy: 258, 53
+  xy: 158, 216
-  size: 27, 27
+  size: 16, 16
-  orig: 27, 27
+  orig: 16, 16
   offset: 0, 0
   index: -1
 front_upper_arm
   rotate: false
-  xy: 199, 52
+  xy: 158, 234
-  size: 57, 28
+  size: 34, 17
-  orig: 57, 28
+  orig: 34, 17
   offset: 0, 0
   index: -1
 head
   rotate: false
-  xy: 630, 191
+  xy: 2, 59
-  size: 149, 136
+  size: 89, 82
-  orig: 149, 136
+  orig: 89, 82
-  offset: 0, 0
-  index: -1
-jaw
-  rotate: true
-  xy: 933, 388
-  size: 122, 86
-  orig: 122, 86
   offset: 0, 0
   index: -1
 lower_back_arm
   rotate: false
-  xy: 146, 34
+  xy: 53, 30
-  size: 51, 46
+  size: 30, 27
-  orig: 51, 46
+  orig: 30, 27
   offset: 0, 0
   index: -1
 metaljaw
   rotate: false
-  xy: 788, 267
+  xy: 380, 363
-  size: 122, 86
+  size: 73, 52
-  orig: 122, 86
+  orig: 73, 52
   offset: 0, 0
   index: -1
 splat01
   rotate: false
-  xy: 371, 258
+  xy: 224, 359
-  size: 257, 252
+  size: 154, 151
-  orig: 257, 252
+  orig: 154, 151
   offset: 0, 0
   index: -1
 splat02
   rotate: false
-  xy: 2, 254
+  xy: 2, 357
-  size: 367, 256
+  size: 220, 153
-  orig: 367, 256
+  orig: 220, 153
   offset: 0, 0
   index: -1
 splat03
   rotate: false
-  xy: 2, 82
+  xy: 2, 253
-  size: 362, 170
+  size: 217, 102
-  orig: 362, 170
+  orig: 217, 102
   offset: 0, 0
   index: -1
 upper_back_arm
-  rotate: true
+  rotate: false
-  xy: 146, 2
+  xy: 53, 2
-  size: 30, 43
+  size: 18, 26
-  orig: 30, 43
+  orig: 18, 26
   offset: 0, 0
   index: -1

spine-ts/webgl/demos/assets/dragon.atlas

@@ -1,279 +1,279 @@
 
 dragon.png
-size: 1024,1024
+size: 512,512
 format: RGBA8888
 filter: Linear,Linear
 repeat: none
 L_front_leg
   rotate: false
-  xy: 870, 881
+  xy: 406, 182
-  size: 42, 29
+  size: 34, 23
-  orig: 42, 29
+  orig: 34, 23
   offset: 0, 0
   index: -1
 L_front_thigh
   rotate: false
-  xy: 258, 761
+  xy: 283, 154
-  size: 42, 36
+  size: 34, 29
-  orig: 42, 36
+  orig: 34, 29
   offset: 0, 0
   index: -1
 L_rear_leg
   rotate: false
-  xy: 765, 859
+  xy: 411, 355
-  size: 103, 89
+  size: 82, 71
-  orig: 103, 89
+  orig: 82, 71
   offset: 0, 0
   index: -1
 L_rear_thigh
   rotate: false
-  xy: 156, 116
+  xy: 469, 293
-  size: 46, 75
+  size: 36, 60
-  orig: 46, 75
+  orig: 36, 60
   offset: 0, 0
   index: -1
 L_wing01
   rotate: false
-  xy: 100, 687
+  xy: 163, 242
-  size: 96, 128
+  size: 76, 102
-  orig: 96, 128
+  orig: 76, 102
   offset: 0, 0
   index: -1
 L_wing02
   rotate: false
-  xy: 2, 88
+  xy: 104, 5
-  size: 90, 135
+  size: 72, 108
-  orig: 90, 135
+  orig: 72, 108
   offset: 0, 0
   index: -1
 L_wing03
   rotate: false
-  xy: 114, 451
+  xy: 241, 261
-  size: 93, 104
+  size: 74, 83
-  orig: 93, 104
+  orig: 74, 83
   offset: 0, 0
   index: -1
 L_wing04
   rotate: false
-  xy: 104, 193
+  xy: 286, 352
-  size: 94, 68
+  size: 75, 54
-  orig: 94, 68
+  orig: 75, 54
   offset: 0, 0
   index: -1
 L_wing05
   rotate: false
-  xy: 907, 915
+  xy: 178, 51
-  size: 109, 107
+  size: 87, 85
-  orig: 109, 107
+  orig: 87, 85
   offset: 0, 0
   index: -1
 L_wing06
   rotate: false
-  xy: 2, 671
+  xy: 2, 230
-  size: 96, 166
+  size: 77, 132
-  orig: 96, 166
+  orig: 77, 132
   offset: 0, 0
   index: -1
 L_wing07
   rotate: false
-  xy: 114, 557
+  xy: 175, 138
-  size: 80, 128
+  size: 64, 102
-  orig: 80, 128
+  orig: 64, 102
   offset: 0, 0
   index: -1
 L_wing08
   rotate: false
-  xy: 104, 263
+  xy: 317, 278
-  size: 82, 91
+  size: 66, 72
-  orig: 82, 91
+  orig: 66, 72
   offset: 0, 0
   index: -1
 L_wing09
   rotate: false
-  xy: 2, 2
+  xy: 385, 286
-  size: 102, 84
+  size: 82, 67
-  orig: 102, 84
+  orig: 82, 67
   offset: 0, 0
   index: -1
 R_front_leg
   rotate: false
-  xy: 696, 873
+  xy: 241, 147
-  size: 51, 45
+  size: 40, 36
-  orig: 51, 45
+  orig: 40, 36
   offset: 0, 0
   index: -1
 R_front_thigh
   rotate: false
-  xy: 331, 842
+  xy: 178, 6
-  size: 54, 54
+  size: 43, 43
-  orig: 54, 54
+  orig: 43, 43
   offset: 0, 0
   index: -1
 R_rear_leg
   rotate: false
-  xy: 198, 763
+  xy: 363, 366
-  size: 58, 50
+  size: 46, 40
-  orig: 58, 50
+  orig: 46, 40
   offset: 0, 0
   index: -1
 R_rear_thigh
   rotate: false
-  xy: 213, 815
+  xy: 369, 216
-  size: 46, 75
+  size: 36, 60
-  orig: 46, 75
+  orig: 36, 60
   offset: 0, 0
   index: -1
 R_wing01
   rotate: false
-  xy: 2, 514
+  xy: 2, 104
-  size: 110, 155
+  size: 88, 124
-  orig: 110, 155
+  orig: 88, 124
   offset: 0, 0
   index: -1
 R_wing02
   rotate: false
-  xy: 2, 359
+  xy: 92, 115
-  size: 102, 153
+  size: 81, 122
-  orig: 102, 153
+  orig: 81, 122
   offset: 0, 0
   index: -1
 R_wing03
   rotate: false
-  xy: 254, 898
+  xy: 204, 411
-  size: 136, 124
+  size: 109, 99
-  orig: 136, 124
+  orig: 109, 99
   offset: 0, 0
   index: -1
 R_wing04
   rotate: false
-  xy: 765, 950
+  xy: 84, 346
-  size: 140, 72
+  size: 112, 58
-  orig: 140, 72
+  orig: 112, 58
   offset: 0, 0
   index: -1
 R_wing05
   rotate: false
-  xy: 392, 907
+  xy: 2, 10
-  size: 126, 115
+  size: 100, 92
-  orig: 126, 115
+  orig: 100, 92
   offset: 0, 0
   index: -1
 R_wing06
   rotate: false
-  xy: 2, 839
+  xy: 2, 364
-  size: 100, 183
+  size: 80, 146
-  orig: 100, 183
+  orig: 80, 146
   offset: 0, 0
   index: -1
 R_wing07
   rotate: false
-  xy: 2, 225
+  xy: 81, 239
-  size: 100, 132
+  size: 80, 105
-  orig: 100, 132
+  orig: 80, 105
   offset: 0, 0
   index: -1
 R_wing08
   rotate: false
-  xy: 520, 895
+  xy: 315, 408
-  size: 117, 127
+  size: 94, 102
-  orig: 117, 127
+  orig: 94, 102
   offset: 0, 0
   index: -1
 R_wing09
   rotate: false
-  xy: 639, 920
+  xy: 411, 428
-  size: 124, 102
+  size: 99, 82
-  orig: 124, 102
+  orig: 99, 82
   offset: 0, 0
   index: -1
 back
   rotate: false
-  xy: 106, 356
+  xy: 241, 185
-  size: 95, 93
+  size: 76, 74
-  orig: 95, 93
+  orig: 76, 74
   offset: 0, 0
   index: -1
 chest
   rotate: false
-  xy: 261, 835
+  xy: 319, 164
-  size: 68, 61
+  size: 54, 49
-  orig: 68, 61
+  orig: 54, 49
   offset: 0, 0
   index: -1
 chin
   rotate: false
-  xy: 104, 817
+  xy: 198, 346
-  size: 107, 73
+  size: 86, 58
-  orig: 107, 73
+  orig: 86, 58
   offset: 0, 0
   index: -1
 front_toeA
   rotate: false
-  xy: 311, 808
+  xy: 495, 406
-  size: 15, 25
+  size: 12, 20
-  orig: 15, 25
+  orig: 12, 20
   offset: 0, 0
   index: -1
 front_toeB
   rotate: false
-  xy: 914, 884
+  xy: 447, 231
-  size: 28, 29
+  size: 22, 23
-  orig: 28, 29
+  orig: 22, 23
   offset: 0, 0
   index: -1
 head
   rotate: false
-  xy: 104, 892
+  xy: 84, 406
-  size: 148, 130
+  size: 118, 104
-  orig: 148, 130
+  orig: 118, 104
   offset: 0, 0
   index: -1
 rear-toe
   rotate: false
-  xy: 639, 879
+  xy: 223, 18
-  size: 55, 39
+  size: 44, 31
-  orig: 55, 39
+  orig: 44, 31
   offset: 0, 0
   index: -1
 tail01
   rotate: false
-  xy: 94, 114
+  xy: 319, 215
-  size: 60, 77
+  size: 48, 61
-  orig: 60, 77
+  orig: 48, 61
   offset: 0, 0
   index: -1
 tail02
   rotate: false
-  xy: 198, 701
+  xy: 407, 236
-  size: 48, 60
+  size: 38, 48
-  orig: 48, 60
+  orig: 38, 48
   offset: 0, 0
   index: -1
 tail03
   rotate: false
-  xy: 248, 713
+  xy: 375, 177
-  size: 37, 46
+  size: 29, 37
-  orig: 37, 46
+  orig: 29, 37
   offset: 0, 0
   index: -1
 tail04
   rotate: false
-  xy: 870, 912
+  xy: 447, 256
-  size: 28, 36
+  size: 22, 28
-  orig: 28, 36
+  orig: 22, 28
   offset: 0, 0
   index: -1
 tail05
   rotate: false
-  xy: 944, 883
+  xy: 447, 205
-  size: 26, 30
+  size: 21, 24
-  orig: 26, 30
+  orig: 21, 24
   offset: 0, 0
   index: -1
 tail06
   rotate: false
-  xy: 261, 799
+  xy: 407, 207
-  size: 48, 34
+  size: 38, 27
-  orig: 48, 34
+  orig: 38, 27
   offset: 0, 0
   index: -1

spine-ts/webgl/demos/assets/fanart_cut.atlas

@@ -1,363 +1,363 @@
 
 fanart_cut.png
-size: 1024,1024
+size: 512,512
 format: RGBA8888
 filter: Linear,Linear
 repeat: none
 Layer 100
   rotate: false
-  xy: 744, 274
+  xy: 2, 2
-  size: 86, 111
+  size: 26, 33
-  orig: 86, 111
+  orig: 26, 33
   offset: 0, 0
   index: -1
 Layer 101
   rotate: false
-  xy: 519, 167
+  xy: 234, 411
-  size: 148, 66
+  size: 44, 20
-  orig: 148, 66
+  orig: 44, 20
   offset: 0, 0
   index: -1
 Layer 102
   rotate: false
-  xy: 768, 530
+  xy: 402, 457
-  size: 167, 91
+  size: 50, 27
-  orig: 167, 91
+  orig: 50, 27
   offset: 0, 0
   index: -1
 Layer 103
   rotate: false
-  xy: 260, 164
+  xy: 234, 433
-  size: 158, 258
+  size: 47, 77
-  orig: 158, 258
+  orig: 47, 77
   offset: 0, 0
   index: -1
 Layer 104
   rotate: false
-  xy: 881, 625
+  xy: 130, 367
-  size: 87, 117
+  size: 26, 35
-  orig: 87, 117
+  orig: 26, 35
   offset: 0, 0
   index: -1
 Layer 106
   rotate: false
-  xy: 916, 875
+  xy: 51, 203
-  size: 106, 147
+  size: 32, 44
-  orig: 106, 147
+  orig: 32, 44
   offset: 0, 0
   index: -1
 Layer 107
   rotate: false
-  xy: 376, 668
+  xy: 116, 404
-  size: 196, 354
+  size: 59, 106
-  orig: 196, 354
+  orig: 59, 106
   offset: 0, 0
   index: -1
 Layer 108
   rotate: false
-  xy: 2, 160
+  xy: 2, 249
-  size: 256, 262
+  size: 77, 78
-  orig: 256, 262
+  orig: 77, 78
   offset: 0, 0
   index: -1
 Layer 109
   rotate: false
-  xy: 390, 73
+  xy: 454, 457
-  size: 55, 89
+  size: 17, 27
-  orig: 55, 89
+  orig: 17, 27
   offset: 0, 0
   index: -1
 Layer 110
   rotate: false
-  xy: 2, 78
+  xy: 402, 486
-  size: 233, 80
+  size: 70, 24
-  orig: 233, 80
+  orig: 70, 24
   offset: 0, 0
   index: -1
 Layer 111
   rotate: false
-  xy: 380, 493
+  xy: 283, 458
-  size: 241, 173
+  size: 72, 52
-  orig: 241, 173
+  orig: 72, 52
   offset: 0, 0
   index: -1
 Layer 112
   rotate: false
-  xy: 916, 744
+  xy: 102, 360
-  size: 86, 129
+  size: 26, 39
-  orig: 86, 129
+  orig: 26, 39
   offset: 0, 0
   index: -1
 Layer 113
   rotate: false
-  xy: 295, 73
+  xy: 474, 483
-  size: 93, 89
+  size: 28, 27
-  orig: 93, 89
+  orig: 28, 27
   offset: 0, 0
   index: -1
 Layer 114
   rotate: false
-  xy: 162, 2
+  xy: 437, 433
-  size: 57, 74
+  size: 17, 22
-  orig: 57, 74
+  orig: 17, 22
   offset: 0, 0
   index: -1
 Layer 115
   rotate: false
-  xy: 221, 7
+  xy: 77, 98
-  size: 72, 69
+  size: 21, 21
-  orig: 72, 69
+  orig: 21, 21
   offset: 0, 0
   index: -1
 Layer 116
   rotate: false
-  xy: 768, 623
+  xy: 51, 164
-  size: 111, 124
+  size: 33, 37
-  orig: 111, 124
+  orig: 33, 37
   offset: 0, 0
   index: -1
 Layer 117
   rotate: false
-  xy: 524, 78
+  xy: 75, 136
-  size: 63, 87
+  size: 19, 26
-  orig: 63, 87
+  orig: 19, 26
   offset: 0, 0
   index: -1
 Layer 118
   rotate: false
-  xy: 653, 387
+  xy: 40, 121
-  size: 111, 136
+  size: 33, 41
-  orig: 111, 136
+  orig: 33, 41
   offset: 0, 0
   index: -1
 Layer 66
   rotate: false
-  xy: 2, 424
+  xy: 2, 329
-  size: 327, 234
+  size: 98, 70
-  orig: 327, 234
+  orig: 98, 70
   offset: 0, 0
   index: -1
 Layer 68
   rotate: false
-  xy: 820, 176
+  xy: 102, 329
-  size: 87, 96
+  size: 26, 29
-  orig: 87, 96
+  orig: 26, 29
   offset: 0, 0
   index: -1
 Layer 69
   rotate: false
-  xy: 541, 326
+  xy: 2, 37
-  size: 110, 165
+  size: 33, 49
-  orig: 110, 165
+  orig: 33, 49
   offset: 0, 0
   index: -1
 Layer 70
   rotate: false
-  xy: 2, 3
+  xy: 283, 434
-  size: 158, 73
+  size: 47, 22
-  orig: 158, 73
+  orig: 47, 22
   offset: 0, 0
   index: -1
 Layer 72
   rotate: false
-  xy: 447, 2
+  xy: 473, 460
-  size: 86, 71
+  size: 26, 21
-  orig: 86, 71
+  orig: 26, 21
   offset: 0, 0
   index: -1
 Layer 73
   rotate: false
-  xy: 420, 242
+  xy: 2, 88
-  size: 119, 249
+  size: 36, 75
-  orig: 119, 249
+  orig: 36, 75
   offset: 0, 0
   index: -1
 Layer 74
   rotate: false
-  xy: 623, 525
+  xy: 357, 455
-  size: 143, 185
+  size: 43, 55
-  orig: 143, 185
+  orig: 43, 55
   offset: 0, 0
   index: -1
 Layer 75
   rotate: false
-  xy: 541, 235
+  xy: 40, 92
-  size: 115, 89
+  size: 35, 27
-  orig: 115, 89
+  orig: 35, 27
   offset: 0, 0
   index: -1
 Layer 76
   rotate: false
-  xy: 820, 133
+  xy: 407, 443
-  size: 92, 41
+  size: 28, 12
-  orig: 92, 41
+  orig: 28, 12
   offset: 0, 0
   index: -1
 Layer 77
   rotate: false
-  xy: 420, 165
+  xy: 357, 431
-  size: 97, 75
+  size: 29, 22
-  orig: 97, 75
+  orig: 29, 22
   offset: 0, 0
   index: -1
 Layer 78
   rotate: false
-  xy: 755, 145
+  xy: 158, 364
-  size: 63, 127
+  size: 19, 38
-  orig: 63, 127
+  orig: 19, 38
   offset: 0, 0
   index: -1
 Layer 79
   rotate: false
-  xy: 331, 429
+  xy: 81, 258
-  size: 47, 229
+  size: 14, 69
-  orig: 47, 229
+  orig: 14, 69
   offset: 0, 0
   index: -1
 Layer 80
   rotate: false
-  xy: 669, 153
+  xy: 130, 331
-  size: 84, 113
+  size: 25, 34
-  orig: 84, 113
+  orig: 25, 34
   offset: 0, 0
   index: -1
 Layer 81
   rotate: false
-  xy: 720, 125
+  xy: 504, 502
-  size: 21, 26
+  size: 6, 8
-  orig: 21, 26
+  orig: 6, 8
   offset: 0, 0
   index: -1
 Layer 82
   rotate: false
-  xy: 638, 108
+  xy: 75, 121
-  size: 80, 43
+  size: 24, 13
-  orig: 80, 43
+  orig: 24, 13
   offset: 0, 0
   index: -1
 Layer 84
   rotate: false
-  xy: 295, 27
+  xy: 407, 428
-  size: 81, 44
+  size: 24, 13
-  orig: 81, 44
+  orig: 24, 13
   offset: 0, 0
   index: -1
 Layer 85
   rotate: false
-  xy: 574, 676
+  xy: 177, 405
-  size: 42, 34
+  size: 12, 10
-  orig: 42, 34
+  orig: 12, 10
   offset: 0, 0
   index: -1
 Layer 851
   rotate: false
-  xy: 378, 37
+  xy: 191, 405
-  size: 42, 34
+  size: 12, 10
-  orig: 42, 34
+  orig: 12, 10
   offset: 0, 0
   index: -1
 Layer 86
   rotate: false
-  xy: 970, 630
+  xy: 77, 92
-  size: 37, 12
+  size: 11, 4
-  orig: 37, 12
+  orig: 11, 4
   offset: 0, 0
   index: -1
 Layer 87
   rotate: false
-  xy: 380, 463
+  xy: 179, 376
-  size: 24, 28
+  size: 7, 8
-  orig: 24, 28
+  orig: 7, 8
   offset: 0, 0
   index: -1
 Layer 871
   rotate: false
-  xy: 623, 495
+  xy: 196, 395
-  size: 24, 28
+  size: 7, 8
-  orig: 24, 28
+  orig: 7, 8
   offset: 0, 0
   index: -1
 Layer 88
   rotate: false
-  xy: 589, 83
+  xy: 504, 495
-  size: 20, 16
+  size: 6, 5
-  orig: 20, 16
+  orig: 6, 5
   offset: 0, 0
   index: -1
 Layer 89
   rotate: false
-  xy: 295, 2
+  xy: 81, 249
-  size: 24, 23
+  size: 7, 7
-  orig: 24, 23
+  orig: 7, 7
   offset: 0, 0
   index: -1
 Layer 90
   rotate: false
-  xy: 574, 712
+  xy: 177, 417
-  size: 182, 310
+  size: 55, 93
-  orig: 182, 310
+  orig: 55, 93
   offset: 0, 0
   index: -1
 Layer 91
   rotate: false
-  xy: 237, 78
+  xy: 388, 429
-  size: 56, 80
+  size: 17, 24
-  orig: 56, 80
+  orig: 17, 24
   offset: 0, 0
   index: -1
 Layer 92
   rotate: false
-  xy: 2, 660
+  xy: 2, 401
-  size: 372, 362
+  size: 112, 109
-  orig: 372, 362
+  orig: 112, 109
   offset: 0, 0
   index: -1
 Layer 93
   rotate: false
-  xy: 758, 749
+  xy: 2, 165
-  size: 156, 273
+  size: 47, 82
-  orig: 156, 273
+  orig: 47, 82
   offset: 0, 0
   index: -1
 Layer 94
   rotate: false
-  xy: 589, 101
+  xy: 456, 436
-  size: 47, 64
+  size: 14, 19
-  orig: 47, 64
+  orig: 14, 19
   offset: 0, 0
   index: -1
 Layer 95
   rotate: false
-  xy: 658, 268
+  xy: 97, 292
-  size: 84, 117
+  size: 25, 35
-  orig: 84, 117
+  orig: 25, 35
   offset: 0, 0
   index: -1
 Layer 96
   rotate: false
-  xy: 937, 521
+  xy: 97, 260
-  size: 78, 102
+  size: 23, 30
-  orig: 78, 102
+  orig: 23, 30
   offset: 0, 0
   index: -1
 Layer 97
   rotate: false
-  xy: 447, 75
+  xy: 332, 430
-  size: 75, 88
+  size: 23, 26
-  orig: 75, 88
+  orig: 23, 26
   offset: 0, 0
   index: -1
 Layer 98
   rotate: false
-  xy: 535, 19
+  xy: 179, 386
-  size: 49, 57
+  size: 15, 17
-  orig: 49, 57
+  orig: 15, 17
   offset: 0, 0
   index: -1
 Layer 99
   rotate: false
-  xy: 970, 644
+  xy: 157, 333
-  size: 52, 98
+  size: 16, 29
-  orig: 52, 98
+  orig: 16, 29
   offset: 0, 0
   index: -1

spine-ts/webgl/demos/assets/raptor-walk.atlas

@@ -1,255 +0,0 @@
-
-raptor-walk.png
-size: 1024,1024
-format: RGBA8888
-filter: Linear,Linear
-repeat: none
-raptor-walk_0
-  rotate: false
-  xy: 2, 625
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_1
-  rotate: false
-  xy: 2, 327
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_2
-  rotate: false
-  xy: 309, 625
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_3
-  rotate: false
-  xy: 2, 29
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_4
-  rotate: false
-  xy: 309, 327
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_5
-  rotate: false
-  xy: 616, 625
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_6
-  rotate: false
-  xy: 309, 29
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_7
-  rotate: false
-  xy: 616, 327
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_8
-  rotate: false
-  xy: 616, 29
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-
-raptor-walk2.png
-size: 1024,1024
-format: RGBA8888
-filter: Linear,Linear
-repeat: none
-raptor-walk_10
-  rotate: false
-  xy: 2, 327
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_11
-  rotate: false
-  xy: 309, 625
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_12
-  rotate: false
-  xy: 2, 29
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_13
-  rotate: false
-  xy: 309, 327
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_14
-  rotate: false
-  xy: 616, 625
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_15
-  rotate: false
-  xy: 309, 29
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_16
-  rotate: false
-  xy: 616, 327
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_17
-  rotate: false
-  xy: 616, 29
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_9
-  rotate: false
-  xy: 2, 625
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-
-raptor-walk3.png
-size: 1024,1024
-format: RGBA8888
-filter: Linear,Linear
-repeat: none
-raptor-walk_18
-  rotate: false
-  xy: 2, 625
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_19
-  rotate: false
-  xy: 2, 327
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_20
-  rotate: false
-  xy: 309, 625
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_21
-  rotate: false
-  xy: 2, 29
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_22
-  rotate: false
-  xy: 309, 327
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_23
-  rotate: false
-  xy: 616, 625
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_24
-  rotate: false
-  xy: 309, 29
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_25
-  rotate: false
-  xy: 616, 327
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_26
-  rotate: false
-  xy: 616, 29
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-
-raptor-walk4.png
-size: 1024,1024
-format: RGBA8888
-filter: Linear,Linear
-repeat: none
-raptor-walk_27
-  rotate: false
-  xy: 2, 625
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_28
-  rotate: false
-  xy: 2, 327
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_29
-  rotate: false
-  xy: 309, 625
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_30
-  rotate: false
-  xy: 2, 29
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_31
-  rotate: false
-  xy: 309, 327
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1
-raptor-walk_32
-  rotate: false
-  xy: 616, 625
-  size: 305, 296
-  orig: 305, 296
-  offset: 0, 0
-  index: -1

spine-ts/webgl/demos/assets/spineboy.atlas

@@ -1,195 +1,195 @@
 
 spineboy.png
-size: 1024,1024
+size: 512,512
 format: RGBA8888
 filter: Linear,Linear
 repeat: none
 eye_indifferent
   rotate: false
-  xy: 550, 694
+  xy: 140, 163
-  size: 93, 89
+  size: 47, 45
-  orig: 93, 89
+  orig: 47, 45
   offset: 0, 0
   index: -1
 eye_surprised
   rotate: false
-  xy: 834, 856
+  xy: 278, 335
-  size: 93, 89
+  size: 47, 45
-  orig: 93, 89
+  orig: 47, 45
   offset: 0, 0
   index: -1
 front_bracer
   rotate: false
-  xy: 678, 774
+  xy: 284, 293
-  size: 58, 80
+  size: 29, 40
-  orig: 58, 80
+  orig: 29, 40
   offset: 0, 0
   index: -1
 front_fist_closed
-  rotate: true
+  rotate: false
-  xy: 466, 593
+  xy: 68, 4
-  size: 75, 82
+  size: 38, 41
-  orig: 75, 82
+  orig: 38, 41
   offset: 0, 0
   index: -1
 front_fist_open
   rotate: false
-  xy: 550, 605
+  xy: 109, 51
-  size: 86, 87
+  size: 43, 44
-  orig: 86, 87
+  orig: 43, 44
   offset: 0, 0
   index: -1
 front_foot
   rotate: false
-  xy: 550, 785
+  xy: 278, 382
-  size: 126, 69
+  size: 63, 35
-  orig: 126, 69
+  orig: 63, 35
   offset: 0, 0
   index: -1
 front_foot_bend1
-  rotate: true
+  rotate: false
-  xy: 375, 492
+  xy: 2, 10
-  size: 128, 70
+  size: 64, 35
-  orig: 128, 70
+  orig: 64, 35
   offset: 0, 0
   index: -1
 front_foot_bend2
-  rotate: true
+  rotate: false
-  xy: 275, 330
+  xy: 368, 455
-  size: 108, 93
+  size: 54, 47
-  orig: 108, 93
+  orig: 54, 47
   offset: 0, 0
   index: -1
 front_shin
   rotate: false
-  xy: 466, 670
+  xy: 235, 325
-  size: 82, 184
+  size: 41, 92
-  orig: 82, 184
+  orig: 41, 92
   offset: 0, 0
   index: -1
 front_thigh
   rotate: false
-  xy: 214, 208
+  xy: 478, 446
-  size: 48, 112
+  size: 24, 56
-  orig: 48, 112
+  orig: 24, 56
   offset: 0, 0
   index: -1
 front_upper_arm
   rotate: false
-  xy: 214, 109
+  xy: 144, 112
-  size: 54, 97
+  size: 27, 49
-  orig: 54, 97
+  orig: 27, 49
   offset: 0, 0
   index: -1
 goggles
   rotate: false
-  xy: 466, 856
+  xy: 235, 419
-  size: 261, 166
+  size: 131, 83
-  orig: 261, 166
+  orig: 131, 83
   offset: 0, 0
   index: -1
 gun
   rotate: false
-  xy: 2, 117
+  xy: 2, 47
-  size: 210, 203
+  size: 105, 102
-  orig: 210, 203
+  orig: 105, 102
   offset: 0, 0
   index: -1
 head
   rotate: false
-  xy: 2, 322
+  xy: 2, 151
-  size: 271, 298
+  size: 136, 149
-  orig: 271, 298
+  orig: 136, 149
   offset: 0, 0
   index: -1
 mouth_grind
   rotate: false
-  xy: 929, 896
+  xy: 429, 428
-  size: 93, 59
+  size: 47, 30
-  orig: 93, 59
+  orig: 47, 30
   offset: 0, 0
   index: -1
 mouth_oooo
   rotate: false
-  xy: 929, 835
+  xy: 235, 293
-  size: 93, 59
+  size: 47, 30
-  orig: 93, 59
+  orig: 47, 30
   offset: 0, 0
   index: -1
 mouth_smile
   rotate: false
-  xy: 447, 532
+  xy: 231, 229
-  size: 93, 59
+  size: 47, 30
-  orig: 93, 59
+  orig: 47, 30
   offset: 0, 0
   index: -1
 muzzle
   rotate: false
-  xy: 2, 622
+  xy: 2, 302
-  size: 462, 400
+  size: 231, 200
-  orig: 462, 400
+  orig: 231, 200
   offset: 0, 0
   index: -1
 neck
   rotate: false
-  xy: 796, 819
+  xy: 290, 270
-  size: 36, 41
+  size: 18, 21
-  orig: 36, 41
+  orig: 18, 21
   offset: 0, 0
   index: -1
 rear_bracer
   rotate: false
-  xy: 738, 788
+  xy: 343, 381
-  size: 56, 72
+  size: 28, 36
-  orig: 56, 72
+  orig: 28, 36
   offset: 0, 0
   index: -1
 rear_foot
-  rotate: true
+  rotate: false
-  xy: 2, 2
+  xy: 231, 261
-  size: 113, 60
+  size: 57, 30
-  orig: 113, 60
+  orig: 57, 30
   offset: 0, 0
   index: -1
 rear_foot_bend1
   rotate: false
-  xy: 64, 49
+  xy: 368, 420
-  size: 117, 66
+  size: 59, 33
-  orig: 117, 66
+  orig: 59, 33
   offset: 0, 0
   index: -1
 rear_foot_bend2
   rotate: false
-  xy: 729, 862
+  xy: 424, 460
-  size: 103, 83
+  size: 52, 42
-  orig: 103, 83
+  orig: 52, 42
   offset: 0, 0
   index: -1
 rear_shin
-  rotate: true
+  rotate: false
-  xy: 729, 947
+  xy: 191, 211
-  size: 75, 178
+  size: 38, 89
-  orig: 75, 178
+  orig: 38, 89
   offset: 0, 0
   index: -1
 rear_thigh
-  rotate: true
+  rotate: false
-  xy: 909, 957
+  xy: 109, 97
-  size: 65, 104
+  size: 33, 52
-  orig: 65, 104
+  orig: 33, 52
   offset: 0, 0
   index: -1
 rear_upper_arm
-  rotate: true
+  rotate: false
-  xy: 447, 483
+  xy: 373, 374
-  size: 47, 87
+  size: 24, 44
-  orig: 47, 87
+  orig: 24, 44
   offset: 0, 0
   index: -1
 torso
   rotate: false
-  xy: 275, 440
+  xy: 140, 210
-  size: 98, 180
+  size: 49, 90
-  orig: 98, 180
+  orig: 49, 90
   offset: 0, 0
   index: -1

spine-ts/webgl/demos/assets/stretchyman.atlas

@@ -0,0 +1,41 @@
+
+stretchyman.png
+size: 256,256
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+back arm
+  rotate: false
+  xy: 46, 106
+  size: 22, 61
+  orig: 22, 61
+  offset: 0, 0
+  index: -1
+back leg
+  rotate: false
+  xy: 2, 2
+  size: 30, 95
+  orig: 30, 95
+  offset: 0, 0
+  index: -1
+body
+  rotate: false
+  xy: 2, 99
+  size: 42, 136
+  orig: 42, 136
+  offset: 0, 0
+  index: -1
+front arm
+  rotate: false
+  xy: 46, 169
+  size: 44, 66
+  orig: 44, 66
+  offset: 0, 0
+  index: -1
+head
+  rotate: false
+  xy: 92, 204
+  size: 26, 31
+  orig: 26, 31
+  offset: 0, 0
+  index: -1

spine-ts/webgl/demos/assets/tank.atlas

@@ -1,125 +1,125 @@
 
 tank.png
-size: 2048,1024
+size: 512,512
 format: RGBA8888
 filter: Linear,Linear
 repeat: none
 images/antenna
-  rotate: true
+  rotate: false
-  xy: 1295, 683
+  xy: 2, 86
-  size: 22, 303
+  size: 6, 76
-  orig: 22, 303
+  orig: 6, 76
   offset: 0, 0
   index: -1
 images/cannon
   rotate: false
-  xy: 2, 93
+  xy: 2, 279
-  size: 931, 58
+  size: 233, 15
-  orig: 931, 58
+  orig: 233, 15
   offset: 0, 0
   index: -1
 images/cannonConnector
-  rotate: true
+  rotate: false
-  xy: 1676, 455
+  xy: 52, 227
-  size: 112, 135
+  size: 28, 34
-  orig: 112, 135
+  orig: 28, 34
   offset: 0, 0
   index: -1
 images/guntower
   rotate: false
-  xy: 1295, 707
+  xy: 327, 438
-  size: 730, 289
+  size: 183, 72
-  orig: 730, 289
+  orig: 183, 72
   offset: 0, 0
   index: -1
 images/machinegun
   rotate: false
-  xy: 2, 34
+  xy: 2, 263
-  size: 331, 57
+  size: 83, 14
-  orig: 331, 57
+  orig: 83, 14
   offset: 0, 0
   index: -1
 images/machinegun-mount
   rotate: false
-  xy: 1952, 609
+  xy: 87, 253
-  size: 72, 96
+  size: 18, 24
-  orig: 72, 96
+  orig: 18, 24
   offset: 0, 0
   index: -1
 images/rock
   rotate: false
-  xy: 935, 96
+  xy: 237, 280
-  size: 252, 55
+  size: 63, 14
-  orig: 252, 55
+  orig: 63, 14
   offset: 0, 0
   index: -1
 images/tankBottom
   rotate: false
-  xy: 2, 377
+  xy: 2, 354
-  size: 1285, 276
+  size: 321, 69
-  orig: 1285, 276
+  orig: 321, 69
   offset: 0, 0
   index: -1
 images/tankBottom-shadow
   rotate: false
-  xy: 2, 655
+  xy: 2, 425
-  size: 1291, 341
+  size: 323, 85
-  orig: 1291, 341
+  orig: 323, 85
   offset: 0, 0
   index: -1
 images/tankTop
   rotate: false
-  xy: 2, 153
+  xy: 2, 296
-  size: 1407, 222
+  size: 352, 56
-  orig: 1407, 222
+  orig: 352, 56
   offset: 0, 0
   index: -1
 images/tread
   rotate: false
-  xy: 2, 2
+  xy: 327, 428
-  size: 96, 30
+  size: 24, 8
-  orig: 96, 30
+  orig: 24, 8
   offset: 0, 0
   index: -1
 images/tread-inside
   rotate: false
-  xy: 335, 63
+  xy: 2, 77
-  size: 25, 28
+  size: 6, 7
-  orig: 25, 28
+  orig: 6, 7
   offset: 0, 0
   index: -1
 images/wheel-big
   rotate: false
-  xy: 1295, 490
+  xy: 2, 213
-  size: 191, 191
+  size: 48, 48
-  orig: 191, 191
+  orig: 48, 48
   offset: 0, 0
   index: -1
 images/wheel-big-overlay
   rotate: false
-  xy: 1488, 495
+  xy: 2, 164
-  size: 186, 186
+  size: 47, 47
-  orig: 186, 186
+  orig: 47, 47
   offset: 0, 0
   index: -1
 images/wheel-mid
   rotate: false
-  xy: 1676, 569
+  xy: 10, 128
-  size: 136, 136
+  size: 34, 34
-  orig: 136, 136
+  orig: 34, 34
   offset: 0, 0
   index: -1
 images/wheel-mid-overlay
   rotate: false
-  xy: 1814, 569
+  xy: 10, 92
-  size: 136, 136
+  size: 34, 34
-  orig: 136, 136
+  orig: 34, 34
   offset: 0, 0
   index: -1
 images/wheel-small
   rotate: false
-  xy: 1813, 496
+  xy: 107, 259
-  size: 71, 71
+  size: 18, 18
-  orig: 71, 71
+  orig: 18, 18
   offset: 0, 0
   index: -1

spine-ts/webgl/demos/assets/tank.json

@@ -1,5 +1,5 @@
 {
-"skeleton": { "hash": "kgtyty1lpfv5JU2lygtFi2u3oQQ", "spine": "3.3.07", "width": 1914.53, "height": 964.05, "images": "" },
+"skeleton": { "hash": "gR+EPPV6BGg+FENr3btt5iR/g7A", "spine": "3.4.02", "width": 1914.53, "height": 964.03, "images": "" },
 "bones": [
 	{ "name": "root" },
 	{ "name": "tankRoot", "parent": "root", "y": 200 },
@@ -422,7 +422,7 @@
 			"images/antenna": {
 				"type": "mesh",
 				"uvs": [ 0.64286, 0.07875, 0.65354, 0.15349, 0.66324, 0.22137, 0.67367, 0.29433, 0.68383, 0.36543, 0.69359, 0.43374, 0.7031, 0.50029, 0.71311, 0.5703, 0.72327, 0.64138, 0.73406, 0.71688, 0.7444, 0.78929, 0.75614, 0.8714, 0.76905, 0.9431, 1, 0.9431, 1, 1, 0, 1, 0, 0.9431, 0.20105, 0.9431, 0.20105, 0.87093, 0.21461, 0.78846, 0.22651, 0.71606, 0.23885, 0.64098, 0.25035, 0.57104, 0.26206, 0.49983, 0.27306, 0.4329, 0.2843, 0.36453, 0.29592, 0.29381, 0.308, 0.22037, 0.319, 0.15345, 0.33141, 0.07795, 0.34423, 0, 0.6316, 0 ],
-				"triangles": [ 30, 31, 0, 29, 30, 0, 29, 0, 1, 28, 29, 1, 28, 1, 2, 27, 28, 2, 27, 2, 3, 26, 3, 4, 25, 26, 4, 25, 4, 5, 26, 27, 3, 24, 5, 6, 23, 24, 6, 7, 23, 6, 24, 25, 5, 22, 7, 8, 21, 22, 8, 21, 8, 9, 7, 22, 23, 20, 9, 10, 19, 20, 10, 20, 21, 9, 19, 10, 11, 18, 19, 11, 17, 18, 11, 17, 11, 12, 15, 16, 17, 12, 13, 14, 15, 17, 12, 14, 15, 12 ],
+				"triangles": [ 29, 0, 1, 29, 30, 0, 30, 31, 0, 27, 2, 3, 27, 28, 2, 28, 1, 2, 28, 29, 1, 26, 27, 3, 25, 4, 5, 25, 26, 4, 26, 3, 4, 24, 25, 5, 7, 23, 6, 23, 24, 6, 24, 5, 6, 7, 22, 23, 21, 8, 9, 21, 22, 8, 22, 7, 8, 20, 21, 9, 19, 20, 10, 20, 9, 10, 14, 15, 12, 15, 17, 12, 12, 13, 14, 15, 16, 17, 17, 11, 12, 17, 18, 11, 18, 19, 11, 19, 10, 11 ],
 				"vertices": [ 2, 10, 65.37999, -3.14, 0.3125, 11, 23.38, -3.14, 0.6875, 3, 9, 84.73, -3.37, 0.0625, 10, 42.73, -3.37, 0.625, 11, 0.73, -3.37, 0.3125, 3, 9, 64.16, -3.59, 0.3125, 10, 22.16, -3.59, 0.625, 11, -19.83, -3.59, 0.0625, 3, 8, 84.06, -3.82, 0.0625, 9, 42.06, -3.82, 0.625, 10, 0.06, -3.82, 0.3125, 3, 8, 62.51, -4.04, 0.3125, 9, 20.51, -4.04, 0.625, 10, -21.48, -4.04, 0.0625, 3, 7, 83.81, -4.25, 0.0625, 8, 41.81, -4.25, 0.625, 9, -0.18, -4.25, 0.3125, 3, 7, 63.65, -4.46, 0.3125, 8, 21.65, -4.46, 0.625, 9, -20.34, -4.46, 0.0625, 3, 6, 84.43, -4.67999, 0.0625, 7, 42.43, -4.67999, 0.625, 8, 0.43, -4.67999, 0.3125, 3, 6, 62.9, -4.91, 0.3125, 7, 20.9, -4.91, 0.625, 8, -21.09, -4.91, 0.0625, 3, 5, 5.14, 80.01999, 0.0625, 6, 40.02, -5.14, 0.625, 7, -1.97, -5.14, 0.3125, 3, 5, 5.37, 58.08, 0.375, 6, 18.08, -5.37, 0.5625, 7, -23.91, -5.37, 0.0625, 1, 5, 5.63, 33.2, 1, 1, 5, 5.91, 11.48, 1, 1, 5, 11, 11.48, 1, 1, 5, 10.99, -5.75, 1, 1, 5, -11, -5.75, 1, 1, 5, -10.99, 11.48, 1, 1, 5, -6.57, 11.48, 1, 1, 5, -6.57, 33.34, 1, 3, 5, -6.27, 58.33, 0.375, 6, 18.33, 6.27, 0.5625, 7, -23.66, 6.27, 0.0625, 3, 5, -6.01, 80.26999, 0.0625, 6, 40.27, 6.01, 0.625, 7, -1.72, 6.01, 0.3125, 3, 6, 63.02, 5.74, 0.3125, 7, 21.02, 5.74, 0.625, 8, -20.96999, 5.74, 0.0625, 3, 6, 84.21, 5.49, 0.0625, 7, 42.21, 5.49, 0.625, 8, 0.21, 5.49, 0.3125, 3, 7, 63.79, 5.23, 0.3125, 8, 21.79, 5.23, 0.625, 9, -20.2, 5.23, 0.0625, 3, 7, 84.07, 4.98999, 0.0625, 8, 42.07, 4.98999, 0.625, 9, 0.07, 4.98999, 0.3125, 3, 8, 62.78, 4.73999, 0.3125, 9, 20.78, 4.73999, 0.625, 10, -21.21, 4.73999, 0.0625, 3, 8, 84.21, 4.48, 0.0625, 9, 42.21, 4.48, 0.625, 10, 0.21, 4.48, 0.3125, 3, 9, 64.46, 4.21999, 0.3125, 10, 22.46, 4.21999, 0.625, 11, -19.53, 4.21999, 0.0625, 3, 9, 84.74, 3.98, 0.0625, 10, 42.74, 3.98, 0.625, 11, 0.74, 3.98, 0.3125, 2, 10, 65.62, 3.7, 0.3125, 11, 23.62, 3.7, 0.6875, 1, 11, 47.24, 3.42, 1, 1, 11, 47.24, -2.89, 1 ],
 				"hull": 32,
 				"edges": [ 28, 30, 28, 26, 30, 32, 26, 24, 24, 22, 32, 34, 34, 24, 34, 36, 36, 22, 60, 62, 38, 36, 20, 22, 38, 20, 40, 38, 18, 20, 40, 18, 42, 40, 16, 18, 42, 16, 44, 42, 14, 16, 44, 14, 46, 44, 12, 14, 46, 12, 48, 46, 10, 12, 48, 10, 50, 48, 8, 10, 50, 8, 52, 50, 6, 8, 52, 6, 54, 52, 4, 6, 54, 4, 56, 54, 2, 4, 56, 2, 60, 58, 58, 56, 62, 0, 0, 2, 58, 0 ],
@@ -440,7 +440,7 @@
 			"images/cannonConnector": {
 				"type": "mesh",
 				"uvs": [ 1, 0.03236, 1, 0.10602, 0.90987, 0.32859, 0.81975, 0.55116, 0.72962, 0.77372, 0.6395, 0.99629, 0.42157, 0.99629, 0.20364, 0.99629, 0, 0.85433, 0, 0.69901, 0.02267, 0.52884, 0, 0.31444, 0.21601, 0.12998, 0.43367, 0, 0.63546, 0.0037, 0.48407, 0.77059, 0.31496, 0.52496, 0.64132, 0.19648, 0.21516, 0.76765, 0.58345, 0.5647, 0.68444, 0.40146, 0.46758, 0.36649, 0.28934, 0.34603 ],
-				"triangles": [ 21, 22, 12, 11, 12, 22, 17, 21, 13, 17, 13, 14, 21, 12, 13, 21, 17, 20, 16, 22, 21, 10, 11, 22, 10, 22, 16, 19, 21, 20, 16, 21, 19, 18, 10, 16, 9, 10, 18, 15, 16, 19, 18, 16, 15, 8, 9, 18, 7, 8, 18, 6, 18, 15, 7, 18, 6, 14, 0, 1, 17, 14, 1, 2, 17, 1, 20, 17, 2, 3, 20, 2, 19, 20, 3, 4, 19, 3, 15, 19, 4, 5, 15, 4, 6, 15, 5 ],
+				"triangles": [ 7, 18, 6, 6, 18, 15, 7, 8, 18, 8, 9, 18, 18, 16, 15, 15, 16, 19, 9, 10, 18, 18, 10, 16, 16, 21, 19, 19, 21, 20, 10, 22, 16, 10, 11, 22, 16, 22, 21, 21, 17, 20, 21, 12, 13, 17, 13, 14, 17, 21, 13, 11, 12, 22, 21, 22, 12, 6, 15, 5, 5, 15, 4, 15, 19, 4, 4, 19, 3, 19, 20, 3, 3, 20, 2, 20, 17, 2, 2, 17, 1, 17, 14, 1, 14, 0, 1 ],
 				"vertices": [ 1, 12, 35.91, 69.08, 1, 1, 12, 35.91, 59.13, 1, 1, 12, 25.81, 29.09, 1, 1, 12, 15.72, -0.95, 1, 1, 12, 5.63, -31, 1, 1, 12, -4.46, -61.04, 1, 2, 12, -28.87, -61.04, 0.33333, 14, 28.87, 61.03, 0.66666, 1, 14, 53.27, 61.01, 1, 1, 14, 76.08, 41.83, 1, 1, 14, 71.17, 21.62, 1, 1, 14, 72.83, -1.62, 1, 1, 14, 70.37, -29.12, 1, 1, 14, 50.66, -56.13, 1, 2, 12, -28.43, 74.37, 0.41, 14, 28.43, -74.39, 0.58999, 2, 12, -4.91, 72.94999, 0.52, 14, 4.91, -72.94999, 0.48, 2, 12, -21.87, -30.57, 0.49, 14, 21.87, 30.56, 0.51, 1, 14, 40.81, -2.59999, 1, 2, 12, -4.25, 46.92, 0.49, 14, 4.25, -46.92, 0.51, 1, 14, 51.98, 30.15, 1, 2, 12, -10.74, -2.78, 0.49, 14, 10.74, 2.77, 0.51, 2, 12, 0.56, 19.25, 0.49, 14, -0.56, -19.25, 0.51, 1, 14, 23.71, -23.98, 1, 1, 14, 43.68, -26.76, 1 ],
 				"hull": 15,
 				"edges": [ 0, 2, 2, 4, 4, 6, 6, 8, 8, 10, 10, 12, 12, 14, 14, 16, 16, 18, 18, 20, 20, 22, 22, 24, 24, 26, 26, 28, 28, 0 ],
@@ -796,7 +796,8 @@
 				"closed": true,
 				"lengths": [ 182.41, 349, 472.77, 602.99, 780.46, 1052.96, 1133.44, 1218.43, 1298.34, 1382.7, 1465.57, 1546.11, 1628.02, 1707.73, 1794.36, 1876.75, 2158.69, 2321.34, 2438.56, 2579.42, 2745.35, 2919.23 ],
 				"vertexCount": 66,
-				"vertices": [ 1, 83, 11.23, 41.86, 1, 1, 83, 0.78, 41.93999, 1, 1, 83, -34.72, 42.23, 1, 1, 63, -104.21, 0.41, 1, 1, 63, 0.07, 0.55, 1, 1, 63, 68.8, 0.64, 1, 1, 81, 20.5, 43.47, 1, 1, 81, 1.13, 40.81, 1, 1, 81, -27.38, 36.84, 1, 1, 65, 147.06, 105, 1, 1, 65, 96.21, 96.63, 1, 1, 65, 43.87, 87.71, 1, 1, 65, 16.18, 103.34, 1, 1, 65, -33.66999, 94.2, 1, 1, 65, -99.35, 81.25, 1, 1, 65, -122.04, -1.69, 1, 1, 65, -83.58, -47.92, 1, 1, 65, -33.53, -109.36, 1, 1, 69, -83.56, -66.08999, 1, 1, 69, -2.16, -67.89, 1, 2, 69, 56.68, -41.48, 0.67999, 58, -24.31, -41.49, 0.32, 1, 58, -26.58, 16.69, 1, 1, 58, -2.69, 16.69, 1, 1, 58, 13.51, 16.69, 1, 2, 71, -52.41, -46.51, 0.74399, 58, 30.2, -46.51, 0.256, 1, 71, -0.32, -68.92, 1, 2, 71, 52.09, -44.72, 0.712, 59, -28.9, -44.73, 0.28799, 1, 59, -22.8, 16.24, 1, 1, 59, -1.42, 16.24, 1, 1, 59, 20.46999, 16.24, 1, 2, 73, -47.21, -47.45, 0.744, 59, 36.00999, -47.46, 0.25599, 1, 73, -0.28, -69.65, 1, 2, 73, 45.23, -47.26, 0.736, 60, -37.48, -47.26, 0.26399, 1, 60, -23.76, 15.27, 1, 1, 60, -0.13, 15.27, 1, 1, 60, 24.45, 15.27, 1, 2, 75, -47.36, -48.7, 0.74399, 60, 33.52, -48.7, 0.256, 1, 75, -0.49, -70.39, 1, 2, 75, 49.09, -48.33, 0.744, 61, -33.57, -48.34, 0.25599, 1, 61, -20.89, 15.83, 1, 1, 61, -1.25, 15.83, 1, 1, 61, 15.78, 15.83, 1, 2, 77, -52.49, -48.21, 0.75999, 61, 28.45, -48.21, 0.24, 1, 77, -2.5, -68.92, 1, 2, 77, 55.72, -47.82, 0.752, 62, -28.88, -47.82, 0.248, 1, 62, -21.64, 16.69, 1, 1, 62, -0.48, 16.69, 1, 1, 62, 20.73, 16.69, 1, 2, 79, -53.65, -48.89, 0.76, 62, 25.96, -48.89, 0.23999, 1, 79, 2.27, -69.65, 1, 1, 79, 44.94, -69.74, 1, 1, 65, 1172.98, -85.6, 1, 1, 65, 1190.53, -42.24, 1, 1, 65, 1215.63, 19.75, 1, 1, 65, 1175.55, 76.62, 1, 1, 65, 1134.22, 95.07, 1, 1, 65, 1128.4, 97.66, 1, 1, 65, 1081.79, 87.47, 1, 1, 65, 1017.16, 92.52, 1, 1, 65, 977.9, 95.58, 1, 1, 85, 47.07, 42.29, 1, 1, 85, 0.24, 42.74, 1, 1, 85, -29.63, 43.28, 1, 1, 64, -86.64, 1.35, 1, 1, 64, 0.49, 0.25, 1, 1, 64, 92.42, -0.89, 1 ]
+				"vertices": [ 1, 83, 11.23, 41.86, 1, 1, 83, 0.78, 41.93999, 1, 1, 83, -34.72, 42.23, 1, 1, 63, -104.21, 0.41, 1, 1, 63, 0.07, 0.55, 1, 1, 63, 68.8, 0.64, 1, 1, 81, 20.5, 43.47, 1, 1, 81, 1.13, 40.81, 1, 1, 81, -27.38, 36.84, 1, 1, 65, 147.06, 105, 1, 1, 65, 96.21, 96.63, 1, 1, 65, 43.87, 87.71, 1, 1, 65, 16.18, 103.34, 1, 1, 65, -33.66999, 94.2, 1, 1, 65, -99.35, 81.25, 1, 1, 65, -122.04, -1.69, 1, 1, 65, -83.58, -47.92, 1, 1, 65, -33.53, -109.36, 1, 1, 69, -83.56, -66.08999, 1, 1, 69, -2.16, -67.89, 1, 2, 69, 56.68, -41.48, 0.67999, 58, -24.31, -41.49, 0.32, 1, 58, -26.58, 16.69, 1, 1, 58, -2.69, 16.69, 1, 1, 58, 13.51, 16.69, 1, 2, 71, -52.41, -46.51, 0.74399, 58, 30.2, -46.51, 0.256, 1, 71, -0.32, -68.92, 1, 2, 71, 52.09, -44.72, 0.712, 59, -28.9, -44.73, 0.28799, 1, 59, -22.8, 16.24, 1, 1, 59, -1.42, 16.24, 1, 1, 59, 20.46999, 16.24, 1, 2, 73, -47.21, -47.45, 0.744, 59, 36.00999, -47.46, 0.25599, 1, 73, -0.28, -69.65, 1, 2, 73, 45.23, -47.26, 0.736, 60, -37.48, -47.26, 0.26399, 1, 60, -23.76, 15.27, 1, 1, 60, -0.13, 15.27, 1, 1, 60, 24.45, 15.27, 1, 2, 75, -47.36, -48.7, 0.74399, 60, 33.52, -48.7, 0.256, 1, 75, -0.49, -70.39, 1, 2, 75, 49.09, -48.33, 0.744, 61, -33.57, -48.34, 0.25599, 1, 61, -20.89, 15.83, 1, 1, 61, -1.25, 15.83, 1, 1, 61, 15.78, 15.83, 1, 2, 77, -52.49, -48.21, 0.75999, 61, 28.45, -48.21, 0.24, 1, 77, -2.5, -68.92, 1, 2, 77, 55.72, -47.82, 0.752, 62, -28.88, -47.82, 0.248, 1, 62, -21.64, 16.69, 1, 1, 62, -0.48, 16.69, 1, 1, 62, 20.73, 16.69, 1, 2, 79, -53.65, -48.89, 0.76, 62, 25.96, -48.89, 0.23999, 1, 79, 2.27, -69.65, 1, 1, 79, 44.94, -69.74, 1, 1, 65, 1172.98, -85.6, 1, 1, 65, 1190.53, -42.24, 1, 1, 65, 1215.63, 19.75, 1, 1, 65, 1175.55, 76.62, 1, 1, 65, 1134.22, 95.07, 1, 1, 65, 1128.4, 97.66, 1, 1, 65, 1081.79, 87.47, 1, 1, 65, 1017.16, 92.52, 1, 1, 65, 977.9, 95.58, 1, 1, 85, 47.07, 42.29, 1, 1, 85, 0.24, 42.74, 1, 1, 85, -29.63, 43.28, 1, 1, 64, -86.64, 1.35, 1, 1, 64, 0.49, 0.25, 1, 1, 64, 92.42, -0.89, 1 ],
+				"color": "ff8819ff"
 			}
 		},
 		"wheel-big": {

spine-ts/webgl/demos/imagesequences.js

@@ -89,12 +89,19 @@ var imageSequencesDemo = function(pathPrefix, loadingComplete) {
 		skeleton.setSkinByName("default");
 
 		var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
+		var anim = skeletonData.findAnimation(animation);		
 		state.setAnimation(0, animation, true);
+		if (name === "alien") {
+			state.update(anim.duration / 2);			
+		}
 		state.apply(skeleton);
 		skeleton.updateWorldTransform();			
 		var offset = new spine.Vector2();
 		var size = new spine.Vector2();
 		skeleton.getBounds(offset, size);
+		if (name === "alien") {
+			state.update(-anim.duration / 2);
+		}
 
 		var regions = [];
 		for(var i = 0; i < sequenceSlots.length; i++) {
@@ -133,8 +140,8 @@ var imageSequencesDemo = function(pathPrefix, loadingComplete) {
 
 		renderer.camera.position.x = offset.x + size.x;
 		renderer.camera.position.y = offset.y + size.y / 2;
-		renderer.camera.viewportWidth = size.x * 2.2;
+		renderer.camera.viewportWidth = size.x * 2.4;
-		renderer.camera.viewportHeight = size.y * 1.2;
+		renderer.camera.viewportHeight = size.y * 1.4;
 		renderer.resize(spine.webgl.ResizeMode.Fit);
 
 		gl.clearColor(0.2, 0.2, 0.2, 1);

spine-ts/webgl/demos/skeletonvssprite.js

@@ -4,13 +4,14 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
 
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, animationState, offset, bounds;
+	var skeletonSeq, walkAnim, walkLastTime = 0, walkLastTimePrecise = 0;
 	var skeletonAtlas;
-	var frameAtlas;
+	var sequenceAtlas;
 	var viewportWidth, viewportHeight;
 	var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30;
 	var lastFrameTime = Date.now() / 1000;
 	var timeSlider, timeSliderLabel, atlasCheckbox;
-	var playButton, timeLine, isPlaying = true, playTime = 0;
+	var playButton, timeLine, isPlaying = true, playTime = 0, framePlaytime = 0;
 
 	function init () {
 		if (pathPrefix === undefined) pathPrefix = "";		
@@ -24,11 +25,7 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
 		assetManager.loadTexture("assets/raptor.png");
 		assetManager.loadText("assets/raptor.json");
 		assetManager.loadText("assets/raptor.atlas");		
-		assetManager.loadText("assets/raptor-walk.atlas");
+		assetManager.loadTexture("assets/raptor-sequenceatlas.png");
-		assetManager.loadTexture("assets/raptor-walk.png");
-		assetManager.loadTexture("assets/raptor-walk2.png");
-		assetManager.loadTexture("assets/raptor-walk3.png");
-		assetManager.loadTexture("assets/raptor-walk4.png");
 		requestAnimationFrame(load);
 	}
 
@@ -37,6 +34,7 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
 			skeletonAtlas = new spine.TextureAtlas(assetManager.get("assets/raptor.atlas"), function(path) {
 				return assetManager.get("assets/" + path);		
 			});
+			sequenceAtlas = assetManager.get("assets/raptor-sequenceatlas.png");
 			var atlasLoader = new spine.TextureAtlasAttachmentLoader(skeletonAtlas);
 			var skeletonJson = new spine.SkeletonJson(atlasLoader);
 			var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/raptor.json"));
@@ -49,13 +47,11 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
 			bounds = new spine.Vector2();
 			skeleton.getBounds(offset, bounds);
 
-			frameAtlas = new spine.TextureAtlas(assetManager.get("assets/raptor-walk.atlas"), function(path) {
+			skeletonSeq = new spine.Skeleton(skeletonData);
-				return assetManager.get("assets/" + path);		
+			walkAnim = skeletonSeq.data.findAnimation("walk");
-			});
+			walkAnim.apply(skeletonSeq, 0, 0, true, null);
-			for (var i = 0; i < frameAtlas.regions.length - 1; i++) {
+			skeletonSeq.x += bounds.x + 150;
-				frames.push(frameAtlas.findRegion("raptor-walk_" + i));
+			
-			}
-			frameScale = bounds.x / frames[0].width * 1.1;
 			viewportWidth = ((700 + bounds.x) - offset.x);
 			viewportHeight = ((0 + bounds.y) - offset.y);						
 
@@ -85,13 +81,20 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
 				var time = timeLine.slider("value") / 100;
 				var animationDuration = animationState.getCurrent(0).animation.duration;
 				time = animationDuration * time;
-				animationState.update(time - playTime);
+				var playDelta = time - playTime;				
+				animationState.update(playDelta);
 				animationState.apply(skeleton);
 				skeleton.updateWorldTransform();
 				playTime = time;
-				frameTime = time;
+								
-				while (frameTime > animationDuration) frameTime -= animationDuration;				
+				walkLastTimePrecise += playDelta;
-				currFrame = Math.min(frames.length - 1, (frameTime / (1 / FPS)) | 0);								
+				var sign = playDelta < 0 ? -1 : 1;	
+				while (Math.abs(walkLastTimePrecise - walkLastTime) > 1 / FPS) {
+					var newWalkTime = walkLastTime + sign * 1 / FPS;
+					walkAnim.apply(skeletonSeq, walkLastTime, newWalkTime, true, null);
+					walkLastTime = newWalkTime;
+				}
+				skeletonSeq.updateWorldTransform();											
 			}
 		}});		
 
@@ -123,9 +126,13 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
 				animationState.apply(skeleton);
 				skeleton.updateWorldTransform();
 
-				frameTime += delta;
+				walkLastTimePrecise += delta;				
-				while (frameTime > animationDuration) frameTime -= animationDuration;				
+				while (walkLastTimePrecise - walkLastTime > 1 / FPS) {
-				currFrame = Math.min(frames.length - 1, (frameTime / (1 / FPS)) | 0);
+					var newWalkTime = walkLastTime + 1 / FPS;
+					walkAnim.apply(skeletonSeq, walkLastTime, newWalkTime, true, null);
+					walkLastTime = newWalkTime;
+				}								
+				skeletonSeq.updateWorldTransform();
 			}
 		}	
 
@@ -140,35 +147,21 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
 		renderer.begin();
 		if (!atlasCheckbox.checked) {
 			var frame = frames[currFrame];				
-			renderer.drawRegion(frame, 700, offset.y - 40, frame.width * frameScale, frame.height * frameScale);	
 			renderer.drawSkeleton(skeleton);
+			renderer.drawSkeleton(skeletonSeq);
 		} else {				
-			var skeletonAtlasSize = skeletonAtlas.pages[0].texture.getImage().width;
+			var atlasTexture = skeletonAtlas.pages[0].texture;
-			var frameAtlasSize = frameAtlas.pages[0].texture.getImage().width;
+			var atlasSize = atlasTexture.getImage().width;
-			var halfSpaceWidth = viewportWidth / 2;
+			renderer.rect(true, offset.x + bounds.x / 2 - atlasSize / 2,
-			var halfSpaceHeight = viewportHeight;
+								 offset.y + bounds.y / 2 - atlasSize / 2, atlasSize, atlasSize, spine.Color.WHITE);															
-			var pageSize = halfSpaceWidth / 2;															
+			renderer.drawTexture(atlasTexture, offset.x + bounds.x / 2 - atlasSize / 2,
+								 offset.y + bounds.y / 2 - atlasSize / 2, atlasSize, atlasSize);
+			renderer.rect(false, offset.x + bounds.x / 2 - atlasSize / 2,
+								 offset.y + bounds.y / 2 - atlasSize / 2, atlasSize, atlasSize, spine.Color.RED);								 
 			
-			// we only have one page for skeleton
+			var seqAtlasSize = atlasSize * 2;
-			var skeletonPageSize = pageSize * skeletonAtlasSize / frameAtlasSize;
+			renderer.drawTexture(sequenceAtlas, offset.x + bounds.x / 2 + bounds.x - seqAtlasSize / 2 + 211,
-			renderer.rect(true, offset.x + halfSpaceWidth / 2 - skeletonPageSize / 2,
+								 offset.y + bounds.y / 2 - seqAtlasSize / 2, seqAtlasSize, seqAtlasSize);			
-						  offset.y + halfSpaceHeight / 2 - skeletonPageSize / 2, skeletonPageSize, skeletonPageSize, spine.Color.WHITE);
-			renderer.drawTexture(skeletonAtlas.pages[0].texture, offset.x + halfSpaceWidth / 2 - skeletonPageSize / 2,
-								 offset.y + halfSpaceHeight / 2 - skeletonPageSize / 2, skeletonPageSize, skeletonPageSize);
-			renderer.rect(false, offset.x + halfSpaceWidth / 2 - skeletonPageSize / 2,
-						  offset.y + halfSpaceHeight / 2 - skeletonPageSize / 2, skeletonPageSize, skeletonPageSize, SKELETON_ATLAS_COLOR);
-
-			var x = offset.x + halfSpaceWidth  + 150;
-			var y = offset.y + halfSpaceHeight / 2;
-			var i = 0;
-			for (var row = 0; row < frameAtlas.pages.length / 2; row++) {
-				for (var col = 0; col < 2; col++) {
-					var page = frameAtlas.pages[i++];
-					renderer.rect(true, x + col * pageSize, y - row * pageSize, pageSize, pageSize, spine.Color.WHITE);
-					renderer.drawTexture(page.texture, x + col * pageSize, y - row * pageSize, pageSize, pageSize);
-					renderer.rect(false, x + col * pageSize, y - row * pageSize, pageSize, pageSize, FRAME_ATLAS_COLOR);
-				}
-			}			
 		}
 		renderer.end();		
 	}

spine-ts/webgl/demos/stretchy.html

@@ -0,0 +1,31 @@
+<html>
+<script src="../../build/spine-webgl.js"></script>
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
+<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
+<style>
+	* { margin: 0; padding: 0; }
+	div { color: #fff; }
+	body, html { height: 100% }
+	canvas { position: absolute; width: 100% ;height: 100%; }
+	.slider { width: 50% }
+</style>
+<body>
+<canvas id="stretchydemo-canvas"></canvas>
+<center>
+<div style="position: fixed; top: 0; width: 100%">
+	<br>
+	<div>Display Bones</div><input id="stretchydemo-drawbones" type="checkbox" checked="true"></input>
+	</br>
+	<input id="stretchydemo-playbutton" type="button" value="Pause"></input>	
+	<div id="stretchydemo-timeline" class="slider"></div>
+</div>
+</center>
+<script src="utils.js"></script>
+<script src="stretchy.js"></script>
+<script>
+	stretchyDemo("", spineDemos.setupRendering);
+</script>
+</body>
+</html>

spine-ts/webgl/demos/stretchy.js

@@ -0,0 +1,140 @@
+var stretchyDemo = function(pathPrefix, loadingComplete) {
+	var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
+	var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
+	var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
+	var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
+
+	var canvas, gl, renderer, input, assetManager;
+	var skeleton, bounds;		
+	var lastFrameTime = Date.now() / 1000;
+	var target = null;
+	var kneeFront, kneeBack;
+	var controlBones = ["front leg controller", "back leg controller", "hip"];
+	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
+	var kneePos = new spine.Vector2();
+	var playButton, timeLine, spacing, isPlaying = true, playTime = 0;		
+
+	function init () {
+
+		canvas = document.getElementById("stretchydemo-canvas");
+		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });	
+
+		renderer = new spine.webgl.SceneRenderer(canvas, gl);
+		assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
+		input = new spine.webgl.Input(canvas);
+		input.addListener({
+			down: function(x, y) {
+				for (var i = 0; i < controlBones.length; i++) {	
+					var bone = skeleton.findBone(controlBones[i]);				
+					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);				
+					if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 20) {
+						target = bone;
+					}				
+				}
+			},
+			up: function(x, y) {
+				target = null;
+			},
+			dragged: function(x, y) {
+				if (target != null) {
+					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+					if (target.parent !== null) {
+						target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
+						target.x = temp2.x;
+						target.y = temp2.y;
+					} else {
+						target.x = coords.x - skeleton.x;
+						target.y = coords.y - skeleton.y;
+					}
+				}
+			},
+			moved: function (x, y) { }
+		})
+		assetManager.loadTexture("assets/stretchyman.png");
+		assetManager.loadText("assets/stretchyman.json");
+		assetManager.loadText("assets/stretchyman.atlas");
+		requestAnimationFrame(load);
+	}
+
+	function load () {
+		if (assetManager.isLoadingComplete()) {
+			var atlas = new spine.TextureAtlas(assetManager.get("assets/stretchyman.atlas"), function(path) {
+				return assetManager.get("assets/" + path);		
+			});
+			var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
+			var skeletonJson = new spine.SkeletonJson(atlasLoader);
+			var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/stretchyman.json"));
+			skeleton = new spine.Skeleton(skeletonData);
+			skeleton.setToSetupPose();
+			skeleton.updateWorldTransform();
+			var offset = new spine.Vector2();
+			bounds = new spine.Vector2();
+			skeleton.getBounds(offset, bounds);
+
+			kneeFront = skeleton.findBone("front leg middle");
+			kneeBack = skeleton.findBone("back leg middle");
+
+			renderer.camera.position.x = offset.x + bounds.x / 2;
+			renderer.camera.position.y = offset.y + bounds.y / 2;
+
+			renderer.skeletonDebugRenderer.drawMeshHull = false;
+			renderer.skeletonDebugRenderer.drawMeshTriangles = false;
+
+			setupUI();
+
+			loadingComplete(canvas, render);
+		} else requestAnimationFrame(load);
+	}
+
+	function setupUI() {		
+		var checkbox = $("#stretchydemo-drawbones");
+		checkbox.change(function() {
+			renderer.skeletonDebugRenderer.drawPaths = this.checked;
+			renderer.skeletonDebugRenderer.drawBones = this.checked;			
+		});
+	}
+
+	function centerKnee(kneeBone, hipBone, footBone) {
+		temp.set(footBone.worldX + skeleton.x, footBone.worldY + skeleton.y, 0)
+			.sub(temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0));
+		temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0);
+		temp.scale(0.5).add(temp3);
+		kneeBone.parent.worldToLocal(kneePos.set(temp.x, temp.y));
+		kneeBone.x = kneePos.x;
+		kneeBone.y = kneePos.y;		
+	}
+
+	function render () {
+		var now = Date.now() / 1000;
+		var delta = now - lastFrameTime;
+		lastFrameTime = now;
+		if (delta > 0.032) delta = 0.032;		
+
+		skeleton.updateWorldTransform();
+		centerKnee(kneeBack, skeleton.findBone("back leg root"), skeleton.findBone("back leg controller"));
+		centerKnee(kneeFront, skeleton.findBone("front leg root"), skeleton.findBone("front leg controller"));
+		skeleton.updateWorldTransform();
+
+		renderer.camera.viewportWidth = bounds.x * 1.2;
+		renderer.camera.viewportHeight = bounds.y * 1.2;
+		renderer.resize(spine.webgl.ResizeMode.Fit);
+
+		gl.clearColor(0.2, 0.2, 0.2, 1);
+		gl.clear(gl.COLOR_BUFFER_BIT);			
+
+		renderer.begin();				
+		renderer.drawSkeleton(skeleton);
+		renderer.drawSkeletonDebug(skeleton, false, ["root", "front leg middle", "back leg middle"]);
+		for (var i = 0; i < controlBones.length; i++) {		
+			var bone = skeleton.findBone(controlBones[i]);
+			var colorInner = bone === target ? COLOR_INNER_SELECTED : COLOR_INNER;
+			var colorOuter = bone === target ? COLOR_OUTER_SELECTED : COLOR_OUTER;
+			renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
+			renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
+		}
+		renderer.end();				
+	}
+
+	init();
+};

spine-ts/webgl/demos/utils.js

@@ -1,10 +1,33 @@
 var spineDemos;
 (function(spineDemos) {
 	spineDemos.setupRendering = function (canvas, renderFunc) {
-		function render() {
+		var isVisible = false;
+
+		function render () {
 			renderFunc();
-			requestAnimationFrame(render);
+			if (isVisible) requestAnimationFrame(render);
 		};
-		render();
+
-	}
+		function viewportCheck () {
+			var old = isVisible	
+			isVisible = spineDemos.isElementInViewport(canvas);			
+			if (isVisible && old != isVisible) requestAnimationFrame(render);		
+		}
+
+		window.addEventListener("DOMContentLoaded", viewportCheck, false);
+		window.addEventListener("load", viewportCheck, false);
+		window.addEventListener("resize", viewportCheck, false);
+		window.addEventListener("scroll", viewportCheck, false);
+
+		viewportCheck();
+		requestAnimationFrame(render);
+	};
+
+	spineDemos.isElementInViewport = function (canvas) {
+		var rect = canvas.getBoundingClientRect();
+		var x = 0, y = 0;
+		var width = (window.innerHeight || document.documentElement.clientHeight);
+		var height = (window.innerWidth || document.documentElement.clientWidth);
+		return rect.left < x + width && rect.right > x && rect.top < y + height && rect.bottom > y;		 
+	};
 })(spineDemos || (spineDemos = { }));