PIXI.js 学习（二）

今天继续学习PIXI.js吧，  虽然已经很晚了。。

PIXI.js 的主要组件分为

Renderer
@pixi/core

PIXI.js 的核心组件，渲染 scene graph 到屏幕上，底层默认使用 WebGL 渲染器渲染

Container
@pixi/display

主要的显示对象，会创建一个 scene graph：一个可渲染的对象树，比如 sprites， graphics 和 text

Loader
@pixi/loader

提供了一组用来异步加载资源文件的工具，音视频，图片资源等

Ticker
@pixi/ticker

提供了基于时钟的周期性回调，你的游戏更新逻辑将会在每一帧执行，你可以同时使用多个tickers

Application
@pixi/app

一个简单的封装帮助类，封装了Loader，Ticker 和 Renderer到一个地方已方便使用。非常适合快速搭建原型和构建简单的项目

Interaction
@pixi/interaction

PIXI.js 支持触摸和基于鼠标的交互，使对象可以触发点击，悬浮等事件

Accessibility
@pixi/accessibility

支持键盘访问，可访问性，屏幕阅读器

Ok, 大致了解了框架中最主要的几个组件，那下面开始学习一些基础的东西

Container 的使用

Container 类提供了简单的显示对象。就像他的名字一样，他可以有多个 child 对象，除了这个用处之外，还有其他的几个用处：

用 Container 作为 Group 来使用

你可以使用 Container 来创建父子层级的显示对象。

当然，这样做不算是一个好的办法

单一的 Container 渲染起来非常的廉价，并且会有一个正确的层级
正确的使用 Container 会使代码将来非常的易于维护，不妨说你 Container 维护了一组对象， 如果Container中加入了新的显示对象， 就不需要去修改这个 Container 相关的逻辑， 想想，如果不用Container ，
是不是每增加或者减少一个显示对象都要去相应的修改该对象的显示逻辑呢？想想还是挺有用的！

So， 这就是 Container 的最主要用法之一了

遮罩

另一个主要的用途是用作遮罩，Container 可以指定他的mask属性，并给他一个Rect对象，那么只有在这个rect中的children才会被显示，所有超出Rect之外的内容将不会被渲染出来。
当然，我们也可以移动Container中的内容来实现内容的滚动。（这个听起来不错，感觉可以用来做横向卷轴游戏?）

两种简单的mask
一种是使用Graphics，一种是Sprites，
Graphics很强大，可以画矢量图形，但是不支持anti-aliasing
Sprites支持anti-aliasing，可以加载图片资源，支持alpha通道

滤镜

还有一个重要的作用是作为一个滤镜容器，为内部元素提供各种滤镜效果。
滤镜是一种更高级的效果，仅可以在WebGL渲染器使用，可以制作出模糊，位移等效果
为一个Container设置filter效果，当Container中内容被选然后，将于应用在Container之上

几种滤镜

AlphaFilter
@pixi/filter-alpha

类似alpha属性，但是会同时应用到Container上

BlurFilter
@pixi/filter-blur

模糊滤镜

ColorMatrixFilter
@pixi/filter-color-matrix

有点高级啊，这个。  可以用来设置 tints or color transforms

DisplacementFilter
@pixi/filter-displacement

这个感觉挺有用，  用来做位移效果，  比如说波浪效果

FXAAFilter
@pixi/filter-fxaa

反锯齿滤镜

NoiseFilter
@pixi/filter-noise

随机生成噪点，这个暂时倒是没想到有什么用

注意事项：应该谨慎使用滤镜效果，因为会降低程序性能，如果用的频率较高则会提高内存使用

明天继续吧，困了，  睡觉