ココフォリア（CCFOLIA）用フロアタイルをphotoshopで作る

TRPGオンラインセッション用に、いわゆる部屋と言われるやつのフロアタイルを、photoshopで作っていくためにメモを残していきます。
デザインというよりかは、前景とフロアタイルがぴったり合わないよ😢って人とか、作りたいけどどんなサイズで作ればいいかわからないって人向けだと思います。

基本知識として、ココフォリアは１マス24pxです。

つまり、どういうことかというと、例えばphotoshopで新規画像を作る時、カンバスサイズを24px × 24px で作ると、その画像はココフォリア側では 1×1 という表記になるんです。

では、それを踏まえて実際にココフォリア側で前景とフロアタイルをぴったり合うように、photoshopで画像を作っていきましょう。

作る時の注意点

フロアタイルを作る注意点として、
・カンバスサイズ
・前景のサイズ
・前景を置きたい場所の位置
この３つをちゃんと合わせないと、ココフォリア側でぴったり合わないので覚えておきましょう。
（全部24の倍数で合わせないとだめ）

作成ステップ１．カンバスサイズを決める

まず、自分が作りたいと思っているフロアタイルはどのぐらいの大きさで表示されればちょうどいいかなみたいなことを考えましょう。

個人的にちょうどいいかなと思うのは、ココフォリア右下のズームバーが真ん中にある状態で、見せたいパネルが大体表示されているサイズ。
あまり引いた状態で作っても、キャラクター駒を作った時に、名前が小さすぎて見えなかったり、逆に寄りすぎても、サイズの調整が効きにくい（かも）というのがあるので、このラインが指標だと思います。

それで、カンバスサイズはどのぐらいになるかというと、大きめにとって 2160px × 1680px (ココフォリアだと 90 × 70)ぐらいです。

カンバスサイズは後から変えようと思ったら変えられるし、とりあえず、自分が作りたいタイルが余裕で入るサイズを指定しておくと〇（24pxの倍数になるようにすることを忘れずに）

作成ステップ２．前景のサイズを決める

カンバスサイズを決めたら、次に前景の置きたいサイズを決めます。
これは、人によってサイズが変わるのでどのぐらいがいいのかとかは好きなようにしてほしいんですが、おすすめは、前景が４：３または、１６：９ぐらいの比率です。

４：３は、スタンダードといわれる画面比率で、ブラウン管とか、色んなプレゼンテーションに使われています（らしい）

１６：９は、ワイドといわれる画面比率で、モニターとかPVとかに使われています（らしい）

個人的には、４：３をよく使ってます。タイルって前景だけじゃなくて、システムによって色んなパネルを追加したりするのでなんかこの比率だと綺麗に収まることが多いです。（卓報告とかでよく見るのも４：３が多いかと思ってる）

前景サイズを指定するには、photoshop の長方形ツールを使います。
ツールバーから長方形ツールを選んで、画面をクリック。
そしたら、どんなサイズで作るか出るので、今回は 480px × 360px
(ココフォリアでは 20 × 15です。この場合、綺麗に４：３になりますが、なるべく自分が合わせたい比率に合うように指定してください。実際に画像を追加するとき、トリミングするのが楽になります)

※注意点
長方形ツールを使うと、初期設定で枠線が表示されるようになっています。
レイヤー一覧から長方形のレイヤーを選択→プロパティタブで”線”というやつの右側 ロ←みたいなのをクリックして、左上の斜線マークをクリック
こうすることで枠線が消えて、塗りの部分だけ表示されます。

作成ステップ３．前景を置きたい場所の位置を決める

後は、前景を置きたい位置を調整するだけです。

レイヤー一覧→長方形のレイヤークリック
Ctrl + t で自由に移動することができるので、置きたい場所に移動させる
長方形のレイヤーのプロパティを見て、XとYの位置を 24の倍数に合わせる

こうすることで、ココフォリア側でマス変換されても、ちゃんとマス目に沿って前景の位置を決めることができます。

まとめ

お疲れ様でした。これで、とりあえずココフォリア側で前景とタイルがぴったりと合うように画像が作れたと思います。

もし、ココフォリアに作った画像を追加して、合わせようとしても合わない場合は、注意点であげた３つの要素のどれかがちゃんと合っていない可能性が高いです。

ここまで見てくれた方ありがとうございます。
自分が久しぶりにタイル作ってみてわからなくなっていたので、備忘録的な感じでまとめてみました。勢いだけで書いたので、わかりにくいところもあるとは思うんですけど、とりあえず”ココフォリアの１マスは24px”だけ覚えておけば大体OKです。画像とか気が向いたら追加していきます。