在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" ...
創(chuàng)建 renderer 和 stage
// 創(chuàng)建 renderer
var renderer = PIXI.autoDetectRenderer(256, 256);
// 將 canvas 加入到 html 頁面中
document.body.appendChild(renderer.view);
// 創(chuàng)建 stage 容器
var stage = new PIXI.Container();
// 用 renderer 渲染 stage
renderer.render(stage);
根據(jù)圖片創(chuàng)建一個(gè)小精靈
// 基本方式
var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"];
var sprite = new PIXI.Sprite(texture);
//使用 load 函數(shù)
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 顯示一個(gè)小精靈的完整代碼
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);
}
