這是我參與更文挑戰的第7天，活動詳情查看：更文挑戰javascript

序

很久沒記錄過博客了，原本想五一寫一下的，結果太忙了html

本文是繼上一次斷章的《想要作網頁遊戲怎麼辦？PixiJs 篇（二）》後續篇

java

正文開始

上一篇中實現的效果是動畫精靈出現了，可是尚未將動畫精靈和鍵盤行走結合起來canvas

在動畫精靈生成以後，能夠爲精靈添加狀態屬性，由於精靈是由4x4的雪碧圖構成的，因此按照雪碧圖進行分析，精靈能夠分爲4種狀態，分別是向下、向左、向右、向上。數組

關於精靈的狀態能夠經過中文網進行簡單瞭解：Pixi.js中文網markdown

也能夠看這篇文章：blog.csdn.net/FE_dev/arti…app

在雪碧圖中，其實包含了4種靜態狀態和4種動態狀態ide

精靈的靜態狀態定義精靈在不移動時的四個位置
精靈的動畫狀態定義了精靈移動時的四個動做序列

下面使用states去定義這些狀態函數

// 設置一個states對象字面量屬性
jujin.states = {
	down: 0,
	left: 4,
	right: 8,
	up: 12,
	walkDown: [0, 3],
	walkLeft: [4, 7],
	walkRight: [8, 11],
	walkUp: [12, 15]	
};
複製代碼

使用sprite.show(sprite.states.靜止狀態);能夠只顯示精靈某一靜止狀態使用sprite.playAnimation(sprite.states.動做狀態);語句能夠將只顯示精靈某一動做狀態oop

好比使用如下代碼測試：

// 設置一個states對象字面量屬性
jujin.states = {
    down: 0,
    left: 4,
    right: 8,
    up: 12,
    walkDown: [0, 3],
    walkLeft: [4, 7],
    walkRight: [8, 11],
    walkUp: [12, 15]
};
// jujin.show(jujin.states.left);
jujin.playAnimation(jujin.states.walkUp);
複製代碼

效果：

目前已經將精靈的動做效果告一段落

接下來將鍵盤事件添加進入關於鍵盤移動的方法我使用的是中文網提供的keyboard方法

此方法能夠監聽並捕獲鍵盤事件。使用起來也很方便：let keyObject = keyboard(keyValue); 能夠爲keyboard對象定義press和release方法

keyObject.press = () => {
  //key object pressed
};
keyObject.release = () => {
  //key object released
};
複製代碼

使用unsubscribe方法刪除事件監聽器keyObject.unsubscribe();

下面是keyboard方法代碼

// 鍵盤函數
function keyboard(value) {
  let key = {};
  key.value = value;
  key.isDown = false;
  key.isUp = true;
  key.press = undefined;
  key.release = undefined;
  //The `downHandler`
  key.downHandler = event => {
    if (event.key === key.value) {
      if (key.isUp && key.press) key.press();
      key.isDown = true;
      key.isUp = false;
      event.preventDefault();
    }
  };

  //The `upHandler`
  key.upHandler = event => {
    if (event.key === key.value) {
      if (key.isDown && key.release) key.release();
      key.isDown = false;
      key.isUp = true;
      event.preventDefault();
    }
  };

  //Attach event listeners
  const downListener = key.downHandler.bind(key);
  const upListener = key.upHandler.bind(key);
  
  window.addEventListener(
    "keydown", downListener, false
  );
  window.addEventListener(
    "keyup", upListener, false
  );
  
  // Detach event listeners
  key.unsubscribe = () => {
    window.removeEventListener("keydown", downListener);
    window.removeEventListener("keyup", upListener);
  };
  
  return key;
}
複製代碼

接下來須要多添加一個按鍵判斷方法keyMove，使用asdw控制：

this.keyMove(jujin)
複製代碼

// 鍵盤控制移動
keyMove(person) {
    let left = keyboard('a'), up = keyboard('w'), right = keyboard('d'), down = keyboard('s');
    left.press = () => {
        // 按鍵按下使用動做狀態
        person.playAnimation(person.states.walkLeft);
        person.vx = -2;
        person.vy = 0;
    };
    left.release = () => {
    	// 中止動做狀態
        person.stopAnimation();
        // 每次按鍵擡起時使用靜止狀態
        person.show(person.states.left);
        person.vx = 0;
        person.vy = 0;
    };
    right.press = () => {
        person.playAnimation(person.states.walkRight);
        person.vx = 2;
        person.vy = 0;
    };
    right.release = () => {
        person.stopAnimation();
        person.show(person.states.right);
        person.vx = 0;
        person.vy = 0;
    };
    up.press = () => {
        person.playAnimation(person.states.walkUp);
        // person.show(person.states.up);
        person.vx = 0;
        person.vy = -2;
    };
    up.release = () => {
        person.stopAnimation();
        person.show(person.states.up);
        person.vx = 0;
        person.vy = 0;
    };
    down.press = () => {
        person.playAnimation(person.states.walkDown);
        // person.show(person.states.down);
        person.vx = 0;
        person.vy = 2;
    };
    down.release = () => {
        person.stopAnimation();
        person.show(person.states.down);
        person.vx = 0;
        person.vy = 0;
    };
},
複製代碼

對了，在使用時要記得加上精靈的運動

this.app.ticker.add(()=> this.gameLoop(jujin ));
複製代碼

gameLoop(person){
    person.x += person.vx;
    person.y += person.vy;
},
複製代碼

這樣操做以後，就能夠達到鍵盤控制精靈運動的效果了

完整代碼以下：

<template>
    <div id="animation"></div>
</template>

<script> import * as pixi from 'pixi.js' // 鍵盤函數 function keyboard(value) { let key = {}; key.value = value; key.isDown = false; key.isUp = true; key.press = undefined; key.release = undefined; //The `downHandler` key.downHandler = event => { if (event.key === key.value) { if (key.isUp && key.press) key.press(); key.isDown = true; key.isUp = false; event.preventDefault(); } }; //The `upHandler` key.upHandler = event => { if (event.key === key.value) { if (key.isDown && key.release) key.release(); key.isDown = false; key.isUp = true; event.preventDefault(); } }; //Attach event listeners const downListener = key.downHandler.bind(key); const upListener = key.upHandler.bind(key); window.addEventListener( "keydown", downListener, false ); window.addEventListener( "keyup", upListener, false ); // Detach event listeners key.unsubscribe = () => { window.removeEventListener("keydown", downListener); window.removeEventListener("keyup", upListener); }; return key; } export default { name:'animation', components: {}, props: {}, data() { return { loader: null, app:null, player: null, }; }, created() {}, mounted() { this.initState(); this.players(); }, watch: {}, computed: {}, methods: { initState() { this.loader = new pixi.Loader(); //Create a Pixi Application 建立一個pixi應用 this.app = new pixi.Application({ width: 735, // default: 800 寬度 height: 640, // default: 600 高度 antialias: true, // default: false 反鋸齒 transparent: true, // default: false 透明度 resolution: 1 , // default: 1 分辨率 backgroundAlpha: 1 // 設置背景顏色透明度 0是透明 }); //其實上面已經設置透明瞭，這就不必設置背景顏色了 this.app.renderer.backgroundColor = 0x000000; document.getElementById('animation').appendChild(this.app.view) this.app.renderer.view.style.display = "block"; this.app.renderer.view.style.marginLeft = "30px"; //設置canvas的左外邊距 this.app.renderer.autoResize = true; this.app.renderer.view.style.border = "1px dashed black"; //設置邊框 }, 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(); // 設置一個states對象字面量屬性 jujin.states = { down: 0, left: 4, right: 8, up: 12, walkDown: [0, 3], walkLeft: [4, 7], walkRight: [8, 11], walkUp: [12, 15] }; this.keyMove(jujin) this.app.ticker.add(()=> this.gameLoop(jujin )); }) }, // 鍵盤控制移動 keyMove(person) { let left = keyboard('a'), up = keyboard('w'), right = keyboard('d'), down = keyboard('s'); left.press = () => { // person.show(person.states.left); person.playAnimation(person.states.walkLeft); person.vx = -2; person.vy = 0; }; left.release = () => { person.stopAnimation(); person.show(person.states.left); person.vx = 0; person.vy = 0; }; right.press = () => { person.playAnimation(person.states.walkRight); person.vx = 2; person.vy = 0; }; right.release = () => { person.stopAnimation(); person.show(person.states.right); person.vx = 0; person.vy = 0; }; up.press = () => { person.playAnimation(person.states.walkUp); // person.show(person.states.up); person.vx = 0; person.vy = -2; }; up.release = () => { person.stopAnimation(); person.show(person.states.up); person.vx = 0; person.vy = 0; }; down.press = () => { person.playAnimation(person.states.walkDown); // person.show(person.states.down); person.vx = 0; person.vy = 2; }; down.release = () => { person.stopAnimation(); person.show(person.states.down); person.vx = 0; person.vy = 0; }; }, gameLoop(person){ person.x += person.vx; person.y += person.vy; }, setTexture (texture) { // console.log(texture) let sprite = new pixi.AnimatedSprite(texture); return sprite; }, }, }; </script>
<style scoped>
</style>

複製代碼

想要作網頁遊戲怎麼辦 ？PixiJs 篇（三）

序

正文開始

目前已經將精靈的動做效果告一段落

想要作網頁遊戲怎麼辦？PixiJs 篇（三）