Inspector v2: Add scene explorer command for playing/stopping sprite animations (#17004)

This change adds a Play/Stop button to the property pane for sprites
(for parity), and also adds a scene explorer command as a shortcut:

<img width="504" height="351" alt="image"
src="https://github.com/user-attachments/assets/91e27bc2-07f3-4c43-a970-d3b93b49d6b6"
/>

Author: ryantrem

packages/dev/inspector-v2/src/components/properties/sprites/spriteAnimationProperties.tsx

@@ -2,13 +2,26 @@ import type { FunctionComponent } from "react";
 
 import type { Sprite } from "core/index";
 
+import { useCallback } from "react";
+
+import { PlayFilled, StopFilled } from "@fluentui/react-icons";
+import { ButtonLine } from "shared-ui-components/fluent/hoc/buttonLine";
 import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
 import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
+import { useInterceptObservable } from "../../../hooks/instrumentationHooks";
+import { useObservableState } from "../../../hooks/observableHooks";
 import { BoundProperty } from "../boundProperty";
 
 export const SpriteAnimationProperties: FunctionComponent<{ sprite: Sprite }> = (props) => {
     const { sprite } = props;
 
+    const animationStarted = useObservableState(
+        useCallback(() => sprite.animationStarted, [sprite]),
+        useInterceptObservable("function", sprite, "playAnimation"),
+        useInterceptObservable("function", sprite, "stopAnimation"),
+        useInterceptObservable("function", sprite, "_animate")
+    );
+
     return (
         <>
             <BoundProperty
@@ -31,6 +44,17 @@ export const SpriteAnimationProperties: FunctionComponent<{ sprite: Sprite }> =
                 target={sprite}
                 propertyKey="delay"
             />
+            <ButtonLine
+                label={animationStarted ? "Stop Animation" : "Start Animation"}
+                icon={animationStarted ? StopFilled : PlayFilled}
+                onClick={() => {
+                    if (animationStarted) {
+                        sprite.stopAnimation();
+                    } else {
+                        sprite.playAnimation(sprite.fromIndex, sprite.toIndex, sprite.loopAnimation, sprite.delay);
+                    }
+                }}
+            />
         </>
     );
 };

packages/dev/inspector-v2/src/services/panes/scene/spriteManagerExplorerService.tsx

@@ -3,7 +3,7 @@ import type { ServiceDefinition } from "../../../modularity/serviceDefinition";
 import type { ISceneContext } from "../../sceneContext";
 import type { ISceneExplorerService } from "./sceneExplorerService";
 
-import { LayerDiagonalPersonRegular, PersonSquareRegular } from "@fluentui/react-icons";
+import { LayerDiagonalPersonRegular, PersonSquareRegular, PlayFilled, StopFilled } from "@fluentui/react-icons";
 
 import { Observable } from "core/Misc";
 import { InterceptProperty } from "../../../instrumentation/propertyInstrumentation";
@@ -12,6 +12,7 @@ import { DefaultSectionsOrder } from "./defaultSectionsMetadata";
 import { SceneExplorerServiceIdentity } from "./sceneExplorerService";
 
 import "core/Sprites/spriteSceneComponent";
+import { InterceptFunction } from "../../../instrumentation/functionInstrumentation";
 
 function IsSpriteManager(entity: unknown): entity is ISpriteManager {
     return (entity as ISpriteManager).sprites !== undefined;
@@ -60,9 +61,42 @@ export const SpriteManagerExplorerServiceDefinition: ServiceDefinition<[], [ISce
             getEntityRemovedObservables: () => [scene.onSpriteManagerRemovedObservable],
         });
 
+        const spritePlayStopCommandRegistration = sceneExplorerService.addCommand({
+            predicate: (entity: unknown) => IsSprite(entity),
+            getCommand: (sprite) => {
+                const onChangeObservable = new Observable<void>();
+                const playHook = InterceptFunction(sprite, "playAnimation", {
+                    afterCall: () => onChangeObservable.notifyObservers(),
+                });
+                const stopHook = InterceptFunction(sprite, "stopAnimation", {
+                    afterCall: () => onChangeObservable.notifyObservers(),
+                });
+                const animateHook = InterceptFunction(sprite, "_animate", {
+                    afterCall: () => onChangeObservable.notifyObservers(),
+                });
+
+                return {
+                    type: "action",
+                    get displayName() {
+                        return `${sprite.animationStarted ? "Stop" : "Play"} Animation`;
+                    },
+                    icon: () => (sprite.animationStarted ? <StopFilled /> : <PlayFilled />),
+                    execute: () => (sprite.animationStarted ? sprite.stopAnimation() : sprite.playAnimation(sprite.fromIndex, sprite.toIndex, sprite.loopAnimation, sprite.delay)),
+                    onChange: onChangeObservable,
+                    dispose: () => {
+                        playHook.dispose();
+                        stopHook.dispose();
+                        animateHook.dispose();
+                        onChangeObservable.clear();
+                    },
+                };
+            },
+        });
+
         return {
             dispose: () => {
                 sectionRegistration.dispose();
+                spritePlayStopCommandRegistration.dispose();
             },
         };
     },

packages/dev/inspector-v2/test/app/index.ts

@@ -1,6 +1,7 @@
 // NOTE: This app is an easy place to test Inspector v2.
 // Additionally, here are some PGs that are helpful for testing specific features:
 // Frame graphs: http://localhost:1338/?inspectorv2#9YU4C5#23
+// Sprites: https://localhost:1338/?inspectorv2#YCY2IL#4
 
 import HavokPhysics from "@babylonjs/havok";
 import type { Nullable } from "core/types";