首頁 探索 說明
登入
archive
/
spine-runtimes
镜像来自 https://github.com/EsotericSoftware/spine-runtimes.git
2
0
複刻 0
檔案 問題管理 0 Wiki
瀏覽代碼

Merge branch 'master' of https://github.com/EsotericSoftware/spine-runtimes

pharan 9 年之前
父節點
e0ee7ce4f5 c20fc44cda
當前提交
67e5f31356
共有 8 個文件被更改，包括 54 次插入 和 40 次删除
分割檢視 顯示文件統計
  1. 5 1
      spine-ts/webgl/demos/animationmixing.html
  2. 6 3
      spine-ts/webgl/demos/animationmixing.js
  3. 5 1
      spine-ts/webgl/demos/imagesequences.html
  4. 6 9
      spine-ts/webgl/demos/imagesequences.js
  5. 5 1
      spine-ts/webgl/demos/meshes.html
  6. 5 8
      spine-ts/webgl/demos/meshes.js
  7. 7 3
      spine-ts/webgl/demos/skeletalvssprite.html
  8. 15 14
      spine-ts/webgl/demos/skeletonvssprite.js

+ 5 - 1
spine-ts/webgl/demos/animationmixing.html
查看文件 

@@ -1,17 +1,21 @@
 
 <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; }
 
 	body, html { height: 100% }
 
 	canvas { position: absolute; width: 100% ;height: 100%; }
 
+	.slider { width: 50% }
 
 </style>
 
 <body>
 
 <canvas id="animationmixingdemo-canvas"></canvas>
 
 <center>
 
 <div style="color: #fff; position: fixed; top: 0; width: 100%">
 
 <span style="color: #fff">Time Multiplier</span>
 
-<input type="range" min="0" max="200" value ="50" id="animationmixingdemo-timeslider" style="color: #fff;"></input></br>
 
+<div id="animationmixingdemo-timeslider"></div></br>
 
 </div>
 
 </center>
 
 <script src="animationmixing.js"></script>

+ 6 - 3
spine-ts/webgl/demos/animationmixing.js
查看文件 

@@ -3,11 +3,13 @@ var animationMixingDemo = function(pathPrefix) {
 
 
 	var canvas, gl, renderer, input, assetManager;
 
 	var skeleton, skeletonNoMix, state, stateNoMix, bounds;
 
-	var timeSlider;
 
+	var timeSlider, timeSliderLabel;
 
 	var lastFrameTime = Date.now() / 1000
 
 
 	function init () {
 
-		timeSlider = document.getElementById("animationmixingdemo-timeslider");
 
+		timeSlider = $("#animationmixingdemo-timeslider");
 
+		timeSlider.slider({ range: "max", min: 0, max: 200, value: 50 });
 
+		timeSliderLabel = $("#animationmixingdemo-timeslider-label");
 
 		canvas = document.getElementById("animationmixingdemo-canvas");
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
 		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });	
@@ -91,7 +93,8 @@ var animationMixingDemo = function(pathPrefix) {
 
 		var delta = now - lastFrameTime;
 
 		lastFrameTime = now;
 
 		if (delta > 0.032) delta = 0.032;
 
-		delta *= (timeSlider.value / 100);		
+		delta *= (timeSlider.slider("value") / 100);
 
+		if (timeSliderLabel) timeSliderLabel.text(timeSlider.slider("value") + "%");	
 
 		var offset = bounds.offset;
 
 		var size = bounds.size;

+ 5 - 1
spine-ts/webgl/demos/imagesequences.html
查看文件 

@@ -1,10 +1,14 @@
 
 <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; }
 
 	body, html { height: 100% }
 
 	canvas { position: absolute; width: 100% ;height: 100%; }
 
+	.slider { width: 50% }
 
 </style>
 
 <body>
 
 <canvas id="imagesequencesdemo-canvas"></canvas>
 
@@ -12,7 +16,7 @@
 
 <div style="color: #fff; position: fixed; top: 0; width: 100%">
 
 <select id="imagesequencesdemo-active-skeleton"></select></br>
 
 <input id="imagesequencesdemo-playbutton" type="button" value="Pause"></input>
 
-<input id="imagesequencesdemo-timeline" type="range" min="0" max="100" value ="0" style="color: #fff; width: 50%"></input>
 
+<div id="imagesequencesdemo-timeline" class="slider"></div>
 
 </div>
 
 </center>
 
 <script src="imagesequences.js"></script>

+ 6 - 9
spine-ts/webgl/demos/imagesequences.js
查看文件 

@@ -49,10 +49,11 @@ var imageSequencesDemo = function(pathPrefix) {
 
 		playButton.click(playButtonUpdate);
 
 
 		timeLine = $("#imagesequencesdemo-timeline");
 
-		var timeLineUpdate = function () {
 
+		timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
 
+			if (isPlaying) playButton.click();		
 			if (!isPlaying) {
 
 				var active = skeletons[activeSkeleton];
 
-				var time = timeLine.val() / 100;
 
+				var time = timeLine.slider("value") / 100;
 
 				var animationDuration = active.state.getCurrent(0).animation.duration;
 
 				time = animationDuration * time;
 
 				active.state.update(time - active.playTime);
 
@@ -60,11 +61,7 @@ var imageSequencesDemo = function(pathPrefix) {
 
 				active.skeleton.updateWorldTransform();
 
 				active.playTime = time;				
 			}
 
-		}		
-		timeLine.on("input change", function () {
 
-			if (isPlaying) playButton.click();
 
-			timeLineUpdate();
 
-		});
 
+		}});
 
 
 		var list = $("#imagesequencesdemo-active-skeleton");	
 		for (var skeletonName in skeletons) {
 
@@ -77,7 +74,7 @@ var imageSequencesDemo = function(pathPrefix) {
 
 			activeSkeleton = $("#imagesequencesdemo-active-skeleton option:selected").text();
 
 			var active = skeletons[activeSkeleton];
 
 			var animationDuration = active.state.getCurrent(0).animation.duration;
 
-			timeLine.val(active.playTime / animationDuration * 100);
 
+			timeLine.slider("value", (active.playTime / animationDuration * 100));
 
 		})
 
 	}
 
 
@@ -149,7 +146,7 @@ var imageSequencesDemo = function(pathPrefix) {
 
 			while (active.playTime >= animationDuration) {
 
 				active.playTime -= animationDuration;
 
 			}
 
-			timeLine.val(active.playTime / animationDuration * 100);
 
+			timeLine.slider("value", (active.playTime / animationDuration * 100));
 
 
 			state.update(delta);
 
 			state.apply(skeleton);

+ 5 - 1
spine-ts/webgl/demos/meshes.html
查看文件 

@@ -1,10 +1,14 @@
 
 <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; }
 
 	body, html { height: 100% }
 
 	canvas { position: absolute; width: 100% ;height: 100%; }
 
+	.slider { width: 50% }
 
 </style>
 
 <body>
 
 <canvas id="meshesdemo-canvas"></canvas>
 
@@ -20,7 +24,7 @@
 
 	<input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;" checked="true"></input>
 
 	<br>
 
 	<input id="meshesdemo-playbutton" type="button" value="Pause"></input>
 
-	<input id="meshesdemo-timeline" type="range" min="0" max="100" value ="0" style="color: #fff; width: 50%"></input>
 
+	<div id="meshesdemo-timeline" class="slider"></input>
 
 </div>
 
 </center>
 
 <script src="meshes.js"></script>

+ 5 - 8
spine-ts/webgl/demos/meshes.js
查看文件 

@@ -62,9 +62,10 @@ var meshesDemo = function(pathPrefix) {
 
 		playButton.click(playButtonUpdate);
 
 
 		timeLine = $("#meshesdemo-timeline");
 
-		var timeLineUpdate = function () {
 
+		timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
 
+			if (isPlaying) playButton.click();
 
 			if (!isPlaying) {				
-				var time = timeLine.val() / 100;
 
+				var time = timeLine.slider("value") / 100;
 
 				var animationDuration = state.getCurrent(0).animation.duration;
 
 				time = animationDuration * time;				
 				state.update(time - playTime);
 
@@ -72,11 +73,7 @@ var meshesDemo = function(pathPrefix) {
 
 				skeleton.updateWorldTransform();
 
 				playTime = time;												
 			}
 
-		}		
-		timeLine.on("input change", function () {
 
-			if (isPlaying) playButton.click();
 
-			timeLineUpdate();
 
-		});
 
+		}});		
 
 		$("#meshesdemo-drawbonescheckbox").change(function() {
 
 			renderer.skeletonDebugRenderer.drawBones = this.checked;
 
@@ -111,7 +108,7 @@ var meshesDemo = function(pathPrefix) {
 
 			while (playTime >= animationDuration) {
 
 				playTime -= animationDuration;
 
 			}
 
-			timeLine.val(playTime / animationDuration * 100);
 
+			timeLine.slider("value", (playTime / animationDuration * 100));
 
 
 			state.update(delta);
 
 			state.apply(skeleton);

+ 7 - 3
spine-ts/webgl/demos/skeletalvssprite.html
查看文件 

@@ -1,21 +1,25 @@
 
 <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; }
 
 	body, html { height: 100% }
 
-	canvas { position: absolute; width: 100% ;height: 100%; }
 
+	canvas { position: absolute; width: 100%; height: 100%; }
 
+	.slider { width: 50%; }
 
 </style>
 
 <body>
 
 <canvas id="skeletonvsspritedemo-canvas"></canvas>
 
 <div style="position: fixed; top: 0; width: 100%">
 
 	<center>
 
 	<span style="color: #fff">Time Multiplier</span>
 
-	<input type="range" min="0" max="200" value ="100" id="skeletonvsspritedemo-timeslider" style="color: #fff;"></input></br>
 
+	<div id="skeletonvsspritedemo-timeslider" class="slider"></div></br>
 
 	<span style="color: #fff">Show Atlas</span>	
 	<input type="checkbox" id="skeletonvsspritedemo-atlascheckbox" style="color: #fff;"></input></br>
 
 	<input id="skeletonvsspritedemo-playbutton" type="button" value="Pause"></input>
 
-	<input id="skeletonvsspritedemo-timeline" type="range" min="0" max="100" value ="0" style="color: #fff; width: 50%"></input>
 
+	<div id="skeletonvsspritedemo-timeline" class="slider"></div>
 
 	</center>
 
 </div>
 
 <script src="skeletonvssprite.js"></script>

+ 15 - 14
spine-ts/webgl/demos/skeletonvssprite.js
查看文件 

@@ -9,13 +9,11 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
 
 	var viewportWidth, viewportHeight;
 
 	var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30;
 
 	var lastFrameTime = Date.now() / 1000;
 
-	var timeSlider, atlasCheckbox;
 
+	var timeSlider, timeSliderLabel, atlasCheckbox;
 
 	var playButton, timeLine, isPlaying = true, playTime = 0;
 
 
 	function init () {
 
-		if (pathPrefix === undefined) pathPrefix = "";
 
-		timeSlider = document.getElementById("skeletonvsspritedemo-timeslider");
 
-		atlasCheckbox = document.getElementById("skeletonvsspritedemo-atlascheckbox");
 
+		if (pathPrefix === undefined) pathPrefix = "";		
 
 		canvas = document.getElementById("skeletonvsspritedemo-canvas");
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;	
@@ -68,7 +66,7 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
 
 
 	function setupUI() {
 
 		playButton = $("#skeletonvsspritedemo-playbutton");
 
-		var playButtonUpdate = function () {			
+		var playButtonUpdate = function () {	
 			isPlaying = !isPlaying;
 
 			if (isPlaying) {
 
 				playButton.val("Pause");
 
@@ -81,9 +79,10 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
 
 		playButton.click(playButtonUpdate);
 
 
 		timeLine = $("#skeletonvsspritedemo-timeline");
 
-		var timeLineUpdate = function () {
 
+		timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
 
+			if (isPlaying) playButton.click();		
 			if (!isPlaying) {				
-				var time = timeLine.val() / 100;
 
+				var time = timeLine.slider("value") / 100;
 
 				var animationDuration = animationState.getCurrent(0).animation.duration;
 
 				time = animationDuration * time;				
 				animationState.update(time - playTime);
 
@@ -94,11 +93,12 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
 
 				while (frameTime > animationDuration) frameTime -= animationDuration;				
 				currFrame = Math.min(frames.length - 1, (frameTime / (1 / FPS)) | 0);								
 			}
 
-		}		
-		timeLine.on("input change", function () {
 
-			if (isPlaying) playButton.click();
 
-			timeLineUpdate();
 
-		});
 
+		}});		
+
 
+		timeSlider = $("#skeletonvsspritedemo-timeslider");
 
+		timeSlider.slider({ range: "max", min: 0, max: 200, value: 50 });
 
+		timeSliderLabel = $("#skeletonvsspritedemo-timeslider-label");
 
+		atlasCheckbox = document.getElementById("skeletonvsspritedemo-atlascheckbox");
 
 	}
 
 
 	function render () {
 
@@ -107,7 +107,8 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
 
 		lastFrameTime = now;
 
 		if (delta > 0.032) delta = 0.032;
 
 
-		delta *= (timeSlider.value / 100);	
+		delta *= (timeSlider.slider("value") / 100);
 
+		if (timeSliderLabel) timeSliderLabel.text(timeSlider.slider("value") + "%");	
 
 		if (!atlasCheckbox.checked) {
 
 			if (isPlaying) {
 
@@ -116,7 +117,7 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
 
 				while (playTime >= animationDuration) {
 
 					playTime -= animationDuration;
 
 				}
 
-				timeLine.val(playTime / animationDuration * 100);
 
+				timeLine.slider("value", (playTime / animationDuration * 100));
 
 
 				animationState.update(delta);
 
 				animationState.apply(skeleton);