Pixi'VN - Minigiochi

Guida all'integrazione di minigiochi in Pixi'VN, incluse le best practice, la gestione del ciclo di vita e implementazioni di esempio utilizzando PixiJS e React.

Modifica su GitHub Traduci su Crowdin

Il bello di una storia interattiva rispetto al testo normale è che puoi prenderti una pausa e interagire con i minigiochi correlati alla storia.

I minigiochi nelle visual novel vengono solitamente avviati durante la narrazione. Per passare dall'interfaccia utente narrativa a quella del minigioco, si consiglia di collegare il minigioco a una route (ad esempio, "/minigame") e di accedervi dalla storia. Ulteriori informazioni sono disponibili qui.

Ecco alcuni consigli:

Use components provided by the @drincs/pixi-vn/pixi.js submodule, such as Graphics, Sprite, and Text, to create your minigame. @drincs/pixi-vn/pixi.js is the PixiJS import, so you can use all its features.
Utilizza PixiJS Layers per creare un livello separato per il tuo minigioco. Ciò consente di gestire il minigioco in modo indipendente dall'interfaccia principale della visual novel.
Use the Ticker class to manage the game loop and update the game state.
Utilizzare window.addEventListener per gestire l'input dell'utente, ad esempio gli eventi della tastiera o del mouse.
Utilizza elementi HTML per creare l'interfaccia utente, come pulsanti, visualizzazioni dei punteggi e messaggi di fine partita.
Se utilizzi i layer PixiJS, ricorda che Pixi'VN non salva lo stato dei layer, quindi dovrai gestire tu stesso lo stato del minigioco. Salva lo stato in una variabile e ripristinalo quando il minigioco ricomincia.

useMinigame è un hook personalizzato che ti aiuta a gestire il ciclo di vita di un minigioco, inclusi l'avvio, l'aggiornamento e la pulizia delle risorse. È presente in tutti i template.

Ad esempio:

import { Layer } from "@drincs/pixi-vn";
import { Graphics, Ticker } from "@drincs/pixi-vn/pixi.js";
import { useCallback, useMemo, useRef, useState } from "react";
import useMinigame from "../hooks/useMinigame";

export default function MiniGame() {
    const ticker = useMemo(() => new Ticker(), []);
    const [displayScore, setDisplayScore] = useState(0);
    const [gameOver, setGameOver] = useState(false);

    const onKeyDown = useCallback((e: KeyboardEvent) => {
        // Handle key down events for game controls
    }, []);

    const game = useCallback(
        (layer: Layer) => {
            const endGame = () => {
                ticker.stop();
                setGameOver(true);
            };

            window.addEventListener("keydown", onKeyDown);

            ticker.add(({ deltaMS }) => {
                // Update game logic here
            });
            ticker.start();
        },
        [ticker] // They must not be changed during the game otherwise the game will restart
    );

    const options = useMemo(
        () => ({
            onExit() {
                ticker.stop();
                ticker.destroy();
                window.removeEventListener("keydown", onKeyDown);
            },
        }),
        [ticker, onKeyDown] // They must not be changed during the game otherwise the game will restart
    );

    const { loading } = useMinigame(game, options);

    return (
        <>
            <div
                style={{
                    position: "absolute",
                    top: 10,
                    left: 10,
                    color: "white",
                    fontSize: "24px",
                    background: "rgba(0,0,0,0.5)",
                    padding: "5px 10px",
                    borderRadius: "5px",
                }}
            >
                Score: {displayScore}
            </div>

            {gameOver && (
                <div
                    style={{
                        position: "absolute",
                        top: "50%",
                        left: "50%",
                        transform: "translate(-50%, -50%)",
                        color: "red",
                        fontSize: "48px",
                        background: "rgba(0,0,0,0.7)",
                        padding: "20px 40px",
                        borderRadius: "10px",
                    }}
                >
                    GAME OVER
                </div>
            )}
        </>
    );
}

Qui trovi alcuni esempi:

Il team di Pixi’VN accoglie con favore nuove proposte e contributi per rendere questa biblioteca ancora più completa. Puoi creare una discussione per condividere o proporre le tue implementazioni di minigiochi.

Minigiochi

Snake