mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-20 00:36:43 +08:00
328 lines
9.1 KiB
HTML
328 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="../dist/iife/spine-webgl.js"></script>
|
|
<!-- <script src="./spine-webgl.min.js"></script> -->
|
|
<title>JS Library Showcase</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
/* scroll-behavior: smooth; */
|
|
}
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
.section {
|
|
/* height: 100lvh; */
|
|
/* height: 800px; */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
background-color: #3498db;
|
|
}
|
|
.split {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.full-width {
|
|
width: 100%;
|
|
}
|
|
.split-left, .split-right {
|
|
width: 50%;
|
|
min-height: 50%;
|
|
padding: 1rem;
|
|
margin: 1rem;
|
|
border: 1px solid salmon;
|
|
}
|
|
.split-nosize {
|
|
border: 1px solid salmon;
|
|
}
|
|
.split-size {
|
|
padding: 1rem;
|
|
margin: 1rem;
|
|
}
|
|
.navigation {
|
|
display: flex;
|
|
position: fixed;
|
|
left: 20px;
|
|
bottom: 20px;
|
|
transform: translateY(-50%);
|
|
}
|
|
.nav-btn {
|
|
display: block;
|
|
margin: 0px 5px;
|
|
padding: 10px;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.vertical-split {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.high-page {
|
|
height: 600px;
|
|
}
|
|
|
|
.split-top {
|
|
width: 100%;
|
|
height: 600px;
|
|
}
|
|
|
|
.split-bottom {
|
|
width: 100%;
|
|
/* height: 600px; */
|
|
}
|
|
|
|
.split-bottom {
|
|
background-color: #1e1e1e;
|
|
color: #d4d4d4;
|
|
overflow: auto;
|
|
}
|
|
|
|
.split-bottom pre {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.split-bottom code {
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
display: block;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.skin-grid {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
justify-content: space-evenly;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
.skin-grid-element {
|
|
border: 1px solid #ccc;
|
|
width: 150px;
|
|
aspect-ratio: 3 / 3;
|
|
}
|
|
</style>
|
|
<script>
|
|
function escapeHTMLandInject(text) {
|
|
const escaped = text
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
document.currentScript.parentElement.innerHTML = escaped;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div style="height: 1200px; flex-direction: column;">
|
|
</div>
|
|
|
|
|
|
<!--
|
|
/////////////////////
|
|
// start section 7 //
|
|
/////////////////////
|
|
-->
|
|
<div id="section1" class="section vertical-split">
|
|
|
|
<div class="split" style="width: 100%; flex-direction: column;">
|
|
|
|
<div class="split-left" style="width: 80%; box-sizing: border-box;">
|
|
If you have many atlas pages, for example one for each skin, and you want to show only some of the skins,
|
|
pass to the <code>pages</code> the atlas pages you want to load as a comma concatenated list of indices.
|
|
</div>
|
|
|
|
<div class="skin-grid">
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="emotes/wave"
|
|
skin="nate"
|
|
pages="0,1,4,6"
|
|
></spine-widget>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skin-grid">
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="emotes/wave"
|
|
skin="erikari"
|
|
pages="0,1,4,6"
|
|
offscreen="update"
|
|
></spine-widget>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skin-grid">
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="emotes/wave"
|
|
skin="mario"
|
|
pages="0,1,4,6"
|
|
offscreen="pose"
|
|
></spine-widget>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="split-bottom">
|
|
<pre><code id="code-display">
|
|
<script>
|
|
escapeHTMLandInject(`
|
|
<div class="skin-grid">
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="emotes/wave"
|
|
skin="nate"
|
|
pages="0,1,4,6"
|
|
></spine-widget>
|
|
</div>
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="movement/trot-left"
|
|
skin="nate"
|
|
pages="0,1,4,6"
|
|
></spine-widget>
|
|
</div>
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="emotes/idea"
|
|
skin="nate"
|
|
pages="0,1,4,6"
|
|
></spine-widget>
|
|
</div>
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="emotes/hooray"
|
|
skin="nate"
|
|
pages="0,1,4,6"
|
|
></spine-widget>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skin-grid">
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="emotes/wave"
|
|
skin="erikari"
|
|
pages="0,1,4,6"
|
|
></spine-widget>
|
|
</div>
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="movement/trot-left"
|
|
skin="erikari"
|
|
pages="0,1,4,6"
|
|
></spine-widget>
|
|
</div>
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="emotes/idea"
|
|
skin="erikari"
|
|
pages="0,1,4,6"
|
|
></spine-widget>
|
|
</div>
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="emotes/hooray"
|
|
skin="erikari"
|
|
pages="0,1,4,6"
|
|
></spine-widget>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skin-grid">
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="emotes/wave"
|
|
skin="mario"
|
|
pages="0,1,4,6"
|
|
></spine-widget>
|
|
</div>
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="movement/trot-left"
|
|
skin="mario"
|
|
pages="0,1,4,6"
|
|
></spine-widget>
|
|
</div>
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="emotes/idea"
|
|
skin="mario"
|
|
pages="0,1,4,6"
|
|
></spine-widget>
|
|
</div>
|
|
<div class="skin-grid-element">
|
|
<spine-widget
|
|
atlas="assets/chibi-stickers-pma.atlas"
|
|
skeleton="assets/chibi-stickers.skel"
|
|
animation="emotes/hooray"
|
|
skin="mario"
|
|
pages="0,1,4,6"
|
|
></spine-widget>
|
|
</div>
|
|
</div>`)
|
|
</script>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
/////////////////////
|
|
// end section 7 //
|
|
/////////////////////
|
|
-->
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |