Home Explore Help
Sign In
archive
/
spine-runtimes
mirror of https://github.com/EsotericSoftware/spine-runtimes.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

[ts][webgl] Add viewport meta to examples.

Mario Zechner 1 year ago
parent
b03b172589
commit
7a253b49ab
10 changed files with 55 additions and 2 deletions
Split View Show Diff Stats
  1. 5 0
      spine-ts/spine-webgl/example/barebones-dragon.html
  2. 5 0
      spine-ts/spine-webgl/example/barebones.html
  3. 5 0
      spine-ts/spine-webgl/example/bone-dragging.html
  4. 5 0
      spine-ts/spine-webgl/example/custom-attachment.html
  5. 5 0
      spine-ts/spine-webgl/example/drag-and-drop.html
  6. 5 0
      spine-ts/spine-webgl/example/dress-up.html
  7. 5 0
      spine-ts/spine-webgl/example/index.html
  8. 5 0
      spine-ts/spine-webgl/example/mix-and-match.html
  9. 5 0
      spine-ts/spine-webgl/example/physics.html
  10. 10 2
      spine-ts/spine-webgl/example/physics2.html

+ 5 - 0
spine-ts/spine-webgl/example/barebones-dragon.html
View File 

@@ -1,4 +1,9 @@
 
+<!DOCTYPE html>
 
 <html>
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+</head>
 
 <script src="../dist/iife/spine-webgl.js"></script>
 
 <style>
 
 	* {

+ 5 - 0
spine-ts/spine-webgl/example/barebones.html
View File 

@@ -1,4 +1,9 @@
 
+<!DOCTYPE html>
 
 <html>
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+</head>
 
 <script src="../dist/iife/spine-webgl.js"></script>
 
 <style>
 
 	* {

+ 5 - 0
spine-ts/spine-webgl/example/bone-dragging.html
View File 

@@ -1,4 +1,9 @@
 
+<!DOCTYPE html>
 
 <html>
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+</head>
 
 <script src="../dist/iife/spine-webgl.js"></script>
 
 <style>
 
 	* {

+ 5 - 0
spine-ts/spine-webgl/example/custom-attachment.html
View File 

@@ -1,4 +1,9 @@
 
+<!DOCTYPE html>
 
 <html>
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+</head>
 
 <script src="../dist/iife/spine-webgl.js"></script>
 
 <style>
 
 	* {

+ 5 - 0
spine-ts/spine-webgl/example/drag-and-drop.html
View File 

@@ -1,4 +1,9 @@
 
+<!DOCTYPE html>
 
 <html>
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+</head>
 
   <script src="../dist/iife/spine-webgl.js"></script>
 
   <style>
 
     * {

+ 5 - 0
spine-ts/spine-webgl/example/dress-up.html
View File 

@@ -1,4 +1,9 @@
 
+<!DOCTYPE html>
 
 <html>
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+</head>
 
 <script src="../dist/iife/spine-webgl.js"></script>
 
 <style>
 
 	html,

+ 5 - 0
spine-ts/spine-webgl/example/index.html
View File 

@@ -1,4 +1,9 @@
 
+<!DOCTYPE html>
 
 <html>
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+</head>
 
 <script src="../dist/iife/spine-webgl.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
 <style>

+ 5 - 0
spine-ts/spine-webgl/example/mix-and-match.html
View File 

@@ -1,4 +1,9 @@
 
+<!DOCTYPE html>
 
 <html>
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+</head>
 
 <script src="../dist/iife/spine-webgl.js"></script>
 
 <style>
 
 	html,

+ 5 - 0
spine-ts/spine-webgl/example/physics.html
View File 

@@ -1,4 +1,9 @@
 
+<!DOCTYPE html>
 
 <html>
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+</head>
 
 <script src="../dist/iife/spine-webgl.js"></script>
 
 <style>
 
 	* {

+ 10 - 2
spine-ts/spine-webgl/example/physics2.html
View File 

@@ -1,4 +1,9 @@
 
+<!DOCTYPE html>
 
 <html>
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+</head>
 
 <script src="../dist/iife/spine-webgl.js"></script>
 
 <style>
 
 	* {
 
@@ -8,13 +13,14 @@
 
 </style>
 
 
 <body>
 
-	<span style="position: fixed; z-index: 10; top: 0; left: 0; color: white; padding: 1em;">Click and drag anywhere</span>
 
-	<canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
 
+	<span id="label" style="position: fixed; z-index: 10; top: 0; left: 0; color: white; padding: 1em;"></span>
 
+	<canvas id="canvas" style="position: absolute; width: 100%; height: 100vh;"></canvas>
 
 	<script>
 
 		class App {
 
 			constructor() {
 
 				this.skeleton = null;
 
 				this.animationState = null;
 
+				this.label = document.body.querySelector("#label");
 
 			}
 
 
 			loadAssets(canvas) {
 
@@ -92,6 +98,8 @@
 
 				// Let the skeleton update the transforms of its bones and apply physics
 
 				this.skeleton.update(delta);
 
 				this.skeleton.updateWorldTransform(spine.Physics.update);
 
+
 
+				this.label.innerText = "Click and drag anywhere (" + canvas.time.framesPerSecond.toFixed(2) + " fps)";
 
 			}
 
 
 			render(canvas) {