想要做網頁游戲怎么辦 ？PixiJs 篇（一）

作為一個不太正經的前端開發人員，為了生存一定得想辦法提升自己的能力呀！！！

想學習一些與前端能搭的上邊的新知識，想做一個能在 web 上運行的小游戲練練手︿(￣︶￣)︿，就算不提高能力也得提高自己的眼界吧，雖然技術飯可能吃不到老，開發人的痛 o(╥﹏╥)o

時代變了

實際上

空城機

（

本人，下文中可能也會這樣稱呼

）之前就已經在學習與之相關的一些知識了。當前如果想要在 web 端網頁上做一些小游戲，現在基本上也就是 HTML 游戲了吧，畢竟 flash 已經在逐步退出了，時代變了。在當初網頁上面很多小游戲都是以 flash 為主開發的，比如鼎鼎有名的半瓶神仙醋這位開發人員就是開發了不少的 flash 小游戲。

只要是接觸過互聯網的人，無論年齡，對 Flash 都不陌生，比如早期在線視頻、Flash 動畫以及網頁版小游戲等都離不開它的支持。直到今天，很多網站上的內容仍需通過 Flash 插件才能顯示，之前有個火車系統網站應為 flash 停用的事件還是挺火的（大連車務段晝夜攻關恢復查看列車運行圖），不過其不安全、泄露隱私、進程服務無法徹底終止等特性也始終讓人詬病。

當初的 4399 之類的小游戲網站也在不斷的轉型，從 flash 的時代中走出來，還是挺懷念以前的《死神 VS 火影》之類的小游戲的。

flash 的消失：Adobe 正式公布了 2020 年 12 月 31 日，終止支持 Flash。這個日期后，Adobe 將不會發布 Flash 的任何更新與安全補丁。此外，Adobe 還將從官方網站中刪除 Flash Player 早期版本的所有存檔，并阻止基于 Flash 的內容運行。

學習的選擇

一般學習流程步驟如下了解相關游戲背景知識與專業術語（理解場景（頁面），sprite（控件） ,時間軸（timer，定時器）等）了解具體語言以及 ide，以及游戲引擎比如 dom，cocos 等

事實上在目前一些前端游戲的開發上，選擇無非就是那么幾樣。對于空城機這種業余的，剛開始入門還是從簡單的 js 庫進行入手吧。之后再學習一下Cocos creator這個工具。在 HTML 上，入門的 js 庫也許就那幾個選擇吧，雖然空城機之前已經拜過three.js的山頭了，但是 pixi.js 的山頭空城機也準備拜一下，畢竟 3D 的門總是看起來比 2D 更加高大。

之前寫過 three.js 的學習記錄，讀者們有興趣的話闊以去瞧瞧空城機的這一個系列。

《Three.Js 雜記（一）——起步》

…

《Three.js 雜記（十一）—— 精靈與粒子（繪制中國地圖）》

因為不是學生了、白天要上班的原因，直接上班學習過于囂張啦，所以先從文檔開始慢慢學起來吧！

網上找的建議：

如果你不用游戲引擎。那就寫原生html,js,css，或者使用canvas/svg。 如果使用游戲引擎，又想用前端的技術棧，那就用cocos creator。 一次開發，多端打包。整個引擎非常的像Unity3d，可以理解為是2d版本的unity。使用的是js作為腳本語言。 cocos creator暫時只能做2d游戲。 如果你想做3d游戲。那就直接開搞Unity3d吧。 不過雖然Unity3d也支持js作為腳本語言，但實際上大部分公司和團隊選擇的是C#， 大部分教程也是以C#作為腳本語言，所以如果要上手Unity3d，那就需要學習C#

前面廢話水了一大堆的字呢┗( T﹏T )┛

接下來才是有關于 pixi 的正菜…

什么是 Pixi.JS？

官方說明：

The aim of this project is to provide a fast lightweight 2D library that works across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it’s fast. Really fast.

譯文：

這個項目的目標是提供一個快速輕量級的 2D 庫，它可以跨所有設備工作。PixiJS 渲染器讓每個人都可以享受硬件加速的強大功能，而無需事先了解 WebGL。而且，速度很快。真的很快。

好了，從上面這一段 pixi 開發者的說明中，空城機了解到了 pixi.js 是一個輕量級的 2D 庫，能夠用于 HTML 的動作渲染，并且由于和 webgl 對接，所以我們無需擔心 pixi.js 的渲染性能問題，

pixi.js 非常快。

接下來看另一份有關 pixi 比較全面的介紹（下面這段當然是抄的）：

Pixi是一個非常快的2D sprite渲染引擎。這是什么意思?這意味著它可以幫助你顯示、動畫和管理交互式圖形，這樣你就可以輕松地使用JavaScript和其他HTML5技術制作游戲和應用程序。它有一個合理的，整潔的API，并包括許多有用的功能，如支持紋理地圖集和提供一個精簡的系統，為動畫精靈(交互式圖像)。它還為您提供了一個完整的場景圖，這樣您就可以創建嵌套精靈(精靈中的精靈)的層次結構，并允許您將鼠標和觸摸事件直接附加到精靈上。而且，最重要的是，Pixi可以讓您自由的使用，使其適應您的個人編碼風格，并與其它框架無縫集成。

Pixi的API實際上是Macromedia / Adob e Flash率先使用的，并且經過反復考驗和改進，所以Flash開發人員極易上手。 當前使用類似的API的渲染框架包括：CreateJS，Starling，Sparrow和Apple的SpriteKit。 Pixi API的優勢在于它具有通用性：它不是游戲引擎。 這樣對使用者來說很棒，因為您可以完全自由地使用它制作自己喜歡的東西，甚至是創建自己的游戲引擎。

在此介紹兩個對于 Pixi.Js 學習很有用的網站：

PixiJS API Document

Pixi.js中文網

其中的中文網對于我們學習很便利，但是有個缺點，時代變了呀，中文網中講述的一些 pixi 的方法可能已經改變了，如果下載的是最新版本的 pixi.js 那我們就可能使用不了這些方法了（就和空城機當初學 three.js 一樣）

所以另一個 API 網站就顯得尤為重要了，雖然 API 網站是英文的，對于我這種英文不好的學習者來說非常非常不友好，但是里面能夠找到最新的方法。所以英文的瑕疵我闊以接受了，生活就像…，你不能反抗，那就只能接受了。

怎么開始干活？

找到參考教程后，那我們就闊以按照教程來慢慢學習起來了。

First

首先，第一步，我們先把 pixi.js 下載下來并安裝好吧。

在中文網的教程當中，提供了 GitHub 倉庫地址：https://github.com/pixijs/pixi.js/releases

可以通過倉庫來獲取 pixi.js 文件，并且使用 script 標簽進行導入文件

但是由于本人創建了一個 vue cli 項目，所以我選擇使用 npm 進行下載。下載的語句也很簡單，注意需要在 pixi 后面加.js。 使用語句下載完 pixi.js 后，本人并沒有在 package.json 中找到下載的 pixi，實際上已經被下載好了啦。

npm install pixi.js

我們闊以使用以下代碼進行測試，來試一下到底是否已經導入 pixi.js。

vue 項目中，寫在 main.js 中進行測試即可。

import * as PIXI from 'pixi.js' Vue.use(PIXI) /*********** 如果使用script標簽，不需要上面兩句 ***************/ // 測試pixi是否安裝完成 let type = "WebGL" if(!PIXI.utils.isWebGLSupported()){ type = "canvas" } PIXI.utils.sayHello(type)

出現啦，F12 打開頁面的控制臺，會發現 PixiJS 能夠成功的進行使用，并且還會告訴你當前 PixiJS 的版本。

中文網的教程使用的版本是 PixiJS 4.4.5。

Second

導入了 pixi.js 工具，那么趕緊搭建舞臺吧，有了舞臺，人物們才能夠粉墨登場呀

pixi.js 搭建出的場景也是在上面的，這一點想必大家也都見怪不怪了

創建一個環境：

使用 Pixi 上的 Application 對象創建一個矩形顯示區域。 它會自動生成一個 HTML < canvas >元素，然后在 canvas 畫布上顯示圖像。PIXI.Application 會自動選擇使用 Canvas 或者是 WebGL 來渲染圖形，這取決于您的瀏覽器支持情況。PIXI.Application有一個options對象。在本例中，它的width和height屬性用來設置 Canvas 畫布的寬度和高度（以像素為單位）。您可以在這個 options 對象中設置更多的可選屬性;下面是如何使用它來設置反鋸齒，透明度和分辨率。

生成了一個透明的 canvas 標簽，寬高為 300 像素

生成的 pixi：

當然為了看的清楚一些，將背景設置成有色的吧，renderer.backgroundColor

let app = new pixi.Application({ width: 300, // default: 800 寬度 height: 300, // default: 600 高度 antialias: true, // default: false 反鋸齒 transparent: false, // default: false 透明度 resolution: 1, // default: 1 分辨率 backgroundAlpha: 0 // 設置背景顏色透明度 0是透明 }); app.renderer.backgroundColor = 0x8b968d; // 設置canvas背景顏色

效果：

如果需要將舞臺鋪滿全屏，接下來闊以設置 canvas 的大小以及監聽形變

initState() { //Create a Pixi Application 創建一個pixi應用 let app = new pixi.Application({ width: 300, // default: 800 寬度 height: 300, // default: 600 高度 antialias: true, // default: false 反鋸齒 transparent: false, // default: false 透明度 resolution: 1, // default: 1 分辨率 backgroundAlpha: 0 // 設置背景顏色透明度 0是透明 }); console.log(app) app.renderer.backgroundColor = 0x8b968d; // 設置畫布背景顏色 // app.view是canvas畫布 生成一個256像素×256像素的黑色canvas元素 document.getElementById('pixi1').appendChild(app.view) app.renderer.view.style.position = "absolute"; app.renderer.view.style.display = "block"; app.renderer.autoResize = true; //為了確保畫布的大小調整到與分辨率匹配 app.renderer.resize(window.innerWidth, window.innerHeight); //改變舞臺大小 window.onresize = function () { app.renderer.resize(window.innerWidth, window.innerHeight); } // stage是舞臺 stage（舞臺）是Pixi的Container（容器）對象 console.log(app.stage) }

效果：

關于 pixi.js 創建的屬性其實還有很多，這里就不一一列舉了，需要使用了趕緊去查看api文檔

Third

有了舞臺，那么人物也要出場啦！

任何你想要在渲染器中可見的東西都必須添加到一個特殊的 Pixi 對象中，這個對象叫做stage（舞臺）。就是上面的 app.stage 可以打印出來看看。

stage（舞臺）是 Pixi 的Container（容器）對象。你可以把一個Container（容器）想象成一種空盒子，它會把你放進去的東西組合在一起并儲存起來。stage（舞臺）對象是場景中所有可見事物的根容器。你在stage（舞臺）里放的任何東西都會在 canvas 畫面上渲染出來。現在stage（舞臺）是空的，但很快我們就會開始把東西放進去。

而舞臺之上的表演者，也就是人物被稱之為 sprite（精靈）。這一種的特殊圖像對象。您可以控制它們的位置、大小和其他屬性。

創建方法有三種：

通過單個圖像文件。

通過雪碧圖。

通過紋理貼圖。

本人有一篇文章中也有提及紋理貼圖怎么制作：紋理打包器 TexturePacker

這里因為我困了，就簡要寫一發一下代碼了。

這是由我之前通過 TexturePacker 生成的紋理貼圖集，baokemeng1.json。

生成的 json 主要說明了是由三張圖片構成的，具體素材我扔到網盤了，有興趣可以下載一下：https://pan.baidu.com/s/1A-BsG_5hqCXhgKXnJ-lM2w

提取碼：gjhi

json 中說明了位置信息，也是之后使用時判斷和裁剪人物與場景的判斷依據

"anim.png": { "frame": {"x":212,"y":1,"w":50,"h":88}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":0,"y":2,"w":50,"h":88}, "sourceSize": {"w":50,"h":90} }, "changjing.png": { "frame": {"x":1,"y":1,"w":209,"h":214}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":209,"h":214}, "sourceSize": {"w":209,"h":214} }, "damu2.png": { "frame": {"x":212,"y":91,"w":56,"h":87}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":0,"y":0,"w":56,"h":87}, "sourceSize": {"w":60,"h":90} }},

廢話不多說，趕緊看看效果吧

就決定是你了，代碼獸，趕緊上吧

效果：

呼，結束了！

哈哈哈，終于完成了 pixi.js 學習記錄第一篇

JavaScript web前端 游戲開發

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。