最終更新:ID:Zq9VnVi9YQ 2020年06月07日(日) 15:41:22履歴
※※ この記事を書いた時のココフォリアのバージョンは CCFOLIA 1.0.0-beta.51 です。
トップページ(https://ccfolia.com/)の画面左上に現在のバージョンが表示されています。
バージョンが違うと、記事の内容と異なる場合があるのでご注意ください。
例えば、「あなたたちは今教室にいます。」というシーンがあったとします。
その時、実際に教室の写真・画像が表示されていると視覚的に分かりやすく、臨場感がありますよね。
ココフォリアには、そういった画像を設定する機能が用意されています。

(素材:https://commons.nicovideo.jp/material/nc197186)
キャラクター達が今いる場所の画像や、街の地図を表示するなど、使い方は様々です。
早速使い方を見ていきましょう。
目次
数値を変えれば、表示される"パネル"の大きさを変更することが可能です。
パネルについては後程説明するので、「とりあえずここの数値を変えれば画面の大きさ変えられるんだなー。」と覚えておけば大丈夫です。
ちなみに、横:縦が4:3くらいにしておくと、だいたい良い感じの大きさになると思います。
画像を設定するには、まずは表示したい画像をココフォリアにアップロードする必要があります。
アップロード方法は2つです。
ココフォリアでは、画像や音楽ファイルをココフォリアにアップロードする際は、この2つの方法を使用することができます。
対応している形式は、JPG、PNG、GIF、APNG等です。
JPG、PNG、GIF、APNG等です。
大事なので強調して二回言いました。
背景・キャラの立ち絵・カットイン、動かせます。
ただし、容量は1MB以下という制限があるので気を付けましょう。
背景はそのまま、前景にも別な画像を設定してみます。
アップロード方法と設定方法は背景と同じです。
説明通り、パネルにのみ画像が設定されました。
画面全体には先ほど設定した背景画像が表示されています。

(素材:https://commons.nicovideo.jp/material/nc195943)
試してみた結果を元に、どのようなイメージで背景・前景を考えれば良いか整理してみます。
基本的にはこの考え方で問題ありません。
もう少し踏み込んだ内容になります。
今回は検証のため、こんな画像を用意しました。

ちょっと分かりにくいですが、左は透過無し、真ん中は半透明、右は完全に透過してあります。
背景を設定した状態で、この画像を前景に設定するとどうなるでしょうか?
確認してみましょう。

パネル上の透過されている部分には、背景に設定されている画像が表示されています。
これがどういうことか言葉にすると、次のようになります。
といった感じです。
ちょっと言葉にするのが難しいので、頑張ってイメージして補完してもらえれば幸いです…。
細かい仕様について紹介しましたが、基本的には先に述べた基本的な考え方で大丈夫だと思います。
ただ、この仕様をうまく使えばオシャレでかっこいい部屋を作ることも可能なので、うまく使いこなせるようチャレンジしてみても良いと思います!
画像選択時、右上に「ルーム」と「全体」と表示されています。
クリックすると切り替えることが可能です。
まだ1つ目の部屋しか作ってない場合は変化がないかもしれませんが、複数の部屋でセッションの準備をしているとこんな感じに切り替わります。

ちょっと分かりにくいかもしれませんが、全体に切り替えると画像の候補が大量に増えています。
ということです。
新ココフォリアでは、画像、音楽等のファイルはユーザーに紐づいてアップロードされるため、他の部屋でも使用することが可能なのです。
汎用性の高い画像・音楽を部屋が変わるたびにアップロードする必要が無いのは手間が少なくて素晴らしいですね。
画像ファイルについては、ルーム・全体で切り替えられるので、必要に合わせて切り替えて使用しましょう。
音楽ファイルについては、現在ルーム・全体の切り替え機能は実装されていません。
要望は出ているので、気長に実装を待ちましょう。
以上で背景・前景の設定についての紹介は終了です。
複雑な機能ではないので、一度試してみると意外と簡単にできてしまうと思います。
是非試してみてください。
次項:BGMの再生に移動する。
GM用チュートリアル目次に戻る。
トップページ(https://ccfolia.com/)の画面左上に現在のバージョンが表示されています。
バージョンが違うと、記事の内容と異なる場合があるのでご注意ください。
例えば、「あなたたちは今教室にいます。」というシーンがあったとします。
その時、実際に教室の写真・画像が表示されていると視覚的に分かりやすく、臨場感がありますよね。
ココフォリアには、そういった画像を設定する機能が用意されています。

(素材:https://commons.nicovideo.jp/material/nc197186)
キャラクター達が今いる場所の画像や、街の地図を表示するなど、使い方は様々です。
早速使い方を見ていきましょう。
目次
数値を変えれば、表示される"パネル"の大きさを変更することが可能です。
パネルについては後程説明するので、「とりあえずここの数値を変えれば画面の大きさ変えられるんだなー。」と覚えておけば大丈夫です。
ちなみに、横:縦が4:3くらいにしておくと、だいたい良い感じの大きさになると思います。
画像を設定するには、まずは表示したい画像をココフォリアにアップロードする必要があります。
アップロード方法は2つです。
- 右上の[+]ボタンを押して画像を選択する
- [NOIMAGE]と表示されているあたりにドラック&ドロップで画像を持ってくる
ココフォリアでは、画像や音楽ファイルをココフォリアにアップロードする際は、この2つの方法を使用することができます。
対応している形式は、JPG、PNG、GIF、APNG等です。
JPG、PNG、GIF、APNG等です。
大事なので強調して二回言いました。
背景・キャラの立ち絵・カットイン、動かせます。
ただし、容量は1MB以下という制限があるので気を付けましょう。
背景はそのまま、前景にも別な画像を設定してみます。
アップロード方法と設定方法は背景と同じです。
説明通り、パネルにのみ画像が設定されました。
画面全体には先ほど設定した背景画像が表示されています。
(素材:https://commons.nicovideo.jp/material/nc195943)
試してみた結果を元に、どのようなイメージで背景・前景を考えれば良いか整理してみます。
フィールドに表示される画像の概要 | 設定される画像名 | 背景と前景のどっちを設定すれば良いか |
画面全体にぼやっと加工して表示される画像 | 画面全体 | 背景 |
画面中央にくっきりして表示される画像 | パネル | 前景 |
基本的にはこの考え方で問題ありません。
もう少し踏み込んだ内容になります。
今回は検証のため、こんな画像を用意しました。

ちょっと分かりにくいですが、左は透過無し、真ん中は半透明、右は完全に透過してあります。
背景を設定した状態で、この画像を前景に設定するとどうなるでしょうか?
確認してみましょう。
パネル上の透過されている部分には、背景に設定されている画像が表示されています。
これがどういうことか言葉にすると、次のようになります。
- 背景に設定した画像は、画面全体とパネルに表示される。
- 前景に設定した画像は、パネルとして背景画像の上に重ねて表示される。
- 前景に設定した画像が透過されている部分は、その下の背景画像がパネルに表示される。
といった感じです。
ちょっと言葉にするのが難しいので、頑張ってイメージして補完してもらえれば幸いです…。
細かい仕様について紹介しましたが、基本的には先に述べた基本的な考え方で大丈夫だと思います。
ただ、この仕様をうまく使えばオシャレでかっこいい部屋を作ることも可能なので、うまく使いこなせるようチャレンジしてみても良いと思います!
画像選択時、右上に「ルーム」と「全体」と表示されています。
クリックすると切り替えることが可能です。
まだ1つ目の部屋しか作ってない場合は変化がないかもしれませんが、複数の部屋でセッションの準備をしているとこんな感じに切り替わります。

ちょっと分かりにくいかもしれませんが、全体に切り替えると画像の候補が大量に増えています。
- 「ルーム」ではこの部屋でアップロードした画像のみ表示する。
- 「全体」では他の部屋でアップロードした画像も表示する。
ということです。
新ココフォリアでは、画像、音楽等のファイルはユーザーに紐づいてアップロードされるため、他の部屋でも使用することが可能なのです。
汎用性の高い画像・音楽を部屋が変わるたびにアップロードする必要が無いのは手間が少なくて素晴らしいですね。
画像ファイルについては、ルーム・全体で切り替えられるので、必要に合わせて切り替えて使用しましょう。
音楽ファイルについては、現在ルーム・全体の切り替え機能は実装されていません。
要望は出ているので、気長に実装を待ちましょう。
以上で背景・前景の設定についての紹介は終了です。
複雑な機能ではないので、一度試してみると意外と簡単にできてしまうと思います。
是非試してみてください。
次項:BGMの再生に移動する。
GM用チュートリアル目次に戻る。
コメントをかく