今天在 github 看到推荐了 pixi.js
,就行进行了了解。
对比
create.js | pixi.js |
---|---|
已不更新了 | 至今更新 |
js编写的 | ts编写的,更喜欢ts |
基于canvas | 支持canvas和WebGL |
支持Adobe Animate图形工具 | 无图形工具 |
文档有 | 文档有(不是最新的) |
压缩后235kb | 365kb |
包含tween | 不包含 |
总结:保持更新及使用 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;
});
});
插件
周边插件也挺丰富的,动画(spine/dragonbones),粒子系统,物理引擎等等
转载请保留原文链接: https://zodream.cn/blog/id/156.html