# Figma 編輯 Gather Map 101

[TOC]

## 基本

Figma 檔案中有兩個 Page：**Maps** 與 **Objects**。

<img src="https://i.imgur.com/fX4lXvM.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />

- **Maps**: 擺放場景的地圖，其中每個 Frame 會是一個 Gather 上的 Room。
- **Objects**: 擺放共用的物件，這些物件是 Figma Component，只要修改 Component 本身，檔案中的所有 Component 實體都會跟著改變。

---

## 基礎 - 擺放物件

### Maps page 解說

**Maps** 中每個 Frame 底下都會有兩個 Group，`Foreground` 以及 `Background`。

<img src="https://i.imgur.com/n4e4ex8.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />

- `Background` 是會被人物踩在腳下的東西，例如地板、牆面和普通的不可跨越物件。
- `Foreground` 則是會蓋在人物頭上的東西，例如樹，或是也可以利用半透明做出一些效果，例如水中。

`Background` 與 `Foreground` 這兩個 Group 可以 export 成 PNG 後直接到 Gather Mapmaker 上傳為 Background 與 Foreground：

<img src="https://i.imgur.com/uC2c86x.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />

> `Foreground` 裡面有個 "Shared Foreground" 的 component 而 `Background` 裡有個 "Shared Foreground" instance 是因為我們希望有些東西同時存在於 `Background` 與 `Foreground` 內。
> 不要去編輯 Background Group 裡的 Shared Foreground。
>
> <img src="https://i.imgur.com/zO3WWRf.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />
>
> 原因之一是因為 Gather 上的 Mini Map 只會顯示 Background 而不會顯示 Foreground。讓 export 出來的 background 裡包含一些主要的 foreground 物件可以讓 Mini Map 看起來比較合理，不會像破圖。
>

### 擺放物件

點選左邊的 "Assets" → "Local components" → "Objects"，然後直接將物件拖拉到場景中。

<img src="https://i.imgur.com/wtOprbA.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />

可以回到 "Layers" 看看物件是否有被放到正確的圖層。若無，就在左手邊的圖層列表中拖拉改一下。

<img src="https://i.imgur.com/r62qU9B.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />

若要新增第二個以上同樣的物件，可以直接對物件按 Command + D，比重新拖拉一個新的還快（通常也不用再處理圖層，因為複製出來的物件會複製在同一個圖層裡）。

通常物件會被設計成要擺放在紅色的網格內。如果歪掉可以對齊一下。

<img src="https://i.imgur.com/2ya1yGF.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />

> TIP: 可以把暫時不會去動的 Group 鎖起來。
> <img src="https://i.imgur.com/jNSd29m.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />

---

## 進階 - 製作物件

### A. 直接把 Gather 上現有的東西拿來用

1. 到 Gather 的 Object Picker 選物件，切到想要的顏色和旋轉到想要的方向之後對圖片按右鍵選「另存圖片」。
<img src="https://i.imgur.com/zlemffG.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />

2. 幫存下來的東東加上 `.png` 副檔名。
<img src="https://i.imgur.com/nsKCNaE.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />

3. 打開 Figma 的 `Objects` page。
<img src="https://i.imgur.com/cmmg6g5.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />

4. 把第二部準備好的檔案拖進去放好。

5. 放好後對他按右鍵，選 "Frame Selection"。
<img src="https://i.imgur.com/LkdhBkd.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />

6. 在左手邊幫新的 Frame 取個好名字。
<img src="https://i.imgur.com/KXq4h8J.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />

7. 取完名後對他按右鍵，選擇 "Create Component"
<img src="https://i.imgur.com/MxWr6pC.png" style="max-width: 400px; border: 1px solid black; margin-bottom: 12px;" />

### B. 自己做！

TODO

- 物件需要遵照 32x32 網格

> Showoff 一個 RWD 物件：
>