---
title: Gather Town 教學
image: https://i.imgur.com/58aNcwR.jpg
---

# Gather Town 教學: 活用 Active Image

## :memo: 認識互動式元件

在 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](https://www.mapeditor.org/)
一個免費的地圖編輯器，是製作地圖的好用工具

#### [polorr](https://photoeditor.polarr.co/)
線上免費的修圖軟體，可以用來點燈的效果。

<!--~~~~~~
### powerpoint 也可以用來做燈光效果的光罩
(插入圓形圖案，把背景用中心輻射方式漸層塗滿，調整節點的顏色與透明度即可做出光罩。但是兩個光源範圍有重疊時會有問題。)

如果你的問題是如何只在一個某一格觸發物件，那麼你需要知道是底下這件事。

#### 當人物所在的位置同時處於多個物件的互動範圍內，此時只會有個一個物件會被觸發，並且距離近的物件會優先觸發。

換言之，如果我有一互動物件在他的activation distance之內有不希望觸發的位置，那麼一個解決的方法是拿另一個互動物件直接蓋住那一個格。在點燈的迷宮中，我把所有沒有燈的位置都用空白圖片配上 activation distance 0 塞滿。 -->