# 创建Pixi应用和stage

现在我们来使用Pixi。

第一步是使用Pixi上的Application对象创建一个矩形显示区域。 它会自动生成一个HTML <canvas>元素,然后在canvas画布上显示图像。 之后,您需要创建一个称为stage(舞台)的特殊Pixi容器对象。 就像您将在后面看到的那样,该舞台对象将根容器来保存您希望Pixi显示的东西。

下面是创建Pixi应用程序和stage(舞台)需要编写的代码。将此代码添加到<script>标记之间的HTML文档中

//Create a Pixi Application
let app = new PIXI.Application({width: 256, height: 256});

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

这是开始使用Pixi所需要编写的最基本的代码。它会在你的HTML页面上生成一个256像素×256像素的黑色canvas元素。下面是在浏览器中运行这段代码时的情况。

没错,就是一个黑色方块!

PIXI.Application会自动选择使用Canvas或者是WebGL来渲染图形,这取决于您的浏览器支持情况。PIXI.Application有一个options对象。在本例中,它的widthheight属性用来设置Canvas画布的宽度和高度(以像素为单位)。您可以在这个options对象中设置更多的可选属性;下面是如何使用它来设置反锯齿,透明度和分辨率。

let app = new PIXI.Application({ 
    width: 256,         // default: 800 宽度
    height: 256,        // default: 600 高度
    antialias: true,    // default: false 反锯齿
    transparent: false, // default: false 透明度
    resolution: 1       // default: 1 分辨率
  }
);
1
2
3
4
5
6
7
8

如果您需要修改Pixi的默认配置,请参阅Pixi.application文档。

这些选项有什么用?antialias使字体和图形边缘更加平滑。(WebGL的抗锯齿并不是在所有的平台上都可用,所以你需要在你的游戏目标平台上进行测试。)transparent使canvas背景透明。resolution用于不同分辨率和像素密度下。设置分辨率超出了本教程的范围,你可以在Mat Grove's explanation (opens new window)了解详细用法。通常,resolution默认设置为1就可以了。

因为WebGL非常快,所以Pixi的renderer对象将默认为WebGL。如果您想使用canvas绘图API,可以将forceCanvas选项设置为true,如下所示:

forceCanvas: true,
1

如果创建画布后需要更改背景颜色,请将app.renderer对象的backgroundColor属性设置为十六进制颜色值:

app.renderer.backgroundColor = 0x061639;
1

如果您想查看渲染器的宽度或高度,请使用app.renderer.view.widthapp.renderer.view.height

要更改画布的大小,请使用rendererresize方法,并提供任何新的widthheight值。但是,为了确保画布的大小调整到与分辨率匹配,请将autoResize设置为true

app.renderer.autoResize = true;
app.renderer.resize(512, 512);
1
2

如果您想让canvas画布填充整个窗口,您可以应用下面的CSS样式并将渲染器的大小调整到浏览器窗口的大小。

app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);
1
2
3
4

另外,请确保所有HTML元素的默认内边距和边距设置为0:

<style>* {padding: 0; margin: 0}</style>
1

如果希望画布按比例缩放到任何浏览器窗口大小,可以使用这个自定义的scaleToWindow函数 (opens new window)

lastUpdate: 11/16/2021, 6:11:55 AM