手軽にココフォリアでの素材配置が学べるキットを作ったので、実際に素材を配置するまでのレクチャーを行います。
練習キットはBOOTHにて無料配布しております。
【制作者向け】ココフォリア練習キット｜demidunit - BOOTH
※作者がマーダーミステリーのシナリオ制作者のため、マーダーミステリーでよく使う機能について主に話しています。ご了承ください。
1. 新規ルームに練習キットを読み込む
まずはココフォリアでアカウント登録し、ルームを作成しましょう。
アカウント登録およびルーム作成の方法はココフォリア公式ドキュメントでわかりやすく説明されていますので、そちらを参照してください。
DICEBOTはなんでもOKです。マーダーミステリーのシナリオではダイスを振る機会がほとんどないからです。今回の練習キットでも使いません。
とりあえず一番上のDICEBOTにしておきましょう。
「ココフォリア練習キット」に入っている「kit_room.zip」をルーム上にドラッグ＆ドロップします。
すると自動で素材が読み込まれ、設定された通りに配置されます。
このような画面が表示できたら読み込み成功です。
失敗してしまう場合、「ココフォリア練習キット」をダウンロードし直したり、解凍し直してみてください。（「kit_room.zip」自体は解凍せずに、zipファイルのままドラッグ＆ドロップしてください）
（ちなみに…この「ドラッグ&ドロップで自動読み込みできるzipファイル」は2021年9月現在、ココフォリア支援者向けのコマンドによって生成されています。
PIXIV FANBOXでココフォリアに月々定額の支援を行うことで、特別な機能のコマンドを知ることができます。気になる方はぜひ。300円/月からできますよ。
マーダーミステリーのGMにうってつけのタイマー表示コマンドなどもあり、とても便利です。）
2. 素材をアップロードする
ルームの右下にある鉛筆マークから「スクリーンパネルを追加」を選択します。
ココフォリアでは、前景・背景以外の画像素材は全て「パネル」と呼びます。
中でも画面上に常に表示される画像素材は「スクリーンパネル」と呼びます。
今表示されているホームズのシルエット画像も、虫眼鏡のマーカーも、情報カードも、「ココフォリア練習キット」と書かれたタイトル画像も全て「スクリーンパネル」です。
マーカーパネルという別の存在もありますが、マーダーミステリーにおいてはほぼ使われていないため説明は省略します。とりあえず「画像を配置したいときはスクリーンパネル」と覚えましょう。
（前景・背景、パネル等々の説明もココフォリア公式ドキュメントにありますので、詳しく知りたい方はそちらを参照してください）
「スクリーンパネルを追加」を選択すると、以下のようなウィンドウがルーム内に出てきます。
タブが「スクリーン」になっていることを確認して、「練習素材」＞「スクリーン表」内のファイルを全て追加しましょう。
右上の＋マークから追加することもできますし、ドラッグ&ドロップで一気に追加することもできます。
次にタブを「スクリーン裏」にし、「スクリーン裏」フォルダ内のファイルを全て追加します。
追加できたら、素材のアップロードは完了です。
3. 見本を見ながら、素材を配置する
これが盤面の完成図です。「練習キット」内にも「完成図.jpg」として入っています。
この状態を目指して、次の手順を踏んで、素材を正しく配置していきましょう。
（ちなみにホームズとワトソンがやっているのは人力アキネイターです）
＜カードを作る＞
まずは右下の鉛筆マークから「スクリーンパネルを追加」を選び、「情報カード-ワトソン1.png」を選択します。
（あるいは、何もないところで右クリックをし、「スクリーンパネル」を選ぶことでも同様の操作ができます）
すると画面上にカード画像が出現します。
これがデフォルトの設定状態です。
パネルを右クリックし、「編集」から設定を見てみましょう。
以下のようなダイアログが表示されるはずです。
（重なり優先度が1以外の数字のときがありますが、問題ありません）
この「横幅」「縦幅」は画像のサイズ調整に関わる数値です。
今は「横幅36、縦幅27」なので、「横幅864px、縦幅648px」で表示されています。
（この画像は原寸大になりましたが、大きな画像の場合は縦横比を保持して縮小されます）
＜TIPS - ココフォリアのマス目に関する説明＞
なぜ36が864pxになるのでしょうか？
実は、ココフォリアの盤面は「1マス 24px角」のマス目で出来ています。
ルームを作成した直後の状態を見てみるとわかりやすいかもしれません。
先ほどのパネルの「横幅36、縦幅27」というのは、
「横幅が24px角のマス36個分、縦幅が24px角のマス27個分」
という意味なのです。
すなわち24px×36=864pxとなります。
ルーム作成直後のマス目があるところにパネルを小さく表示してみると分かりやすいかもしれません。
下の画像はカード画像を「横幅4、縦幅4」に設定した様子です。
横も縦もマス目4つ分の大きさになっているのがわかります。
ココフォリアの仕様についてなんとなく掴めたでしょうか？
こういった事情があるので、ココフォリア用の画像素材はほとんどが24px（あるいは12px）の倍数で作られています。（少なくとも、私はそうしています）
今のままだと画像が大きすぎるので、適切な大きさにしてあげましょう。
先ほどの「パネル設定」を以下のようにしてください。
横幅が12なので、「24px角のマス12個分」で288pxになります。
縦幅は9なので、「24px角のマス9個分」で216pxになります。
「重なり優先度」というのは、スクリーンパネルを重ねて配置したときの重なる順番を指示するものです。数字が大きいほど上に表示されるので、カードの上に重ねるマーカーなどは優先度を高く、逆に土台となる画像は優先度を低く設定します。
今回は「1」のままにしておきます。
【配置固定】
これをONにすると、スクリーンパネルの位置が固定されます。
情報カードを自分の場に持ってくるタイプの盤面ではOFFのまま、マーカーで取得の目印をつけるタイプの盤面ではONにします。
今回はONにする予定ですが、今はまだOFFにしていてください。
【サイズ固定】
盤面上でもマウスを使ってスクリーンパネルのサイズを自由に変更できますが、厳密なサイズ調整ができないのと、縦横比の固定ができないため、はちゃめちゃなサイズになってしまいがちです。
また、うっかり触ってしまって意図せず大きさを変えてしまうことも多いです。
サイズ変更は基本的にパネル設定で行いますので、ここはONにしておきましょう。
【地形パネルとして扱う】
こちらは「全体に公開する（O）」「自分だけ見る（T）」「拡大表示（E）」などのショートカットを無効化する設定です。
地図やマーカー、人物アイコンなどの設定として使いますが、今回はカード画像のためOFFのままにしておきます。
【画像選択】
すでに「情報カード-ワトソン1.png」が選択されているので、このままでOKです。
【背面画像選択】
カードの裏面の画像を選択します。
マーダーミステリーでは、大抵のカードが伏せられた状態でゲームが始まります。この「伏せられた状態」で見える画像をこのボタンで設定します。
このボタンをクリックすると、「スクリーン裏」が選択された状態のウィンドウが開きますので、「情報カード裏-ワトソン1.png」を選択してください。
設定が完了したら「保存」をクリックして、ダイアログを閉じます。
これで正しい大きさになりました！
位置がずれている場合は、正しい位置に移動させます。
ワトソン１は４つのカードのうち左上に置いてください。
パネルをクリックしてから「T」キーを２回押す、または右クリックから「非公開にする」を選択すると、カードを伏せることができます。
「完成図.jpg」と同じ画像が表示されていれば、カードが一枚完成です！
＜カードを複製する＞
カードが１枚出来たら、「複製」してしまいましょう。
「ワトソン１」のパネルを右クリックし、「複製」を選択します。
するとぴったり同じ位置に同じパネルが複製されますので、動かして確認しましょう。
複製できたのが確認できたら、パネルを編集します。
右クリック＞「編集」から「パネル設定」を出し、以下の設定を行ってください。
（カードが非公開または他の人物が「自分だけ見る」をしていると、「編集」が出来ません。カードを公開するか、「自分だけ見る」をしてから再び右クリックしてください）
【画像選択】
「情報カード-ワトソン2.png」を選択します。
【背面画像選択】
「情報カード裏-ワトソン2.png」を選択します。
他の設定はそのままでOKです。
設定が完了したら、「保存」をクリックして、ダイアログを閉じます。
これで簡単に２枚目が作れました！
同じ大きさのスクリーンパネルをいくつも作りたいときは、一つ一つ新たに作るよりもこうして「複製」した方がはるかに楽です。積極的に使いましょう。
とくにマーダーミステリーの盤面では、カード画像やアイコン、マーカー、カード置き場など、同じ大きさのパネルを複数作ることが多いので重宝します。
この調子で、残りの２枚のカードも作ってしまいましょう。
＜カードの配置を固定する＞
カードを全て正しい位置に配置できたら、カードをクリックしてから「L」キーを押す、または右クリックから「配置固定」を選択します。
これでカードが動かなくなります。
全てのカードを「配置固定」しておきましょう。
（カードを移動させるシナリオでは、この設定は行いません）
＜全てのパネルを作る＞
では最後に、カードを作ったときの要領で、全ての素材を適切に配置してみましょう。
それぞれのパネルの設定は「パネル設定_練習.pdf」に記載しましたので、参照してください。
※アイコンとマーカー、リボンには、裏面用の画像はありません。設定しなくても構いませんが、プレイヤーがうっかり「非公開にする」等を押してしまい画像が見えなくなることが時々あるので、表用の画像を裏面にも設定しておくと安心です。
4. 完成
「完成図.jpg」と同じ見た目になりましたか？
全てのカードを「非公開にする」「自分だけ見る」「全体に公開する」で見てみたり、
マーカーを実際に動かしてカードの上に置いてみたり、
配置固定したはずのパネルを動かそうとしてみたりして、適切な設定になっているか確認しましょう。
ちなみに、私がよくやるケアレスミスは「背面画像が違う」「マーカーの重なり優先度が低くてカードの裏に入り込む」「配置固定し忘れ」です。笑
確認できたら完成です！
お疲れ様でした。
5. ステップアップ - イチから盤面を作る
さらに練習したい方は、新たにルームを作成し、今度は前景・背景を含む全ての設定を行って、イチからルームを作ってみましょう。
パネル設定の情報は「パネル設定_全て.pdf」に記載してあります。
ワトソンの部分以外の全ての素材は「見本素材」フォルダに入っていますので、それぞれ適切なタブにアップロードしてください。
以上で「ココフォリアの練習キットを使ってて素材配置を学ぶ」を終わります。
練習キット内の素材は実際のシナリオ制作やルーム制作にお使いいただけます。（詳しくは同梱の「readme_練習キット.pdf」をご覧ください。
この素材を加工してシナリオ用の盤面を作成し、実際に配布していただいても構いません。
また、このブログが役に立ったという方は、BOOTHのスキ！や投げ銭していただけると作者はとても嬉しいです。
（投げ銭するとキット内の素材を元にして作った各種の素材がダウンロードできます。こちらもシナリオ制作などにお使いいただけます。）
【制作者向け】ココフォリア練習キット｜demidunit - BOOTH
demi / demidunit
質問・ご要望のある方は作者Twitterか質問箱にてご連絡ください。
Twitter @demidunit （リプライ・DMで）
お題箱 https://odaibako.net/u/demidunit （匿名で送れます）