创建Pixi应用和 舞台

现在你可以开始使用Pixi!

但是怎么用?

第一步就是去创建一个可以显示图片的矩形显示区。Pixi拥有一个Pixi应用对象来帮助你创建它。它会自动创建一个<canvas>HTML标签并且计算出怎么去让你的图片在这个标签中显示。你现在需要创建一个特殊的Pixi容器对象,他被称作舞台。正如你所见,这个舞台对象将会被当作根容器而使用,它将包裹所有你想用Pixi显示的东西。

这里是你需要创建一个名叫app的Pixi应用对象和一个舞台的必要的代码。这些代码需要在你的HTML文档中以<script>标签包裹。

  1. //Create a Pixi Application
  2. let app = new PIXI.Application({width: 256, height: 256});
  3. //Add the canvas that Pixi automatically created for you to the HTML document
  4. document.body.appendChild(app.view);

这是你想要开始使用Pixi的最基本的代码。它在你的文档中创建了一个256像素宽高的黑色canvas标签。当你运行这个代码的时候浏览器应该显示成这样:

Basic display

啊哈, 一个 black square!

PIXI.Application算出了应该使用Canvas还是WebGL去渲染图象,它取决于你正在使用的浏览器支持哪一个。它的参数是一个被称作options的对象。在这儿例子中,它的widthheight属性已经被设置了,它们决定了canvas的宽和高(单位是像素)。你能够在options对象中使用更多的属性设置,这里展示了你如何使用它来圆滑边界,设置透明度和分辨率:

  1. let app = new PIXI.Application({
  2. width: 256, // default: 800
  3. height: 256, // default: 600
  4. antialias: true, // default: false
  5. transparent: false, // default: false
  6. resolution: 1 // default: 1
  7. }
  8. );

如果你觉得Pixi的默认设置也不错,你就不需要作任何的设置,但是如果你需要,就在这里看一下Pixi的文档吧:
PIXI.Application.

这些设置做了些什么呢?
antialias使得字体的边界和几何图形更加圆滑(WebGL的anti-aliasing在所有平台都不可用,所以你需要在你的游戏的标签平台上测试他们)。transparent将整个Canvs标签的透明度进行了设置。resolution让Pixi在不同的分辨率和像素密度的平台上运行变得简单。设置分辨率对于这个教程而言有些超纲了,到那时你可以看Mat Grove’sexplanation之中是如何使用resolution的所有细节的。但是平常,只要保持resolution是1,就可以应付大多数工程了。

Pixi的画布对象将会默认选择WebGL引擎渲染模式,它更快并且可以让你使用一些壮观的视觉特效————如果你把他们都学了。但是如果你需要强制使用Canvas引擎绘制而抛弃WebGL,你可以设置forceCanvas选项为true,像这样:

  1. forceCanvas: true,

如果你需要在你创建canvs标签之后改变它的背景色,设置 app.renderer对象的backgroundColor属性为一个任何的十六进制颜色:

  1. app.renderer.backgroundColor = 0x061639;

如果你想要去找到画布的宽高,使用app.renderer.view.widthapp.renderer.view.height

使用画布resize方法可以改变canvas的大小,提供任何新的widthheight变量给他都行。但是为了确认宽高的格式正确,将autoResize设置为true

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

如果你想让canvas占据整个窗口,你可以将这些CSS代码放在文档中,并且刷新你浏览器窗口的大小。

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

但是,如果你这么做了,要记得把padding和margin都设置成0:

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

(*这个通配符, 是CSS选择所有HTML元素的意思。)

如果你想要canvs在任何浏览器中统一尺寸,你可以使用scaleToWindow 成员函数.