[21- Pixi教學] 連線效果實作-Graphics

連連看連線及選擇題示

在進行遊戲時，清楚的玩家操作說明及互動是很重要的遊戲要素。因此，像一般的連連看遊戲，都會在玩家選擇圖示之後，把玩家所選擇的圖示做效果，提示玩家已經選擇了某個符號。並且在玩家選擇了第二個符號且連線成功時，會顯示所經過的路徑，並畫出一條線來消除這兩個符號，如下圖：

在這一篇裡，我們就要實做這樣的功能。

Graphics

這邊是官網使用Graphics的一個使用範例：Graphics
這是API說明：http://pixijs.download/release/docs/PIXI.Graphics.html
下面是畫線的一個簡單範例：

var app = new PIXI.Application(800, 600, { antialias: true });
document.body.appendChild(app.view);

var graphics = new PIXI.Graphics();

// set a line style
graphics.lineStyle(4, 0xffd900, 1);

// draw a shape
graphics.moveTo(50,50);
graphics.lineTo(250, 50);
graphics.lineTo(250, 250);
graphics.endFill();

app.stage.addChild(graphics);

var app = new PIXI.Application(800, 600, { antialias: true });

document.body.appendChild(app.view);

var graphics = new PIXI.Graphics();

// set a line style

graphics.lineStyle(4, 0xffd900, 1);

// draw a shape

graphics.moveTo(50,50);

graphics.lineTo(250, 50);

graphics.lineTo(250, 250);

graphics.endFill();

app.stage.addChild(graphics);

成果如下：

而這是畫矩型的一個簡單範例：

var app = new PIXI.Application(800, 600, { antialias: true });
document.body.appendChild(app.view);

var graphics = new PIXI.Graphics();

// draw a rounded rectangle
graphics.lineStyle(2, 0xFF00FF, 1);
graphics.beginFill(0xFF00BB, 0);
graphics.drawRoundedRect(150, 450, 300, 100, 1);
graphics.endFill();

app.stage.addChild(graphics);

var app = new PIXI.Application(800, 600, { antialias: true });

document.body.appendChild(app.view);

var graphics = new PIXI.Graphics();

// draw a rounded rectangle

graphics.lineStyle(2, 0xFF00FF, 1);

graphics.beginFill(0xFF00BB, 0);

graphics.drawRoundedRect(150, 450, 300, 100, 1);

graphics.endFill();

app.stage.addChild(graphics);

成果如下：

為方塊加上選取效果

在過去，我們在產生方塊是直接new一個Sprite並加入場景，而現在方塊要能夠有被選取、取消選取的功能，因此我們將方塊拉出成為一個獨立的類別GameIcon。
其內容如下：

import Sprite = PIXI.Sprite;
import { Loader } from "../core/Loader";

export class GameIcon extends Sprite{
    constructor(id,x,y) {
        super();
        this.texture = Loader.resources['Icon'].textures['icon_' + id];
        this.name = 'icon_' + x + "_" + y;//方便可以從父層更容易的取出這個方塊
        this.width = this.height = 45;
        this.x = (this.width + 20) * x + 22.5;
        this.y = (this.width + 6) * y + 22.5;
        this.anchor.set(0.5);//縮放時可以以中間為中心點
        this.buttonMode = true;
        this.interactive = true;
    }

    //選擇時，繪製邊框，顏色為紅色
    select = ()=>{
        let gt = new PIXI.Graphics();
        gt.lineStyle(3,0xFF0000,1);
        gt.drawRect(-3-22.5,-3-22.5,51,51);
        gt.endFill();
        this.addChild(gt);
    }

    //取消選擇時，將邊框拿掉
    unSelect = ()=>{
        this.removeChildren();
    }
}

import Sprite = PIXI.Sprite;

import { Loader } from "../core/Loader";

export class GameIcon extends Sprite{

constructor(id,x,y) {

super();

this.texture = Loader.resources['Icon'].textures['icon_' + id];

this.name = 'icon_' + x + "_" + y;//方便可以從父層更容易的取出這個方塊

this.width = this.height = 45;

this.x = (this.width + 20) * x + 22.5;

this.y = (this.width + 6) * y + 22.5;

this.anchor.set(0.5);//縮放時可以以中間為中心點

this.buttonMode = true;

this.interactive = true;

}

//選擇時，繪製邊框，顏色為紅色

select = ()=>{

let gt = new PIXI.Graphics();

gt.lineStyle(3,0xFF0000,1);

gt.drawRect(-3-22.5,-3-22.5,51,51);

gt.endFill();

this.addChild(gt);

}

//取消選擇時，將邊框拿掉

unSelect = ()=>{

this.removeChildren();

}

接著我們在GameBoard.ts裡，撰寫兩個方法iconSelected及iconUnSelected如下：

    iconSelected = (point:Point)=>{
        //根據在GameIcon設定的name來取得正確位置上的方塊
        let icon = this.getChildByName('icon_'+point.x+"_"+point.y) as GameIcon;
        icon.select();
    };

    iconUnSelected = (point:Point)=>{
        let icon = this.getChildByName('icon_'+point.x+"_"+point.y) as GameIcon;
        icon.unSelect();
    };

iconSelected = (point:Point)=>{

//根據在GameIcon設定的name來取得正確位置上的方塊

let icon = this.getChildByName('icon_'+point.x+"_"+point.y) as GameIcon;

icon.select();

};

iconUnSelected = (point:Point)=>{

let icon = this.getChildByName('icon_'+point.x+"_"+point.y) as GameIcon;

icon.unSelect();

};

然後改寫GameBoard.ts裡的createIcon方法

    createIcon = (id, x, y)=>{
        let icon = new GameIcon(id,x,y);//id為要顯示的圖片編號,x,y為位置
        this.addChild(icon);
        let iconClickHandler = ()=>{
            if (this.selected) {
                let selectCorrect = false;
                this.select2 = new Point(x, y);
                this.iconSelected(this.select2);//將方塊加上紅框
                setTimeout(()=>{//為了避免第二個方塊都還沒有繪製到邊框就被取消掉，因此在此增加setTimeout
                    if (board.hasSameValue(this.select1, this.select2)) {
                        if (! (this.select1.x == x && this.select1.y == y) ) {
                            let path = new Path(this.select1, this.select2, board);
                            if(path.canLinkInLine()){
                                this.clearIcon(this.select1);
                                this.clearIcon(this.select2);
                                eventEmitter.emit(GameFlowEvent.LinkedLineSuccess);
                                selectCorrect = true;
                                //判斷還有沒有路走
                                if(board.gameRoundEnd()){
                                    alert("恭喜完成遊戲!");
                                    this.createNewGame();
                                }else if(board.getFirstExistPath() == null){    
                                    this.reloadTimes--;
                                    board.rearrangeBoard();
                                }
                            }
                        }
                    }
                    if(selectCorrect){
                        SoundMgr.play('Sound_select_crrect');
                    }else{
                        SoundMgr.play('Sound_select_error');
                        //不能消除，取消紅框
                        this.iconUnSelected(this.select1);
                        this.iconUnSelected(this.select2);
                    }
                    this.selected = false;
                },0);
                
            } else {
                this.select1 = new Point(x, y);
                this.iconSelected(this.select1);//將方塊加上紅框
                this.selected = true;
                SoundMgr.play('Sound_select_1');
                
            }
        };
        icon.on("click", iconClickHandler);
        icon.on("tap", iconClickHandler);
    }

createIcon = (id, x, y)=>{

let icon = new GameIcon(id,x,y);//id為要顯示的圖片編號,x,y為位置

this.addChild(icon);

let iconClickHandler = ()=>{

if (this.selected) {

let selectCorrect = false;

this.select2 = new Point(x, y);

this.iconSelected(this.select2);//將方塊加上紅框

setTimeout(()=>{//為了避免第二個方塊都還沒有繪製到邊框就被取消掉，因此在此增加setTimeout

if (board.hasSameValue(this.select1, this.select2)) {

if (! (this.select1.x == x && this.select1.y == y) ) {

let path = new Path(this.select1, this.select2, board);

if(path.canLinkInLine()){

this.clearIcon(this.select1);

this.clearIcon(this.select2);

eventEmitter.emit(GameFlowEvent.LinkedLineSuccess);

selectCorrect = true;

//判斷還有沒有路走

if(board.gameRoundEnd()){

alert("恭喜完成遊戲!");

this.createNewGame();

}else if(board.getFirstExistPath() == null){

this.reloadTimes--;

board.rearrangeBoard();

}

if(selectCorrect){

SoundMgr.play('Sound_select_crrect');

}else{

SoundMgr.play('Sound_select_error');

//不能消除，取消紅框

this.iconUnSelected(this.select1);

this.iconUnSelected(this.select2);

}

this.selected = false;

},0);

} else {

this.select1 = new Point(x, y);

this.iconSelected(this.select1);//將方塊加上紅框

this.selected = true;

SoundMgr.play('Sound_select_1');

}

};

icon.on("click", iconClickHandler);

icon.on("tap", iconClickHandler);

}

為消除加上連線路徑

當成功消除兩個方塊時，應該要有剛剛連線的路徑，這樣使用者才能夠確定連線的方式是正確的，現在我們要為遊戲加上這個功能。

我希望能夠在盤面的上方加上一層圖層，能夠繪製剛剛成功消除的方塊的連線路徑。之前我們在[6 – 遊戲邏輯] 連線消除程式撰寫的地方，所撰寫的Path類別若呼叫canLinkInLine()結果反回為true的話，同時亦會把所經的路徑的點塞入path_Detail這個陣列裡面。

所以這個類別的主要職責，應該是要能夠把輸入的path裡的路徑畫出來。為了要使這個圖層能更方便的在各個地方被取用，我使用了singleton方法來建立這個物件，這樣所有的類別都可以利用LinkedLine.instance來取得這個元件惟一的實體。

下面為LinkedLine.ts的資料

import Container = PIXI.Container;
import Point = PIXI.Point;
import { Path } from "../core/Path";

export class LinkedLine extends Container {
    
    constructor() {
        super();
        this.x = 175;
        this.y = 20;
    }

    //將這個類別設定為singleton類別
    private static _instance:LinkedLine;
    public static get instance():LinkedLine{
        if(this._instance == null){
            this._instance = new LinkedLine();
        }
        return this._instance;
    }

    //輸入一個path物件，藉由paths.path_Detail來畫出連線
    public drawPath(paths:Path){
        this.removeChildren();
        let point = paths.path_Detail.pop();//取出第一個點
        let gt = new PIXI.Graphics();
        gt.lineStyle(5, 0xff0000);
        let start = this.getPositionFromPoint(point);
        gt.moveTo(start.x,start.y);//先移到第一個點的位置
        do{
            point = paths.path_Detail.pop();//取出後面的點
            let line = this.getPositionFromPoint(point);
            gt.lineTo(line.x,line.y);//繪製連線
        }while(paths.path_Detail.length > 0);

        this.addChild(gt);

        //設定連線會在500毫秒後自動消失
        setTimeout(()=>{this.removeChildren();},500);
    }
    //把遊戲盤面的x,y系統轉化為畫面上實際的坐標系統
    public getPositionFromPoint(point:Point){
        let x = (45 + 20) * point.x + 22.5;
        let y = (45 + 6) * point.y + 22.5;
        if(y < 0){
            y = -5;
        }
        if(y > 502){
            y = 510;
        }
        return new Point(x, y);
    }
}

import Container = PIXI.Container;

import Point = PIXI.Point;

import { Path } from "../core/Path";

export class LinkedLine extends Container {

constructor() {

super();

this.x = 175;

this.y = 20;

}

//將這個類別設定為singleton類別

private static _instance:LinkedLine;

public static get instance():LinkedLine{

if(this._instance == null){

this._instance = new LinkedLine();

}

return this._instance;

}

//輸入一個path物件，藉由paths.path_Detail來畫出連線

public drawPath(paths:Path){

this.removeChildren();

let point = paths.path_Detail.pop();//取出第一個點

let gt = new PIXI.Graphics();

gt.lineStyle(5, 0xff0000);

let start = this.getPositionFromPoint(point);

gt.moveTo(start.x,start.y);//先移到第一個點的位置

do{

point = paths.path_Detail.pop();//取出後面的點

let line = this.getPositionFromPoint(point);

gt.lineTo(line.x,line.y);//繪製連線

}while(paths.path_Detail.length > 0);

this.addChild(gt);

//設定連線會在500毫秒後自動消失

setTimeout(()=>{this.removeChildren();},500);

}

//把遊戲盤面的x,y系統轉化為畫面上實際的坐標系統

public getPositionFromPoint(point:Point){

let x = (45 + 20) * point.x + 22.5;

let y = (45 + 6) * point.y + 22.5;

if(y < 0){

y = -5;

}

if(y > 502){

y = 510;

}

return new Point(x, y);

}

接著在GameBoard.ts裡連線成功時加上這行來繪製連線

LinkedLine.instance.drawPath(path);

1	LinkedLine.instance.drawPath(path);

並在GameScene.ts裡加上LinkedLine元件

application.stage.addChild(LinkedLine.instance);

1	application.stage.addChild(LinkedLine.instance);

今日成果

線上demo：http://claire-chang.com/ironman2018/1105/
今日成果下載：ironman20181105

Claire's Blog