feat: use custom player module

apps/module/spine-ts/canvas/example/assets/spineboy.atlas

@@ -0,0 +1,286 @@
+
+spineboy.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/canvas/example/index.html

@@ -0,0 +1,168 @@
+<html>
+<script src="../../build/spine-canvas.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>
+</body>
+<script>
+
+var lastFrameTime = Date.now() / 1000;
+var canvas, context;
+var assetManager;
+var skeleton, state, bounds;
+var skeletonRenderer;
+
+var skelName = "spineboy-ess";
+var animName = "walk";
+
+function init () {
+	canvas = document.getElementById("canvas");
+	canvas.width = window.innerWidth;
+	canvas.height = window.innerHeight;
+	context = canvas.getContext("2d");
+
+	skeletonRenderer = new spine.canvas.SkeletonRenderer(context);
+	// enable debug rendering
+	skeletonRenderer.debugRendering = true;
+	// enable the triangle renderer, supports meshes, but may produce artifacts in some browsers
+	skeletonRenderer.triangleRendering = false;
+
+	assetManager = new spine.canvas.AssetManager();
+
+	assetManager.loadText("assets/" + skelName + ".json");
+	assetManager.loadText("assets/" + skelName.replace("-pro", "").replace("-ess", "") + ".atlas");
+	assetManager.loadTexture("assets/" + skelName.replace("-pro", "").replace("-ess", "") + ".png");
+
+	requestAnimationFrame(load);
+}
+
+function load () {
+	if (assetManager.isLoadingComplete()) {
+		var data = loadSkeleton(skelName, animName, "default");
+		skeleton = data.skeleton;
+		state = data.state;
+		bounds = data.bounds;
+		requestAnimationFrame(render);
+	} else {
+		requestAnimationFrame(load);
+	}
+}
+
+function loadSkeleton (name, initialAnimation, skin) {
+	if (skin === undefined) skin = "default";
+
+	// Load the texture atlas using name.atlas and name.png from the AssetManager.
+	// The function passed to TextureAtlas is used to resolve relative paths.
+	atlas = new spine.TextureAtlas(assetManager.get("assets/" + name.replace("-pro", "").replace("-ess", "") + ".atlas"), function(path) {
+		return assetManager.get("assets/" + path);
+	});
+
+	// Create a AtlasAttachmentLoader, which is specific to the WebGL backend.
+	atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+
+	// Create a SkeletonJson instance for parsing the .json file.
+	var skeletonJson = new spine.SkeletonJson(atlasLoader);
+
+	// Set the scale to apply during parsing, parse the file, and create a new skeleton.
+	var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json"));
+	var skeleton = new spine.Skeleton(skeletonData);
+	skeleton.scaleY = -1;
+	var bounds = calculateBounds(skeleton);
+	skeleton.setSkinByName(skin);
+
+	// Create an AnimationState, and set the initial animation in looping mode.
+	var animationState = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
+	animationState.setAnimation(0, initialAnimation, true);
+	animationState.addListener({
+		event: function(trackIndex, event) {
+			// console.log("Event on track " + trackIndex + ": " + JSON.stringify(event));
+		},
+		complete: function(trackIndex, loopCount) {
+			// console.log("Animation on track " + trackIndex + " completed, loop count: " + loopCount);
+		},
+		start: function(trackIndex) {
+			// console.log("Animation on track " + trackIndex + " started");
+		},
+		end: function(trackIndex) {
+			// console.log("Animation on track " + trackIndex + " ended");
+		}
+	})
+
+	// Pack everything up and return to caller.
+	return { skeleton: skeleton, state: animationState, bounds: bounds };
+}
+
+function calculateBounds(skeleton) {
+	var data = skeleton.data;
+	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;
+
+	resize();
+
+	context.save();
+	context.setTransform(1, 0, 0, 1, 0, 0);
+	context.fillStyle = "#cccccc";
+	context.fillRect(0, 0, canvas.width, canvas.height);
+	context.restore();
+
+	state.update(delta);
+	state.apply(skeleton);
+	skeleton.updateWorldTransform();
+	skeletonRenderer.draw(skeleton);
+
+	context.strokeStyle = "green";
+	context.beginPath();
+	context.moveTo(-1000, 0);
+	context.lineTo(1000, 0);
+	context.moveTo(0, -1000);
+	context.lineTo(0, 1000);
+	context.stroke();
+
+	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;
+	}
+
+	// magic
+	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;
+
+	context.setTransform(1, 0, 0, 1, 0, 0);
+	context.scale(1 / scale, 1 / scale);
+	context.translate(-centerX, -centerY);
+	context.translate(width / 2, height / 2);
+}
+
+(function() {
+	init();
+}());
+
+</script>
+</html>