Pixi.js 聊天室製作流程分享（1）
🚀 用 Pixi.js 製作 2D 角色聊天室 — Pixi.js 繪圖角色篇
如果說我們要在網頁上製作2D繪圖或是製作畫面，一般來說可能會想到的使用<canvas>，而這次要來使用的是 Pixi.js，它是一款輕量、快速的2D圖形渲染框架，主要是做網頁的2D遊戲，可兼容多種瀏覽器，即便是不支援 WebGL 的瀏覽器，Pixi.js 也可以正常運行。
Pixi.js官網上的說明：
So what exactly is PixiJS? At its heart, PixiJS is a rendering system that uses WebGL (or optionally Canvas) to display images and other 2D visual content. It provides a full rt to enable handling click and touch events.
安裝 Pixi.js
那接下來，我們就直接來看看如何開始使用 Pixi.js 吧！首先，可以使用CDN或是NPM來安裝 Pixi.js，安裝方式如下：
- CDN Install：
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script> //引入CDN- NPM Install：
npm install pixi.js //使用npm安裝import * as PIXI from 'pixi.js' //將pixi引入到要使用的地方
接著，可以透過輸入以下程式碼，查看是否已經安裝完成：
let type = "WebGL";
if (!PIXI.utils.isWebGLSupported()) {
type = "canvas";
}
PIXI.utils.sayHello(type);如果在 consolo 的地方出現了下面的畫面，就代表 Pixi 已經引入成功！（上為WebGL可支援的情況，下為WebGL不支援的情況）
創建 PIXI.Application
要在網頁上顯示出畫面，我們需要創建出一個 Pixi 應用，再將它渲染到 HTML 的 DOM 上面，這樣我們就可以在網頁上看到畫布的畫面，並可以用 renderer 來調整畫布的大小、顏色、透明度等等（詳細可調整的參數可以到官網去參考），輸入的程式碼如下：
//創建 Pixi Application
let app = new PIXI.Application({width: 256, height: 256}); //渲染到 body 上面
document.body.appendChild(app.view); //renderer 改變畫布顏色
app.renderer.backgroundColor = 0x061639;//renderer 改變畫布大小
app.renderer.resize(512, 512);
Pixi.js 功能介紹與使用
接著我們就可以來使用 Pixi 建立物件了！以下幾個是使用 Pixi 時最常使用的功能：
- Stage：Pixi 容器的概念，建立
PIXI.Application後，若是需要在裡面增加物件時，使用app.stage.addChild()即可增加子元件在裡面 - Sprite：小精靈，通常用來創建角色、圖像
- Text：文字，可在畫布中增加文字
- Graphics：幾何圖形，如同畫布中繪製幾何圖案
- Container：Container 的概念就如同 Stage 一樣式容器的概念，可以用來將物件分群
- Texture：紋理，用來建立使用在 Sprite 的圖案
- Loader：載入圖片，如果要一次載入多張圖片的話，通常使用這種方式
- ticker：類似於執行循環事件，如果要使用動態的操作時，則需要加入ticker，畫面就會持續 renderer
大概了解之後，用個範例來簡單介紹如何使用這些功能：
//建立Pixi應用
let app = new PIXI.Application({
width: 800,
height: 600,
backgroundColor: 0x1099bb,
resolution: 1
});
document.body.appendChild(app.view);//建立文字
let style = new PIXI.TextStyle({
fontFamily: "Arial",
fontSize: 20,
fontStyle: "italic",
fontWeight: "bold",
fill: "#ffffff"
});
let basicText = new PIXI.Text("texttexttext", style);
basicText.x = 20;
basicText.y = 20;
app.stage.addChild(basicText);//建立container
let container = new PIXI.Container();
app.stage.addChild(container);//建立紋理
let texture = PIXI.Texture.from("img.png");//建立Sprite，並增加到container中
for (let i = 0; i < 16; i++) {
const player = new PIXI.Sprite(texture);
player.anchor.set(0.5); //設定player的中心
player.scale.set(0.1); //設定player的大小
player.x = (i % 4) * 60; //設定player的位置
player.y = Math.floor(i / 4) * 60;
container.addChild(player);
}//設定container的位置
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;//設定container的中心
container.pivot.x = container.width / 2;
container.pivot.y = container.height / 2;//設定動畫，container旋轉
app.ticker.add((delta) => {
container.rotation -= 0.01 * delta;
});
角色移動製作
小試身手以後，開始建立我們的角色吧！首先，先製作一個角色：
//建立Pixi應用
let app = new PIXI.Application({
width: 800,
height: 600,
backgroundColor: 0x1099bb,
resolution: 1,
});
document.body.appendChild(app.view);
//載入圖案
let loader = new PIXI.Loader();
loader
.add("img01", "../img/bkimg000-1.png")
.add("img02", "../img/bkimg000-2.png")
.load((loader, resource) => {
setup(resource); *//圖片載入完成後才會執行*
});
//定義參數
let player;
let keys = {};
//初始設定
function setup(resource) {
player = new PIXI.Sprite(resource.img01.texture);
player.anchor.set(0.5);
player.scale.set(0.3);
player.x = app.screen.width / 2;
player.y = app.screen.height / 2;
app.stage.addChild(player);
}
好的，接下來規劃整個架構的部分，主要定義兩個函式使用，setup()是初始的設定，而我們要執行遊戲的時候，要讓它使用ticker進行 loop，所以用gameLoop()來撰寫要持續執行的函式：
function setup() {
//Initialize the game sprites
//and start the 'gameLoop'
}
function gameLoop(delta) {
//Runs the current game in a loop and renders the sprites
}鍵盤監聽
接著，為了要讓角色移動，需要來監聽鍵盤輸入的值，使用 addEventListener 監聽被按下的鍵盤是哪一個：
//放在setup()中
window.addEventListener("keydown", (e) => {
console.log("keyon=" + e.keyCode);
keys[e.keyCode] = true;
});window.addEventListener("keyup", (e) => {
console.log("keyup");
keys[e.keyCode] = false;
});
打開 console，可以查到你按下的鍵盤代號，然後就可以設定你想要的操作模式，以下用角色的上下左右移動來看，除了上下左右以外，也使用了WASD來操作移動。另外，為了讓角色超出畫面時可以自動從另外一端出現，我們用 (player.y - 5 + app.view.height) % app.view.height 這段來設定角色的位置：
//放在gameLoop(delta)中
if (keys["87"] || keys["38"]) {
player.y = (player.y - 5 + app.view.height) % app.view.height;
}
if (keys["65"] || keys["37"]) {
player.x = (player.x - 5 + app.view.width) % app.view.width;
}
if (keys["83"] || keys["40"]) {
player.y = (player.y + 5 + app.view.height) % app.view.height;
}
if (keys["68"] || keys["39"]) {
player.x = (player.x + 5 + app.view.width) % app.view.width;
}將這段程式碼放在了gameLoop()的地方，我們就可以看到角色開始可以移動了！
動畫
可以移動之後，覺得好像少了一些什麼？那是因為現在角色像是被浮空移動的感覺，為了讓角色看起來有走路效果，就要讓角色執行動畫。
我們將原本的 new PIXI.Sprite 換成 new PIXI.AnimatedSprite ，這可以製作出動畫物件，另外還需要加上 animationSpeed ，調整動畫的速度，gotoAndPlay() 則是可以設定動畫第一張出現的圖是哪一張，設定完成之後，就可以看到畫面上的角色開始會動了！
let textureArray = [resource.img01.texture,resource.img02.texture];
player = new PIXI.AnimatedSprite(textureArray);
player.animationSpeed = 0.15;
player.gotoAndPlay(0);
app.stage.addChild(player);如果要讓角色移動時才出現動畫，就將 setup() 時的動畫速度設定為0，移動時設定動畫速度為0.15，記得要讓 keyup 時的速度也為0，這樣沒按鍵盤時才會停止動畫哦！另外，左右轉向的部分，制定一個函式來判斷角色的方向，並且用 scale 設定正負值來實現：
//放在setup()中
let leftcheck = true;//放在gameLoop(delta)中
function scaleX() {
let scale = 0.3;
if (leftcheck === true) {
player.scale.x = scale;
} else {
player.scale.x = -scale;
}
}
完成了這些步驟，我們的角色就可以自由走動了！下一篇再來說明如何使用 firebase 製作聊天室。
Pixi.js 聊天室製作流程分享（1）— Pixi.js 繪圖角色篇 👉 link
Pixi.js 聊天室製作流程分享（2）— Firebase 聊天室製作篇 👉 link
