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

序

在之前學了一部分的pixi之后，還是希望稍微寫點和別人不一樣的東西，有關碰撞檢測之類的文章先略過不寫了

現在小游戲中的拳皇因為是flash的原因，在我電腦上面已經玩不了了。那我能做一個仿制的么，想想看還是挺有趣的。

真的是太年輕了

（腦子：我會了? ? ? ? ? 手：不，你不會！！！)

使用pixi.js做一個拳皇游戲，我逐步發現需要的東西有好多呀!

目前就做出一個最簡單的實驗品no1，只有最簡單的前進、后退、跳、蹲、跑，輕拳，重拳，輕腳，重腳這幾個動作

下面是目前有的效果：

因為上傳圖片大小限制，所以將gif圖分開進行展示

初始化和前進

后退和跳躍

下蹲和跑動

輕拳和重拳

輕腳和重腳

正文開始

素材來源

素材來源依舊是愛給網，當然我在愛給網下載下來的是gif圖，通過將GIF分解成幀圖片，然后使用紋理打包器TexturePacker制作為雪碧圖

下面是我的vue頁面和處理好的素材，如果要使用的話，還需要各位網友自己配置好文件和相對位置

鏈接：https://pan.baidu.com/s/1zYaLQTRdt_4P7J6vAMZb6g

提取碼：7fbd

基礎布局添加

這部分和之前的《想要做網頁游戲怎么辦 ？PixiJs 篇（二）》較像

首先，先創建好pixi.Application場景

initState() { this.loader = new pixi.Loader(); //Create a Pixi Application 創建一個pixi應用 this.app = new pixi.Application({ width: window.innerWidth, // default: 800 寬度 height: window.innerHeight, // default: 600 高度 antialias: true, // default: false 反鋸齒 // transparent: true, // default: false 透明度 resolution: 1 , // default: 1 分辨率 backgroundAlpha: 0 // 設置背景顏色透明度 0是透明 }); this.app.renderer.backgroundColor = 0x000000; document.getElementById('game1').appendChild(this.app.view) this.app.renderer.view.style.display = "block"; this.app.renderer.view.style.marginLeft = "30px"; this.app.renderer.autoResize = true; this.bumpInit(); //碰撞檢測 // 畫布全屏 后面加一個參數可以設置背景色 scaleToWindow(this.app.renderer.view); }

然后創建一個添加精靈方法，

let bg = './gameImg/bg.png', start = './gameImg/start.png', stand = './gameImg/stand.png', walkqian = './gameImg/walkqian.png', walkhou = './gameImg/walkhou.png', setdown = './gameImg/setdown.png', jump = './gameImg/jump.png', run = './gameImg/run.png', attack = './gameImg/attack.png'; this.loader.add([{name:'bg', url: bg}, {name:'start', url: start},{ name:'stand', url: stand },{ name:'walkqian', url: walkqian } ,{ name:'walkhou', url: walkhou }, { name:'setdown', url: setdown }, { name:'jump', url: jump }, { name:'run', url: run } , { name:'attack', url: attack }]).load(()=>{ //具體的添加事件 // 先定義一個SpriteUtilities，這里的this.$SpriteUtilities是在main.js導入的原因 let sput = new this.$SpriteUtilities(pixi); })

在main.js當中添加spriteUtilities全局，這里我已經在spriteUtilities.js添加了export?default?SpriteUtilities;

import SpriteUtilities from './assets/spriteUtilities' Vue.prototype.$SpriteUtilities = SpriteUtilities //將SpriteUtilities放入全局

戰斗場景添加

場景精靈的創建也較為簡單，這里注意將場景精靈的寬高設置為屏幕相同即可

并且使用animationSpeed去調節精靈的運動速度，注意啟動精靈的play()方法讓精靈動起來

//創建紋理數組 將雪碧圖變成紋理數組 624, 384 // 創建戰斗場景 let bgframes = sput.filmstrip(bg, 624, 384); let bgsprite = sput.sprite(bgframes); bgsprite.width = window.innerWidth; //場景精靈的寬高和屏幕相同 bgsprite.height = window.innerHeight; bgsprite.animationSpeed = 0.1; //調節速度 bgsprite.play(); // 讓精靈運動起來 // 精靈加入場景 this.addSprite(stage, [bgsprite])

場景效果

人物精靈

人物精靈的添加因為有許多雪碧圖，如果像添加戰斗場景一樣寫，那重復語句會很多。所以這里可以封裝一個創建人物精靈的方法

// 封裝創建精靈方法 createSprite(sput, spng, pwidth, pheight, width, height, animationSpeed, isshow, name, wheight) { let playerframes = sput.filmstrip(spng, pwidth, pheight); //解析雪碧圖 let sprite = sput.sprite(playerframes); sprite.width = width; //設置精靈的寬高 sprite.height = height; sprite.animationSpeed=animationSpeed; //精靈的運動速度 sprite.position.set(82, wheight * 0.93 - sprite.height) //精靈初始位置 sprite.visible = isshow; //精靈是否顯示 sprite.name = name //精靈的別名 return sprite; }

這樣就可以使用像下面這樣的方式大量創建精靈了

因為并不是一副完整的雪碧圖，各個動作之間都是存在差別的。所以精靈的大小需要注意，這個可能要自己調試一下，差別比較明顯

// 人物前進 let walkqiansprite = this.createSprite(sput, walkqian, 68, 104, 210, 288, 0.2, false, 'walkqian', wheight) // 人物后退 let walkhousprite = this.createSprite(sput, walkhou, 70, 107, 210, 288, 0.2, false, 'walkhou', wheight) // 人物下蹲 let setdownsprite = this.createSprite(sput, setdown, 65, 64, 200, 195, 0.2, false, 'setdown', wheight) // 人物跳動 let jumpsprite = this.createSprite(sput, jump, 68, 190, 210, 570, 0.3, false, 'jump', wheight) // 人物跑動 let runsprite = this.createSprite(sput, run, 123, 90, 350, 270, 0.3, false, 'run', wheight) playersCont.addChild(walkqiansprite); playersCont.addChild(walkhousprite); playersCont.addChild(setdownsprite); playersCont.addChild(jumpsprite); playersCont.addChild(runsprite);

動作精靈的切換

因為是不同的精靈，所以通過玩家操控人物的動作會需要進行的不同切換。我將人物精靈都添加入一個Container()集合當中

通過控制Container()中的精靈的visible顯隱來顯示不同的人物動作。

這里要介紹一下pixi.js的API中的內容，如何去判斷精靈動畫的結束和開始，正在運行當前動畫的哪一幀。通過這樣的方式去判斷切換不同的動作

PIXI.AnimatedSprite動作狀態

這里的運動狀態方法和屬性還是比較多的，可以進行參考

animationSpeed

autoUpdate

currentFrame

loop

onComplete

當動畫精靈完成播放時，用戶指定要調用的函數

animation.onComplete = function () { // finished! };

onFrameChange

onLoop

playing

textures

totalFrames

updateAnchor

當幀更改時，將錨點更新為紋理的defaultAnchor。

對于使用工具創建的精靈圖紙動畫非常有用。更改每個幀的錨允許將精靈原點固定到幀的某些移動特征（例如左腳）。

注意：啟用此選項將覆蓋之前在每個幀更改上設置的任何定位

例子：人物一開始出場動作消失后，在onComplete動畫結束事件中改變動畫精靈。注意要設置出場動畫不循環? playersprite.loop?=?false;

// 初始化動畫結束后，顯示人物站立動作 playersprite.onComplete = () => { playersCont.removeChild(playersprite); playersCont.addChild(standsprite); this.currIndex = 'stand' standsprite.play(); this.keyMove(playersCont); }

按鍵切換

之后在使用按鍵切換動作時也是類似的原理，關于按鍵控制動作可以參考：

《想要做網頁游戲怎么辦 ？PixiJs 篇（三）》

《學習 PixiJS — 精靈狀態》

keyboard方法判斷按下的是什么按鍵

let left = keyboard('a'), up = keyboard('w'), right = keyboard('d'), down = keyboard('s'), quanattack1 = keyboard('u'), jiaoattack1 = keyboard('i'), quanattack2 = keyboard('j'), jiaoattack2 = keyboard('k');

例子： 按下鍵盤A鍵，人物從站立狀態變成向后走的狀態。? 使用getChildByName來獲取當前的精靈，使用visible改變顯隱

調整vx來改變Container的位置

// 按鍵A按下 left.press = () => { playersCont.getChildByName(this.currIndex).visible = false; playersCont.getChildByName('walkhou').visible = true playersCont.getChildByName('walkhou').play(); this.currIndex = 'walkhou'; playersCont.vx = -4; }; // 按鍵松開 left.release = () => { playersCont.vx = 0; playersCont.getChildByName(this.currIndex).visible = false; playersCont.getChildByName('stand').visible = true; this.currIndex = 'stand'; };

當然在按鍵切換中，有許多判斷還是比較麻煩的

比如說跑動動畫的切換，其實是連續按兩下D鍵實現的，所以這里就需要我判斷按鍵連續點擊。

在兩次按下D鍵之間的時間間隔大于0和小于600ms即可

let ot = 0; right.press = () => { // getChildAt通過index索引 getChildByName通過name playersCont.getChildByName(this.currIndex).visible = false; playersCont.getChildByName('walkqian').visible = true playersCont.getChildByName('walkqian').play(); this.currIndex = 'walkqian'; playersCont.vx = 4; // 判斷是否雙擊 let nt = new Date().getTime(); let ct = nt - ot; if (ct > 0 && ct < 600) { playersCont.getChildByName(this.currIndex).visible = false; playersCont.getChildByName('run').visible = true playersCont.getChildByName('run').play(); this.currIndex = 'run'; playersCont.vx = 12; } ot = nt; };

還有像跳躍動作，需要這一次跳躍動作結束后，才可以進行下一次跳躍動作，不然就會變得十分鬼畜

正常動作：

鬼畜動作：

其實在按鍵這一塊切換判斷時，需要做的判斷還有很多，比如說攻擊判斷等等，當前只是完成了最基礎的部分，畢竟Pixi雖說性能比較高，但是開發成本一些方法需要自己完善。

小節

真的是路漫漫其修遠兮，不過關于做前端游戲，我學習pixi.js其實也只是自己慢慢練手，畢竟真的去做，還是Cocos Creator和Unity方便。

如果說接下來我把自己的學習計劃完成，去真正學前端游戲的話，目標應該會是Cocos Creator

javaScript web前端 游戲開發

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

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