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] Fix css and resizing issue in dress-up example.

Browse Source
This commit is contained in:
Mario Zechner 2021-09-07 20:53:27 +02:00
parent babe296157
commit 8d309ce899
1 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
spine-ts/spine-webgl/example/dress-up.html
View File

@ -9,21 +9,18 @@
#container { #container {
display: flex; display: flex;
width: 100%; width: 100vw;
height: 100vh; height: 100vh;
} }
#canvas {
flex-grow: 1;
}
#skins { #skins {
width: 100px;
flex-shrink: 0; flex-shrink: 0;
overflow: scroll; overflow: scroll;
} }
#skins>img { #canvas {
display: block; width: calc(100% - 100px);
} }
</style> </style>
@ -32,6 +29,7 @@
<div id="skins"></div> <div id="skins"></div>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
</div> </div>
<script> <script>
// Define the class running in the Spine canvas // Define the class running in the Spine canvas
class App { class App {
@ -44,6 +42,7 @@
this.state = null; this.state = null;
this.selectedSkins = []; this.selectedSkins = [];
this.skinThumbnails = {}; this.skinThumbnails = {};
this.lastBounds = {};
} }
loadAssets(canvas) { loadAssets(canvas) {
@ -112,19 +111,17 @@
} }
this.skeleton.setSkin(newSkin); this.skeleton.setSkin(newSkin);
this.skeleton.setToSetupPose(); this.skeleton.setToSetupPose();
this.skeleton.updateWorldTransform();
// Center and zoom the camera // Calculate the bounds so we can center and zoom
// the camera such that the skeleton is in full view.
let offset = new spine.Vector2(), size = new spine.Vector2(); let offset = new spine.Vector2(), size = new spine.Vector2();
this.skeleton.getBounds(offset, size); this.skeleton.getBounds(offset, size);
let camera = this.canvas.renderer.camera; this.lastBounds = { offset: offset, size: size };
camera.position.x = offset.x + size.x / 2;
camera.position.y = offset.y + size.y / 2;
camera.zoom = size.x > size.y ? size.x / this.canvas.htmlCanvas.width * 1.1 : size.y / this.canvas.htmlCanvas.height * 1.1;
camera.update();
} }
createUI(canvas) { createUI(canvas) {
const THUMBNAIL_SIZE = 300; const THUMBNAIL_SIZE = 100;
// We'll reuse the webgl context used to render the skeleton for // We'll reuse the webgl context used to render the skeleton for
// thumbnail generation. We temporarily resize it to 300x300 pixels // thumbnail generation. We temporarily resize it to 300x300 pixels
@ -219,8 +216,17 @@
} }
render(canvas) { render(canvas) {
// Center and zoom the camera so the skeleton is
// in full view irrespective of the page size.
let renderer = canvas.renderer; let renderer = canvas.renderer;
let camera = renderer.camera;
renderer.resize(spine.ResizeMode.Expand); renderer.resize(spine.ResizeMode.Expand);
let offset = this.lastBounds.offset, size = this.lastBounds.size;
camera.position.x = offset.x + size.x / 2;
camera.position.y = offset.y + size.y / 2;
camera.zoom = size.x > size.y ? size.x / this.canvas.htmlCanvas.width * 1.1 : size.y / this.canvas.htmlCanvas.height * 1.1;
camera.update();
canvas.clear(0.2, 0.2, 0.2, 1); canvas.clear(0.2, 0.2, 0.2, 1);
renderer.begin(); renderer.begin();
renderer.drawSkeleton(this.skeleton, true); renderer.drawSkeleton(this.skeleton, true);