游戏引擎Phaser初识(二)

2019 Java 开发者跳槽指南.pdf (吐血整理)….>>>

今天将游戏引擎Phaser的基础部分,常用事件和音频的加载。
友情提示:阅读本文大概需要 15分钟

游戏引擎Phaser初识(二)

前言

开发网页游戏,很久之前用AS3做合金弹头,现在Flash慢慢没落之后,新一代的H5游戏引擎崛起,比较知名的有coco2d.js、Unity-2D、laya,以及老东家的 Egret2D、Egret3D,这些主流引擎都非常强,如果你对TS比较熟练的话,这里推荐你用egret,如果是你是原生JS的爱好者(其实本文的主角也支持TS,不过既然你都用TS了,何不尝试egret呢),今天我将带你一起领略一款轻量高效又免费的H5引擎:Phaser。

回顾

前面说道Phaser是H5 2D游戏开发的开源免费框架,支持JS和TS,基于Pixi.js引擎,内置游戏对象的物理属性,渲染模式同时支持Canvas和WebGL,基于浏览器支持可自由切换。

鉴于Phaser轻量便捷、免费的特点,使用Phaser来开发小型也有的优势显而易见,可以直接在支持Canvas的浏览器中直接引用或安装Phaser来进行游戏开发。

上一篇说到Phaser的生命周期,以及Phaser资源引用、不同主函数的模块,

音视频的导入

function preload(){
  game.load.audio("bgmap3","./assets/audio/bg.ogg");
}
function create(){
  var bgmusic = game.add.audio("bgmap3");
  bgmusic.play();
}

创建了一个音频对象bgmusic,可以对其播放,暂停,调节音量。备注:因为跨域,音频文件的加载需要搭建本地服务器。

// 音频常用的api有播放、暂停、恢复、停止、分段标注、淡入淡出
  this.preload = function(){
    game.load.audio('music''asset/sound/1.mp3');
    game.load.image('btn_play''asset/sound/btn_play.png');
    game.load.image('btn_pause''asset/sound/btn_pause.png'); 
    game.load.image('btn_resume''asset/sound/btn_resume.png');
    game.load.image('btn_stop''asset/sound/btn_stop.png');
  }

  this.create = function(){
    var sound = game.add.audio('music'0.1);

    var btn_play = game.add.button(26020'btn_play'function(){
      sound.play(); //播放
    });

    var btn_pause = game.add.button(260,145'btn_pause'function(){
      sound.pause(); //暂停
    });

    var btn_resume = game.add.button(260280'btn_resume'function(){
      sound.resume(); //恢复
    });

    var btn_stop = game.add.button(260415'btn_stop'function(){
      sound.stop(); //停止
    });

    //  标注声音 sound.addMarker(name, start, duration, volume?, loop?); 
    //  移除标注 sound.removeMarker(name);
    sound.addMarker('marker1'51);

    // 标注       
    var btn_play = game.add.button(26020'btn_play'function(){  
      sound.play('marker1'); //播放
    });
    var sound = game.add.audio('music');


    var btn_play = game.add.button(26020'btn_play'function(){      
      sound.fadeIn(3000); //淡入   
    });

    var btn_pause = game.add.button(260,145'btn_pause'function(){           
      sound.fadeOut(3000); //淡出          
    });

phaser基本事件

  • game.onblur
    //失去焦点

  • game.onFocus
    // 获取焦点

  • game.onPause
    // 暂停焦点

  • game.onResume
    // 恢复事件

  • game.scale.onFullScreenChange
    // 进入、退出全屏

  • game.scale.onOrientationChange
    // 设备横竖屏切换

  • game.scale.onSizeChange
    // 游戏尺寸改变

  • game.load.onFileComplete
    // 单个资源加载完成

  • game.load.onFileError
    // 当文件加载失败

  • game.load.onFileStart
    // 当文件开始加载

  • game.load.onLoadComplete
    // 当所有资源加载完成

Phaser常用动画

var tween = game.add.tween();

tween.onStart                 // 动画开始

tween.onComplete         // 动画完成

tween.onLoop                // 动画循环

tween.onRepeat            // 动画重复

var animation = new Phaser.Animation()

animation.onStart          //动画开始

animation.onComplete  // 动画完成

animation.onLoop         // 动画循环

animation.onUpdate     // 动画的帧变化时

Phaser.Input对象

它包括鼠标事件、键盘事件以及触摸事件等等。

function create(){
  game.input.onDown.addOnce(function(){
    // 按下后的回调事件
  })

  game.input.onUp.addOnce(function(){
    // 按下离开后的回调事件
  })

  game.input.onTap.addOnce(function(){
    // 轻击后的回调事件
  })

  game.input.onHold.addOnce(function(){
    // 长按后的回调事件
  })

  game.input.addMoveCallback(move,this);
    // 鼠标/手指移动监听

  game.input.deleteMoveCallback(move,this);
    // 移除鼠标/手指移动监听
}

function move(){
  document.title = game.rnd.between(0,100)
}
Phaser.Pointer对象

Pointer对象即指针对象,可以是鼠标、手指或其他的输入设备。

function create(){
  this.pointer = game.input.activePointer;
  // 获取Pointer对象
}

function update(){
  document.title = this.pointer.clientX;
  // this.pointer.clientY
  // this.pointer.x / this.pointer.y
  // 指针事件发生时的x、y坐标
  if(this.pointer.isDown){
    // 指针按下后的回调
  }
  if(this.pointer.isUp){
    // 指针弹起后的回调
  }
}
Phaser.Keyboard对象
function create(){
  // 获取键盘对象
  this.keyboard = game.input.keyboard;

  // 添加一个键对象
  this.keyA = this.keyboard.addKey(Phaser.Keyboard.A);

  // 创建一个方向键对象
  this.cursor = this.keyboard.createCursorKeys();

  // 监听所有按键的回调,包括onDown,onUp...

  this.keyA.onDown.addOnce(function(){
    // 按下自定义键对象后的回调函数
  })

  this.keyA.onUp.addOnce(function(){
    // 释放自定义键后的回调函数
    // 如果这个自定义键还处于按下状态或其他状态,则暂不执行
  })
}

function update(){
  if(this.keyA.isDown){
    // 按下自定义键的状态
  }
  if(this.cursor.left.isDown){
    // 按下了 left 键
  }
  if(this.cursor.right.isDown){
    // 按下了 right 键
  }
}

比如一个常见的业务场景,游戏中点击某个按钮或点击游戏特定区域实现暂停,这里可以根据游戏情况给定游戏暂停的条件用事件。

function create(){
  game.onPause.add(function(){
    console.log("游戏已暂停")
  })
}

function update(){
  game.paused = true;
}

游戏对象的交互

Phaser.Events对象

事件集合体,挂靠在宿主(游戏中的显示对象)身上,也有部分是系统事件。

function create(){
  game.state.backgroundColor = "#F20";
  this.oBtext = game.add.text(0,0,"测试对象");

  // 开启对象的输入事件(可以接收回调事件)
  this.oBtext.inputEnabled = true

  // onInputDown、onInputUp、onInputOver、onInputOut 按下、释放、经过、离开
  this.oBtext.events.onInputDown.addOnce(testOnDown);
}

function testOnDown(){
  // 点击 舞台中的“测试对象”后的回调函数
}
Phaser.InputHandler对象

封装了一些与宿主相关的用户交互方法和用户输入属性。

function create(){
  game.state.background = "#F20";

  this.oBtext1 = game.add.text(0,0,"测试对象")
  this.oBtext2 = game.add.text(0,0,"文本对象")

  this.oBtext2.inputEnabled = true;
  // 开启对象的 输入事件(不是点击输入,是允许事件)

  this.inputHandler = this.oBtext2.input;
  // 获取文本对象的 inputHandler 对象

  this.inputHandler.disableDrag();
  // 禁止拖拽

  this.inputHandler.enableDrag();
  // 运行拖拽对象

  this.inputHandler.boundsSprite = this.oBtext1;
  // 限制 oBtext2 的拖拽范围 是 oBtext1的文本大小

  this.inputHandler.useHandCursor = true;
  // 是否使用鼠标手形图标

  inputHandler.pointerOver();
  // 判断指针是否在对象内

  inputHandler.pointerOut();
  // 判断指针是否在对象之外

  inputHandler.pointerX;
  // 当指针在对象内部时,相对于对象的 x 坐标

  inputHandler.pointerY;
  // 当指针在对象内部时,相对于对象的 y 坐标

  inputHandler.bringToTop;
  // 当点击或拖动该对象时是否把该对象 置顶显示(一般是true)
}

Phaser的交互事件远不止这些,但我不是官网API的搬运工过,这些是我觉得平常最常用的,足以开发小型页游的一些基本交互事件,也是学习Phaser最先应当掌握的东西。具体的PAI后续将以表格的形式总结出来,方便我自己还有大家一起学习。

游戏就绪之前

一般游戏舞台,一般都是由背景、精灵、舞台其他无关建筑构成。前面说过,这些资源在 boot 函数阶段或 loading 阶段分步加载,当资源加载完之后,我们一般会用指示条或其他形式来告知用户游戏目前状态,当全部加载完之后,可以直接进入游戏主函数,也可以显示一张图片or文件,由用户点击触发事件进入游戏,比如用 button 或者 text 添加事件来进入主游戏,例如

游戏引擎Phaser初识(二)

function Menu(game) {
  this.preload=function () {
    game.gameData = {
    maps:[
      {name:"map-0",entries:[[7,14,1,1]]},
      {name:"map-1",entries:[[0,8,2,1],[7,0,0,0],[15,12,3,0]]},
      {name:"map-2",entries:[[10,0,2,0],[15,7,1,0],[11,15,4,1]]},
      {name:"map-3",entries:[[0,8,1,2],[9,0,3,1],[13,15,3,2]]}, 
      {name:"map-4",entries:[[0,11,5,0],[5,0,2,2],[7,15,4,2]]},
      {name:"map-5",entries:[[15,4,4,0]]}
    ],
    currMap:0,
    currPos:[7,5],
    currFace:"DOWN",
    items:[]
    };
  };

  this.create = function() {
    var txt = game.add.text((game.width)/2200"点击屏幕即开始游戏", {fontSize: "16px", fill: "#FFFFFF" });
    txt.anchor.setTo(0.5);  
    game.input.onDown.add(function(){game.state.start("main");}, this);
  };
}

最后

今天的 H5游戏引擎Phaser(二) 就分享到这里,内容略显杂乱,下篇将会对Phaser 基本API 重新梳理,有错误或问题欢迎大家留言,谢谢 ~ 

原文始发于微信公众号(程序员思语):游戏引擎Phaser初识(二)