pixi-demo/src/Game/Game.ts

import {
    autoDetectRenderer,
    Container,
    AbstractRenderer,
    Ticker,
    Loader,
} from "pixi.js";
import detectOrient from "./detectOrient";
import { EDirection } from "@/enmu";

export default class Game {
    constructor() {}

    private static instance: Game = new Game();
    public static getInstance(): Game {
        if (Game.instance == null) {
            Game.instance = new Game();
        }
        return Game.instance;
    }

    private _stage: Container;
    private _renderer: AbstractRenderer;
    private _ticker: Ticker;
    private _loader: Loader;

    public get renderer(): AbstractRenderer {
        return this._renderer;
    }
    public get stage(): Container {
        return this._stage;
    }

    public get ticker(): Ticker {
        return this._ticker;
    }
    public get loader(): Loader {
        return this._loader;
    }

    public info = {
        width: 0,
        height: 0,
    }

    getInfo(){
        return this.info
    }

    init(direction: EDirection = EDirection.Portrait) {
        let screenWidght = document.documentElement.clientWidth;
        let screenHeight = document.documentElement.clientHeight;
        const stage = new Container();
        stage.name = "root";
        let renderer = autoDetectRenderer({
            width: screenWidght,
            height: screenHeight,
            antialias: true,
            backgroundAlpha: 255,
            resolution: 1,
            backgroundColor: 0x1d9ce0,
            forceCanvas: true,
        });
        this._stage = stage;
        this._renderer = renderer;
        document.body.appendChild(renderer.view);

        const updateView = () => {
            let screenWidght = document.documentElement.clientWidth;
            let screenHeight = document.documentElement.clientHeight;
            renderer.resize(screenWidght, screenHeight);
            let offsetWidth = 0;
            let offsetHeight = 0;
            const curDirection = detectOrient();
            if (curDirection === EDirection.Landscape) {
                offsetWidth = screenHeight;
                offsetHeight = screenWidght;
            } else {
                offsetWidth = screenWidght;
                offsetHeight = screenHeight;
            }
            this.info.width = offsetWidth
            this.info.height = offsetHeight
            const designWidth = 750;
            if (direction == EDirection.Landscape) {
                /// 强制竖屏
                if (curDirection === "landscape") {
                    [screenWidght, screenHeight] = [screenHeight, screenWidght];
                    stage.rotation = -Math.PI / 2;
                    stage.y = screenWidght;
                } else {
                    stage.rotation = 0;
                    stage.y = 0;
                }
                let screenScaleRito = screenWidght / designWidth;
                stage.scale.set(screenScaleRito, screenScaleRito);
                // stage.position.set(0, 0);
                this.info.width = offsetWidth/screenScaleRito
                this.info.height = offsetHeight/screenScaleRito
            } else {
                /// 强制横屏
                if (curDirection === EDirection.Landscape) {
                    stage.rotation = 0;
                    stage.y = 0;
                    let screenScaleRito = offsetWidth / designWidth;
                    stage.scale.set(screenScaleRito, screenScaleRito);

                    this.info.width = offsetHeight/screenScaleRito
                    this.info.height = offsetWidth/screenScaleRito
                } else {
                    stage.rotation = -Math.PI / 2;
                    stage.y = offsetHeight;
                    let screenScaleRito = offsetWidth / designWidth;
                    stage.scale.set(screenScaleRito, screenScaleRito);
                    
                    this.info.width = offsetHeight/screenScaleRito
                    this.info.height = offsetWidth/screenScaleRito
                }
            }
        };
        updateView();
        window.addEventListener("resize", function () {
            updateView();
        });
        const ticker = new Ticker();
        ticker.autoStart = true;
        this._ticker = ticker;

        const loader = new Loader();
        this._loader = loader;
    }

    render(dt?:number){
        this.renderer.render(this.stage);
    }

    // init(): Application {
    //     let screenWidght = document.documentElement.clientWidth;
    //     let screenHeight = document.documentElement.clientHeight;
    //     const app = new Application({
    //         width: screenWidght,
    //         height: screenHeight,
    //         antialias: true,
    //         backgroundAlpha: 255,
    //         resolution: 1,
    //         backgroundColor: 0x1d9ce0,
    //     });
    //     document.body.appendChild(app.view);
    //     window.addEventListener("resize", function () {
    //         app.resizeTo = document.body;
    //     });
    //     return app;
    // }
}