mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-04 22:34:53 +08:00
mostly work - when overflow top/bottom...are > 0, widgets slightly jump on up and down fast scroll.
This commit is contained in:
Davide Tantillo
parent
96282273f8
commit
59a7715b2e
@ -94,6 +94,7 @@ export class AssetManagerBase implements Disposable {
|
||||
|
||||
this.assetsLoaded[path] = new Promise<any>((resolve, reject) => {
|
||||
this.downloader.downloadBinary(path, (data: Uint8Array): void => {
|
||||
// setTimeout(() => this.success(success, path, data), 10000);
|
||||
this.success(success, path, data);
|
||||
resolve(data);
|
||||
}, (status: number, responseText: string): void => {
|
||||
@ -181,8 +182,7 @@ export class AssetManagerBase implements Disposable {
|
||||
image.onload = () => {
|
||||
const texture = this.textureLoader(image)
|
||||
this.success(success, path, texture);
|
||||
setTimeout(() => resolve(texture), 1000)
|
||||
// resolve(texture);
|
||||
resolve(texture);
|
||||
};
|
||||
image.onerror = () => {
|
||||
const errorMsg = `Couldn't load image: ${path}`;
|
||||
@ -204,29 +204,72 @@ export class AssetManagerBase implements Disposable {
|
||||
let parent = index >= 0 ? path.substring(0, index + 1) : "";
|
||||
path = this.start(path);
|
||||
|
||||
this.downloader.downloadText(path, (atlasText: string): void => {
|
||||
try {
|
||||
let atlas = new TextureAtlas(atlasText);
|
||||
let toLoad = atlas.pages.length, abort = false;
|
||||
for (let page of atlas.pages) {
|
||||
this.loadTexture(!fileAlias ? parent + page.name : fileAlias[page.name!],
|
||||
(imagePath: string, texture: Texture) => {
|
||||
if (!abort) {
|
||||
page.setTexture(texture);
|
||||
if (--toLoad == 0) this.success(success, path, atlas);
|
||||
if (this.reuseAssets(path, success, error)) return;
|
||||
|
||||
this.assetsLoaded[path] = new Promise<any>((resolve, reject) => {
|
||||
this.downloader.downloadText(path, (atlasText: string): void => {
|
||||
try {
|
||||
let atlas = new TextureAtlas(atlasText);
|
||||
let toLoad = atlas.pages.length, abort = false;
|
||||
for (let page of atlas.pages) {
|
||||
this.loadTexture(!fileAlias ? parent + page.name : fileAlias[page.name!],
|
||||
(imagePath: string, texture: Texture) => {
|
||||
if (!abort) {
|
||||
page.setTexture(texture);
|
||||
if (--toLoad == 0) {
|
||||
this.success(success, path, atlas);
|
||||
resolve(atlas);
|
||||
}
|
||||
}
|
||||
},
|
||||
(imagePath: string, message: string) => {
|
||||
if (!abort) {
|
||||
const errorMsg = `Couldn't load texture atlas ${path} page image: ${imagePath}`;
|
||||
this.error(error, path, errorMsg);
|
||||
reject(errorMsg);
|
||||
}
|
||||
abort = true;
|
||||
}
|
||||
},
|
||||
(imagePath: string, message: string) => {
|
||||
if (!abort) this.error(error, path, `Couldn't load texture atlas ${path} page image: ${imagePath}`);
|
||||
abort = true;
|
||||
}
|
||||
);
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
const errorMsg = `Couldn't parse texture atlas ${path}: ${(e as any).message}`;
|
||||
this.error(error, path, errorMsg);
|
||||
reject(errorMsg);
|
||||
}
|
||||
} catch (e) {
|
||||
this.error(error, path, `Couldn't parse texture atlas ${path}: ${(e as any).message}`);
|
||||
}
|
||||
}, (status: number, responseText: string): void => {
|
||||
this.error(error, path, `Couldn't load texture atlas ${path}: status ${status}, ${responseText}`);
|
||||
}, (status: number, responseText: string): void => {
|
||||
const errorMsg = `Couldn't load texture atlas ${path}: status ${status}, ${responseText}`;
|
||||
this.error(error, path, errorMsg);
|
||||
reject(errorMsg);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
loadTextureAtlasButNoTextures (path: string,
|
||||
success: (path: string, atlas: TextureAtlas) => void = () => { },
|
||||
error: (path: string, message: string) => void = () => { },
|
||||
fileAlias?: { [keyword: string]: string }
|
||||
) {
|
||||
path = this.start(path);
|
||||
|
||||
if (this.reuseAssets(path, success, error)) return;
|
||||
|
||||
this.assetsLoaded[path] = new Promise<any>((resolve, reject) => {
|
||||
this.downloader.downloadText(path, (atlasText: string): void => {
|
||||
try {
|
||||
const atlas = new TextureAtlas(atlasText);
|
||||
this.success(success, path, atlas);
|
||||
resolve(atlas);
|
||||
} catch (e) {
|
||||
const errorMsg = `Couldn't parse texture atlas ${path}: ${(e as any).message}`;
|
||||
this.error(error, path, errorMsg);
|
||||
reject(errorMsg);
|
||||
}
|
||||
}, (status: number, responseText: string): void => {
|
||||
const errorMsg = `Couldn't load texture atlas ${path}: status ${status}, ${responseText}`;
|
||||
this.error(error, path, errorMsg);
|
||||
reject(errorMsg);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -7,13 +7,13 @@
|
||||
<!-- <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;
|
||||
/* scroll-behavior: smooth; */
|
||||
}
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
@ -102,8 +102,22 @@
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
.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
|
||||
@ -118,87 +132,275 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="height: 1200px; flex-direction: column;">
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section 2 //
|
||||
// start section 7 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
<div id="section1" class="section vertical-split">
|
||||
<div class="full-width">
|
||||
|
||||
<div class="split">
|
||||
<div class="split-left" style="height: 300px;">
|
||||
<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/raptor-pma.atlas"
|
||||
skeleton="assets/raptor-pro.json"
|
||||
animation="walk"
|
||||
scale=".125"
|
||||
fit="none"
|
||||
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="split-right">
|
||||
You can change the fit mode of your Spine animation using the <code>fit</code> attribute.
|
||||
<br>
|
||||
<br>
|
||||
This is <code>fit="fill"</code>. Default fit value is <code>fit="contain"</code>.
|
||||
<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="split">
|
||||
<div class="split-left" style="height: 300px;">
|
||||
<div class="skin-grid">
|
||||
<div class="skin-grid-element">
|
||||
<spine-widget
|
||||
atlas="assets/raptor-pma.atlas"
|
||||
skeleton="assets/raptor-pro.json"
|
||||
animation="walk"
|
||||
fit="fill"
|
||||
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="split-right">
|
||||
If you want to preserve the original scale, you can use the <code>fit="none"</code>.
|
||||
In combination with that, you can use the <code>scale</code> attribute to choose you desired scale.
|
||||
<br>
|
||||
<br>
|
||||
Other fit modes are <code>fitWidth</code>, <code>fitWidth</code>, <code>fitHeight</code>, <code>cover</code>,and <code>scaleDown</code>.
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="split-bottom">
|
||||
<pre><code id="code-display">
|
||||
<script>
|
||||
escapeHTMLandInject(`
|
||||
<spine-widget
|
||||
atlas="assets/raptor-pma.atlas"
|
||||
skeleton="assets/raptor-pro.skel"
|
||||
animation="walk"
|
||||
fit="fill"
|
||||
></spine-widget>
|
||||
<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>
|
||||
|
||||
<spine-widget
|
||||
atlas="assets/raptor-pma.atlas"
|
||||
skeleton="assets/raptor-pro.skel"
|
||||
animation="walk"
|
||||
scale=".125"
|
||||
fit="none"
|
||||
></spine-widget>`)
|
||||
<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 2 //
|
||||
// end section 7 //
|
||||
/////////////////////
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -463,6 +463,14 @@ export class SceneRenderer implements Disposable {
|
||||
this.activeRenderer = null;
|
||||
}
|
||||
|
||||
resize2 () {
|
||||
console.log("RESIZE COMMAND")
|
||||
let canvas = this.canvas;
|
||||
this.context.gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
this.camera.setViewport(canvas.width, canvas.height);
|
||||
this.camera.update();
|
||||
}
|
||||
|
||||
resize (resizeMode: ResizeMode) {
|
||||
let canvas = this.canvas;
|
||||
var dpr = window.devicePixelRatio || 1;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -4,6 +4,7 @@ export * from "./CameraController.js";
|
||||
export * from "./GLTexture.js";
|
||||
export * from "./Input.js";
|
||||
export * from "./LoadingScreen.js";
|
||||
export * from "./LoadingScreenWidget.js";
|
||||
export * from "./Matrix4.js";
|
||||
export * from "./Mesh.js";
|
||||
export * from "./PolygonBatcher.js";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user