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

繼上一次的想要做網頁游戲怎么辦 ？PixiJs 篇（一）后，這次繼續更新一下這次的文章

之前有說關于pixi是什么以及基本的使用方法，這一次是關于我們創建出來的精靈對象運動狀態的說明

就是如何讓你的精靈在不斷運動，成為一個動畫精靈

參考文章（

寫的很不錯，比較明了

）：

https://blog.csdn.net/FE_dev/article/details/86141145

https://blog.csdn.net/FE_dev/article/details/86483753

提前看看效果

準備材料

之前的文章中也曾經說過雪碧圖，本次的動畫精靈也主要使用了雪碧圖去制作

本次用的圖片依舊是從愛給網上找到的，還是寶可夢系列

還有誰不會飛？

把不會飛的神獸下載下來，放到我的 public 文件夾下

創建場景

首先先進行場景的創建，pixi 必不可少，使用的關鍵方法是

pixi.Application

別眨眼，創建場景代碼（用 vue 組件寫的啦）

這樣場景舞臺就已經布置起來了，等一下就在這個框中讓精靈出現

pixi 中的動畫精靈

雖然目前制作動畫精靈最好應該是使用 spriteUtilities.js 這款插件庫了，這也是本文的重點！

官方說明：http://pixijs.download/release/docs/PIXI.AnimatedSprite.html

定義一個精靈生成方法先：目前 pixi.js 調用

spriteUtilities

已經不需要 PIXI.

extras.AnimatedSprite

了，直接

PIXI.AnimatedSprite

即可

setTexture (texture) { // console.log(texture) let sprite = new pixi.AnimatedSprite(texture); return sprite; },

首先先看一下下載的雪碧圖片大小，因為是 44 的圖片，所以每一個小圖形的大小就是 84 x 81

開始創建精靈：

mounted() { this.initState(); this.players(); },

players() { let stage = this.app.stage, Container = pixi.Container, Graphics = pixi.Graphics, player = this.player, TextureCache = pixi.utils.TextureCache, Texture = pixi.Texture, Rectangle = pixi.Rectangle, AnimatedSprite = pixi.AnimatedSprite; /******************* 加載紋理貼圖，創造精靈，并將精靈添加到stage舞臺上 *******************/ let jujinPng = './baoke/an3.png' this.loader.add([{name:'jujin', url: jujinPng}]).load(()=>{ let textures = TextureCache['jujin']; // 第一個紋理 使用frame進行 let texture0 = new Texture(textures); texture0.frame = new Rectangle(0, 0, 84, 81); let texture1 = new Texture(textures); texture1.frame = new Rectangle(84, 0, 84, 81); let texture2 = new Texture(textures); texture2.frame = new Rectangle(84*2, 0, 84, 81); let texture3 = new Texture(textures); texture3.frame = new Rectangle(84*3, 0, 84, 81); //創建紋理數組 這是圖片中第一行的效果 let textureArray = [ texture0, texture1, texture2, texture3 ]; console.log(textureArray) // 上面的生成精靈方法 player = this.setTexture(textureArray); stage.addChild(player); //設置動畫精靈的速度 player.animationSpeed=0.08; player.play(); }) },

效果：

但是此種方法就比較麻煩，如果你要將這 16 份動作全部做出來，就需要使用 frame 去裁剪 16 次，并且之后用鍵盤控制精靈動作也不方便

spriteUtilities.js

更容易和更直觀的方式來創建和使用 Pixi 精靈，以及添加一個狀態機和動畫播放器。和 Pixi 一起使用會非常有趣。

GitHub 倉庫：https://github.com/kittykatattack/spriteUtilities

將此文件下載之后，使用標簽導入即可

因為 spriteUtilities.js 可能很久沒維護了，里面的部分內容需要我們自己修改適應一下

代碼修改：

if (renderingEngine.ParticleContainer && renderingEngine.Sprite) { this.renderer = "pixi"; this.Container = renderingEngine.Container; this.ParticleContainer = renderingEngine.ParticleContainer; this.TextureCache = renderingEngine.utils.TextureCache; this.Texture = renderingEngine.Texture; this.Rectangle = renderingEngine.Rectangle; this.MovieClip = renderingEngine.AnimatedSprite; this.BitmapText = renderingEngine.BitmapText; this.Sprite = renderingEngine.Sprite; this.TilingSprite = renderingEngine.TilingSprite; this.Graphics = renderingEngine.Graphics; this.Text = renderingEngine.Text; //An array to store all the shaking sprites this.shakingSprites = []; }

將之前的 players 方法進行修改

players() { let stage = this.app.stage, Container = pixi.Container, Graphics = pixi.Graphics, player = this.player, TextureCache = pixi.utils.TextureCache, Texture = pixi.Texture, Rectangle = pixi.Rectangle, AnimatedSprite = pixi.AnimatedSprite; /******************* 加載紋理貼圖，創造精靈，并將精靈添加到stage舞臺上 *******************/ let jujinPng = './baoke/an3.png' this.loader.add([{name:'jujin', url: jujinPng}]).load(()=>{ // 使用SpriteUtilities let animate = new SpriteUtilities(pixi); // console.log(animate) //創建紋理數組 將雪碧圖變成紋理數組 66,48 let frames = animate.filmstrip(jujinPng, 84, 81); // 創建紋理數組 只使用雪碧圖中的一部分 // let frames = animate.frames(jujinPng,[[0,0],[66,0],[132,0],[198,0]], 66, 48); // console.log(frames) let jujin = animate.sprite(frames); //使用SpriteUtilities創建精靈 // let jujin = this.setTexture(frames); //使用之前的方法創建精靈 stage.addChild(jujin); jujin.animationSpeed=0.08; jujin.vx = 0; jujin.vy = 0; jujin.play(); }) },

斷----------------------------------------------------------------------------------------------------------------------------章

JavaScript web前端 數據結構 游戲開發

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