一：什么是Pixi
Pixi是一個超快的2D渲染引擎霍转。它會幫助你用JavaScript或者其他HTML5技術來顯示媒體鲁捏，創(chuàng)建動畫或管理交互式圖像鹊汛，從而制作一個游戲或應用朋凉。它擁有語義化的州丹，簡潔的API接口并且加入了一些非常有用的特性。比如支持紋理貼圖集和為精靈（交互式圖像）提供了一個簡單的動畫系統(tǒng)。它也提供了一個完備的場景圖墓毒，你可以在精靈圖層里面創(chuàng)建另一個精靈吓揪，當然也可以讓精靈響應你的鼠標或觸摸事件。最重要的的是所计，Pixi沒有妨礙你的編程方式柠辞，你可以自己選擇使用多少它的功能，你可以遵循你自己的編碼風格主胧，或讓Pixi與其他有用的框架無縫集成叭首。
Pixi不僅僅能做游戲 —— 你能用這個技術去創(chuàng)建任何交互式媒體應用
二：安裝 Pixi
首先去官網(wǎng)下載 pixi.min.js文件 下載地址
下面就是基本的HTML頁面，您可以使用它來鏈接Pixi并測試它是否正常運行踪栋。(這里假設pixi.min.js在一個名為pixi的文件夾中)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<script src="../pixi/pixi.min.js"></script>
<body>
<script type="text/javascript">
let type = "WebGL"
if(!PIXI.utils.isWebGLSupported()){
type = "canvas"
}
PIXI.utils.sayHello(type)
</script>
</body>
</html>
如果Pixi鏈接正確焙格，通常會在瀏覽器的JavaScript控制臺中顯示類似于下面的內(nèi)容。
三：創(chuàng)建一個精靈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sprites（精靈）與stage（舞臺）</title>
</head>
<script src="../pixi/pixi.min.js"></script>
<body>
</body>
<script>
let app = new Application({
width: 400,
height: 400,
antialiasing: true,
transparent: false,
resolution: 1
});
document.body.appendChild(app.view);
loader
//調(diào)用一個add方法來加載數(shù)組中的圖片
.add('../images/cat.png')
.on("progress", loadProgressHandler)
.load(loadingFinish);
// 每次加載一個文件時夷都，progress事件就會被調(diào)用一次
function loadProgressHandler(loader, resource) {
console.log("loading: " + resource.url);
console.log("progress: " + loader.progress + "%");
}
//加載完成回調(diào)
function loadingFinish() {
console.log("All files loaded");
// 創(chuàng)建一個精靈
let sprite = new Sprite(resources['../images/cat.png'].texture);
sprite.x = 50; //定位 偏移左上角x方向
sprite.y = 50; //定位 偏移左上角y方向
sprite.width = 100; //設置精靈寬度
sprite.height = 100; //設置精靈高度
sprite.scale.set(0.3, 0.3); //scale.set對精靈進行縮放 按順序會覆蓋上面的設置
sprite.rotation = 0.1; // 旋轉(zhuǎn)精靈
// sprite.anchor.set(0.5, 0.5); //更改精靈錨點位置 默認錨點就是精靈的左上角 也就是旋轉(zhuǎn)中心的位置
// sprite.pivot.set(32, 32) //pivot軸心點設置了精靈的原點眷唉。 改變一個精靈的原點，你也就改變了它的坐標
app.stage.addChild(sprite);
sprite.visible = true; //使精靈消失的一種更簡單囤官、更有效的方法
}
</script>
</html>
但是當你直接運行上面的文件內(nèi)容時控制臺有可能會報下面的錯
此時有兩個解決方案：
1: 將圖片地址換成可以遠程訪問的圖片地址冬阳，而不是去本地圖片 例如 (注意： 我的圖片是放到github上面的訪問有可能需要梯子呦)
loader.add('https://raw.githubusercontent.com/zlzbt/Pixi_myFirst/master/images/Doraemon1.jpg').load(setup);
2：如果你是用的編輯器是vacode的話 直接在vscode里面下載一個插件即可 Live Server；然后直接找到右下角的 有個 Go live 點擊一下就好了,下面就是正常展示的圖片
四：總結(jié)
具體學習文檔請參考 Pixi.js中文網(wǎng)
以及 Pixi學習demo
