在html页面中加入pixi.js
<!doctype html>
<meta charset="utf-8">
<title>Hello World</title>
<body>
<script src="pixi.min.js"></script>
<script>
//检测 pixi 是否正常加载
console.log(PIXI);
</script>
</body>
如果正常加载：
Object { VERSION: "4.0.0" ...
创建 renderer 和 stage
// 创建 renderer
var renderer = PIXI.autoDetectRenderer(256, 256);
// 将 canvas 加入到 html 页面中
document.body.appendChild(renderer.view);
// 创建 stage 容器
var stage = new PIXI.Container();
// 用 renderer 渲染 stage
renderer.render(stage);
根据图片创建一个小精灵
// 基本方式
var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"];
var sprite = new PIXI.Sprite(texture);
//使用 load 函数
PIXI.loader
.add("images/anyImage.png")
.load(setup);
function setup() {
var sprite = new PIXI.Sprite(
PIXI.loader.resources["images/anyImage.png"].texture
);
}
将小精灵添加到容器 stage 中
stage.addChild(sprite);
用 pixi.js 显示一个小精灵的完整代码
var stage = new PIXI.Container(),
renderer = PIXI.autoDetectRenderer(256,256);
document.body.appendChild(renderer.view);
PIXI.loader
.add("images/cat.png")
.load(setup);
function setup() {
var cat = new PIXI.Sprite(
PIXI.loader.resources["images/cat.png"].texture
);
stage.addChild(cat);
renderer.render(stage);
}
