Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
archive
/
spine-runtimes
-ын хуулбар https://github.com/EsotericSoftware/spine-runtimes.git
2
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Added clipping demo.

Nathan Sweet 8 жил өмнө
parent
e00803b2c7
commit
b493b0ad67
3 өөрчлөгдсөн 163 нэмэгдсэн , 7 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 24 0
      spine-ts/webgl/demos/clipping.html
  2. 133 0
      spine-ts/webgl/demos/clipping.js
  3. 6 7
      spine-ts/webgl/demos/meshes.js

+ 24 - 0
spine-ts/webgl/demos/clipping.html
Файл харах 

@@ -0,0 +1,24 @@
 
+<html>
 
+<meta charset="UTF-8">
 
+<title>Clipping - Spine Demo</title>
 
+<link rel="stylesheet" href="demos.css">
 
+<script src="../../build/spine-webgl.js"></script>
 
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
+<script src="utils.js"></script>
 
+<script src="clipping.js"></script>
 
+<body>
 
+
 
+<center>
 
+<div class="aspect"><div><canvas id="clipping-canvas"></canvas></div></div>
 
+<div id="clipping-timeline" class="slider"></div>
 
+<input id="clipping-playbutton" type="button" value="Pause"></input><br>
 
+<input id="clipping-drawtriangles" type="checkbox"></input> Draw triangles<br>
 
+</center>
 
+
 
+<script>
 
+spineDemos.loadSliders();
 
+clippingDemo(spineDemos.setupRendering);
 
+</script>
 
+
 
+</body>
 
+</html>

+ 133 - 0
spine-ts/webgl/demos/clipping.js
Файл харах 

@@ -0,0 +1,133 @@
 
+var clippingDemo = function(loadingComplete, bgColor) {
 
+	var canvas, gl, renderer, assetManager;
 
+	var skeleton, state, bounds;
 
+	var timeKeeper, loadingScreen;
 
+	var playButton, timeline, isPlaying = true, playTime = 0;
 
+
 
+	var DEMO_NAME = "ClippingDemo";
 
+
 
+	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
+
 
+	function init () {
 
+		canvas = document.getElementById("clipping-canvas");
 
+		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
+		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
+		if (!gl) {
 
+			alert('WebGL is unavailable.');
 
+			return;
 
+		}
 
+
 
+		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
+		assetManager = spineDemos.assetManager;
 
+		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
 
+		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
 
+		assetManager.loadText(DEMO_NAME, "atlas1.atlas");
 
+		assetManager.loadJson(DEMO_NAME, "demos.json");
 
+		timeKeeper = new spine.TimeKeeper();
 
+		loadingScreen = new spine.webgl.LoadingScreen(renderer);
 
+		requestAnimationFrame(load);
 
+	}
 
+
 
+	function load () {
 
+		timeKeeper.update();
 
+		if (assetManager.isLoadingComplete(DEMO_NAME)) {
 
+			var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
 
+				return assetManager.get(DEMO_NAME, path);
 
+			});
 
+			var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 
+			var skeletonJson = new spine.SkeletonJson(atlasLoader);
 
+			var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
 
+			skeleton = new spine.Skeleton(skeletonData);
 
+			state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
 
+			state.setAnimation(0, "portal", true);
 
+			state.apply(skeleton);
 
+			skeleton.updateWorldTransform();
 
+			var offset = new spine.Vector2();
 
+			bounds = new spine.Vector2();
 
+			skeleton.getBounds(offset, bounds, []);
 
+
 
+			renderer.camera.position.x = offset.x + bounds.x + 200;
 
+			renderer.camera.position.y = offset.y + bounds.y / 2 + 100;
 
+
 
+			renderer.skeletonDebugRenderer.drawMeshHull = false;
 
+			renderer.skeletonDebugRenderer.drawMeshTriangles = false;
 
+
 
+			setupUI();
 
+
 
+			loadingComplete(canvas, render);
 
+		} else {
 
+			loadingScreen.draw();
 
+			requestAnimationFrame(load);
 
+		}
 
+	}
 
+
 
+	function setupUI() {
 
+		playButton = $("#clipping-playbutton");
 
+		var playButtonUpdate = function () {
 
+			isPlaying = !isPlaying;
 
+			if (isPlaying)
 
+				playButton.addClass("pause").removeClass("play");
 
+			else
 
+				playButton.addClass("play").removeClass("pause");
 
+		}
 
+		playButton.click(playButtonUpdate);
 
+		playButton.addClass("pause");
 
+
 
+		timeline = $("#clipping-timeline").data("slider");
 
+		timeline.changed = function (percent) {
 
+			if (isPlaying) playButton.click();
 
+			if (!isPlaying) {
 
+				var animationDuration = state.getCurrent(0).animation.duration;
 
+				var time = animationDuration * percent;
 
+				state.update(time - playTime);
 
+				state.apply(skeleton);
 
+				skeleton.updateWorldTransform();
 
+				playTime = time;
 
+			}
 
+		};
 
+
 
+		renderer.skeletonDebugRenderer.drawClipping = false;
 
+		renderer.skeletonDebugRenderer.drawBones = false;
 
+		renderer.skeletonDebugRenderer.drawMeshHull = false;
 
+		renderer.skeletonDebugRenderer.drawMeshTriangles = false;
 
+		$("#clipping-drawtriangles").click(function() {
 
+			renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
 
+			renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
 
+			renderer.skeletonDebugRenderer.drawClipping = this.checked;
 
+			renderer.skeletonDebugRenderer.drawRegionAttachments = this.checked;
 
+		})
 
+	}
 
+
 
+	function render () {
 
+		timeKeeper.update();
 
+		var delta = timeKeeper.delta;
 
+
 
+		if (isPlaying) {
 
+			var animationDuration = state.getCurrent(0).animation.duration;
 
+			playTime += delta;
 
+			while (playTime >= animationDuration)
 
+				playTime -= animationDuration;
 
+			timeline.set(playTime / animationDuration);
 
+
 
+			state.update(delta);
 
+			state.apply(skeleton);
 
+			skeleton.updateWorldTransform();
 
+		}
 
+
 
+		renderer.camera.viewportWidth = bounds.x * 1.6;
 
+		renderer.camera.viewportHeight = bounds.y * 1.6;
 
+		renderer.resize(spine.webgl.ResizeMode.Fit);
 
+
 
+		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
 
+		gl.clear(gl.COLOR_BUFFER_BIT);
 
+
 
+		renderer.begin();
 
+		renderer.drawSkeleton(skeleton, true);
 
+		renderer.drawSkeletonDebug(skeleton, false, ["root"]);
 
+		renderer.end();
 
+
 
+		loadingScreen.draw(true);
 
+	}
 
+
 
+	init();
 
+};

+ 6 - 7
spine-ts/webgl/demos/meshes.js
Файл харах 

@@ -4,7 +4,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 
 	var timeKeeper, loadingScreen;
 
 	var timeKeeper, loadingScreen;
 
 	var skeletons = {};
 
 	var skeletons = {};
 
 	var activeSkeleton = "Orange Girl";
 
 	var activeSkeleton = "Orange Girl";
 
-	var playButton, timeLine, isPlaying = true;
 
+	var playButton, timeline, isPlaying = true;
 
 
 
 	var DEMO_NAME = "MeshesDemo";
 
 	var DEMO_NAME = "MeshesDemo";
 
 
 
@@ -57,8 +57,8 @@ var meshesDemo = function(loadingComplete, bgColor) {
 
 		playButton.click(playButtonUpdate);
 
 		playButton.click(playButtonUpdate);
 
 		playButton.addClass("pause");
 
 		playButton.addClass("pause");
 
 
 
-		timeLine = $("#meshes-timeline").data("slider");
 
-		timeLine.changed = function (percent) {
 
+		timeline = $("#meshes-timeline").data("slider");
 
+		timeline.changed = function (percent) {
 
 			if (isPlaying) playButton.click();
 
 			if (isPlaying) playButton.click();
 
 			if (!isPlaying) {
 
 			if (!isPlaying) {
 
 				var active = skeletons[activeSkeleton];
 
 				var active = skeletons[activeSkeleton];
 
@@ -82,7 +82,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 
 			activeSkeleton = $("#meshes-skeleton option:selected").text();
 
 			activeSkeleton = $("#meshes-skeleton option:selected").text();
 
 			var active = skeletons[activeSkeleton];
 
 			var active = skeletons[activeSkeleton];
 
 			var animationDuration = active.state.getCurrent(0).animation.duration;
 
 			var animationDuration = active.state.getCurrent(0).animation.duration;
 
-			timeLine.set(active.playTime / animationDuration);
 
+			timeline.set(active.playTime / animationDuration);
 
 		})
 
 		})
 
 
 
 		renderer.skeletonDebugRenderer.drawBones = false;
 
 		renderer.skeletonDebugRenderer.drawBones = false;
 
@@ -150,10 +150,9 @@ var meshesDemo = function(loadingComplete, bgColor) {
 
 		if (isPlaying) {
 
 		if (isPlaying) {
 
 			var animationDuration = state.getCurrent(0).animation.duration;
 
 			var animationDuration = state.getCurrent(0).animation.duration;
 
 			active.playTime += delta;
 
 			active.playTime += delta;
 
-			while (active.playTime >= animationDuration) {
 
+			while (active.playTime >= animationDuration)
 
 				active.playTime -= animationDuration;
 
 				active.playTime -= animationDuration;
 
-			}
 
-			timeLine.set(active.playTime / animationDuration);
 
+			timeline.set(active.playTime / animationDuration);
 
 
 
 			state.update(delta);
 
 			state.update(delta);
 
 			state.apply(skeleton);
 
 			state.apply(skeleton);