docs: add documentation for Sprite Manager

Author: julien-moreau

editor/src/editor/layout/inspector/sprites/sprite-manager.tsx

@@ -248,7 +248,7 @@ export class EditorSpriteManagerNodeInspector extends Component<IEditorInspector
 					accept3dlTexture={false}
 					acceptCubeTexture={false}
 					onChange={async (texture) => {
-						if (isTexture(texture)) {
+						if (!texture || isTexture(texture)) {
 							this._handleSpritesheetTextureChanged(texture);
 						}
 					}}

editor/src/editor/layout/inspector/sprites/sprite.tsx

@@ -160,15 +160,19 @@ export class EditorSpriteInspector extends Component<IEditorInspectorImplementat
 	}
 
 	private _getSpriteAnimationsInspector(): ReactNode {
-		let maxFrame = this._spriteManagerNode?._previews?.length;
-		if (maxFrame !== undefined) {
-			maxFrame -= 1;
+		let maxFrame = 0;
+
+		if (this._spriteManagerNode?.atlasJson) {
+			maxFrame = Object.keys(this._spriteManagerNode.atlasJson.frames).length - 1;
+		} else if (this._spriteManagerNode) {
+			maxFrame = this._spriteManagerNode._previews?.length;
+			if (maxFrame !== undefined) {
+				maxFrame -= 1;
+			}
 		}
 
 		const spriteAnimations = this.props.object.metadata.spriteAnimations as ISpriteAnimation[];
 
-		this.props.object.animationStarted;
-
 		return (
 			<EditorInspectorSectionField title="Animations">
 				<div className="flex justify-between items-center">

editor/src/editor/nodes/sprite-manager.ts

@@ -1,8 +1,10 @@
-import { readJSONSync } from "fs-extra";
 import { dirname, isAbsolute, join } from "path/posix";
+import { pathExistsSync, readJSONSync } from "fs-extra";
 
 import { Node, TransformNode, Scene, Tools, serialize, SerializationHelper, Matrix, GetClass, SpriteManager, Texture, Sprite, Observer } from "babylonjs";
 
+import { showAlert } from "../../ui/dialog";
+
 import { UniqueNumber } from "../../tools/tools";
 
 import { configureImportedTexture } from "../layout/preview/import/import";
@@ -90,13 +92,19 @@ export class SpriteManagerNode extends TransformNode {
 	}
 
 	public buildFromAtlasJsonAbsolutePath(absolutePath: string, serializeSpriteManager?: any): void {
+		const atlasJson = readJSONSync(absolutePath);
+		const imagePath = join(dirname(absolutePath), atlasJson.meta["image"]);
+
+		if (!pathExistsSync(imagePath)) {
+			showAlert("Error", `Cannot find the associated image for the atlas JSON file: ${imagePath}`);
+			return;
+		}
+
 		this.spriteManager?.dispose();
 
-		this.atlasJson = readJSONSync(absolutePath);
+		this.atlasJson = atlasJson;
 		this.atlasJsonRelativePath = absolutePath.replace(getProjectAssetsRootUrl()!, "");
 
-		const imagePath = join(dirname(absolutePath), this.atlasJson.meta["image"]);
-
 		this.spriteManager = new SpriteManager(
 			this.name,
 			imagePath,

website/public/documentation/sprites/using-sprite-manager/creating-sprite-manager.mp4

@@ -15,11 +15,8 @@ import {
 } from "./pointer-event";
 
 import { NextChapterComponent } from "../../components/next-chapter";
-import { PointerEventTypes } from "@babylonjs/core";
 
 export default function DocumentationRunningProjectPage() {
-	PointerEventTypes.POINTERDOUBLETAP;
-
 	return (
 		<main className="w-full min-h-screen p-5 bg-black text-neutral-50">
 			<div className="flex flex-col gap-10 lg:max-w-3xl 2xl:max-w-6xl mx-auto pt-32">
@@ -128,7 +125,7 @@ export default function DocumentationRunningProjectPage() {
 
 						<CodeBlock code={onKeyboardEventArrayBasicExample} />
 
-						<NextChapterComponent href="/documentation/advanced/compressing-textures" title="Compressing textures" />
+						<NextChapterComponent href="/documentation/sprites/using-sprite-manager" title="Using Sprite Manager" />
 					</div>
 				</Fade>
 			</div>