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

mostly work - when overflow top/bottom...are > 0, widgets slightly jump on up and down fast scroll.

Browse Source
This commit is contained in:
Davide Tantillo 2024-08-28 16:15:03 +02:00
parent 96282273f8
commit 59a7715b2e
6 changed files with 1571 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
spine-ts/spine-core/src/AssetManagerBase.ts
View File

@ -94,6 +94,7 @@ export class AssetManagerBase implements Disposable {
this.assetsLoaded[path] = new Promise<any>((resolve, reject) => { this.assetsLoaded[path] = new Promise<any>((resolve, reject) => {
this.downloader.downloadBinary(path, (data: Uint8Array): void => { this.downloader.downloadBinary(path, (data: Uint8Array): void => {
// setTimeout(() => this.success(success, path, data), 10000);
this.success(success, path, data); this.success(success, path, data);
resolve(data); resolve(data);
}, (status: number, responseText: string): void => { }, (status: number, responseText: string): void => {
@ -181,8 +182,7 @@ export class AssetManagerBase implements Disposable {
image.onload = () => { image.onload = () => {
const texture = this.textureLoader(image) const texture = this.textureLoader(image)
this.success(success, path, texture); this.success(success, path, texture);
setTimeout(() => resolve(texture), 1000) resolve(texture);
// resolve(texture);
}; };
image.onerror = () => { image.onerror = () => {
const errorMsg = `Couldn't load image: ${path}`; 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) : ""; let parent = index >= 0 ? path.substring(0, index + 1) : "";
path = this.start(path); path = this.start(path);
this.downloader.downloadText(path, (atlasText: string): void => { if (this.reuseAssets(path, success, error)) return;
try {
let atlas = new TextureAtlas(atlasText); this.assetsLoaded[path] = new Promise<any>((resolve, reject) => {
let toLoad = atlas.pages.length, abort = false; this.downloader.downloadText(path, (atlasText: string): void => {
for (let page of atlas.pages) { try {
this.loadTexture(!fileAlias ? parent + page.name : fileAlias[page.name!], let atlas = new TextureAtlas(atlasText);
(imagePath: string, texture: Texture) => { let toLoad = atlas.pages.length, abort = false;
if (!abort) { for (let page of atlas.pages) {
page.setTexture(texture); this.loadTexture(!fileAlias ? parent + page.name : fileAlias[page.name!],
if (--toLoad == 0) this.success(success, path, atlas); (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}`); } catch (e) {
abort = true; const errorMsg = `Couldn't parse texture atlas ${path}: ${(e as any).message}`;
} this.error(error, path, errorMsg);
); reject(errorMsg);
} }
} catch (e) { }, (status: number, responseText: string): void => {
this.error(error, path, `Couldn't parse texture atlas ${path}: ${(e as any).message}`); const errorMsg = `Couldn't load texture atlas ${path}: status ${status}, ${responseText}`;
} this.error(error, path, errorMsg);
}, (status: number, responseText: string): void => { reject(errorMsg);
this.error(error, path, `Couldn't load texture atlas ${path}: status ${status}, ${responseText}`); });
});
}
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);
});
}); });
} }

961
spine-ts/spine-webgl/example/canvas6.html
View File

File diff suppressed because it is too large Load Diff

298
spine-ts/spine-webgl/example/canvas7.html
View File

@ -7,13 +7,13 @@
<!-- <script src="./spine-webgl.min.js"></script> --> <!-- <script src="./spine-webgl.min.js"></script> -->
<title>JS Library Showcase</title> <title>JS Library Showcase</title>
<style> <style>
* { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
html { html {
scroll-behavior: smooth; /* scroll-behavior: smooth; */
} }
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@ -102,8 +102,22 @@
display: block; display: block;
padding: 1rem; 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> <script>
function escapeHTMLandInject(text) { function escapeHTMLandInject(text) {
const escaped = text const escaped = text
@ -118,87 +132,275 @@
</head> </head>
<body> <body>
<div style="height: 1200px; flex-direction: column;">
</div>
<!-- <!--
///////////////////// /////////////////////
// start section 2 // // start section 7 //
///////////////////// /////////////////////
--> -->
<div id="section1" class="section vertical-split"> <div id="section1" class="section vertical-split">
<div class="full-width">
<div class="split"> <div class="split" style="width: 100%; flex-direction: column;">
<div class="split-left" style="height: 300px;">
<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 <spine-widget
atlas="assets/raptor-pma.atlas" atlas="assets/chibi-stickers-pma.atlas"
skeleton="assets/raptor-pro.json" skeleton="assets/chibi-stickers.skel"
animation="walk" animation="emotes/wave"
scale=".125" skin="nate"
fit="none" pages="0,1,4,6"
></spine-widget> ></spine-widget>
</div> </div>
<div class="split-right"> <div class="skin-grid-element">
You can change the fit mode of your Spine animation using the <code>fit</code> attribute. <spine-widget
<br> atlas="assets/chibi-stickers-pma.atlas"
<br> skeleton="assets/chibi-stickers.skel"
This is <code>fit="fill"</code>. Default fit value is <code>fit="contain"</code>. 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> </div>
<div class="split"> <div class="skin-grid">
<div class="split-left" style="height: 300px;"> <div class="skin-grid-element">
<spine-widget <spine-widget
atlas="assets/raptor-pma.atlas" atlas="assets/chibi-stickers-pma.atlas"
skeleton="assets/raptor-pro.json" skeleton="assets/chibi-stickers.skel"
animation="walk" animation="emotes/wave"
fit="fill" skin="erikari"
pages="0,1,4,6"
></spine-widget> ></spine-widget>
</div> </div>
<div class="split-right"> <div class="skin-grid-element">
If you want to preserve the original scale, you can use the <code>fit="none"</code>. <spine-widget
In combination with that, you can use the <code>scale</code> attribute to choose you desired scale. atlas="assets/chibi-stickers-pma.atlas"
<br> skeleton="assets/chibi-stickers.skel"
<br> animation="movement/trot-left"
Other fit modes are <code>fitWidth</code>, <code>fitWidth</code>, <code>fitHeight</code>, <code>cover</code>,and <code>scaleDown</code>. 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>
</div> </div>
<div class="split-bottom"> <div class="split-bottom">
<pre><code id="code-display"> <pre><code id="code-display">
<script> <script>
escapeHTMLandInject(` escapeHTMLandInject(`
<spine-widget <div class="skin-grid">
atlas="assets/raptor-pma.atlas" <div class="skin-grid-element">
skeleton="assets/raptor-pro.skel" <spine-widget
animation="walk" atlas="assets/chibi-stickers-pma.atlas"
fit="fill" skeleton="assets/chibi-stickers.skel"
></spine-widget> 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 <div class="skin-grid">
atlas="assets/raptor-pma.atlas" <div class="skin-grid-element">
skeleton="assets/raptor-pro.skel" <spine-widget
animation="walk" atlas="assets/chibi-stickers-pma.atlas"
scale=".125" skeleton="assets/chibi-stickers.skel"
fit="none" animation="emotes/wave"
></spine-widget>`) 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> </script>
</code></pre> </code></pre>
</div> </div>
</div> </div>
<!-- <!--
///////////////////// /////////////////////
// end section 2 // // end section 7 //
///////////////////// /////////////////////
--> -->
</body> </body>
</html> </html>

8
spine-ts/spine-webgl/src/SceneRenderer.ts
View File

@ -463,6 +463,14 @@ export class SceneRenderer implements Disposable {
this.activeRenderer = null; 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) { resize (resizeMode: ResizeMode) {
let canvas = this.canvas; let canvas = this.canvas;
var dpr = window.devicePixelRatio || 1; var dpr = window.devicePixelRatio || 1;

579
spine-ts/spine-webgl/src/SpineWebComponent.ts
View File

File diff suppressed because one or more lines are too long

1
spine-ts/spine-webgl/src/index.ts
View File

@ -4,6 +4,7 @@ export * from "./CameraController.js";
export * from "./GLTexture.js"; export * from "./GLTexture.js";
export * from "./Input.js"; export * from "./Input.js";
export * from "./LoadingScreen.js"; export * from "./LoadingScreen.js";
export * from "./LoadingScreenWidget.js";
export * from "./Matrix4.js"; export * from "./Matrix4.js";
export * from "./Mesh.js"; export * from "./Mesh.js";
export * from "./PolygonBatcher.js"; export * from "./PolygonBatcher.js";