Pixi-fusion NPM

pixi-fusion - The lightweight Game Engine

This project aims to provide a frwmework for games built on top of PixiJS and matter-js.

It is designed to be used with React framework v18.2.0 or above.

Installation

npm i --save pixi-fusion

Basic Usage Example

Create a component with GameContextProvider and Stage.

<GameContextProvider timeout={10}>
    <World size={{width: 300, height: 300}} eventMode="dynamic">
        <Layer>
            <MyAwesomeStage />
        </layer>
    </World>
</GameContextProvider>

Create a component MyAwesomeStage.

export const MyAwesomeStage: React.FC<MazeHeroProps> = () => {
    const { status } = useGame();
    const displayObjectConfig = useMemo(
        () => ({
            type: DisplayObjectType.SPRITE,
            url: "https://image_url",
            anchor: { x: 0.5, y: 0.5 },
        }),
        []
    );

    const [position, setPosition] = useState({x: 0, y: 0});

    useDisplayObject({
        ...displayObjectConfig,
        position: position
    });

    const onKeyDown = useCallback(
        (e: KeyboardEvent) => {
            switch (e.key) {
                case "ArrowUp":
                    setPosition({x: position.x, y: position.y - 1})
                    break;
                case "ArrowDown":
                    setPosition({x: position.x, y: position.y + 1})
                    break;
                case "ArrowRight":
                    setPosition({x: position.x + 1, y: position.y})
                    setDirection(90);
                    break;
                case "ArrowLeft":
                    setPosition({x: position.x - 1, y: position.y})
                    break;
                default:
                    break;
            }
        },
        [position]
    );

    useGlobalEventHandler({ event: "keydown", callback: onKeyDown, isEnabled: status === GameStatus.IN_PROGRESS });

    return null;
};

Contribution guidelines

You are encouraged to contribute to this project as soon as you see any defects or issues.

Code Editor Configuration

This monorepo contains configuration for VSCode editor. It doesn't mean that you cannot use a different tool. Feel free to push configurations for your favourite code editor.