mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-04 22:34:53 +08:00
Cleaned webcomponent example.
This commit is contained in:
Davide Tantillo
parent
3b4ab02d92
commit
a254fabaef
@ -16,8 +16,6 @@
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.section {
|
||||
/* height: 100lvh; */
|
||||
/* height: 800px; */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -132,11 +130,11 @@
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 1 //
|
||||
// start section 0 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
<div id="section1" class="section vertical-split">
|
||||
<div id="section0" class="section vertical-split">
|
||||
|
||||
<div class="split-top split">
|
||||
<div class="split-left">
|
||||
@ -173,14 +171,13 @@
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 1 //
|
||||
// end section 0 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 2 //
|
||||
// start section 1 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
@ -254,21 +251,17 @@
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 2 //
|
||||
// end section 1 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 1 //
|
||||
// start section 2 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
<div id="section1" class="section vertical-split">
|
||||
<div id="section2" class="section vertical-split">
|
||||
|
||||
<div class="split-top split">
|
||||
<div class="split-left">
|
||||
@ -296,7 +289,6 @@
|
||||
animation="walk"
|
||||
height="200"
|
||||
width="200"
|
||||
fit="fill"
|
||||
></spine-widget>`)
|
||||
</script>
|
||||
</code></pre>
|
||||
@ -305,25 +297,17 @@
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 1 //
|
||||
// end section 2 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 3 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
<div id="section2" class="section vertical-split">
|
||||
<div id="section3" class="section vertical-split">
|
||||
|
||||
<div class="split-top split">
|
||||
<div class="split-left">
|
||||
@ -371,11 +355,11 @@
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 3 //
|
||||
// start section 4 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
<div id="section3" class="section vertical-split">
|
||||
<div id="section4" class="section vertical-split">
|
||||
|
||||
<div class="split-top split">
|
||||
<div class="split-left">
|
||||
@ -410,17 +394,17 @@
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 3 //
|
||||
// end section 4 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 4 //
|
||||
// start section 5 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
<div id="section4" class="section vertical-split">
|
||||
<div id="section5" class="section vertical-split">
|
||||
|
||||
<div class="split-top split">
|
||||
<div class="split-left">
|
||||
@ -488,7 +472,7 @@
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 4 //
|
||||
// end section 5 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
@ -533,7 +517,6 @@
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 7 //
|
||||
@ -546,12 +529,12 @@
|
||||
<div class="split-left">
|
||||
You can view the skeleton world origin (green), the root bone position (red), and the bounds rectangle and center (blue) by setting <code>debug</code> to <code>true</code>.
|
||||
</div>
|
||||
<div class="split-right" id="section7-element">
|
||||
<div class="split-right">
|
||||
<spine-widget
|
||||
atlas="assets/sack-pma.atlas"
|
||||
skeleton="assets/sack-pro.skel"
|
||||
animation="cape-follow-example"
|
||||
debug="true"
|
||||
debug
|
||||
></spine-widget>
|
||||
</div>
|
||||
</div>
|
||||
@ -563,7 +546,7 @@
|
||||
atlas="assets/sack-pma.atlas"
|
||||
skeleton="assets/sack-pro.skel"
|
||||
animation="cape-follow-example"
|
||||
debug="true"
|
||||
debug
|
||||
></spine-widget>`
|
||||
);</script>
|
||||
</code></pre>
|
||||
@ -581,10 +564,10 @@
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 7 //
|
||||
// start section 8 //
|
||||
/////////////////////
|
||||
-->
|
||||
<div id="section1" class="section vertical-split">
|
||||
<div id="section8" class="section vertical-split">
|
||||
|
||||
<div class="split-top split">
|
||||
<div class="split-left">
|
||||
@ -646,18 +629,16 @@
|
||||
</div>
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 7 //
|
||||
// end section 8 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 7 //
|
||||
// start section 9 //
|
||||
/////////////////////
|
||||
-->
|
||||
<div id="section1" class="section vertical-split">
|
||||
<div id="section9" class="section vertical-split">
|
||||
|
||||
<div class="split" style="width: 100%; flex-direction: column;">
|
||||
|
||||
@ -886,19 +867,16 @@
|
||||
</div>
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 7 //
|
||||
// end section 9 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 7 //
|
||||
// start section 10 //
|
||||
/////////////////////
|
||||
-->
|
||||
<div id="section1" class="section vertical-split">
|
||||
<div id="section10" class="section vertical-split">
|
||||
|
||||
<div class="split" style="width: 100%; flex-direction: column;">
|
||||
|
||||
@ -1152,17 +1130,16 @@
|
||||
</div>
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 7 //
|
||||
// end section 10 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 7 //
|
||||
// start section 11 //
|
||||
/////////////////////
|
||||
-->
|
||||
<div id="section1" class="section vertical-split">
|
||||
<div id="section11" class="section vertical-split">
|
||||
|
||||
<div class="split" style="width: 100%; flex-direction: column;">
|
||||
|
||||
@ -1275,19 +1252,16 @@ skins.forEach((skin, i) => {
|
||||
</div>
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 7 //
|
||||
// end section 11 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 7 //
|
||||
// start section 12 //
|
||||
/////////////////////
|
||||
-->
|
||||
<div id="section1" class="section vertical-split">
|
||||
<div id="section12" class="section vertical-split">
|
||||
|
||||
<div class="split" style="width: 100%; flex-direction: column;">
|
||||
|
||||
@ -1371,18 +1345,16 @@ skins.forEach((skin, i) => {
|
||||
</div>
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 7 //
|
||||
// end section 12 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 7 //
|
||||
// start section 13 //
|
||||
/////////////////////
|
||||
-->
|
||||
<div id="section1" class="section vertical-split">
|
||||
<div id="section13" class="section vertical-split">
|
||||
|
||||
<div class="split-top split">
|
||||
<div class="split-left">
|
||||
@ -1438,27 +1410,46 @@ skins.forEach((skin, i) => {
|
||||
<script>
|
||||
escapeHTMLandInject(`
|
||||
<spine-widget
|
||||
atlas="assets/spineboy-pma.atlas"
|
||||
skeleton="assets/spineboy-pro.skel"
|
||||
animation="walk"
|
||||
spinner="true"
|
||||
></spine-widget>`)
|
||||
identifier="dragon"
|
||||
atlas="assets/dragon-pma.atlas"
|
||||
skeleton="assets/dragon-ess.skel"
|
||||
animation="flying"
|
||||
pages=""
|
||||
></spine-widget>
|
||||
<input type="button" value="Load page 0" onclick="loadPageDragon(0)">
|
||||
<input type="button" value="Load page 1" onclick="loadPageDragon(1)">
|
||||
<input type="button" value="Load page 2" onclick="loadPageDragon(2)">
|
||||
<input type="button" value="Load page 3" onclick="loadPageDragon(3)">
|
||||
<input type="button" value="Load page 4" onclick="loadPageDragon(4)">
|
||||
|
||||
...
|
||||
|
||||
const dragon = spine.getSpineWidget("dragon");
|
||||
function loadPageDragon(pageIndex) {
|
||||
if (!dragon.pages) {
|
||||
dragon.pages = [];
|
||||
}
|
||||
if (!dragon.pages.includes(pageIndex)) {
|
||||
dragon.pages.push(pageIndex);
|
||||
dragon.loadTexturesInPagesAttribute(dragon.textureAtlas);
|
||||
}
|
||||
}`)
|
||||
</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 7 //
|
||||
// end section 13 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 8 //
|
||||
// start section 14 //
|
||||
/////////////////////
|
||||
-->
|
||||
<div id="section1" class="section vertical-split">
|
||||
<div id="section14" class="section vertical-split">
|
||||
|
||||
<div class="split" style="width: 100%; flex-direction: column;">
|
||||
|
||||
@ -1531,6 +1522,7 @@ skins.forEach((skin, i) => {
|
||||
animation="sneak"
|
||||
offscreen="pose"
|
||||
></spine-widget>
|
||||
|
||||
...
|
||||
|
||||
const stretchyman = spine.getSpineWidget("stretchyman");
|
||||
@ -1551,16 +1543,16 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 8 //
|
||||
// end section 14 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 8 //
|
||||
// start section 15 //
|
||||
/////////////////////
|
||||
-->
|
||||
<div id="section1" class="section vertical-split">
|
||||
<div id="section15" class="section vertical-split">
|
||||
|
||||
<div class="split" style="width: 100%; flex-direction: column;">
|
||||
|
||||
@ -1656,20 +1648,24 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 8 //
|
||||
// end section 15 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 8 //
|
||||
// start section 16 //
|
||||
/////////////////////
|
||||
-->
|
||||
<div id="section1" class="section vertical-split">
|
||||
<div id="section16" class="section vertical-split">
|
||||
|
||||
<div class="split-left" style="width: 80%; box-sizing: border-box;">
|
||||
More examples for <code>clip</code> attribute.
|
||||
</div>
|
||||
|
||||
<div class="split" style="width: 100%; flex-direction: column;">
|
||||
|
||||
<div class="split-top split">
|
||||
<div class="split-top split" style="align-items: stretch">
|
||||
<div class="split-left">
|
||||
<spine-widget
|
||||
atlas="assets/spineboy-pma.atlas"
|
||||
@ -1677,7 +1673,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
animation="walk"
|
||||
scale="3"
|
||||
fit="none"
|
||||
clip="true"
|
||||
clip
|
||||
></spine-widget>
|
||||
</div>
|
||||
<div class="split-right">
|
||||
@ -1687,7 +1683,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
animation="walk"
|
||||
scale="1.5"
|
||||
fit="none"
|
||||
clip="true"
|
||||
clip
|
||||
></spine-widget>
|
||||
</div>
|
||||
<div class="split-right">
|
||||
@ -1697,7 +1693,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
animation="walk"
|
||||
scale="1"
|
||||
fit="none"
|
||||
clip="true"
|
||||
clip
|
||||
></spine-widget>
|
||||
</div>
|
||||
<div class="split-right">
|
||||
@ -1707,7 +1703,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
animation="playing-in-the-rain"
|
||||
scale="0.5"
|
||||
fit="none"
|
||||
clip="true"
|
||||
clip
|
||||
></spine-widget>
|
||||
</div>
|
||||
<div class="split-right">
|
||||
@ -1715,9 +1711,8 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
identifier="celeste"
|
||||
atlas="assets/celestial-circus-pma.atlas"
|
||||
skeleton="assets/celestial-circus-pro.skel"
|
||||
animation="wings-and-feet"
|
||||
clip="true"
|
||||
draggable="true"
|
||||
clip
|
||||
draggable
|
||||
></spine-widget>
|
||||
|
||||
<script>
|
||||
@ -1744,7 +1739,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
animation="walk"
|
||||
scale="3"
|
||||
fit="none"
|
||||
clip="true"
|
||||
clip
|
||||
></spine-widget>
|
||||
</div>
|
||||
<div class="split-right">
|
||||
@ -1754,7 +1749,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
animation="walk"
|
||||
scale="1.5"
|
||||
fit="none"
|
||||
clip="true"
|
||||
clip
|
||||
></spine-widget>
|
||||
</div>
|
||||
<div class="split-right">
|
||||
@ -1764,7 +1759,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
animation="walk"
|
||||
scale="1"
|
||||
fit="none"
|
||||
clip="true"
|
||||
clip
|
||||
></spine-widget>
|
||||
</div>
|
||||
<div class="split-right">
|
||||
@ -1774,7 +1769,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
animation="playing-in-the-rain"
|
||||
scale="0.5"
|
||||
fit="none"
|
||||
clip="true"
|
||||
clip
|
||||
></spine-widget>
|
||||
</div>
|
||||
<div class="split-right">
|
||||
@ -1783,8 +1778,8 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
atlas="assets/celestial-circus-pma.atlas"
|
||||
skeleton="assets/celestial-circus-pro.skel"
|
||||
animation="wings-and-feet"
|
||||
clip="true"
|
||||
draggable="true"
|
||||
clip
|
||||
draggable
|
||||
></spine-widget>
|
||||
</div>
|
||||
|
||||
@ -1802,7 +1797,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 8 //
|
||||
// end section 16 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
@ -1811,17 +1806,17 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 8 //
|
||||
// start section 17 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
<div id="section8" class="section vertical-split">
|
||||
<div id="section17" class="section vertical-split">
|
||||
|
||||
<div class="split-top split">
|
||||
<div class="split-left">
|
||||
As a bonus item, you can move you skeleton around just by setting the <code>draggable</code> property to <code>true</code>.
|
||||
</div>
|
||||
<div class="split-right" id="section8-element">
|
||||
<div class="split-right">
|
||||
<spine-widget
|
||||
atlas="assets/celestial-circus-pma.atlas"
|
||||
skeleton="assets/celestial-circus-pro.skel"
|
||||
@ -1831,7 +1826,6 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="split-bottom">
|
||||
<pre><code id="code-display">
|
||||
<script>escapeHTMLandInject(`
|
||||
@ -1849,48 +1843,14 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section 8 //
|
||||
// end section 17 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
|
||||
<!-- <div class="navigation">
|
||||
<button class="nav-btn" onclick="scrollToSection('section1')">1</button>
|
||||
<button class="nav-btn" onclick="scrollToSection('section2')">2</button>
|
||||
<button class="nav-btn" onclick="scrollToSection('section3')">3</button>
|
||||
<button class="nav-btn" onclick="scrollToSection('section4')">4</button>
|
||||
<button class="nav-btn" onclick="scrollToSection('section5')">5</button>
|
||||
<button class="nav-btn" onclick="scrollToSection('section6')">6</button>
|
||||
<button class="nav-btn" onclick="scrollToSection('section7')">7</button>
|
||||
<button class="nav-btn" onclick="scrollToSection('section8')">8</button>
|
||||
</div> -->
|
||||
|
||||
<script>
|
||||
// function scrollToSection(id) {
|
||||
// document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
|
||||
// }
|
||||
|
||||
// let sections = document.querySelectorAll('.section');
|
||||
// let currentSection = 0;
|
||||
|
||||
// window.addEventListener('wheel', (e) => {
|
||||
// if (e.deltaY > 0 && currentSection < sections.length - 1) {
|
||||
// currentSection++;
|
||||
// } else if (e.deltaY < 0 && currentSection > 0) {
|
||||
// currentSection--;
|
||||
// }
|
||||
// sections[currentSection].scrollIntoView({ behavior: 'smooth' });
|
||||
// });
|
||||
</script>
|
||||
|
||||
<script>
|
||||
//////////////////////////////////////////////////////
|
||||
//////////////////////////////////////////////////////
|
||||
//////////////////////////////////////////////////////
|
||||
//////////////////////////////////////////////////////
|
||||
// Drag utility
|
||||
|
||||
|
||||
// Drag and resize utility for section 6
|
||||
function makeDraggable(element) {
|
||||
element.style["touch-action"] = "none";
|
||||
|
||||
@ -1934,12 +1894,6 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////////////////////////////////////
|
||||
//////////////////////////////////////////////////////
|
||||
//////////////////////////////////////////////////////
|
||||
//////////////////////////////////////////////////////
|
||||
// Resize utility
|
||||
|
||||
function makeResizable(element) {
|
||||
const resizeHandle = document.createElement('div');
|
||||
element.appendChild(resizeHandle);
|
||||
Loading…
x
Reference in New Issue
Block a user