davidfig / pixi-viewport

A highly configurable viewport/2D camera designed to work with pixi.js
https://davidfig.github.io/pixi-viewport/
MIT License
1.04k stars 174 forks source link

Viewport is not a constructor #230

Open phdesjardins opened 4 years ago

phdesjardins commented 4 years ago

I am trying to set a simple HTML example of pixi-viewport but a get this

Uncaught TypeError: Viewport is not a constructor

I am still using pixi V4

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello Pixi</title>
</head>
<script src="pixi/pixi.min.js"></script>
<script src="pixi/viewport.js"></script>
<body>
    <script type="text/javascript">
        let type = "WebGL"
        if(!PIXI.utils.isWebGLSupported()){
            type = "canvas"
        }

        //Aliases
        let Application = PIXI.Application,
            loader = PIXI.loader,
            resources = PIXI.loader.resources,
            Sprite = PIXI.Sprite;
            Graphics = PIXI.Graphics

        //Create a Pixi Application
        let app = new Application({
            width: 953,
            height: 409,
            backgroundColor: 0xFFFFFF
        });

        //Add the canvas that Pixi automatically created for you to the HTML document
        document.body.appendChild(app.view);

        const viewport = new Viewport({
            screenWidth: window.innerWidth,
            screenHeight: window.innerHeight,
            worldWidth: 1000,
            worldHeight: 1000,

            interaction: app.renderer.plugins.interaction // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
        })

    </script>
</body>
</html>
davidfig commented 4 years ago

I think I pulled out the direct access to window.Viewport. It used to be tied to PIXI.extras.Viewport, but w/the change to v5, I had to remove it. You should use some sort of build system (like parcel, rollup, webpack, etc.). That will let you pull the libraries in from npm and make your life easier.