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

Cleaned webcomponent example.

Browse Source
This commit is contained in:
Davide Tantillo 2024-09-26 16:09:27 +02:00
parent 3b4ab02d92
commit a254fabaef
1 changed files with 92 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

230
spine-ts/spine-webgl/example/canvas9.html → spine-ts/spine-webgl/example/webcomponent.html
View File

@ -16,8 +16,6 @@
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
.section { .section {
/* height: 100lvh; */
/* height: 800px; */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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-top split">
<div class="split-left"> <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-top split">
<div class="split-left"> <div class="split-left">
@ -296,7 +289,6 @@
animation="walk" animation="walk"
height="200" height="200"
width="200" width="200"
fit="fill"
></spine-widget>`) ></spine-widget>`)
</script> </script>
</code></pre> </code></pre>
@ -305,25 +297,17 @@
<!-- <!--
///////////////////// /////////////////////
// end section 1 // // end section 2 //
///////////////////// /////////////////////
--> -->
<!-- <!--
///////////////////// /////////////////////
// start section 3 // // 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-top split">
<div class="split-left"> <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-top split">
<div class="split-left"> <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-top split">
<div class="split-left"> <div class="split-left">
@ -488,7 +472,7 @@
<!-- <!--
///////////////////// /////////////////////
// end section 4 // // end section 5 //
///////////////////// /////////////////////
--> -->
@ -533,7 +517,6 @@
///////////////////// /////////////////////
--> -->
<!-- <!--
///////////////////// /////////////////////
// start section 7 // // start section 7 //
@ -546,12 +529,12 @@
<div class="split-left"> <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>. 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>
<div class="split-right" id="section7-element"> <div class="split-right">
<spine-widget <spine-widget
atlas="assets/sack-pma.atlas" atlas="assets/sack-pma.atlas"
skeleton="assets/sack-pro.skel" skeleton="assets/sack-pro.skel"
animation="cape-follow-example" animation="cape-follow-example"
debug="true" debug
></spine-widget> ></spine-widget>
</div> </div>
</div> </div>
@ -563,7 +546,7 @@
atlas="assets/sack-pma.atlas" atlas="assets/sack-pma.atlas"
skeleton="assets/sack-pro.skel" skeleton="assets/sack-pro.skel"
animation="cape-follow-example" animation="cape-follow-example"
debug="true" debug
></spine-widget>` ></spine-widget>`
);</script> );</script>
</code></pre> </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-top split">
<div class="split-left"> <div class="split-left">
@ -646,18 +629,16 @@
</div> </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;"> <div class="split" style="width: 100%; flex-direction: column;">
@ -886,19 +867,16 @@
</div> </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;"> <div class="split" style="width: 100%; flex-direction: column;">
@ -1152,17 +1130,16 @@
</div> </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;"> <div class="split" style="width: 100%; flex-direction: column;">
@ -1275,19 +1252,16 @@ skins.forEach((skin, i) => {
</div> </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;"> <div class="split" style="width: 100%; flex-direction: column;">
@ -1371,18 +1345,16 @@ skins.forEach((skin, i) => {
</div> </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-top split">
<div class="split-left"> <div class="split-left">
@ -1438,27 +1410,46 @@ skins.forEach((skin, i) => {
<script> <script>
escapeHTMLandInject(` escapeHTMLandInject(`
<spine-widget <spine-widget
atlas="assets/spineboy-pma.atlas" identifier="dragon"
skeleton="assets/spineboy-pro.skel" atlas="assets/dragon-pma.atlas"
animation="walk" skeleton="assets/dragon-ess.skel"
spinner="true" animation="flying"
></spine-widget>`) 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> </script>
</code></pre> </code></pre>
</div> </div>
</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;"> <div class="split" style="width: 100%; flex-direction: column;">
@ -1531,6 +1522,7 @@ skins.forEach((skin, i) => {
animation="sneak" animation="sneak"
offscreen="pose" offscreen="pose"
></spine-widget> ></spine-widget>
... ...
const stretchyman = spine.getSpineWidget("stretchyman"); 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;"> <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" style="width: 100%; flex-direction: column;">
<div class="split-top split"> <div class="split-top split" style="align-items: stretch">
<div class="split-left"> <div class="split-left">
<spine-widget <spine-widget
atlas="assets/spineboy-pma.atlas" atlas="assets/spineboy-pma.atlas"
@ -1677,7 +1673,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
animation="walk" animation="walk"
scale="3" scale="3"
fit="none" fit="none"
clip="true" clip
></spine-widget> ></spine-widget>
</div> </div>
<div class="split-right"> <div class="split-right">
@ -1687,7 +1683,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
animation="walk" animation="walk"
scale="1.5" scale="1.5"
fit="none" fit="none"
clip="true" clip
></spine-widget> ></spine-widget>
</div> </div>
<div class="split-right"> <div class="split-right">
@ -1697,7 +1693,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
animation="walk" animation="walk"
scale="1" scale="1"
fit="none" fit="none"
clip="true" clip
></spine-widget> ></spine-widget>
</div> </div>
<div class="split-right"> <div class="split-right">
@ -1707,7 +1703,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
animation="playing-in-the-rain" animation="playing-in-the-rain"
scale="0.5" scale="0.5"
fit="none" fit="none"
clip="true" clip
></spine-widget> ></spine-widget>
</div> </div>
<div class="split-right"> <div class="split-right">
@ -1715,9 +1711,8 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
identifier="celeste" identifier="celeste"
atlas="assets/celestial-circus-pma.atlas" atlas="assets/celestial-circus-pma.atlas"
skeleton="assets/celestial-circus-pro.skel" skeleton="assets/celestial-circus-pro.skel"
animation="wings-and-feet" clip
clip="true" draggable
draggable="true"
></spine-widget> ></spine-widget>
<script> <script>
@ -1744,7 +1739,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
animation="walk" animation="walk"
scale="3" scale="3"
fit="none" fit="none"
clip="true" clip
></spine-widget> ></spine-widget>
</div> </div>
<div class="split-right"> <div class="split-right">
@ -1754,7 +1749,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
animation="walk" animation="walk"
scale="1.5" scale="1.5"
fit="none" fit="none"
clip="true" clip
></spine-widget> ></spine-widget>
</div> </div>
<div class="split-right"> <div class="split-right">
@ -1764,7 +1759,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
animation="walk" animation="walk"
scale="1" scale="1"
fit="none" fit="none"
clip="true" clip
></spine-widget> ></spine-widget>
</div> </div>
<div class="split-right"> <div class="split-right">
@ -1774,7 +1769,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
animation="playing-in-the-rain" animation="playing-in-the-rain"
scale="0.5" scale="0.5"
fit="none" fit="none"
clip="true" clip
></spine-widget> ></spine-widget>
</div> </div>
<div class="split-right"> <div class="split-right">
@ -1783,8 +1778,8 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
atlas="assets/celestial-circus-pma.atlas" atlas="assets/celestial-circus-pma.atlas"
skeleton="assets/celestial-circus-pro.skel" skeleton="assets/celestial-circus-pro.skel"
animation="wings-and-feet" animation="wings-and-feet"
clip="true" clip
draggable="true" draggable
></spine-widget> ></spine-widget>
</div> </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-top split">
<div class="split-left"> <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>. As a bonus item, you can move you skeleton around just by setting the <code>draggable</code> property to <code>true</code>.
</div> </div>
<div class="split-right" id="section8-element"> <div class="split-right">
<spine-widget <spine-widget
atlas="assets/celestial-circus-pma.atlas" atlas="assets/celestial-circus-pma.atlas"
skeleton="assets/celestial-circus-pro.skel" skeleton="assets/celestial-circus-pro.skel"
@ -1831,7 +1826,6 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
</div> </div>
</div> </div>
<div class="split-bottom"> <div class="split-bottom">
<pre><code id="code-display"> <pre><code id="code-display">
<script>escapeHTMLandInject(` <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> <script>
// function scrollToSection(id) { // Drag and resize utility for section 6
// 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
function makeDraggable(element) { function makeDraggable(element) {
element.style["touch-action"] = "none"; element.style["touch-action"] = "none";
@ -1934,12 +1894,6 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
} }
} }
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Resize utility
function makeResizable(element) { function makeResizable(element) {
const resizeHandle = document.createElement('div'); const resizeHandle = document.createElement('div');
element.appendChild(resizeHandle); element.appendChild(resizeHandle);