PixiJS学习 基础概念

介绍

 

• 简介
  Pixi是一款速度极快的2D Sprite渲染引擎。那是什么意思？这意味着它可以帮助您显示，制作和管理交互式图形，以便使用JavaScript和其他HTML5技术轻松制作动画，游戏和一些其他应用程序。
  Pixi.js 是一个开源的HTML5 2D 渲染引擎，使用 WebGL 实现，不支持的浏览器会自动降低到 Canvas 实现。PixiJS 的目标是提供一个快速且轻量级的2D库，并能兼容所有设备。此外，让开发者无需了解WebGL，就可以感受到硬件加速的力量。
• 安装
  Pixi同jquery一样是库文件，因此只需要和jquery一样引入就好。

<script src="./lib/pixi.min.js"></script>

 

基础概念

 

• 舞台（stage）
  A Stage represents the root of the display tree. Everything connected to the stage is rendered.
  舞台是整个树形展示结构的最底层。 所有要渲染的对象都必须连接到舞台中才能被显示出来。
  舞台相当于所有渲染对象的承载体或者说是根。如果需要渲染某一个对象或者物体，就必须将它添加到舞台上。如果改变某个对象的属性，在画布上的效果将会被重新渲染，获得刷新，展示出新的状态。
• 画布（renderer）
  选用canvas或webGL进行渲染的一个区域
  可以简单的理解为就是那个canvas标签
• 纹理 （texture）
  A texture stores the information that represents an image or part of an image. It cannot be added to the display list directly. Instead use it as the texture for a Sprite.
  纹理存储代表图像或图像一部分的信息。 它不能直接添加到舞台上显示。 而是将其用作精灵的纹理。
  可以理解成一种承载图片的结构，它本身不能直接用于显示，需要通过精灵(sprite)才能显示
• 精灵（sprite）
  The Sprite object is the base for all textured objects that are rendered to the screen.
  Sprite对象是将所有纹理对象渲染到屏幕上的基础。
  可以直接用于舞台显示的对象,可以理解为DOM中的element. 精灵可以直接用图片创建，也可以先创建材质，再用材质创建精灵
• 断续器（ticker）
  A Ticker class that runs an update loop that other objects listen to. This class is composed around listeners meant for execution on the next requested animation frame. Animation frames are requested only when necessary, e.g. When the ticker is started and the emitter has listeners.
  一个Ticker类，运行其他对象监听的更新循环。 该类由围绕侦听器组成，用于在下一个请求的动画帧上执行。 仅在必要时才请求动画帧，例如 当ticker启动并且发射器有听众时。
  一个类似于计时器的存在。