# 前景・背景の設定

## イメージを共有しよう！

ココフォリアには、オフラインセッションのプレイマットのイラストやボードゲームの盤面のイラストのように、背景となる画像を設定することができます。システム・シナリオのイメージや場面のイメージに合わせて設定すると、没入感が増すでしょう！

***

### 前景・背景

ココフォリアの盤面には、背景のように使える画像を 2 種類設定できます。

![](https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FuJWIIYM3eHCOxfHl2TuM%2F03-2_forGM_board_01_board_modify.png?alt=media\&token=e50d0c0d-554d-4c2d-bcac-4544331f851d)

<table><thead><tr><th width="220">機能</th><th>説明</th></tr></thead><tbody><tr><td>①前景</td><td>グリッド線が表示されている部分のみに設定される画像</td></tr><tr><td>②背景</td><td>画面全体とグリッド線が表示されている部分それぞれに設定される画像</td></tr></tbody></table>

①には前景に設定した画像の下に背景の画像が表示されるようになっています。

背景に青と水色の画像、前景に黒い透過画像を設定すると、次のように表示されます。

<figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2F89EJW5bRBBwfcPCNqAT8%2F03-2_forGM_board_02_transmissionboard.png?alt=media&#x26;token=e87c2a34-3823-47c6-a6ff-77da943b2059" alt="" width="563"><figcaption></figcaption></figure>

これを利用すると、より臨場感のある描写が可能になります。\
例えば、背景に山の画像を、前景に透過された動く雲の画像をセットすることで、山が曇っている場面を表現することができます！

***

### 設定方法

前景・背景は以下のように 設定することができます。

１．画像選択ウィンドウを以下のいずれかの方法で開く

* 前景/背景の変更したい方をダブルクリック
* 前景/背景の変更したい方で右クリック → **前景・背景を変更**→フィールド設定ウィンドウから前景/背景の変更したい方を選択
* 画面右下の![](https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FXoIsL0PAr3Mriuvtx3CB%2Fimage.png?alt=media\&token=a77e595c-4b5b-4cfa-a004-b32be84d1e3f)(盤面メニュー) →  **前景・背景を変更**→フィールド設定ウィンドウから前景/背景の変更したい方を選択

<figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FZfDj19sPQFKOswSKDIom%2F03-2_forGM_board_03_imageselect.png?alt=media&#x26;token=657c7b70-c6a2-4306-ad15-e4de95b64395" alt="" width="563"><figcaption></figcaption></figure>

２．設定したい画像を画像選択画面にドラッグ＆ドロップする

３．設定したい画像を選択する\
　　画像を設定しない場合は、画像サムネイル左上の **NOIMAGE** をクリックしてください。

{% hint style="info" %}

#### 画像選択ウィンドウでの画像のアップロード

画像をアップロードする際にタブ分けをすることができます。\
例えば、前景に使用する予定の画像なら前景のタブにアップロードするといったように、画像の用途によってタブを使い分けると画像を探す時に便利です。\
もちろん、背景タブにドラッグ＆ドロップした画像を前景に使用するといったこともできます。

また、セッションに使用する画像がたくさんある場合、一度に複数枚ドラッグ＆ドロップしておくこともできます。事前にドラッグ＆ドロップしておいた画像をクリックすると、その画像を選択することができます。
{% endhint %}

***

### フィールド設定ウィンドウ <a href="#edit-view" id="edit-view"></a>

グリッド線が表示されている部分の大きさを変えたい！という場合もあるでしょう。\
フィールド設定ウィンドウでは、パネルの大きさなどの設定を変更することができます。

<figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FDmK3K7cTrp3I0CGWSBaC%2F03-2_forGM_board_04_fieldsetting_modify.png?alt=media&#x26;token=28dd2123-a4d1-4e69-b746-bd4199006e7e" alt="" width="452"><figcaption></figcaption></figure>

#### ①横幅・縦幅

グリッド線が表示されている部分のパネルの横幅・縦幅を設定できます。半角数字で設定してください。\
`幅「1」は24pxです。`

#### ②画像を自動トリミングする

前景/背景画像について、縦横比を変更して表示するかトリミングするかを設定できます。

OFF(白): 設定された画像の縦横比が変更され、パネルの横幅・縦幅に合うようになります。\
ON(青): 設定された画像の縦横比は変わらず、表示しきれない部分はトリミングされます。

#### ③背景選択

画面全体とグリッド線が表示されている部分両方に画像を設定できます。

#### ④前景選択

グリッド線が表示されている部分にのみ画像を設定できます。

***

### 自動トリミングを適用しない場合・適用する場合の比較

以下の正方形の画像を、横長のフィールドに前景として設定してみます。

<div align="center"><figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2F2oMol2pFdVyzMaANCvrv%2F03-2_forGM_board_05_boardimage.png?alt=media&#x26;token=0efcf5a3-af51-46f9-92c3-922ed84703f2" alt="" width="375"><figcaption></figcaption></figure></div>

#### 自動トリミング機能をOFFにした場合

<div align="center"><figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FlZShkgqUdHch9hcSCHB2%2F03-2_forGM_board_06_change_aspectratio.png?alt=media&#x26;token=65bb4e13-db21-4fef-aefb-715c9bbd6d59" alt="" width="498"><figcaption></figcaption></figure></div>

上下方向に圧縮されます。

#### 自動トリミング機能をONにした場合

<div align="center"><figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FEgTMEv2IUKjzhkBt06GQ%2F03-2_forGM_board_07_autotrimming.png?alt=media&#x26;token=f9e82c81-79c2-4279-8d6c-997ceb1bcc37" alt="" width="478"><figcaption></figcaption></figure></div>

上下がトリミングされます。