UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Demo CSS upgrade.

Browse Source
This commit is contained in:
NathanSweet 2016-09-05 19:52:48 +02:00
parent 603d48aaa3
commit b1d92aecf8
11 changed files with 78 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
spine-ts/webgl/demos/demos.css
View File

@ -1,18 +1,43 @@
body, html { body, html {
margin: 0; margin: 0;
padding: 0;
height: 100%; height: 100%;
font-family: Tahoma; font-family: Tahoma;
font-size: 11pt; font-size: 11pt;
} }
canvas { body {
position: absolute; width: 100% ;height: 100%; padding: 15px;
}
br {
display: block;
content: "";
margin-top: 15px;
}
.aspect {
margin-bottom: 15px;
max-width: 800px;
text-align: center;
}
.aspect div {
position: relative;
padding-bottom: 70.14%;
}
.aspect canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
border: 1px solid black;
} }
.slider { .slider {
width: 50%; width: 100%;
max-width: 800px;
border-radius: 3px; border-radius: 3px;
text-align: left; text-align: left;
transform: translateZ(0); transform: translateZ(0);
background: #222;
} }
.slider, .slider.filled span { .slider, .slider.filled span {
height: 15px; height: 15px;

9
spine-ts/webgl/demos/framebyframe.html
View File

@ -1,4 +1,5 @@
<html> <html>
<title>Frame-by-frame - Spine Demo</title>
<link rel="stylesheet" href="demos.css"> <link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,13 +7,11 @@
<script src="frameByFrame.js"></script> <script src="frameByFrame.js"></script>
<body> <body>
<canvas id="framebyframedemo-canvas"></canvas>
<center> <center>
<div style="color: #fff; position: fixed; top: 0; width: 100%"> <div class="aspect"><div><canvas id="framebyframedemo-canvas"></canvas></div></div>
<select id="framebyframedemo-active-skeleton"></select></br>
<input id="framebyframedemo-playbutton" type="button" value="Pause"></input>
<div id="framebyframedemo-timeline" class="slider"></div> <div id="framebyframedemo-timeline" class="slider"></div>
</div> <input id="framebyframedemo-playbutton" type="button" value="Pause"></input><br>
<select id="framebyframedemo-active-skeleton" size="2"></select>
</center> </center>
<script> <script>

5
spine-ts/webgl/demos/ikconstraint.html
View File

@ -1,4 +1,5 @@
<html> <html>
<title>IK Constraints - Spine Demo</title>
<link rel="stylesheet" href="demos.css"> <link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,9 +7,9 @@
<script src="ikconstraint.js"></script> <script src="ikconstraint.js"></script>
<body> <body>
<canvas id="ikdemo-canvas"></canvas>
<center> <center>
<div>Display Bones</div><input id="ikdemo-drawbones" type="checkbox"><input></div> <div class="aspect"><div><canvas id="ikdemo-canvas"></canvas></div></div>
<input id="ikdemo-drawbones" type="checkbox"></input> Display Bones
</center> </center>
<script> <script>

15
spine-ts/webgl/demos/meshes.html
View File

@ -1,4 +1,5 @@
<html> <html>
<title>Meshes - Spine Demo</title>
<link rel="stylesheet" href="demos.css"> <link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,15 +7,13 @@
<script src="meshes.js"></script> <script src="meshes.js"></script>
<body> <body>
<canvas id="meshesdemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div class="aspect"><div><canvas id="meshesdemo-canvas"></canvas></div></div>
<select id="meshesdemo-active-skeleton"></select></br> <div id="meshesdemo-timeline" class="slider"></div>
<div><input type="checkbox" id="meshesdemo-drawbonescheckbox" style="color: #fff;"></input> Draw bones</div> <input id="meshesdemo-playbutton" type="button" value="Pause"></input><br>
<div><input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;"></input> Draw triangles</div> <select id="meshesdemo-active-skeleton" size="3"></select><br>
<input id="meshesdemo-playbutton" type="button" value="Pause"></input> <input type="checkbox" id="meshesdemo-drawbonescheckbox" style="color: #fff;"></input> Draw bones<br>
<div id="meshesdemo-timeline" class="slider"></input> <input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;"></input> Draw triangles<br>
</div>
</center> </center>
<script> <script>

11
spine-ts/webgl/demos/pathconstraint.html
View File

@ -1,4 +1,5 @@
<html> <html>
<title>Path Constraints - Spine Demo</title>
<link rel="stylesheet" href="demos.css"> <link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,13 +7,11 @@
<script src="pathconstraint.js"></script> <script src="pathconstraint.js"></script>
<body> <body>
<canvas id="pathconstraintdemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div class="aspect"><div><canvas id="pathconstraintdemo-canvas"></canvas></div></div>
<div><input id="pathconstraintdemo-drawbones" type="checkbox"></input>Display bones &amp; path</div> <div id="pathconstraintdemo-timeline" class="slider"></div>
<input id="pathconstraintdemo-playbutton" type="button" value="Pause"></input> <input id="pathconstraintdemo-playbutton" type="button" value="Pause"></input><br>
<div id="pathconstraintdemo-timeline" class="slider"></div> <input id="pathconstraintdemo-drawbones" type="checkbox"></input> Display bones &amp; path
</div>
</center> </center>
<script> <script>

13
spine-ts/webgl/demos/skins.html
View File

@ -1,4 +1,5 @@
<html> <html>
<title>Skins - Spine Demo</title>
<link rel="stylesheet" href="demos.css"> <link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,14 +7,12 @@
<script src="skins.js"></script> <script src="skins.js"></script>
<body> <body>
<canvas id="skinsdemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div class="aspect"><div><canvas id="skinsdemo-canvas"></canvas></div></div>
<select id="skinsdemo-active-skin"></select></br> <select id="skinsdemo-active-skin"></select><br>
<button id="skinsdemo-randomizeattachments">Random Attachments</button> <button id="skinsdemo-randomizeattachments">Random Attachments</button>
<button id="skinsdemo-swingsword">Swing Sword</button> <button id="skinsdemo-swingsword">Swing Sword</button><br>
<div><input id="skinsdemo-randomizeskins" type="checkbox" checked=true></input> Randomize skin</div> <input id="skinsdemo-randomizeskins" type="checkbox" checked=true></input> Randomize skin
</div>
</center> </center>
<script> <script>

13
spine-ts/webgl/demos/spritesheet.html
View File

@ -1,4 +1,5 @@
<html> <html>
<title>Vs Sprite Sheets - Spine Demo</title>
<link rel="stylesheet" href="demos.css"> <link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,14 +7,12 @@
<script src="spritesheet.js"></script> <script src="spritesheet.js"></script>
<body> <body>
<canvas id="spritesheetdemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div class="aspect"><div><canvas id="spritesheetdemo-canvas"></canvas></div></div>
<button id="spritesheetdemo-roar">Roar</button> <button id="spritesheetdemo-roar">Roar</button>
<button id="spritesheetdemo-jump">Jump</button> <button id="spritesheetdemo-jump">Jump</button><br>
<br>Time multiplier Time multiplier
<div id="spritesheetdemo-timeslider" class="slider filled"></div> <div id="spritesheetdemo-timeslider" class="slider filled"></div>
</div>
</center> </center>
<script> <script>

7
spine-ts/webgl/demos/stretchy.html
View File

@ -1,4 +1,5 @@
<html> <html>
<title>Strechyman - Spine Demo</title>
<link rel="stylesheet" href="demos.css"> <link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,11 +7,9 @@
<script src="stretchy.js"></script> <script src="stretchy.js"></script>
<body> <body>
<canvas id="stretchydemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div class="aspect"><div><canvas id="stretchydemo-canvas"></canvas></div></div>
<div><input id="stretchydemo-drawbones" type="checkbox"></input> Display bones</div> <input id="stretchydemo-drawbones" type="checkbox"></input> Display bones
</div>
</center> </center>
<script> <script>

11
spine-ts/webgl/demos/tank.html
View File

@ -1,4 +1,5 @@
<html> <html>
<title>Tank - Spine Demo</title>
<link rel="stylesheet" href="demos.css"> <link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,13 +7,11 @@
<script src="tank.js"></script> <script src="tank.js"></script>
<body> <body>
<canvas id="tankdemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div class="aspect"><div><canvas id="tankdemo-canvas"></canvas></div></div>
<div><input id="tankdemo-drawbones" type="checkbox"></input> Display bones</div> <div id="tankdemo-timeline" class="slider"></div>
<input id="tankdemo-playbutton" type="button" value="Pause"></input> <input id="tankdemo-playbutton" type="button" value="Pause"></input><br>
<div id="tankdemo-timeline" class="slider"></input> <input id="tankdemo-drawbones" type="checkbox"></input> Display bones
</div>
</center> </center>
<script> <script>

13
spine-ts/webgl/demos/transformconstraint.html
View File

@ -1,4 +1,5 @@
<html> <html>
<title>Transform Constraints - Spine Demo</title>
<link rel="stylesheet" href="demos.css"> <link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,14 +7,12 @@
<script src="transformconstraint.js"></script> <script src="transformconstraint.js"></script>
<body> <body>
<canvas id="transformdemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div class="aspect"><div><canvas id="transformdemo-canvas"></canvas></div></div>
Rotation offset Rotation offset
<div id="transformdemo-rotationoffset" class="slider filled"></div> <div id="transformdemo-rotationoffset" class="slider filled"></div><br>
Translation mix Translation mix
<div id="transformdemo-translationmix" class="slider filled"></div> <div id="transformdemo-translationmix" class="slider filled"></div>
</div>
</center> </center>
<script> <script>

9
spine-ts/webgl/demos/transitions.html
View File

@ -1,4 +1,5 @@
<html> <html>
<title>Transitions - Spine Demo</title>
<link rel="stylesheet" href="demos.css"> <link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,12 +7,10 @@
<script src="transitions.js"></script> <script src="transitions.js"></script>
<body> <body>
<canvas id="transitionsdemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div class="aspect"><div><canvas id="transitionsdemo-canvas"></canvas></div></div>
Time multiplier Time multiplier
<div id="transitionsdemo-timeslider" class="slider"></div></br> <div id="transitionsdemo-timeslider" class="slider filled"></div>
</div>
</center> </center>
<script> <script>