Pixi.js — A 2D JavaScript Renderer

pixi.js logo

Inline docs Build Status

The aim of this project is to provide a fast lightweight 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast.

If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter (@doormat23, @rolnaaba, @bigtimebuddy, @ivanpopelyshev) and we will keep you posted! You can also check back on our site as any breakthroughs will be posted up there too!

Your support helps us make Pixi.js even better. Make your pledge on Patreon and we'll love you forever!

What to Use Pixi.js for and When to Use It

Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility.

Pixi.js has full WebGL support and seamlessly falls back to HTML5's canvas if needed. As a framework, Pixi.js is a fantastic tool for authoring interactive content, especially with the move away from Adobe Flash in recent years. Use it for your graphics rich, interactive websites, applications, and HTML5 games. Out of the box cross-platform compatibility and graceful degradation mean you have less work to do and have more fun doing it! If you want to create polished and refined experiences relatively quickly, without delving into dense, low level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some Pixi.js magic!

Boost your development and feel free to use your imagination!

Learn

  • Website: Find out more about Pixi on the offical website.
  • Getting started: Check out @kittykatattack's comprehensive tutorial.
  • Examples: Get stuck right in and play around with pixi code and features right here!
  • Docs: Get to know the Pixi API by checking out the docs.
  • Wiki: Other misc tutorials and resources are on the Wiki.

Community

Setup

It's easy to get started with Pixi.js! Simply download a prebuilt build!

Alternatively, Pixi.js can be installed with Bower, npm or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page.

Bower Install

$> bower install pixi.js

NPM Install

$> npm install pixi.js

CDN Install (via cdnjs)

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.3/pixi.min.js"></script>

Note: 4.4.3 can be replaced by any released version.

Demos

Thanks to @photonstorm for providing those last 2 examples and allowing us to share the source code :)

Contribute

Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch.

Make sure to read the Contributing Guide before submitting changes.

Current features

  • WebGL renderer (with automatic smart batching allowing for REALLY fast performance)
  • Canvas renderer (Fastest in town!)
  • Full scene graph
  • Super easy to use API (similar to the flash display list API)
  • Support for texture atlases
  • Asset loader / sprite sheet loader
  • Auto-detect which renderer should be used
  • Full Mouse and Multi-touch Interaction
  • Text
  • BitmapFont text
  • Multiline Text
  • Render Texture
  • Primitive Drawing
  • Masking
  • Filters
  • User Plugins

Basic Usage Example

// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container.
var app = new PIXI.Application();

// The application will create a canvas element for you that you
// can then insert into the DOM.
document.body.appendChild(app.view);

// load the texture we need
PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) {

    // This creates a texture from a 'bunny.png' image.
    var bunny = new PIXI.Sprite(resources.bunny.texture);

    // Setup the position of the bunny
    bunny.x = app.renderer.width / 2;
    bunny.y = app.renderer.height / 2;

    // Rotate around the center
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 0.5;

    // Add the bunny to the scene we are building.
    app.stage.addChild(bunny);

    // Listen for frame updates
    app.ticker.add(function() {
         // each frame we spin the bunny around a bit
        bunny.rotation += 0.01;
    });
});

How to build

Note that for most users you don't need to build this project. If all you want is to use pixi, then just download one of our prebuilt releases. Really the only time you should need to build pixi.js is if you are developing it.

If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm:

$> npm install

Then, to build the source, run:

$> npm run dist

This will create a minified version at dist/pixi.min.js and a non-minified version at dist/pixi.js with all the plugins in the pixi.js project.

If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those:

$> npm run dist -- --exclude extras --exclude interaction

You can also use the short-form -e:

$> npm run dist -- -e extras -e interaction -e filters

How to generate the documentation

The docs can be generated using npm:

$> npm run docs

The documentation uses Jaguar.js and the jsdoc format, the configuration file can be found at scripts/jsdoc.conf.json

License

This content is released under the (http://opensource.org/licenses/MIT) MIT License.

Analytics



Pixi.js — A 2D JavaScript Renderer

pixi.js

内联docsdata-canonical-src

这个项目的目的是提供一个快速轻量级的2D库 跨所有设备。 Pixi渲染器允许每个人都享受权力 硬件加速没有WebGL的事先知识。此外,它的速度很快。真的很快。

如果您想保持最新的pixi.js新闻,请随时关注我们 ( @ doormat23 @rolnaaba @bigtimebuddy @ivanpopelyshev ) 我们会让你发贴!您还可以查看我们的网站 任何突破都将在那里张贴!

您的支持有助于我们使Pixi.js更好。在 Patreon 上作出承诺,我们将永远爱你!

使用Pixi.js以及何时使用它

Pixi.js是一个渲染库,可以让您创建丰富的交互式图形,跨平台应用程序和游戏,而无需深入浏览WebGL API或处理浏览器和设备兼容性。

Pixi.js具有完整的 WebGL 支持,可以无缝地回溯到HTML5的画布。作为一个框架,Pixi.js是创作交互式内容的一个奇妙的工具,尤其是近年来Adobe Flash的转移。用于您的图形丰富,互动的网站,应用程序和HTML5游戏。开箱即用的跨平台兼容性和优雅的降级意味着您有更少的工作要做,更有趣的做到这一点!如果您想要相对快速地创建抛光和精致的体验,而不会深入密集,低级别的代码,同时避免浏览器不一致的头痛,然后用一些Pixi.js魔法撒上您的下一个项目!

提升您的发展速度,随时使用您的想象力!

学习

  • 网站:了解有关Pixi的更多信息,请访问官方网站
  • 入门:查看@ kittykatattack全面的教程
  • 示例:抓住pixi代码和功能,正确此处
  • 文件:通过查看文档了解Pixi API。
  • 维基:其他教程和资源是Wiki上的

社区

设置

开始Pixi.js很容易!只需下载预构建版

或者,Pixi.js可以安装 Bower npm ,或者只是使用内容传递网络(CDN)URL将Pixi.js直接嵌入到HTML页面上。

Bower Install

$> bower install pixi.js

NPM Install

$> npm install pixi.js

CDN Install (via cdnjs)

注意: 4.4.3 可以被任何发布替换

演示

感谢 @photonstorm 提供 最后两个例子,让我们分享源代码:)

贡献

想要成为pixi.js项目的一部分?大!欢迎所有人我们会快到那里 在一起:)无论你是发现一个错误,有一个伟大的功能要求,或者你喜欢拥有一个任务 从上面的路线图可以自由地联系。

请确保阅读投稿指南 提交更改之前。

当前功能

  • WebGL渲染器(具有自动智能批处理功能,实现真正快速的性能)
  • Canvas renderer(Fastest in town!)
  • 完整场景图
  • 超级易于使用的API(类似于Flash显示列表API)
  • 支持纹理地图集
  • 资源加载器/精灵片加载器
  • 自动检测应使用哪个渲染器
  • 全鼠标和多点触摸交互
  • 文字
  • BitmapFont文本
  • 多行文本
  • 渲染纹理
  • 原始绘图
  • 屏蔽
  • 过滤器
  • 用户插件

基本使用示例

// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container.
var app = new PIXI.Application();

// The application will create a canvas element for you that you // can then insert into the DOM. document.body.appendChild(app.view);

// load the texture we need PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) {

<span class="pl-c"><span class="pl-c">//</span> This creates a texture from a &#39;bunny.png&#39; image.</span>
<span class="pl-k">var</span> bunny <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">PIXI.Sprite</span>(<span class="pl-smi">resources</span>.<span class="pl-smi">bunny</span>.<span class="pl-smi">texture</span>);

<span class="pl-c"><span class="pl-c">//</span> Setup the position of the bunny</span>
<span class="pl-smi">bunny</span>.<span class="pl-c1">x</span> <span class="pl-k">=</span> <span class="pl-smi">app</span>.<span class="pl-smi">renderer</span>.<span class="pl-c1">width</span> <span class="pl-k">/</span> <span class="pl-c1">2</span>;
<span class="pl-smi">bunny</span>.<span class="pl-c1">y</span> <span class="pl-k">=</span> <span class="pl-smi">app</span>.<span class="pl-smi">renderer</span>.<span class="pl-c1">height</span> <span class="pl-k">/</span> <span class="pl-c1">2</span>;

<span class="pl-c"><span class="pl-c">//</span> Rotate around the center</span>
<span class="pl-smi">bunny</span>.<span class="pl-smi">anchor</span>.<span class="pl-c1">x</span> <span class="pl-k">=</span> <span class="pl-c1">0.5</span>;
<span class="pl-smi">bunny</span>.<span class="pl-smi">anchor</span>.<span class="pl-c1">y</span> <span class="pl-k">=</span> <span class="pl-c1">0.5</span>;

<span class="pl-c"><span class="pl-c">//</span> Add the bunny to the scene we are building.</span>
<span class="pl-smi">app</span>.<span class="pl-smi">stage</span>.<span class="pl-en">addChild</span>(bunny);

<span class="pl-c"><span class="pl-c">//</span> Listen for frame updates</span>
<span class="pl-smi">app</span>.<span class="pl-smi">ticker</span>.<span class="pl-c1">add</span>(<span class="pl-k">function</span>() {
     <span class="pl-c"><span class="pl-c">//</span> each frame we spin the bunny around a bit</span>
    <span class="pl-smi">bunny</span>.<span class="pl-smi">rotation</span> <span class="pl-k">+=</span> <span class="pl-c1">0.01</span>;
});

});

如何构建

请注意,对于大多数用户,您不需要构建此项目。如果你想要的是使用pixi,那么 只需下载我们的预建版本。真 你应该需要构建pixi.js的唯一时间是你正在开发它。

如果您还没有Node.js和NPM,请安装它们。然后,在您克隆的文件夹中 存储库,使用npm:

安装构建依赖项
$> npm install

然后,要构建源代码,请运行:

$> npm run dist

这将在 dist / pixi.min.js dist / pixi.js 上的非最小版本创建一个最小化的版本 与pixi.js项目中的所有插件。

如果您有不想要的特定插件,请说交互或附加,可以排除以下内容:

$> npm run dist – –exclude extras –exclude interaction

您还可以使用短格式 -e

$> npm run dist – -e extras -e interaction -e filters

如何生成文档

可以使用npm:

生成文档
$> npm run docs

该文档使用 Jaguar.js 和jsdoc格式,配置文件可以在scripts/jsdoc.conf.json

许可证

此内容是根据( http://opensource.org/licenses/MIT )MIT许可证发布的。

分析




相关问题推荐