pixi-fusion 1.0.0

package/dist/src/hooks/useAnimatedSprite.d.ts

@@ -0,0 +1,10 @@
+import { AnimatedSprite, AnimatedSpriteOptions, SpritesheetData } from "pixi.js";
+type UseAnimatedSpriteOptions = Omit<AnimatedSpriteOptions, "textures" | "texture"> & {
+    texture: string;
+    animation: string;
+    spritesheet: SpritesheetData;
+    animationSpeed: number;
+    isPlaying: boolean;
+};
+export declare const useAnimatedSprite: ({ texture, spritesheet: spritesheetJSON, animation, animationSpeed, isPlaying, ...options }: UseAnimatedSpriteOptions) => AnimatedSprite | null;
+export {};

package/dist/src/hooks/useAnimatedSprite.js

@@ -0,0 +1,41 @@
+import { useEffect, useMemo } from "react";
+import { AnimatedSprite, Spritesheet } from "pixi.js";
+import { useTextures } from "./useTexture";
+import { useObject } from "./useObject";
+export const useAnimatedSprite = ({ texture, spritesheet: spritesheetJSON, animation, animationSpeed = 1, isPlaying, ...options }) => {
+    const textureKeys = useMemo(() => {
+        return [...(texture ? [texture] : [])];
+    }, [texture]);
+    const { textures, isFetched } = useTextures({ keys: textureKeys });
+    const spritesheet = useMemo(() => {
+        if (isFetched) {
+            const sheet = new Spritesheet(textures[0], spritesheetJSON);
+            sheet.parse();
+            return sheet;
+        }
+        return null;
+    }, [spritesheetJSON]);
+    const sprite = useMemo(() => {
+        if (spritesheet?.animations?.[animation]) {
+            return new AnimatedSprite({ textures: spritesheet?.animations?.[animation] });
+        }
+        return null;
+    }, [texture, spritesheetJSON, animation]);
+    useObject({ object: sprite, ...options });
+    useEffect(() => {
+        if (sprite) {
+            sprite.animationSpeed = animationSpeed;
+        }
+    }, [animationSpeed, sprite?.uid]);
+    useEffect(() => {
+        if (sprite) {
+            if (isPlaying) {
+                sprite.play();
+            }
+            else {
+                sprite.stop();
+            }
+        }
+    }, [isPlaying, sprite?.uid]);
+    return sprite;
+};

package/dist/src/hooks/useCamera.d.ts

@@ -0,0 +1 @@
+export declare const useCamera: () => import("../camera").CameraContextValue;

package/dist/src/hooks/useCamera.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { CameraContext } from "../camera";
+export const useCamera = () => {
+    return useContext(CameraContext);
+};

package/dist/src/hooks/useCollisionDetection.d.ts

@@ -0,0 +1,9 @@
+import { Container } from "pixi.js";
+type UseCollisionDetectionOptions = {
+    objectA?: Container | null;
+    objectB?: Container | null;
+    isEnabled: boolean;
+    onCollide: () => void;
+};
+export declare const useCollisionDetection: ({ objectA, objectB, onCollide, isEnabled }: UseCollisionDetectionOptions) => void;
+export {};

package/dist/src/hooks/useCollisionDetection.js

@@ -0,0 +1,21 @@
+import { useTickerCallback } from "./useTickerCallback";
+import { useCallback } from "react";
+export const useCollisionDetection = ({ objectA, objectB, onCollide, isEnabled }) => {
+    const testForAABB = useCallback(() => {
+        if (!objectA || !objectB) {
+            return;
+        }
+        const bounds1 = objectA.getBounds();
+        const bounds2 = objectB.getBounds();
+        if (bounds1.x < bounds2.x + bounds2.width &&
+            bounds1.x + bounds1.width > bounds2.x &&
+            bounds1.y < bounds2.y + bounds2.height &&
+            bounds1.y + bounds1.height > bounds2.y) {
+            onCollide();
+        }
+    }, [objectA, objectB, onCollide]);
+    useTickerCallback({
+        isEnabled: isEnabled,
+        callback: testForAABB
+    });
+};

package/dist/src/hooks/useGame.d.ts

@@ -0,0 +1 @@
+export declare const useGame: () => import("../game-context").GameContextValue;

package/dist/src/hooks/useGame.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { GameContext } from "../game-context";
+export const useGame = () => {
+    return useContext(GameContext);
+};

package/dist/src/hooks/useGlobalEventHandler.d.ts

@@ -0,0 +1,5 @@
+export declare const useGlobalEventHandler: <K extends keyof DocumentEventMap>({ isEnabled, event, callback }: {
+    isEnabled?: boolean;
+    event: K;
+    callback: (e: DocumentEventMap[K]) => unknown;
+}) => void;

package/dist/src/hooks/useGlobalEventHandler.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+export const useGlobalEventHandler = ({ isEnabled = true, event, callback }) => {
+    useEffect(() => {
+        if (!isEnabled) {
+            return () => { };
+        }
+        const internalCallback = (e) => {
+            callback(e);
+        };
+        document.addEventListener(event, internalCallback);
+        return () => {
+            document.removeEventListener(event, internalCallback);
+        };
+    }, [isEnabled, event, callback]);
+};

package/dist/src/hooks/useLayerContext.d.ts

@@ -0,0 +1 @@
+export declare const useLayerContext: () => import("../layer/Layer.context").LayerContextValue;

package/dist/src/hooks/useLayerContext.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { LayerContext } from "../layer/Layer.context";
+export const useLayerContext = () => {
+    return useContext(LayerContext);
+};

package/dist/src/hooks/useObject.d.ts

@@ -0,0 +1,6 @@
+import { Sprite, SpriteOptions, TilingSprite } from "pixi.js";
+type UseObjectOptions = Omit<SpriteOptions, "texture"> & {
+    object: Sprite | TilingSprite | null;
+};
+export declare const useObject: ({ object, anchor, position, skew, scale, width, angle, alpha, visible }: UseObjectOptions) => void;
+export {};

package/dist/src/hooks/useObject.js

@@ -0,0 +1,54 @@
+import { useLayerContext } from "./useLayerContext";
+import { useEffect } from "react";
+export const useObject = ({ object, anchor, position, skew, scale, width, angle, alpha, visible = true }) => {
+    const { addObject, removeObject } = useLayerContext();
+    useEffect(() => {
+        if (!object) {
+            return;
+        }
+        addObject(object);
+        return () => {
+            removeObject(object);
+        };
+    }, [object?.uid]);
+    useEffect(() => {
+        if (anchor !== undefined && object) {
+            object.anchor = anchor;
+        }
+    }, [anchor, object?.uid]);
+    useEffect(() => {
+        if (angle !== undefined && object) {
+            object.angle = angle;
+        }
+    }, [angle, object?.uid]);
+    useEffect(() => {
+        if (object && position !== undefined) {
+            object.position = position;
+        }
+    }, [position, object?.uid]);
+    useEffect(() => {
+        if (object && skew !== undefined) {
+            object.skew = skew;
+        }
+    }, [skew, object?.uid]);
+    useEffect(() => {
+        if (object && alpha !== undefined) {
+            object.alpha = alpha;
+        }
+    }, [alpha, object?.uid]);
+    useEffect(() => {
+        if (object && scale !== undefined) {
+            object.scale = scale;
+        }
+    }, [scale, object?.uid]);
+    useEffect(() => {
+        if (object) {
+            object.visible = visible;
+        }
+    }, [visible, object?.uid]);
+    useEffect(() => {
+        if (object && width !== undefined) {
+            object.width = width;
+        }
+    }, [width, object?.uid]);
+};

package/dist/src/hooks/useSprite.d.ts

@@ -0,0 +1,6 @@
+import { Sprite, SpriteOptions } from "pixi.js";
+type UseSpriteOptions = Omit<SpriteOptions, "texture"> & {
+    texture: string;
+};
+export declare const useSprite: ({ texture, ...options }: UseSpriteOptions) => Sprite | null;
+export {};

package/dist/src/hooks/useSprite.js

@@ -0,0 +1,21 @@
+import { useMemo } from "react";
+import { Sprite } from "pixi.js";
+import { useTextures } from "./useTexture";
+import { useObject } from "./useObject";
+export const useSprite = ({ texture = "", ...options }) => {
+    const textureKeys = useMemo(() => {
+        return [...(texture ? [texture] : [])];
+    }, [texture]);
+    const { isFetched } = useTextures({ keys: textureKeys });
+    const sprite = useMemo(() => {
+        if (!isFetched) {
+            return null;
+        }
+        if (texture) {
+            return Sprite.from(texture);
+        }
+        return new Sprite({});
+    }, [texture, frames, isFetched]);
+    useObject({ object: sprite, ...options });
+    return sprite;
+};

package/dist/src/hooks/useStage.d.ts

@@ -0,0 +1 @@
+export declare const useStage: () => import("../stage/Stage.context").StageContextValue;

package/dist/src/hooks/useStage.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { StageContext } from "../stage/Stage.context";
+export const useStage = () => {
+    return useContext(StageContext);
+};

package/dist/src/hooks/useTexture.d.ts

@@ -0,0 +1,9 @@
+import { Texture } from "pixi.js";
+export declare const useTextures: ({ keys }: {
+    keys?: string[];
+}) => {
+    textures: Texture<import("pixi.js").TextureSource<any>>[];
+    isFetched: boolean;
+    isFetching: boolean;
+    isError: boolean;
+};

package/dist/src/hooks/useTexture.js

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import { useAssetManager } from "../assets-manager";
+export const useTextures = ({ keys = [] }) => {
+    const { getAsset, isFetched, isFetching, isError } = useAssetManager();
+    const textures = useMemo(() => {
+        return isFetched ? keys.map((key) => getAsset(key)) : [];
+    }, [keys, isFetched, isFetching, isError]);
+    return useMemo(() => ({
+        textures: textures,
+        isFetched,
+        isFetching,
+        isError
+    }), [textures, isFetched, isError, isFetching]);
+};

package/dist/src/hooks/useTickerCallback.d.ts

@@ -0,0 +1,5 @@
+import { TickerCallback } from "pixi.js";
+export declare const useTickerCallback: <T = unknown>({ isEnabled, callback }: {
+    isEnabled?: boolean;
+    callback: TickerCallback<T>;
+}) => void;

package/dist/src/hooks/useTickerCallback.js

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useWorld } from "../hooks";
+export const useTickerCallback = ({ isEnabled = true, callback }) => {
+    const { application, isInitialized } = useWorld();
+    useEffect(() => {
+        if (!isInitialized || !isEnabled) {
+            return;
+        }
+        application.ticker.add(callback);
+        return () => {
+            application.ticker.remove(callback);
+        };
+    }, [isEnabled, application, isInitialized, callback]);
+};

package/dist/src/hooks/useTilingSprite.d.ts

@@ -0,0 +1,6 @@
+import { TilingSpriteOptions, TilingSprite } from "pixi.js";
+type UseTilingSpriteOptions = Omit<TilingSpriteOptions, "texture"> & {
+    texture: string;
+};
+export declare const useTilingSprite: ({ texture, tilePosition, ...options }: UseTilingSpriteOptions) => TilingSprite | null;
+export {};

package/dist/src/hooks/useTilingSprite.js

@@ -0,0 +1,26 @@
+import { useEffect, useMemo } from "react";
+import { TilingSprite } from "pixi.js";
+import { useTextures } from "./useTexture";
+import { useObject } from "./useObject";
+export const useTilingSprite = ({ texture = "", tilePosition, ...options }) => {
+    const textureKeys = useMemo(() => {
+        return [...(texture ? [texture] : [])];
+    }, [texture]);
+    const { isFetched } = useTextures({ keys: textureKeys });
+    const sprite = useMemo(() => {
+        if (!isFetched) {
+            return null;
+        }
+        if (texture) {
+            return TilingSprite.from(texture);
+        }
+        return new TilingSprite({});
+    }, [texture, frames]);
+    useObject({ object: sprite, ...options });
+    useEffect(() => {
+        if (tilePosition && sprite) {
+            sprite.tilePosition = tilePosition;
+        }
+    }, [tilePosition, sprite?.uid]);
+    return sprite;
+};

package/dist/src/hooks/useWorld.d.ts

@@ -0,0 +1 @@
+export declare const useWorld: () => import("../world/World.context").WorldContextValue;

package/dist/src/hooks/useWorld.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { WorldContext } from "../world/World.context";
+export const useWorld = () => {
+    return useContext(WorldContext);
+};

package/dist/src/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./game-context";
+export * from "./assets-manager";
+export * from "./world";
+export * from "./camera";
+export * from "./layer";
+export * from "./assets-manager";
+export * from "./game-objects";
+export * from "./physics";
+export * from "./types";
+export * from "./hooks";

package/dist/src/index.js

@@ -0,0 +1,10 @@
+export * from "./game-context";
+export * from "./assets-manager";
+export * from "./world";
+export * from "./camera";
+export * from "./layer";
+export * from "./assets-manager";
+export * from "./game-objects";
+export * from "./physics";
+export * from "./types";
+export * from "./hooks";

package/dist/src/layer/Layer.context.d.ts

@@ -0,0 +1,6 @@
+import { Container } from "pixi.js";
+export type LayerContextValue = {
+    addObject: (body: Container) => void;
+    removeObject: (body: Container) => void;
+};
+export declare const LayerContext: import("react").Context<LayerContextValue>;

package/dist/src/layer/Layer.context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const LayerContext = createContext({});

package/dist/src/layer/Layer.d.ts

@@ -0,0 +1,6 @@
+import React, { PropsWithChildren } from "react";
+import { ContainerOptions } from "pixi.js";
+export type LayerOptions = {
+    options?: Omit<ContainerOptions, "parent">;
+};
+export declare const Layer: React.FC<PropsWithChildren & LayerOptions>;

package/dist/src/layer/Layer.js

@@ -0,0 +1,34 @@
+import React, { useCallback, useContext, useEffect, useMemo } from "react";
+import { Container } from "pixi.js";
+import { StageContext } from "../stage/Stage.context";
+import { LayerContext } from "./Layer.context";
+export const Layer = ({ options, children }) => {
+    const { addObject: addObjectIntoStage, removeObject: removeObjectFromStaeg } = useContext(StageContext);
+    const { addObject: addObjectIntoParent, removeObject: removeObjectFromParent } = useContext(LayerContext);
+    const container = useMemo(() => {
+        return new Container(options);
+    }, [options]);
+    useEffect(() => {
+        if (addObjectIntoParent) {
+            addObjectIntoParent(container);
+            return () => {
+                removeObjectFromParent(container);
+            };
+        }
+        addObjectIntoStage(container);
+        return () => {
+            removeObjectFromStaeg(container);
+        };
+    }, [container?.uid]);
+    const addObject = useCallback((thing) => {
+        container.addChild(thing);
+    }, [container?.uid]);
+    const removeObject = useCallback((thing) => {
+        container.removeChild(thing);
+    }, [container?.uid]);
+    const conextValue = useMemo(() => ({
+        addObject,
+        removeObject
+    }), [container?.uid]);
+    return React.createElement(LayerContext.Provider, { value: conextValue }, children);
+};

package/dist/src/layer/index.d.ts

@@ -0,0 +1 @@
+export * from "./Layer";

package/dist/src/layer/index.js

@@ -0,0 +1 @@
+export * from "./Layer";

package/dist/src/physics/MatterPhysics.context.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from "react";
+import { MatterPhysicsConfig, MatterPhysics } from "./types";
+export type MatterPhysicsContextProviderOptions = {
+    isRunning?: boolean;
+    config: MatterPhysicsConfig;
+};
+export declare const MatterPhysicsContext: React.Context<MatterPhysics>;
+export declare const MatterPhysicsContextProvider: React.FC<PropsWithChildren & MatterPhysicsContextProviderOptions>;

package/dist/src/physics/MatterPhysics.context.js

@@ -0,0 +1,74 @@
+import React, { createContext, useEffect, useMemo, useRef, useState } from "react";
+import { Engine, Runner, World } from "matter-js";
+export const MatterPhysicsContext = createContext({
+    config: {
+        world: {
+            width: 480,
+            height: 320
+        }
+    },
+    engine: Engine.create(),
+    runner: Runner.create(),
+    run: () => { },
+    stop: () => { },
+    addBody: () => { },
+    removeBody: () => { }
+});
+export const MatterPhysicsContextProvider = ({ isRunning = false, children, config = { world: { width: 480, height: 320 } } }) => {
+    const isRunningRef = useRef(false);
+    const [localConfig] = useState(config);
+    const world = useMemo(() => {
+        return World.create({
+            bounds: {
+                min: { x: 0, y: 0 },
+                max: { x: config.world.width, y: config.world.height }
+            }
+        });
+    }, [config.world]);
+    const engine = useMemo(() => {
+        return Engine.create({
+            world
+        });
+    }, [world]);
+    const runner = useMemo(() => Runner.create(), []);
+    const addBody = (body) => {
+        if (engine?.world) {
+            World.add(engine?.world, body);
+        }
+    };
+    const removeBody = (body) => {
+        if (engine?.world) {
+            World.remove(engine?.world, body);
+        }
+    };
+    const run = () => {
+        if (!isRunningRef.current) {
+            Runner.run(runner, engine);
+            isRunningRef.current = true;
+        }
+    };
+    const stop = () => {
+        if (isRunningRef.current) {
+            Runner.stop(runner);
+            isRunningRef.current = false;
+        }
+    };
+    const conextValue = useMemo(() => ({
+        config: localConfig,
+        runner,
+        engine,
+        run,
+        stop,
+        addBody,
+        removeBody
+    }), [runner, engine, localConfig]);
+    useEffect(() => {
+        if (isRunning) {
+            run();
+        }
+        return () => {
+            stop();
+        };
+    }, [isRunning]);
+    return React.createElement(MatterPhysicsContext.Provider, { value: conextValue }, children);
+};

package/dist/src/physics/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./MatterPhysics.context";
+export * from "./useCollisionEventHandler";
+export * from "./usePhysicsTickerCallback";
+export * from "./usePhysicsEngineEventHandler";

package/dist/src/physics/index.js

@@ -0,0 +1,4 @@
+export * from "./MatterPhysics.context";
+export * from "./useCollisionEventHandler";
+export * from "./usePhysicsTickerCallback";
+export * from "./usePhysicsEngineEventHandler";

package/dist/src/physics/types.d.ts

@@ -0,0 +1,24 @@
+import Matter from "matter-js";
+export type MatterPhysicsDebugConvexHullConfig = {
+    strokeColor?: string;
+    strokeWidth?: number;
+};
+export type MatterPhysicsConfig = {
+    world: {
+        width: number;
+        height: number;
+    };
+    debug?: {
+        convexHull?: MatterPhysicsDebugConvexHullConfig;
+        showConvexHull?: boolean;
+    };
+};
+export type MatterPhysics = {
+    readonly config: MatterPhysicsConfig;
+    readonly runner: Matter.Runner;
+    readonly engine: Matter.Engine;
+    run: () => void;
+    stop: () => void;
+    addBody: (body: Matter.Body | Matter.Composite) => void;
+    removeBody: (body: Matter.Body | Matter.Composite) => void;
+};

package/dist/src/physics/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/physics/useCollisionEventHandler.d.ts

@@ -0,0 +1,7 @@
+import { ICollisionCallback } from "matter-js";
+export type UseCollisionEventHandlerOptions = {
+    isEnabled?: boolean;
+    event: "collisionActive" | "collisionEnd" | "collisionStart";
+    callback: ICollisionCallback;
+};
+export declare const useCollisionEventHandler: ({ isEnabled, event, callback }: UseCollisionEventHandlerOptions) => void;

package/dist/src/physics/useCollisionEventHandler.js

@@ -0,0 +1,15 @@
+import { useEffect, useContext } from "react";
+import { Events } from "matter-js";
+import { MatterPhysicsContext } from "./MatterPhysics.context";
+export const useCollisionEventHandler = ({ isEnabled = true, event, callback }) => {
+    const { engine } = useContext(MatterPhysicsContext);
+    useEffect(() => {
+        if (!isEnabled) {
+            return () => { };
+        }
+        Events.on(engine, event, callback);
+        return () => {
+            Events.off(engine, event, callback);
+        };
+    }, [isEnabled, callback, event]);
+};

package/dist/src/physics/usePhysicsEngineEventHandler.d.ts

@@ -0,0 +1,8 @@
+import { IEngineCallback } from "matter-js";
+type UsePhysicsEngineEventHandlerOptions = {
+    isEnabled?: boolean;
+    event: "beforeUpdate" | "afterUpdate";
+    callback: IEngineCallback;
+};
+export declare const usePhysicsEngineEventHandler: ({ isEnabled, event, callback }: UsePhysicsEngineEventHandlerOptions) => void;
+export {};

package/dist/src/physics/usePhysicsEngineEventHandler.js

@@ -0,0 +1,15 @@
+import { useEffect, useContext } from "react";
+import { Events } from "matter-js";
+import { MatterPhysicsContext } from "./MatterPhysics.context";
+export const usePhysicsEngineEventHandler = ({ isEnabled = true, event, callback }) => {
+    const { engine } = useContext(MatterPhysicsContext);
+    useEffect(() => {
+        if (!isEnabled) {
+            return () => { };
+        }
+        Events.on(engine, event, callback);
+        return () => {
+            Events.off(engine, event, callback);
+        };
+    }, [isEnabled, event, callback]);
+};

package/dist/src/physics/usePhysicsTickerCallback.d.ts

@@ -0,0 +1,7 @@
+import { IRunnerCallback } from "matter-js";
+type UsePhysicsTickerCallbackOptions = {
+    isEnabled?: boolean;
+    callback: IRunnerCallback;
+};
+export declare const usePhysicsTickerCallback: ({ isEnabled, callback }: UsePhysicsTickerCallbackOptions) => void;
+export {};

package/dist/src/physics/usePhysicsTickerCallback.js

@@ -0,0 +1,15 @@
+import { useEffect, useContext } from "react";
+import { Events } from "matter-js";
+import { MatterPhysicsContext } from "./MatterPhysics.context";
+export const usePhysicsTickerCallback = ({ isEnabled = true, callback }) => {
+    const { runner } = useContext(MatterPhysicsContext);
+    useEffect(() => {
+        if (!isEnabled) {
+            return () => { };
+        }
+        Events.on(runner, "tick", callback);
+        return () => {
+            Events.off(runner, "tick", callback);
+        };
+    }, [isEnabled, callback]);
+};

package/dist/src/stage/Stage.context.d.ts

@@ -0,0 +1,6 @@
+import { Container } from "pixi.js";
+export type StageContextValue = {
+    addObject: (body: Container) => void;
+    removeObject: (body: Container) => void;
+};
+export declare const StageContext: import("react").Context<StageContextValue>;

package/dist/src/stage/Stage.context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const StageContext = createContext({});

package/dist/src/stage/Stage.d.ts

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from "react";
+export declare const Stage: React.FC<PropsWithChildren>;