PixiJS - HTML5 创作引擎

Posted 2021-10-13 张驰Terry

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PixiJS - HTML5 创作引擎相关的知识，希望对你有一定的参考价值。

简介

PixiJS的目的是提供一个快速并且轻量的 2D 库，并且它可以在所有设备上运行。

PixiJS 渲染器让每个用户都可以享受硬件加速的力量，并且不需要了解 WebGL的细节。

更重要的是，它真的非常快.

PixiJS 可以干什么？并且什么时候使用它？

PixiJS 是一个渲染库，可让你创建丰富的交互式图形、跨平台应用程序和游戏，而无需深入研究 WebGL API 以及处理浏览器和设备的兼容性问题。

PixiJS 具有完整的WebGL支持，并在需要时无缝降级到 html5 的 Canvas。作为一个框架，PixiJS 是创作交互式内容的绝佳工具，尤其近年来开发者开始告别 Adobe Flash。将 PixiJS 用于图形丰富的交互式网站、应用程序和 HTML5 游戏。

PixiJS 开箱即用的跨平台兼容性和优雅的降级意味着你要做的工作更少，而且做起来更有趣！如果你想相对较快地创建优美和精致的体验，而不是钻研密集的低级代码，同时避免浏览器不一致的问题，那么在你的下一个项目中加入一些 PixiJS 魔法！

学习

网站：在官方网站上了解更多关于 PixiJS 的信息。
入门：查看@kittykatattack 的综合教程。
示例：就在此处陷入困境并使用 PixiJS 代码和功能！
文档：通过查看文档了解 PixiJS API 。
Wiki：其他杂项教程和资源在 Wiki 上。

社区

论坛：查看论坛和Stackoverflow，这两个友好的地方都可以询问您的 PixiJS 问题。
灵感：看看画廊，看看人们创造的一些惊人的东西！
聊天：你可以加入我们的Gitter来聊聊 PixiJS。我们现在还有一个 Slack 频道。如果您想加入，请给我发送电子邮件（mat@goodboydigital.com），我会邀请您加入。

设置

PixiJS 上手很容易！只需下载一个预构建的版本！

或者，PixiJS 可以与npm一起安装，或者简单地使用内容交付网络 (CDN) URL 将 PixiJS 直接嵌入到您的 HTML 页面中。

注意：在 v4.5.0 之后，已取消对Bower包管理器的支持。有关更多信息，请参阅发行说明。

安装

npm install pixi.js

没有默认导出。导入 PixiJS 的正确方法是：

import * as PIXI from 'pixi.js'

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

CDN 安装（通过 cdnjs）

注意：5.1.3可以替换为任何已发布的版本。

演示

基本使用示例

import * as PIXI from 'pixi.js';

// 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
const 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
app.loader.add('bunny', 'bunny.png').load((loader, resources) => {
    // This creates a texture from a 'bunny.png' image
    const 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(() => {
         // each frame we spin the bunny around a bit
        bunny.rotation += 0.01;
    });
});