抛弃create.js 改用pixi.js

Fork Me On Github
zodream 游戏 TypeScript 2020年06月

今天在 github 看到推荐了 pixi.js,就行进行了了解。

对比

create.js pixi.js
已不更新了 至今更新
js编写的 ts编写的,更喜欢ts
基于canvas 支持canvas和WebGL
支持Adobe Animate图形工具 无图形工具
文档有 文档有(不是最新的)
压缩后235kb 365kb
包含tween 不包含

总结:保持更新及使用 ts 为最重要的选择原因

简单例子

pixie.js

官网

文档

中文文档

 
npm install pixi.js
1

这是官方的例子

ts
                                 
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;
    });
});
123456789101112131415161718192021222324252627282930313233

插件

周边插件也挺丰富的,动画(spine/dragonbones),粒子系统,物理引擎等等

相关页面

点击查看全文
标签: PixiJS
0 626 0