PixiJS 基础 - 是什么

So what exactly is PixiJS? At its heart, PixiJS is a rendering system that uses WebGL (or optionally Canvas) to display images and other 2D visual content. It provides a full scene graph (a hierarchy of objects to render), and provides interaction support to enable handling click and touch events. It is a natural replacement for Flash in the modern HTML5 world, but provides better performance and pixel-level effects that go beyond what Flash could achieve. It is perfect for online games, educational content, interactive ads, data visualization… any web-based application where complex graphics are important. And coupled with technology such as Cordova and Electron, PixiJS apps can be distributed beyond the browser as mobile and desktop applications.
Here’s what else you get with PixiJS:

PixiJS 到底是什么呢?PixiJS的核心是一个渲染系统,它使用WebGL(或可选的画布)来显示图像和其他2D视觉内容。它提供了完整的场景图(渲染的对象层次),并提供了交互支持,以支持处理单击和触摸事件。在现代HTML5世界中,它是Flash的天然替代品,但它提供了更好的性能和像素级效果,超出了Flash所能实现的范围。它非常适合在线游戏、教育内容、交互式广告、数据可视化等等任何基于 Web 并且注重复杂图形的应用程序。再加上Cordova和Electron等技术,PixiJS应用程序可以作为移动和桌面应用程序分发到浏览器之外。

以下是你使用 PixiJS 可以得到的其他东西:

PixiJS 是快速的

One of the major features that distinguishes PixiJS from other web-based rendering solutions is speed. From the ground up, the render pipeline has been built to get the most performance possible out of your users’ browsers. Automatic sprite and geometry batching, careful use of WebGL resources, a tight scene graph - no matter your application, speed is valuable, and PixiJS has it to spare.

PixiJS与其他基于web的渲染解决方案的主要区别之一是速度。从根本上,构建了渲染管道来尽可能提高用户浏览器的性能。自动化的 sprite 和 批量 geometry,谨慎使用WebGL资源,紧凑场景图,无论您的应用程序是什么,速度都是有价值的,而PixiJS也有多余的。

不仅有Sprites

Drawing images on a page can be handled with HTML5 and the DOM, so why use PixiJS? Beyond performance, the answer is that PixiJS goes well beyond simple images. Draw trails and tracks with SimpleRope. Draw polygons, lines, circles and other primitives with Graphics. Text provides full text rendering support that’s just as performant as sprites. And even when drawing simple images, PixiJS natively supports spritesheets for efficient loading and ease of development.

在页面上绘制图像可以用HTML5和DOM处理,那么为什么要使用PixiJS呢?除了性能之外,答案是PixiJS远远超出了简单的图像。使用 SimpleRope 可以绘制轨迹和轨迹。使用 Graphics 绘制多边形、直线、圆和其他基本体。Text 提供与 Sprite 一样性能的全文呈现支持。即使在绘制简单图像时,PixiJS本身也支持spritesheets,以实现高效加载和易于开发。

WebGL 支持

WebGL is the JavaScript API for accessing users’ GPUs for fast rendering and advanced effects. PixiJS leverages WebGL to display thousands of moving sprites efficiently even on mobile devices. But using WebGL offers more than just speed. By using the Filter class, you can write shader programs (or use pre-built ones!) to achieve displacement maps, blurring, and other advanced visual effects that cannot be accomplished with just the DOM or Canvas APIs.
WebGL是用于访问用户GPU以实现快速渲染和高级效果的JavaScript API。PixiJS利用WebGL高效地显示数千个移动精灵,即使在移动设备上也是如此。但使用WebGL提供的不仅仅是速度。通过使用 Filter 类,您可以编写着色器程序(或使用预构建的程序!)实现置换贴图、模糊和其他仅使用DOM或Canvas API无法实现的高级视觉效果。

开源

Want to understand how the engine works? Trying to track down a bug? Been burned by closed-source projects going dark? With PixiJS, you get a mature project with full source code access. We’re MIT licensed for compatibility, and hosted on GitHub for issue tracking and ease of access.

想了解引擎是如何工作的吗?试图追踪一个bug?被闭源项目搞的上火了?使用PixiJS,您可以获得一个具有完整源代码访问权限的成熟项目。我们提供 MIT 许可,并托管在GitHub上,用于问题跟踪和方便访问。

扩展

Open source helps. So does being based on JavaScript. But the real reason PixiJS is easy to extend is the clean internal API that underlies every part of the system. After years of development and 5 major releases, PixiJS is ready to make your project a success, no matter what your needs.

开源帮助。基于JavaScript也是如此。但PixiJS易于扩展的真正原因是系统每个部分都有干净的内部API。经过多年的开发和5个主要版本,PixiJS已经准备好让您的项目取得成功,无论您需要什么。

容易部署

Flash required the player. Unity requires an installer or app store. PixiJS requires… a browser. Deploying PixiJS on the web is exactly like deploying a web site. That’s all it is - JavaScript + images + audio, like you’ve done a hundred times. Your users simply visit a URL, and your game or other content is ready to run. But it doesn’t stop at the web. If you want to deploy a mobile app, wrap your PixiJS code in Cordova. Want to deploy a standalone desktop program? Build an Electron wrapper, and you’re ready to rock.

Flash需要播放器。Unity需要安装程序或应用程序商店。PixiJS需要。。。浏览器。在web上部署PixiJS与部署web站点完全一样。仅此而已-JavaScript+图像+音频,就像你已经做了一百次一样。您的用户只需访问URL,您的游戏或其他内容即可运行。但这并不局限于网络。如果您想部署移动应用程序,请将您的PixiJS代码包装在Cordova中。要部署独立桌面程序吗?制作一个电子包装器,你就可以开始浪起来了。