我试图设置一个简单的例子,即 pixi-viewport. 它与Pixi.js一起工作得很好,但即使找到了pixi-viewport的脚本(viewport.js),我也得到了。
Uncaught TypeError.Viewport is not a constructor: Viewport不是一个构造函数
这是HTML文件。
<!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 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
});
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
})
// add the viewport to the stage
app.stage.addChild(viewport)
</script>
</body>
</html>
原来自从Pixi v5之后,直接访问window.Viewport的功能已经被拔除了。
你需要使用某种构建系统(如parcel、rollup、webpack等)。这样可以让你从npm拉入库,让你的生活更轻松。