開啟按鈕效果
官網點擊效果範例：https://pixijs.io/examples/#/basics/click.js
預設sprite是無法被點擊到的，因為要偵測這些事件會讓sprite更耗資源，因此如果我們想要讓一個sprite可以被點擊，則要特別對元件設定：
|
1 2 3 4 5 6 7 8 |
// Opt-in to interactivity sprite.interactive = true; // Shows hand cursor sprite.buttonMode = true; // Pointers normalize touch and mouse sprite.on('pointerdown', onClick); sprite.on('click', onClick); // mouse-only sprite.on('tap', onClick); // touch-only |
在連連看專案加入按鈕
ButtonBase
因為連連看裡面有許多個按鈕，每個按鈕雖然功能不同，但是會有許多相似的設定，因此將按鈕抽出一個ButtonBase的父類別
ButtonBase.ts的內容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import Sprite = PIXI.Sprite; import {Loader} from "../core/Loader"; export class ButtonBase extends Sprite{ constructor(_id:string, textureID:string, _x:number, _y:number) { super(); this.texture = Loader.resources[_id].textures[textureID]; this.interactive = true; this.buttonMode = true; this.x = _x; this.y = _y; this.anchor.set(0.5); //按下效果 this.on("mousedown", this.mouseDownEffect.bind(this)); this.on("mouseup", this.mouseUpEffect.bind(this)); this.on("mouseout", this.mouseOutEffect.bind(this)); this.on("touchstart", this.mouseDownEffect.bind(this)); this.on("touchend", this.mouseUpEffect.bind(this)); this.on("mouseup", this.trigger.bind(this)); this.on("touchend", this.trigger.bind(this)); } public trigger(){ } public mouseDownEffect():void{ } public mouseUpEffect():void{ } public mouseOutEffect():void{ } } |
SoundBtn
新增一個檔案SoundBtn.ts，製作聲音開/關按鈕，內容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import {ButtonBase} from "./ButtonBase"; import {Loader} from "../core/Loader"; import {SoundMgr} from "../core/SoundMgr"; export class SoundBtn extends ButtonBase { private isMute: boolean = false; constructor() { super('Button','Sound_On',50,170); this.updateImage(); } public trigger(){ this.isMute = !this.isMute; SoundMgr.mute(this.isMute); this.updateImage(); } updateImage = ()=>{ if (this.isMute){ this.texture = this.texture = Loader.resources['Button'].textures['Sound_Off']; } else{ this.texture = this.texture = Loader.resources['Button'].textures['Sound_On']; } } } |
GameScene
因為除了聲音按鈕外，要設定整個場景還需要加入非常多東西，因此我新增了一個類別叫GameScene，主要在將所有場景上的物件加進場景裡
GameScene.ts其內容如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import {Loader} from "../core/Loader"; import {application} from "../Main"; import {SoundBtn} from "./SoundBtn"; export class GameScene { public static draw(){ //加入背景 application.stage.addChild(PIXI.Sprite.from(Loader.resources["background"].texture)); //加入按鈕 application.stage.addChild(new SoundBtn()); } } |
實作靜音功能
在SoundMgr.ts加上靜音功能
|
1 2 3 4 5 6 7 8 9 10 11 |
static isMute: boolean = false; public static mute(value:boolean):void { this.isMute = value; if (this.isMute) { //禁聲 Howler.mute(true); } else { //出聲 Howler.mute(false); } } |
今日成果
線上demo：http://claire-chang.com/ironman2018/1102/
檔案下載：ironman20181102