pixi-demo/src/Game/Game.ts

import {
    autoDetectRenderer,
    Container,
    Renderer,
    Ticker,
    Loader,
} from "pixi.js";
import detectOrient from "./detectOrient";
import { EDirection } from "@/enums";
import { initDevtools } from '@pixi/devtools';

export default class Game {
    constructor() {
        // this.init()
    }

    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: Renderer;
    private _ticker: Ticker;
    private _loader: Loader;
    private direction: EDirection = EDirection.Portrait;

    public get renderer(): Renderer {
        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,
    };

    private screenInfo() {
        const curDirection = detectOrient();
        if (curDirection === EDirection.Portrait) {
            // const width = document.documentElement.clientWidth * 1136 / 640
            // const height = document.documentElement.clientWidth
            // return {
            //     widght: height,
            //     height: width,
            // }
            const width = document.documentElement.clientWidth
            const height = document.documentElement.clientHeight
            return {
                widght: width,
                height: height,
            }
        }
        // const width = document.documentElement.clientHeight * 1136 / 640
        // const height = document.documentElement.clientHeight
        // return {
        //     widght: width,
        //     height: height,
        // }
        const width = document.documentElement.clientWidth
        const height = document.documentElement.clientHeight
        return {
            widght: width,
            height: height,
        }
    }

    getInfo() {
        return this.info;
    }

    setDirection(direction: EDirection) {
        this.direction = direction;
        this.updateView()
    }

    updateView() {
        const screenInfo = this.screenInfo()
        let screenWidght = screenInfo.widght;
        let screenHeight = screenInfo.height;
        this.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 (this.direction == EDirection.Landscape) {
            /// 强制竖屏
            if (curDirection === "landscape") {
                [screenWidght, screenHeight] = [screenHeight, screenWidght];
                this.stage.rotation = -Math.PI / 2;
                this.stage.y = screenWidght;
            } else {
                this.stage.rotation = 0;
                this.stage.y = 0;
            }
            let screenScaleRito = screenWidght / designWidth;
            this.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) {
                this.stage.rotation = 0;
                this.stage.y = 0;
                let screenScaleRito = offsetWidth / designWidth;
                this.stage.scale.set(screenScaleRito, screenScaleRito);

                this.info.width = offsetHeight / screenScaleRito;
                this.info.height = offsetWidth / screenScaleRito;
            } else {
                this.stage.rotation = -Math.PI / 2;
                this.stage.y = offsetHeight;
                let screenScaleRito = offsetWidth / designWidth;
                this.stage.scale.set(screenScaleRito, screenScaleRito);

                this.info.width = offsetHeight / screenScaleRito;
                this.info.height = offsetWidth / screenScaleRito;
            }
        }
    }

    async init() {
        const screenInfo = this.screenInfo()
        let screenWidght = screenInfo.widght;
        let screenHeight = screenInfo.height;
        const stage = new Container();
        stage.label = "root";
        let renderer = await autoDetectRenderer({
            autoDensity: true,
            width: screenWidght,
            height: screenHeight,
            antialias: true,
            backgroundAlpha: 255,
            resolution: 2,
            backgroundColor: 0x1d9ce0,
        });
        this._stage = stage;
        this._renderer = renderer;
        // https://www.cnblogs.com/haqiao/p/12515775.html
        this.renderer.resize(screenWidght, screenHeight)
        document.body.appendChild(renderer.canvas);

        window.addEventListener("resize", () => {
            this.updateView();
        });
        
        // const ticker = new Ticker();
        const ticker = Ticker.shared; // 单例
        ticker.autoStart = true;
        this._ticker = ticker;

        const loader = new Loader();
        this._loader = loader;
        
        initDevtools({ stage, renderer });
    }

    render() {
        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;
    // }
}