※※ この記事を書いた時のココフォリアのバージョンは CCFOLIA 1.0.0-beta.51 です。

トップページ(https://ccfolia.com/)の画面左上に現在のバージョンが表示されています。
バージョンが違うと、記事の内容と異なる場合があるのでご注意ください。


はじめに


例えば、「あなたたちは今教室にいます。」というシーンがあったとします。

その時、実際に教室の写真・画像が表示されていると視覚的に分かりやすく、臨場感がありますよね。

ココフォリアには、そういった画像を設定する機能が用意されています。


(素材:https://commons.nicovideo.jp/material/nc197186



キャラクター達が今いる場所の画像や、街の地図を表示するなど、使い方は様々です。

早速使い方を見ていきましょう。



目次


フィールド設定ウインドウ

フィールド設定ウインドウの表示


ココフォリアに表示されている画像の変更は、「フィールド設定ウインドウ」から行います。

ウインドウを出すには、「チャット欄左の鉛筆マーク」をクリックして、「前景・背景を変更」を選択しましょう。





設定項目


表示されたフィールド設定ウインドウを見てみます。

4つの項目が表示されていますね。




項目名
説明
横幅
-
縦幅
-
背景選択画面全体とパネルに表示される画像を設定します
前景選択パネルのみ表示される画像を設定します

縦幅と横幅、背景は何となくイメージできますが、前景というのはあまり聞き慣れない言葉ですね。

どうやらココフォリアでは2つの画像を盤面上に設定でき、それぞれを背景・前景と呼ばれているみたいです。

それぞれについて見ていきましょう。


横幅と縦幅


数値を変えれば、表示される"パネル"の大きさを変更することが可能です。

パネルについては後程説明するので、「とりあえずここの数値を変えれば画面の大きさ変えられるんだなー。」と覚えておけば大丈夫です。

ちなみに、横:縦が4:3くらいにしておくと、だいたい良い感じの大きさになると思います。


背景と前景の設定


イメージを掴むため、実際に画像を設定しながら確認していきます。

"チュートリアル"と題していますので、できる方は是非ご自身でも試してみてください!


背景の設定


「背景選択」をクリックすると、新しいウインドウが表示されます。



右上の「ルーム」と表示されている部分に、「全て」と表示されているかもしれませんが今は置いておきましょう。

今はどっちでも大丈夫です、詳しくは後程紹介します。


画像のアップロード

画像を設定するには、まずは表示したい画像をココフォリアにアップロードする必要があります。

アップロード方法は2つです。
  • 右上の[+]ボタンを押して画像を選択する
  • [NOIMAGE]と表示されているあたりにドラック&ドロップで画像を持ってくる

ココフォリアでは、画像や音楽ファイルをココフォリアにアップロードする際は、この2つの方法を使用することができます


画像の削除

画像を削除するには、削除したい画像を長押しすると削除ボタンが出てきます。


アップロードできる画像データ

対応している形式は、JPG、PNG、GIF、APNG等です。

JPG、PNG、GIF、APNG等です。

大事なので強調して二回言いました。

背景・キャラの立ち絵・カットイン、動かせます

ただし、容量は1MB以下という制限があるので気を付けましょう。
背景画像の設定

アップロードした画像をクリックすれば、盤面上に画像を設定することができます。

設定した画像は無事に表示されたでしょうか?

背景に設定した画像は、
  • くっきりとした画像として、パネルに表示される。
  • ぼやっとした画像として、画面全体に表示される。

という2つの場所に表示されるということが確認できました。




前景の設定


背景はそのまま、前景にも別な画像を設定してみます。

アップロード方法と設定方法は背景と同じです。

説明通り、パネルにのみ画像が設定されました。

画面全体には先ほど設定した背景画像が表示されています。


(素材:https://commons.nicovideo.jp/material/nc195943


前景と背景の詳細

基本的な考え方


試してみた結果を元に、どのようなイメージで背景・前景を考えれば良いか整理してみます。

フィールドに表示される画像の概要
設定される画像名
背景と前景のどっちを設定すれば良いか
画面全体にぼやっと加工して表示される画像
画面全体
背景
画面中央にくっきりして表示される画像
パネル
前景

基本的にはこの考え方で問題ありません。


細かい仕様


もう少し踏み込んだ内容になります。

今回は検証のため、こんな画像を用意しました。





ちょっと分かりにくいですが、左は透過無し、真ん中は半透明、右は完全に透過してあります。

背景を設定した状態で、この画像を前景に設定するとどうなるでしょうか?

確認してみましょう。





パネル上の透過されている部分には、背景に設定されている画像が表示されています。

これがどういうことか言葉にすると、次のようになります。

  • 背景に設定した画像は、画面全体とパネルに表示される。
  • 前景に設定した画像は、パネルとして背景画像の上に重ねて表示される。
  • 前景に設定した画像が透過されている部分は、その下の背景画像がパネルに表示される。

といった感じです。

ちょっと言葉にするのが難しいので、頑張ってイメージして補完してもらえれば幸いです…。

細かい仕様について紹介しましたが、基本的には先に述べた基本的な考え方で大丈夫だと思います。

ただ、この仕様をうまく使えばオシャレでかっこいい部屋を作ることも可能なので、うまく使いこなせるようチャレンジしてみても良いと思います!


「ルーム」と「全体」


画像選択時、右上に「ルーム」と「全体」と表示されています。

クリックすると切り替えることが可能です。

まだ1つ目の部屋しか作ってない場合は変化がないかもしれませんが、複数の部屋でセッションの準備をしているとこんな感じに切り替わります。





ちょっと分かりにくいかもしれませんが、全体に切り替えると画像の候補が大量に増えています。

  • 「ルーム」ではこの部屋でアップロードした画像のみ表示する。
  • 「全体」では他の部屋でアップロードした画像も表示する。

ということです。

新ココフォリアでは、画像、音楽等のファイルはユーザーに紐づいてアップロードされるため、他の部屋でも使用することが可能なのです。

汎用性の高い画像・音楽を部屋が変わるたびにアップロードする必要が無いのは手間が少なくて素晴らしいですね。

画像ファイルについては、ルーム・全体で切り替えられるので、必要に合わせて切り替えて使用しましょう。

音楽ファイルについては、現在ルーム・全体の切り替え機能は実装されていません。

要望は出ているので、気長に実装を待ちましょう。


おわりに


以上で背景・前景の設定についての紹介は終了です。
複雑な機能ではないので、一度試してみると意外と簡単にできてしまうと思います。
是非試してみてください。

次項:BGMの再生に移動する。

GM用チュートリアル目次に戻る。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

どなたでも編集できます