feat: use custom player module

apps/module/spine-ts/webgl/example/assets/coin-pma.atlas

@@ -0,0 +1,55 @@
+
+coin-pma.png
+size: 1024,1024
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+coin-front-logo
+  rotate: false
+  xy: 2, 570
+  size: 305, 302
+  orig: 305, 302
+  offset: 0, 0
+  index: -1
+coin-front-shine-logo
+  rotate: false
+  xy: 2, 286
+  size: 282, 282
+  orig: 282, 282
+  offset: 0, 0
+  index: -1
+coin-front-shine-spineboy
+  rotate: false
+  xy: 305, 283
+  size: 282, 282
+  orig: 282, 282
+  offset: 0, 0
+  index: -1
+coin-front-spineboy
+  rotate: true
+  xy: 309, 567
+  size: 305, 302
+  orig: 305, 302
+  offset: 0, 0
+  index: -1
+coin-side-round
+  rotate: false
+  xy: 2, 2
+  size: 144, 282
+  orig: 144, 282
+  offset: 0, 0
+  index: -1
+coin-side-straight
+  rotate: false
+  xy: 286, 286
+  size: 17, 282
+  orig: 17, 282
+  offset: 0, 0
+  index: -1
+shine
+  rotate: false
+  xy: 148, 39
+  size: 72, 245
+  orig: 72, 245
+  offset: 0, 0
+  index: -1

apps/module/spine-ts/webgl/example/assets/goblins-pma.atlas

@@ -0,0 +1,293 @@
+
+goblins-pma.png
+size: 1024,128
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+dagger
+  rotate: false
+  xy: 2, 18
+  size: 26, 108
+  orig: 26, 108
+  offset: 0, 0
+  index: -1
+goblin/eyes-closed
+  rotate: false
+  xy: 2, 4
+  size: 34, 12
+  orig: 34, 12
+  offset: 0, 0
+  index: -1
+goblin/head
+  rotate: true
+  xy: 113, 23
+  size: 103, 66
+  orig: 103, 66
+  offset: 0, 0
+  index: -1
+goblin/left-arm
+  rotate: true
+  xy: 937, 89
+  size: 37, 35
+  orig: 37, 35
+  offset: 0, 0
+  index: -1
+goblin/left-foot
+  rotate: true
+  xy: 609, 61
+  size: 65, 31
+  orig: 65, 31
+  offset: 0, 0
+  index: -1
+goblin/left-hand
+  rotate: false
+  xy: 840, 21
+  size: 36, 41
+  orig: 36, 41
+  offset: 0, 0
+  index: -1
+goblin/left-lower-leg
+  rotate: false
+  xy: 504, 56
+  size: 33, 70
+  orig: 33, 70
+  offset: 0, 0
+  index: -1
+goblin/left-shoulder
+  rotate: false
+  xy: 745, 17
+  size: 29, 44
+  orig: 29, 44
+  offset: 0, 0
+  index: -1
+goblin/left-upper-leg
+  rotate: false
+  xy: 397, 53
+  size: 33, 73
+  orig: 33, 73
+  offset: 0, 0
+  index: -1
+goblin/neck
+  rotate: false
+  xy: 862, 85
+  size: 36, 41
+  orig: 36, 41
+  offset: 0, 0
+  index: -1
+goblin/pelvis
+  rotate: false
+  xy: 776, 18
+  size: 62, 43
+  orig: 62, 43
+  offset: 0, 0
+  index: -1
+goblin/right-arm
+  rotate: true
+  xy: 181, 5
+  size: 23, 50
+  orig: 23, 50
+  offset: 0, 0
+  index: -1
+goblin/right-foot
+  rotate: true
+  xy: 747, 63
+  size: 63, 33
+  orig: 63, 33
+  offset: 0, 0
+  index: -1
+goblin/right-hand
+  rotate: false
+  xy: 878, 3
+  size: 36, 37
+  orig: 36, 37
+  offset: 0, 0
+  index: -1
+goblin/right-lower-leg
+  rotate: false
+  xy: 321, 50
+  size: 36, 76
+  orig: 36, 76
+  offset: 0, 0
+  index: -1
+goblin/right-shoulder
+  rotate: false
+  xy: 663, 14
+  size: 39, 45
+  orig: 39, 45
+  offset: 0, 0
+  index: -1
+goblin/right-upper-leg
+  rotate: false
+  xy: 675, 63
+  size: 34, 63
+  orig: 34, 63
+  offset: 0, 0
+  index: -1
+goblin/torso
+  rotate: false
+  xy: 181, 30
+  size: 68, 96
+  orig: 68, 96
+  offset: 0, 0
+  index: -1
+goblin/undie-straps
+  rotate: false
+  xy: 38, 2
+  size: 55, 19
+  orig: 55, 19
+  offset: 0, 0
+  index: -1
+goblin/undies
+  rotate: false
+  xy: 974, 97
+  size: 36, 29
+  orig: 36, 29
+  offset: 0, 0
+  index: -1
+goblingirl/eyes-closed
+  rotate: false
+  xy: 397, 30
+  size: 37, 21
+  orig: 37, 21
+  offset: 0, 0
+  index: -1
+goblingirl/head
+  rotate: true
+  xy: 30, 23
+  size: 103, 81
+  orig: 103, 81
+  offset: 0, 0
+  index: -1
+goblingirl/left-arm
+  rotate: true
+  xy: 916, 8
+  size: 37, 35
+  orig: 37, 35
+  offset: 0, 0
+  index: -1
+goblingirl/left-foot
+  rotate: true
+  xy: 642, 61
+  size: 65, 31
+  orig: 65, 31
+  offset: 0, 0
+  index: -1
+goblingirl/left-hand
+  rotate: false
+  xy: 900, 86
+  size: 35, 40
+  orig: 35, 40
+  offset: 0, 0
+  index: -1
+goblingirl/left-lower-leg
+  rotate: false
+  xy: 539, 56
+  size: 33, 70
+  orig: 33, 70
+  offset: 0, 0
+  index: -1
+goblingirl/left-shoulder
+  rotate: false
+  xy: 633, 13
+  size: 28, 46
+  orig: 28, 46
+  offset: 0, 0
+  index: -1
+goblingirl/left-upper-leg
+  rotate: false
+  xy: 574, 56
+  size: 33, 70
+  orig: 33, 70
+  offset: 0, 0
+  index: -1
+goblingirl/neck
+  rotate: false
+  xy: 878, 42
+  size: 35, 41
+  orig: 35, 41
+  offset: 0, 0
+  index: -1
+goblingirl/pelvis
+  rotate: true
+  xy: 817, 64
+  size: 62, 43
+  orig: 62, 43
+  offset: 0, 0
+  index: -1
+goblingirl/right-arm
+  rotate: false
+  xy: 603, 4
+  size: 28, 50
+  orig: 28, 50
+  offset: 0, 0
+  index: -1
+goblingirl/right-foot
+  rotate: true
+  xy: 782, 63
+  size: 63, 33
+  orig: 63, 33
+  offset: 0, 0
+  index: -1
+goblingirl/right-hand
+  rotate: false
+  xy: 915, 47
+  size: 36, 37
+  orig: 36, 37
+  offset: 0, 0
+  index: -1
+goblingirl/right-lower-leg
+  rotate: false
+  xy: 359, 50
+  size: 36, 76
+  orig: 36, 76
+  offset: 0, 0
+  index: -1
+goblingirl/right-shoulder
+  rotate: false
+  xy: 704, 16
+  size: 39, 45
+  orig: 39, 45
+  offset: 0, 0
+  index: -1
+goblingirl/right-upper-leg
+  rotate: false
+  xy: 711, 63
+  size: 34, 63
+  orig: 34, 63
+  offset: 0, 0
+  index: -1
+goblingirl/torso
+  rotate: false
+  xy: 251, 30
+  size: 68, 96
+  orig: 68, 96
+  offset: 0, 0
+  index: -1
+goblingirl/undie-straps
+  rotate: false
+  xy: 95, 2
+  size: 55, 19
+  orig: 55, 19
+  offset: 0, 0
+  index: -1
+goblingirl/undies
+  rotate: false
+  xy: 974, 66
+  size: 36, 29
+  orig: 36, 29
+  offset: 0, 0
+  index: -1
+shield
+  rotate: false
+  xy: 432, 54
+  size: 70, 72
+  orig: 70, 72
+  offset: 0, 0
+  index: -1
+spear
+  rotate: true
+  xy: 233, 6
+  size: 22, 368
+  orig: 22, 368
+  offset: 0, 0
+  index: -1

apps/module/spine-ts/webgl/example/assets/owl-pma.atlas

@@ -0,0 +1,195 @@
+
+owl-pma.png
+size: 1024,512
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+L_eye-closed
+  rotate: true
+  xy: 512, 5
+  size: 90, 86
+  orig: 90, 86
+  offset: 0, 0
+  index: -1
+L_eye-iris
+  rotate: true
+  xy: 600, 10
+  size: 90, 86
+  orig: 90, 86
+  offset: 0, 0
+  index: -1
+L_eye-light
+  rotate: true
+  xy: 688, 4
+  size: 21, 20
+  orig: 21, 20
+  offset: 0, 0
+  index: -1
+L_eye-pupil
+  rotate: true
+  xy: 856, 13
+  size: 63, 60
+  orig: 63, 60
+  offset: 0, 0
+  index: -1
+L_foot
+  rotate: true
+  xy: 834, 78
+  size: 64, 48
+  orig: 64, 48
+  offset: 0, 0
+  index: -1
+L_wing
+  rotate: true
+  xy: 349, 4
+  size: 81, 110
+  orig: 81, 110
+  offset: 0, 0
+  index: -1
+R_eye-closed
+  rotate: true
+  xy: 637, 119
+  size: 90, 86
+  orig: 90, 86
+  offset: 0, 0
+  index: -1
+R_eye-iris
+  rotate: true
+  xy: 688, 27
+  size: 90, 86
+  orig: 90, 86
+  offset: 0, 0
+  index: -1
+R_eye-light
+  rotate: true
+  xy: 710, 4
+  size: 21, 20
+  orig: 21, 20
+  offset: 0, 0
+  index: -1
+R_eye-pupil
+  rotate: true
+  xy: 884, 80
+  size: 63, 60
+  orig: 63, 60
+  offset: 0, 0
+  index: -1
+R_foot
+  rotate: true
+  xy: 845, 145
+  size: 64, 48
+  orig: 64, 48
+  offset: 0, 0
+  index: -1
+R_wing
+  rotate: false
+  xy: 421, 93
+  size: 81, 110
+  orig: 81, 110
+  offset: 0, 0
+  index: -1
+beak
+  rotate: false
+  xy: 776, 2
+  size: 39, 41
+  orig: 39, 41
+  offset: 0, 0
+  index: -1
+beak-down
+  rotate: false
+  xy: 817, 3
+  size: 37, 40
+  orig: 37, 40
+  offset: 0, 0
+  index: -1
+body
+  rotate: false
+  xy: 2, 7
+  size: 248, 196
+  orig: 248, 196
+  offset: 0, 0
+  index: -1
+feather-1
+  rotate: false
+  xy: 918, 18
+  size: 59, 60
+  orig: 59, 60
+  offset: 0, 0
+  index: -1
+feather-2
+  rotate: false
+  xy: 781, 144
+  size: 62, 65
+  orig: 62, 65
+  offset: 0, 0
+  index: -1
+feather-3
+  rotate: false
+  xy: 776, 45
+  size: 56, 76
+  orig: 56, 76
+  offset: 0, 0
+  index: -1
+head-base
+  rotate: true
+  xy: 621, 211
+  size: 299, 237
+  orig: 299, 237
+  offset: 0, 0
+  index: -1
+leaf-1
+  rotate: false
+  xy: 559, 102
+  size: 76, 101
+  orig: 76, 101
+  offset: 0, 0
+  index: -1
+leaf-2
+  rotate: true
+  xy: 252, 4
+  size: 65, 95
+  orig: 65, 95
+  offset: 0, 0
+  index: -1
+leaf-3
+  rotate: true
+  xy: 252, 71
+  size: 132, 77
+  orig: 132, 77
+  offset: 0, 0
+  index: -1
+leaf-4
+  rotate: true
+  xy: 461, 2
+  size: 89, 49
+  orig: 89, 49
+  offset: 0, 0
+  index: -1
+leaf-5
+  rotate: false
+  xy: 504, 97
+  size: 53, 106
+  orig: 53, 106
+  offset: 0, 0
+  index: -1
+leaf-6
+  rotate: false
+  xy: 331, 87
+  size: 88, 116
+  orig: 88, 116
+  offset: 0, 0
+  index: -1
+leaf-7
+  rotate: false
+  xy: 725, 123
+  size: 54, 86
+  orig: 54, 86
+  offset: 0, 0
+  index: -1
+wood
+  rotate: false
+  xy: 2, 205
+  size: 617, 305
+  orig: 617, 305
+  offset: 0, 0
+  index: -1

apps/module/spine-ts/webgl/example/assets/raptor-pma.atlas

@@ -0,0 +1,272 @@
+
+raptor-pma.png
+size: 1024,512
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+back-arm
+  rotate: true
+  xy: 829, 88
+  size: 46, 25
+  orig: 46, 25
+  offset: 0, 0
+  index: -1
+back-bracer
+  rotate: true
+  xy: 195, 238
+  size: 39, 28
+  orig: 39, 28
+  offset: 0, 0
+  index: -1
+back-hand
+  rotate: true
+  xy: 724, 140
+  size: 36, 34
+  orig: 36, 34
+  offset: 0, 0
+  index: -1
+back-knee
+  rotate: true
+  xy: 760, 131
+  size: 49, 67
+  orig: 49, 67
+  offset: 0, 0
+  index: -1
+back-thigh
+  rotate: true
+  xy: 225, 238
+  size: 39, 24
+  orig: 39, 24
+  offset: 0, 0
+  index: -1
+eyes-open
+  rotate: false
+  xy: 975, 204
+  size: 47, 45
+  orig: 47, 45
+  offset: 0, 0
+  index: -1
+front-arm
+  rotate: false
+  xy: 969, 112
+  size: 48, 26
+  orig: 48, 26
+  offset: 0, 0
+  index: -1
+front-bracer
+  rotate: true
+  xy: 724, 97
+  size: 41, 29
+  orig: 41, 29
+  offset: 0, 0
+  index: -1
+front-hand
+  rotate: false
+  xy: 251, 239
+  size: 41, 38
+  orig: 41, 38
+  offset: 0, 0
+  index: -1
+front-open-hand
+  rotate: true
+  xy: 856, 76
+  size: 43, 44
+  orig: 43, 44
+  offset: 0, 0
+  index: -1
+front-thigh
+  rotate: true
+  xy: 729, 178
+  size: 57, 29
+  orig: 57, 29
+  offset: 0, 0
+  index: -1
+gun
+  rotate: false
+  xy: 894, 251
+  size: 107, 103
+  orig: 107, 103
+  offset: 0, 0
+  index: -1
+gun-nohand
+  rotate: false
+  xy: 764, 241
+  size: 105, 102
+  orig: 105, 102
+  offset: 0, 0
+  index: -1
+head
+  rotate: false
+  xy: 756, 345
+  size: 136, 149
+  orig: 136, 149
+  offset: 0, 0
+  index: -1
+lower-leg
+  rotate: true
+  xy: 475, 237
+  size: 73, 98
+  orig: 73, 98
+  offset: 0, 0
+  index: -1
+mouth-grind
+  rotate: false
+  xy: 975, 172
+  size: 47, 30
+  orig: 47, 30
+  offset: 0, 0
+  index: -1
+mouth-smile
+  rotate: false
+  xy: 975, 140
+  size: 47, 30
+  orig: 47, 30
+  offset: 0, 0
+  index: -1
+neck
+  rotate: false
+  xy: 366, 282
+  size: 18, 21
+  orig: 18, 21
+  offset: 0, 0
+  index: -1
+raptor-back-arm
+  rotate: true
+  xy: 636, 97
+  size: 82, 86
+  orig: 82, 86
+  offset: 0, 0
+  index: -1
+raptor-body
+  rotate: false
+  xy: 2, 2
+  size: 632, 233
+  orig: 632, 233
+  offset: 0, 0
+  index: -1
+raptor-front-arm
+  rotate: true
+  xy: 871, 168
+  size: 81, 102
+  orig: 81, 102
+  offset: 0, 0
+  index: -1
+raptor-front-leg
+  rotate: false
+  xy: 2, 237
+  size: 191, 257
+  orig: 191, 257
+  offset: 0, 0
+  index: -1
+raptor-hindleg-back
+  rotate: false
+  xy: 195, 279
+  size: 169, 215
+  orig: 169, 215
+  offset: 0, 0
+  index: -1
+raptor-horn
+  rotate: true
+  xy: 431, 312
+  size: 182, 80
+  orig: 182, 80
+  offset: 0, 0
+  index: -1
+raptor-horn-back
+  rotate: true
+  xy: 513, 318
+  size: 176, 77
+  orig: 176, 77
+  offset: 0, 0
+  index: -1
+raptor-jaw
+  rotate: false
+  xy: 894, 356
+  size: 126, 138
+  orig: 126, 138
+  offset: 0, 0
+  index: -1
+raptor-jaw-tooth
+  rotate: true
+  xy: 294, 240
+  size: 37, 48
+  orig: 37, 48
+  offset: 0, 0
+  index: -1
+raptor-mouth-inside
+  rotate: true
+  xy: 344, 241
+  size: 36, 41
+  orig: 36, 41
+  offset: 0, 0
+  index: -1
+raptor-saddle-strap-back
+  rotate: false
+  xy: 575, 242
+  size: 54, 74
+  orig: 54, 74
+  offset: 0, 0
+  index: -1
+raptor-saddle-strap-front
+  rotate: true
+  xy: 764, 182
+  size: 57, 95
+  orig: 57, 95
+  offset: 0, 0
+  index: -1
+raptor-saddle-w-shadow
+  rotate: false
+  xy: 592, 323
+  size: 162, 171
+  orig: 162, 171
+  offset: 0, 0
+  index: -1
+raptor-tail-shadow
+  rotate: true
+  xy: 366, 305
+  size: 189, 63
+  orig: 189, 63
+  offset: 0, 0
+  index: -1
+raptor-tongue
+  rotate: false
+  xy: 387, 239
+  size: 86, 64
+  orig: 86, 64
+  offset: 0, 0
+  index: -1
+stirrup-back
+  rotate: true
+  xy: 829, 136
+  size: 44, 35
+  orig: 44, 35
+  offset: 0, 0
+  index: -1
+stirrup-front
+  rotate: true
+  xy: 866, 121
+  size: 45, 50
+  orig: 45, 50
+  offset: 0, 0
+  index: -1
+stirrup-strap
+  rotate: false
+  xy: 918, 120
+  size: 49, 46
+  orig: 49, 46
+  offset: 0, 0
+  index: -1
+torso
+  rotate: true
+  xy: 636, 181
+  size: 54, 91
+  orig: 54, 91
+  offset: 0, 0
+  index: -1
+visor
+  rotate: false
+  xy: 631, 237
+  size: 131, 84
+  orig: 131, 84
+  offset: 0, 0
+  index: -1

apps/module/spine-ts/webgl/example/assets/spineboy-pma.atlas

@@ -0,0 +1,286 @@
+
+spineboy-pma.png
+size: 1024,256
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+crosshair
+  rotate: false
+  xy: 813, 160
+  size: 45, 45
+  orig: 45, 45
+  offset: 0, 0
+  index: -1
+eye-indifferent
+  rotate: false
+  xy: 569, 2
+  size: 47, 45
+  orig: 47, 45
+  offset: 0, 0
+  index: -1
+eye-surprised
+  rotate: true
+  xy: 643, 7
+  size: 47, 45
+  orig: 47, 45
+  offset: 0, 0
+  index: -1
+front-bracer
+  rotate: false
+  xy: 811, 51
+  size: 29, 40
+  orig: 29, 40
+  offset: 0, 0
+  index: -1
+front-fist-closed
+  rotate: false
+  xy: 807, 93
+  size: 38, 41
+  orig: 38, 41
+  offset: 0, 0
+  index: -1
+front-fist-open
+  rotate: false
+  xy: 815, 210
+  size: 43, 44
+  orig: 43, 44
+  offset: 0, 0
+  index: -1
+front-foot
+  rotate: true
+  xy: 706, 64
+  size: 63, 35
+  orig: 63, 35
+  offset: 0, 0
+  index: -1
+front-shin
+  rotate: false
+  xy: 80, 11
+  size: 41, 92
+  orig: 41, 92
+  offset: 0, 0
+  index: -1
+front-thigh
+  rotate: false
+  xy: 754, 12
+  size: 23, 56
+  orig: 23, 56
+  offset: 0, 0
+  index: -1
+front-upper-arm
+  rotate: false
+  xy: 618, 5
+  size: 23, 49
+  orig: 23, 49
+  offset: 0, 0
+  index: -1
+goggles
+  rotate: false
+  xy: 214, 20
+  size: 131, 83
+  orig: 131, 83
+  offset: 0, 0
+  index: -1
+gun
+  rotate: true
+  xy: 347, 14
+  size: 105, 102
+  orig: 105, 102
+  offset: 0, 0
+  index: -1
+head
+  rotate: false
+  xy: 80, 105
+  size: 136, 149
+  orig: 136, 149
+  offset: 0, 0
+  index: -1
+hoverboard-board
+  rotate: true
+  xy: 2, 8
+  size: 246, 76
+  orig: 246, 76
+  offset: 0, 0
+  index: -1
+hoverboard-thruster
+  rotate: false
+  xy: 478, 2
+  size: 30, 32
+  orig: 30, 32
+  offset: 0, 0
+  index: -1
+hoverglow-small
+  rotate: true
+  xy: 218, 117
+  size: 137, 38
+  orig: 137, 38
+  offset: 0, 0
+  index: -1
+mouth-grind
+  rotate: true
+  xy: 775, 80
+  size: 47, 30
+  orig: 47, 30
+  offset: 0, 0
+  index: -1
+mouth-oooo
+  rotate: true
+  xy: 779, 31
+  size: 47, 30
+  orig: 47, 30
+  offset: 0, 0
+  index: -1
+mouth-smile
+  rotate: true
+  xy: 783, 207
+  size: 47, 30
+  orig: 47, 30
+  offset: 0, 0
+  index: -1
+muzzle-glow
+  rotate: false
+  xy: 779, 4
+  size: 25, 25
+  orig: 25, 25
+  offset: 0, 0
+  index: -1
+muzzle-ring
+  rotate: false
+  xy: 451, 14
+  size: 25, 105
+  orig: 25, 105
+  offset: 0, 0
+  index: -1
+muzzle01
+  rotate: true
+  xy: 664, 60
+  size: 67, 40
+  orig: 67, 40
+  offset: 0, 0
+  index: -1
+muzzle02
+  rotate: true
+  xy: 580, 56
+  size: 68, 42
+  orig: 68, 42
+  offset: 0, 0
+  index: -1
+muzzle03
+  rotate: true
+  xy: 478, 36
+  size: 83, 53
+  orig: 83, 53
+  offset: 0, 0
+  index: -1
+muzzle04
+  rotate: true
+  xy: 533, 49
+  size: 75, 45
+  orig: 75, 45
+  offset: 0, 0
+  index: -1
+muzzle05
+  rotate: true
+  xy: 624, 56
+  size: 68, 38
+  orig: 68, 38
+  offset: 0, 0
+  index: -1
+neck
+  rotate: false
+  xy: 806, 8
+  size: 18, 21
+  orig: 18, 21
+  offset: 0, 0
+  index: -1
+portal-bg
+  rotate: false
+  xy: 258, 121
+  size: 133, 133
+  orig: 133, 133
+  offset: 0, 0
+  index: -1
+portal-flare1
+  rotate: true
+  xy: 690, 2
+  size: 56, 30
+  orig: 56, 30
+  offset: 0, 0
+  index: -1
+portal-flare2
+  rotate: false
+  xy: 510, 3
+  size: 57, 31
+  orig: 57, 31
+  offset: 0, 0
+  index: -1
+portal-flare3
+  rotate: true
+  xy: 722, 4
+  size: 58, 30
+  orig: 58, 30
+  offset: 0, 0
+  index: -1
+portal-shade
+  rotate: false
+  xy: 393, 121
+  size: 133, 133
+  orig: 133, 133
+  offset: 0, 0
+  index: -1
+portal-streaks1
+  rotate: false
+  xy: 528, 126
+  size: 126, 128
+  orig: 126, 128
+  offset: 0, 0
+  index: -1
+portal-streaks2
+  rotate: false
+  xy: 656, 129
+  size: 125, 125
+  orig: 125, 125
+  offset: 0, 0
+  index: -1
+rear-bracer
+  rotate: false
+  xy: 826, 13
+  size: 28, 36
+  orig: 28, 36
+  offset: 0, 0
+  index: -1
+rear-foot
+  rotate: true
+  xy: 743, 70
+  size: 57, 30
+  orig: 57, 30
+  offset: 0, 0
+  index: -1
+rear-shin
+  rotate: false
+  xy: 174, 14
+  size: 38, 89
+  orig: 38, 89
+  offset: 0, 0
+  index: -1
+rear-thigh
+  rotate: false
+  xy: 783, 158
+  size: 28, 47
+  orig: 28, 47
+  offset: 0, 0
+  index: -1
+rear-upper-arm
+  rotate: true
+  xy: 783, 136
+  size: 20, 44
+  orig: 20, 44
+  offset: 0, 0
+  index: -1
+torso
+  rotate: false
+  xy: 123, 13
+  size: 49, 90
+  orig: 49, 90
+  offset: 0, 0
+  index: -1

apps/module/spine-ts/webgl/example/assets/stretchyman-pma.atlas

@@ -0,0 +1,41 @@
+
+stretchyman-pma.png
+size: 1024,256
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+back-arm
+  rotate: false
+  xy: 149, 45
+  size: 72, 202
+  orig: 72, 202
+  offset: 0, 0
+  index: -1
+back-leg
+  rotate: true
+  xy: 312, 4
+  size: 100, 318
+  orig: 100, 318
+  offset: 0, 0
+  index: -1
+body
+  rotate: true
+  xy: 223, 106
+  size: 141, 452
+  orig: 141, 452
+  offset: 0, 0
+  index: -1
+front-arm
+  rotate: false
+  xy: 2, 26
+  size: 145, 221
+  orig: 145, 221
+  offset: 0, 0
+  index: -1
+head
+  rotate: false
+  xy: 223, 2
+  size: 87, 102
+  orig: 87, 102
+  offset: 0, 0
+  index: -1

apps/module/spine-ts/webgl/example/assets/tank-pma.atlas

@@ -0,0 +1,174 @@
+
+tank-pma.png
+size: 1024,1024
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+antenna
+  rotate: true
+  xy: 2, 712
+  size: 11, 152
+  orig: 11, 152
+  offset: 0, 0
+  index: -1
+cannon
+  rotate: false
+  xy: 222, 694
+  size: 466, 29
+  orig: 466, 29
+  offset: 0, 0
+  index: -1
+cannon-connector
+  rotate: true
+  xy: 82, 654
+  size: 56, 68
+  orig: 56, 68
+  offset: 0, 0
+  index: -1
+ground
+  rotate: false
+  xy: 2, 175
+  size: 512, 177
+  orig: 512, 177
+  offset: 0, 0
+  index: -1
+guntower
+  rotate: false
+  xy: 647, 347
+  size: 365, 145
+  orig: 365, 145
+  offset: 0, 0
+  index: -1
+machinegun
+  rotate: false
+  xy: 690, 694
+  size: 166, 29
+  orig: 166, 29
+  offset: 0, 0
+  index: -1
+machinegun-mount
+  rotate: true
+  xy: 858, 687
+  size: 36, 48
+  orig: 36, 48
+  offset: 0, 0
+  index: -1
+rock
+  rotate: false
+  xy: 664, 607
+  size: 290, 64
+  orig: 290, 64
+  offset: 0, 0
+  index: -1
+smoke-glow
+  rotate: false
+  xy: 946, 673
+  size: 50, 50
+  orig: 50, 50
+  offset: 0, 0
+  index: -1
+smoke-puff01-bg
+  rotate: false
+  xy: 312, 630
+  size: 92, 62
+  orig: 92, 62
+  offset: 0, 0
+  index: -1
+smoke-puff01-fg
+  rotate: false
+  xy: 222, 633
+  size: 88, 59
+  orig: 88, 59
+  offset: 0, 0
+  index: -1
+smoke-puff02-fg
+  rotate: false
+  xy: 406, 630
+  size: 92, 62
+  orig: 92, 62
+  offset: 0, 0
+  index: -1
+smoke-puff03-fg
+  rotate: false
+  xy: 500, 630
+  size: 92, 62
+  orig: 92, 62
+  offset: 0, 0
+  index: -1
+smoke-puff04-fg
+  rotate: false
+  xy: 2, 662
+  size: 78, 48
+  orig: 78, 48
+  offset: 0, 0
+  index: -1
+tank-bottom
+  rotate: false
+  xy: 2, 354
+  size: 643, 138
+  orig: 643, 138
+  offset: 0, 0
+  index: -1
+tank-bottom-shadow
+  rotate: false
+  xy: 2, 2
+  size: 646, 171
+  orig: 646, 171
+  offset: 0, 0
+  index: -1
+tank-top
+  rotate: false
+  xy: 195, 494
+  size: 704, 111
+  orig: 704, 111
+  offset: 0, 0
+  index: -1
+tread
+  rotate: false
+  xy: 172, 708
+  size: 48, 15
+  orig: 48, 15
+  offset: 0, 0
+  index: -1
+tread-inside
+  rotate: true
+  xy: 156, 710
+  size: 13, 14
+  orig: 13, 14
+  offset: 0, 0
+  index: -1
+wheel-big
+  rotate: false
+  xy: 97, 540
+  size: 96, 96
+  orig: 96, 96
+  offset: 0, 0
+  index: -1
+wheel-big-overlay
+  rotate: false
+  xy: 2, 559
+  size: 93, 93
+  orig: 93, 93
+  offset: 0, 0
+  index: -1
+wheel-mid
+  rotate: false
+  xy: 152, 638
+  size: 68, 68
+  orig: 68, 68
+  offset: 0, 0
+  index: -1
+wheel-mid-overlay
+  rotate: false
+  xy: 594, 624
+  size: 68, 68
+  orig: 68, 68
+  offset: 0, 0
+  index: -1
+wheel-small
+  rotate: false
+  xy: 908, 687
+  size: 36, 36
+  orig: 36, 36
+  offset: 0, 0
+  index: -1

apps/module/spine-ts/webgl/example/assets/vine-pma.atlas

@@ -0,0 +1,13 @@
+
+vine-pma.png
+size: 128,1024
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+vine
+  rotate: false
+  xy: 2, 2
+  size: 68, 962
+  orig: 68, 962
+  offset: 0, 0
+  index: -1

apps/module/spine-ts/webgl/example/barebones.html

@@ -0,0 +1,157 @@
+<html>
+<script src="../../build/spine-webgl.js"></script>
+<style>
+* { margin: 0; padding: 0; }
+body, html { height: 100% }
+canvas { position: absolute; width: 100% ;height: 100%; }
+</style>
+<body>
+<canvas id="canvas"></canvas>
+<script>
+
+var canvas;
+var gl;
+var shader;
+var batcher;
+var mvp = new spine.webgl.Matrix4();
+var assetManager;
+var skeletonRenderer;
+
+var lastFrameTime;
+var spineboy;
+
+function init () {
+	// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
+	// loading textures. That is handled separately by PolygonBatcher.
+	canvas = document.getElementById("canvas");
+	canvas.width = window.innerWidth;
+	canvas.height = window.innerHeight;
+	var config = { alpha: false };
+	gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
+	if (!gl) {
+		alert('WebGL is unavailable.');
+		return;
+	}
+
+	// Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager.
+	shader = spine.webgl.Shader.newTwoColoredTextured(gl);
+	batcher = new spine.webgl.PolygonBatcher(gl);
+	mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
+	skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
+	assetManager = new spine.webgl.AssetManager(gl);
+
+	// Tell AssetManager to load the resources for each skeleton, including the exported .skel file, the .atlas file and the .png
+	// file for the atlas. We then wait until all resources are loaded in the load() method.
+	assetManager.loadBinary("assets/spineboy-pro.skel");
+	assetManager.loadTextureAtlas("assets/spineboy-pma.atlas");
+	requestAnimationFrame(load);
+}
+
+function load () {
+	// Wait until the AssetManager has loaded all resources, then load the skeletons.
+	if (assetManager.isLoadingComplete()) {
+		spineboy = loadSpineboy("run", true);
+		lastFrameTime = Date.now() / 1000;
+		requestAnimationFrame(render); // Loading is done, call render every frame.
+	} else {
+		requestAnimationFrame(load);
+	}
+}
+
+function loadSpineboy (initialAnimation, premultipliedAlpha) {
+	// Load the texture atlas from the AssetManager.
+	var atlas = assetManager.get("assets/spineboy-pma.atlas");
+
+	// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
+	var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+
+	// Create a SkeletonBinary instance for parsing the .skel file.
+	var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
+
+	// Set the scale to apply during parsing, parse the file, and create a new skeleton.
+	skeletonBinary.scale = 1;
+	var skeletonData = skeletonBinary.readSkeletonData(assetManager.get("assets/spineboy-pro.skel"));
+	var skeleton = new spine.Skeleton(skeletonData);
+	var bounds = calculateSetupPoseBounds(skeleton);
+
+	// Create an AnimationState, and set the initial animation in looping mode.
+	var animationStateData = new spine.AnimationStateData(skeleton.data);
+	var animationState = new spine.AnimationState(animationStateData);
+	animationState.setAnimation(0, initialAnimation, true);
+
+	// Pack everything up and return to caller.
+	return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
+}
+
+function calculateSetupPoseBounds (skeleton) {
+	skeleton.setToSetupPose();
+	skeleton.updateWorldTransform();
+	var offset = new spine.Vector2();
+	var size = new spine.Vector2();
+	skeleton.getBounds(offset, size, []);
+	return { offset: offset, size: size };
+}
+
+function render () {
+	var now = Date.now() / 1000;
+	var delta = now - lastFrameTime;
+	lastFrameTime = now;
+
+	// Update the MVP matrix to adjust for canvas size changes
+	resize();
+
+	gl.clearColor(0.3, 0.3, 0.3, 1);
+	gl.clear(gl.COLOR_BUFFER_BIT);
+
+	// Apply the animation state based on the delta time.
+	var skeleton = spineboy.skeleton;
+	var state = spineboy.state;
+	var premultipliedAlpha = spineboy.premultipliedAlpha;
+	state.update(delta);
+	state.apply(skeleton);
+	skeleton.updateWorldTransform();
+
+	// Bind the shader and set the texture and model-view-projection matrix.
+	shader.bind();
+	shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
+	shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
+
+	// Start the batch and tell the SkeletonRenderer to render the active skeleton.
+	batcher.begin(shader);
+	skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
+	skeletonRenderer.draw(batcher, skeleton);
+	batcher.end();
+
+	shader.unbind();
+
+	requestAnimationFrame(render);
+}
+
+function resize () {
+	var w = canvas.clientWidth;
+	var h = canvas.clientHeight;
+	if (canvas.width != w || canvas.height != h) {
+		canvas.width = w;
+		canvas.height = h;
+	}
+
+	// Calculations to center the skeleton in the canvas.
+	var bounds = spineboy.bounds;
+	var centerX = bounds.offset.x + bounds.size.x / 2;
+	var centerY = bounds.offset.y + bounds.size.y / 2;
+	var scaleX = bounds.size.x / canvas.width;
+	var scaleY = bounds.size.y / canvas.height;
+	var scale = Math.max(scaleX, scaleY) * 1.2;
+	if (scale < 1) scale = 1;
+	var width = canvas.width * scale;
+	var height = canvas.height * scale;
+
+	mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
+	gl.viewport(0, 0, canvas.width, canvas.height);
+}
+
+init();
+
+</script>
+</body>
+</html>

apps/module/spine-ts/webgl/example/index.html

@@ -0,0 +1,333 @@
+<html>
+<script src="../../build/spine-webgl.js"></script>
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+<style>
+* { margin: 0; padding: 0; }
+body, html { height: 100% }
+canvas { position: absolute; width: 100% ;height: 100%; }
+</style>
+<body>
+<canvas id="canvas"></canvas>
+<center>
+<div style="color: #fff; position: fixed; top: 0; width: 100%">
+<span>Skeleton:</span><select id="skeletonList"></select>
+<span>Animation:</span><select id="animationList"></select>
+<span>Skin:</span><select id="skinList"></select>
+<span>Vertex Effect:</span><select id="effectList"></select>
+<span>Debug:</span><input type="checkbox" id="debug">
+</div>
+</center>
+<script>
+
+var canvas;
+var gl;
+var shader;
+var batcher;
+var mvp = new spine.webgl.Matrix4();
+var skeletonRenderer;
+var assetManager;
+
+var debugRenderer;
+var shapes;
+
+var lastFrameTime;
+var skeletons = {};
+var activeSkeleton = "spineboy";
+var swirlEffect = new spine.SwirlEffect(0);
+var jitterEffect = new spine.JitterEffect(20, 20);
+var swirlTime = 0;
+
+function init () {
+	// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
+	// loading textures. That is handled separately by PolygonBatcher.
+	canvas = document.getElementById("canvas");
+	canvas.width = window.innerWidth;
+	canvas.height = window.innerHeight;
+	var config = { alpha: false };
+	gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
+	if (!gl) {
+		alert('WebGL is unavailable.');
+		return;
+	}
+
+	// Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager.
+	shader = spine.webgl.Shader.newTwoColoredTextured(gl);
+	batcher = new spine.webgl.PolygonBatcher(gl);
+	mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
+	skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
+	assetManager = new spine.webgl.AssetManager(gl);
+
+	// Create a debug renderer and the ShapeRenderer it needs to render lines.
+	debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
+	debugRenderer.drawRegionAttachments = true;
+	debugRenderer.drawBoundingBoxes = true;
+	debugRenderer.drawMeshHull = true;
+	debugRenderer.drawMeshTriangles = true;
+	debugRenderer.drawPaths = true;
+	debugShader = spine.webgl.Shader.newColored(gl);
+	shapes = new spine.webgl.ShapeRenderer(gl);
+
+	// Tell AssetManager to load the resources for each skeleton, including the exported .skel file, the .atlas file and the .png
+	// file for the atlas. We then wait until all resources are loaded in the load() method.
+	assetManager.loadBinary("assets/spineboy-pro.skel");
+	assetManager.loadTextureAtlas("assets/spineboy-pma.atlas");
+	assetManager.loadBinary("assets/raptor-pro.skel");
+	assetManager.loadTextureAtlas("assets/raptor-pma.atlas");
+	assetManager.loadBinary("assets/tank-pro.skel");
+	assetManager.loadTextureAtlas("assets/tank-pma.atlas");
+	assetManager.loadBinary("assets/goblins-pro.skel");
+	assetManager.loadTextureAtlas("assets/goblins-pma.atlas");
+	assetManager.loadBinary("assets/vine-pro.skel");
+	assetManager.loadTextureAtlas("assets/vine-pma.atlas");
+	assetManager.loadBinary("assets/stretchyman-pro.skel");
+	assetManager.loadTextureAtlas("assets/stretchyman-pma.atlas");
+	assetManager.loadBinary("assets/coin-pro.skel");
+	assetManager.loadTextureAtlas("assets/coin-pma.atlas");
+	requestAnimationFrame(load);
+}
+
+function load () {
+	// Wait until the AssetManager has loaded all resources, then load the skeletons.
+	if (assetManager.isLoadingComplete()) {
+		skeletons["raptor"] = loadSkeleton("raptor-pro", "walk", true);
+		skeletons["spineboy"] = loadSkeleton("spineboy-pro", "run", true);
+		skeletons["tank"] = loadSkeleton("tank-pro", "drive", true);
+		skeletons["goblins"] = loadSkeleton("goblins-pro", "walk", true, "goblin");
+		skeletons["vine"] = loadSkeleton("vine-pro", "grow", true);
+		skeletons["stretchyman"] = loadSkeleton("stretchyman-pro", "sneak", true);
+		skeletons["coin"] = loadSkeleton("coin-pro", "animation", true);
+		setupUI();
+		lastFrameTime = Date.now() / 1000;
+		requestAnimationFrame(render); // Loading is done, call render every frame.
+	} else {
+		requestAnimationFrame(load);
+	}
+}
+
+function loadSkeleton (name, initialAnimation, premultipliedAlpha, skin) {
+	if (skin === undefined) skin = "default";
+
+	// Load the texture atlas using name.atlas from the AssetManager.
+	var atlas = assetManager.get("assets/" + name.replace("-ess", "").replace("-pro", "") + (premultipliedAlpha ? "-pma": "") + ".atlas");
+
+	// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
+	var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+
+	// Create a SkeletonBinary instance for parsing the .skel file.
+	var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
+
+	// Set the scale to apply during parsing, parse the file, and create a new skeleton.
+	skeletonBinary.scale = 1;
+	var skeletonData = skeletonBinary.readSkeletonData(assetManager.get("assets/" + name + ".skel"));
+	var skeleton = new spine.Skeleton(skeletonData);
+	skeleton.setSkinByName(skin);
+	var bounds = calculateSetupPoseBounds(skeleton);
+
+	// Create an AnimationState, and set the initial animation in looping mode.
+	var animationStateData = new spine.AnimationStateData(skeleton.data);
+	var animationState = new spine.AnimationState(animationStateData);
+	if (name == "spineboy") {
+		animationStateData.setMix("walk", "jump", 0.4)
+		animationStateData.setMix("jump", "run", 0.4);
+		animationState.setAnimation(0, "walk", true);
+		var jumpEntry = animationState.addAnimation(0, "jump", false, 3);
+		animationState.addAnimation(0, "run", true, 0);
+	} else {
+		animationState.setAnimation(0, initialAnimation, true);
+	}
+	animationState.addListener({
+		start: function(track) {
+			console.log("Animation on track " + track.trackIndex + " started");
+		},
+		interrupt: function(track) {
+			console.log("Animation on track " + track.trackIndex + " interrupted");
+		},
+		end: function(track) {
+			console.log("Animation on track " + track.trackIndex + " ended");
+		},
+		disposed: function(track) {
+			console.log("Animation on track " + track.trackIndex + " disposed");
+		},
+		complete: function(track) {
+			console.log("Animation on track " + track.trackIndex + " completed");
+		},
+		event: function(track, event) {
+			console.log("Event on track " + track.trackIndex + ": " + JSON.stringify(event));
+		}
+	})
+
+	// Pack everything up and return to caller.
+	return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
+}
+
+function calculateSetupPoseBounds(skeleton) {
+	skeleton.setToSetupPose();
+	skeleton.updateWorldTransform();
+	var offset = new spine.Vector2();
+	var size = new spine.Vector2();
+	skeleton.getBounds(offset, size, []);
+	return { offset: offset, size: size };
+}
+
+function setupUI () {
+	var skeletonList = $("#skeletonList");
+	for (var skeletonName in skeletons) {
+		var option = $("<option></option>");
+		option.attr("value", skeletonName).text(skeletonName);
+		if (skeletonName === activeSkeleton) option.attr("selected", "selected");
+		skeletonList.append(option);
+	}
+	var effectList = $("#effectList");
+	var effects = ["None", "Swirl", "Jitter"];
+	for (var effect in effects) {
+		var effectName = effects[effect];
+		var option = $("<option></option>");
+		option.attr("value", effectName).text(effectName);
+		effectList.append(option);
+	}
+	var setupAnimationUI = function() {
+		var animationList = $("#animationList");
+		animationList.empty();
+		var skeleton = skeletons[activeSkeleton].skeleton;
+		var state = skeletons[activeSkeleton].state;
+		var activeAnimation = state.tracks[0].animation.name;
+		for (var i = 0; i < skeleton.data.animations.length; i++) {
+			var name = skeleton.data.animations[i].name;
+			var option = $("<option></option>");
+			option.attr("value", name).text(name);
+			if (name === activeAnimation) option.attr("selected", "selected");
+			animationList.append(option);
+		}
+
+		animationList.change(function() {
+			var state = skeletons[activeSkeleton].state;
+			var skeleton = skeletons[activeSkeleton].skeleton;
+			var animationName = $("#animationList option:selected").text();
+			skeleton.setToSetupPose();
+			state.setAnimation(0, animationName, true);
+		})
+	}
+
+	var setupSkinUI = function() {
+		var skinList = $("#skinList");
+		skinList.empty();
+		var skeleton = skeletons[activeSkeleton].skeleton;
+		var activeSkin = skeleton.skin == null ? "default" : skeleton.skin.name;
+		for (var i = 0; i < skeleton.data.skins.length; i++) {
+			var name = skeleton.data.skins[i].name;
+			var option = $("<option></option>");
+			option.attr("value", name).text(name);
+			if (name === activeSkin) option.attr("selected", "selected");
+			skinList.append(option);
+		}
+
+		skinList.change(function() {
+			var skeleton = skeletons[activeSkeleton].skeleton;
+			var skinName = $("#skinList option:selected").text();
+			skeleton.setSkinByName(skinName);
+			skeleton.setSlotsToSetupPose();
+		})
+	}
+
+	skeletonList.change(function() {
+		activeSkeleton = $("#skeletonList option:selected").text();
+		setupAnimationUI();
+		setupSkinUI();
+	})
+	setupAnimationUI();
+	setupSkinUI();
+}
+
+function render () {
+	var now = Date.now() / 1000;
+	var delta = now - lastFrameTime;
+	lastFrameTime = now;
+
+	// Update the MVP matrix to adjust for canvas size changes
+	resize();
+
+	gl.clearColor(0.3, 0.3, 0.3, 1);
+	gl.clear(gl.COLOR_BUFFER_BIT);
+
+	// Apply the animation state based on the delta time.
+	var skeleton = skeletons[activeSkeleton].skeleton;
+	var state = skeletons[activeSkeleton].state;
+	var bounds = skeletons[activeSkeleton].bounds;
+	var premultipliedAlpha = skeletons[activeSkeleton].premultipliedAlpha;
+	state.update(delta);
+	state.apply(skeleton);
+	skeleton.updateWorldTransform();
+
+	// Bind the shader and set the texture and model-view-projection matrix.
+	shader.bind();
+	shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
+	shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
+
+	// Start the batch and tell the SkeletonRenderer to render the active skeleton.
+	batcher.begin(shader);
+
+	var effect = $("#effectList option:selected").text();
+	if (effect == "None") {
+		skeletonRenderer.vertexEffect = null;
+	} else if (effect == "Swirl") {
+		swirlTime += delta;
+		var percent = swirlTime % 2;
+		if (percent > 1) percent = 1 - (percent -1 );
+		swirlEffect.angle = 120 * percent - 60;
+		swirlEffect.centerX = bounds.offset.x + bounds.size.x / 2;
+		swirlEffect.centerY = bounds.offset.y + bounds.size.y / 2;
+		swirlEffect.radius = Math.sqrt(bounds.size.x * bounds.size.x + bounds.size.y * bounds.size.y);
+		skeletonRenderer.vertexEffect = swirlEffect;
+	} else if (effect == "Jitter") {
+		skeletonRenderer.vertexEffect = jitterEffect;
+	}
+
+	skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
+	skeletonRenderer.draw(batcher, skeleton);
+	batcher.end();
+
+	shader.unbind();
+
+	// Draw debug information.
+	var debug = $('#debug').is(':checked');
+	if (debug) {
+		debugShader.bind();
+		debugShader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
+		debugRenderer.premultipliedAlpha = premultipliedAlpha;
+		shapes.begin(debugShader);
+		debugRenderer.draw(shapes, skeleton);
+		shapes.end();
+		debugShader.unbind();
+	}
+
+	requestAnimationFrame(render);
+}
+
+function resize () {
+	var w = canvas.clientWidth;
+	var h = canvas.clientHeight;
+	if (canvas.width != w || canvas.height != h) {
+		canvas.width = w;
+		canvas.height = h;
+	}
+
+	// Calculations to center the skeleton in the canvas.
+	var bounds = skeletons[activeSkeleton].bounds;
+	var centerX = bounds.offset.x + bounds.size.x / 2;
+	var centerY = bounds.offset.y + bounds.size.y / 2;
+	var scaleX = bounds.size.x / canvas.width;
+	var scaleY = bounds.size.y / canvas.height;
+	var scale = Math.max(scaleX, scaleY) * 1.2;
+	if (scale < 1) scale = 1;
+	var width = canvas.width * scale;
+	var height = canvas.height * scale;
+
+	mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
+	gl.viewport(0, 0, canvas.width, canvas.height);
+}
+
+init();
+
+</script>
+</body>
+</html>