pixi-viewport
pixi-viewport copied to clipboard
Published
20 hours ago •
davidfig
davidfig
Viewport is not a constructor
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>
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.
