[19- Pixi教學] 連連看盤面實作

PIXI顯示元件介紹

PixiJS裡較常使用的顯示元件有:PIXI.ContainerSpriteAnimatedSprite

PIXI.Container在官網上的解釋如下:

A Container represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.

簡而言之Container就是一個可以放其他顯示元件的一個容器,像SpriteAnimatedSprite等也都是繼承自Container的顯示元件,因此也都可以再在裡面放其他的顯示元件。
下面是一個簡單的使用範例:

Sprite是可以放單張的靜態圖檔元件。

The Sprite object is the base for all textured objects that are rendered to the screen

下面是一個簡單的使用範例:

AnimatedSprite則可以把多張連續的圖檔播放成連續的動畫。

An AnimatedSprite is a simple way to display an animation depicted by a list of textures.

下面是一個簡單的使用範例:

連連看邏輯程式

之前在第一部份我們完成的程式碼在此:ironman20181022

在這一篇我們要將第一篇所寫完的連線邏輯套入pixiJS版本的連連看遊戲之中。

搬移邏輯部份的檔案

在邏輯程式的部份,PathBoardDirection都可以直接移來專案內使用。
這些程式碼的邏輯解釋在前幾篇的系列文中都有詳細的說明。

新增Path.ts內容如下:

新增Board.ts,內容如下:

新增Direction.ts,內容如下:

需要另外撰寫的部份

第一部份邏輯的介面我們是使用angularJS來做呈現,而現在的專案則需要使用pixiJS,因此呈現部份的程式碼需要重新撰寫。

首先我們先創立一個檔案名為GameBoard.ts,要放置所有的圖示。

然後在GameScene.ts加入這個元件:




實際撰寫GameBoard的邏輯

完整的程式碼內容如下:

今日成果

今天終於有個連連看遊戲的樣子了!

程式碼下載:ironman20181103
線上demo:http://claire-chang.com/ironman2018/1103/

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *