Gather Town 教學: 活用 Active Image

認識互動式元件

在 gather town 裡面可以透過上傳圖片的方式，製作出客製化的物品。如果想要讓客製化的物品多一些變化，只要把物品設置為互動式物件(interactive object)即可。

互動物件和一般物件不同，當人物進入觸發範圍內(activation distance)時就會進行觸發(此時會出現按下x鍵即可進行互動的訊息)。如果沒有特別需求，一般我們會把物品設為 Note object。 該物件按下x鍵時，會出現預設的訊息。(注意: message 部分一定要填(可以隨便填個空格之類的)，不然不能 select。)

預備知識

1.物件的大小

地圖上每一格的大小是32x32個pixels。所以一個40x70個pixels的圖片上傳後會變成一個大小為2x3格的物件，並且右邊會有24個pixels寬的空白，下面會有26個pixels寬的空白。

2. Activation distance

從物品所擺放的格子往外開始算的觸發範圍。下圖是一個大小為 3x2 格的物件。如果 Activation distance 是 3，那麼整個觸發範圍會是 9x8 格(如下圖所示，也就是上下左右各拓展 3 格)。如果 distance設為 0 則只有直接站在該物件上才能觸發。

3. Active image (在 advanceed options 中)

當物品被觸發後，顯示出來的圖片。這個圖片如果和原本的大小不同，會以對齊原始圖片左上角的方式來呈現觸發後的圖片。

基本教學範例

1. 物品變化

當 object image 和 active image 不同時，觸發時就會產生變化。

例如 object image 使用

，active image 使用 就會產生以下的效果。

2. 物品出現

當 object image 使用空白圖片時，觸發時就會產生物品突然出現的效果。

例如 object image 使用空白圖片

，active image 使用 就會產生以下的效果。

3. 物品消失

當 active image 使用空白圖片時，觸發時就會產生物品突然消失的效果。

例如 object image

，active image 使用 使用空白圖片 就會產生以下的效果。

進階範例

1. 對話框

原圖是 npc 圖片

，而希望觸發後是帶有對話的圖片 。 此時 active image 設為有對話的圖片，但是 object image 不能直接使用只有 npc 的圖片。必須要從帶有對話的圖片把對話用修圖修掉，進而得到一個大小相同的圖片才可以作為 object image。 否則觸發後人物的位置會跑掉。

2. 物品變大

如果原圖是大小 1x1 的寶可夢，希望觸發後變成大小為 5x5 的寶可夢。

如果直接使用的話，變大的寶可夢中心位置會跑掉。

此時比較好的做法是把 1x1 的寶可夢圖片四周加上空白變成 5x5 圖片
(可以透過小畫家3D改變畫布大小來實作)。如此一來結果會變成

3. 物品在指定位置出現。

如果我們今天想走到左邊的祭壇時，在畫面的中心顯示大小為 15 x9 格的題目圖片

因為觸發的位置與題目圖片左上角相差10格，所以我們可以把題目圖片的原始圖片設為 1x11的空白圖片 (下圖白色框框的部分)， activation distance 設為 0，active image 設為題目圖片即可。

練習題

如果你已經掌握以上技巧，請試著想想怎麼做出下面的效果。

1. 簡易的動畫

2. 點燈的效果

後記

Active image 的原理很簡單，但是只要巧妙地使用產生很多的變化。就像變魔術一樣，手法往往很簡單，如何呈現才是最重要的部分。歡迎大家一起分享你的創意！

最後提供一些免費工具。

tiled

一個免費的地圖編輯器，是製作地圖的好用工具

polorr

線上免費的修圖軟體，可以用來點燈的效果。