Pixi.js超快的 HTML5 2D 渲染引擎

联合创作 · 2023-09-19 04:11

PixiJS 提供一个适用于所有设备的快速轻量级2D库。 PixiJS 渲染器允许每个人在不事先了解WebGL的情况下享受硬件加速的强大功能。 而且它很快、真的很快,适合创建丰富的交互式图形,跨平台应用程序和游戏。

PixiJS具有完整的WebGL支持,并且可以无缝地回退到 HTML5 的画布。 作为一个框架,PixiJS是用于创作交互式内容的绝佳工具,尤其是近年来远离Adobe Flash。 将它用于图形丰富的交互式网站,应用程序和HTML5游戏。 开箱即用的跨平台兼容性和优雅的降级意味着您可以减少工作量并享受更多乐趣! 如果你想要相对快速地创建精美和精致的体验,而不是深入研究密集的低级代码,同时避免浏览器不一致的麻烦,那么请将你的下一个项目用一些PixiJS魔法!

基本使用示例:

// 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;
    });
});

下面是一些在线的演示:

更多实例请看 http://pixijs.github.io/examples/

浏览 7
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报