ルーレットの作り方(5) ルーレットの着色

imoue.hatenablog.com
昨日までの話

「今日はルーレットの……ルーレットのマス目？　、のようなところに色を塗っていく。とりあえず思いついた塗り方3種類を試した。設定はどれも11分割」

妹「なんで11なの？」

「塗りにくくてめんどくさい数だから」

2色で交互に塗る方法

「これはわりと単純な、VectorParameterにつなぐLinearColorを2種類用意して、それを奇数と偶数で塗り分ける」

妹「玉を転がすルーレットはこんな色な気がするね」

「でも全体の数が奇数だと上手く塗れない。最初と最後がくっついちゃう。普通のルーレットだと0とか00とかが別の色になってるから、そういう仕組みを入れてもいい。ただそうすると数を変更した時に、いちいちアルゴリズムを調整しないといけないってのはある」

妹「全部偶数にしちゃえばいいのかな」

「それでもいい。3の倍数と決めて、3個ずつの塗りを繰り返すって方法も」

配列で色を全部指定する方法

「全部手動で色を指定するという、一番確実な方法。Branchたくさんとかでもいいけど、配列でやるのが一番シンプルに書けると思う。配列は変数にして作ってもいいけど、今回はブループリント上でmakeしてある。変数の欄もスクリーンショットとるの面倒だったから」

妹「全部色を設定する……これでいいと思うけど、問題は何かあるの？」

「どういう色にするか、たくさん考えるのがめんどくさい。配色の見栄えとか色々。分割数を増やせば増やすほど、必要な色の数も増えるし。でもキッチリデザインしたい時はこれしかない」

色相環みたいなのを自動生成する

「これは今回の本命。色相を元に色を作る。カラフルになるし全部違う色になる。HSVtoRGBという変換ノードもあるから、わりと簡単に作れる。たしか人生ゲームのルーレットもこれに近い配色だったと思う」

妹「HSVはお絵かきソフトとかでも時々見かけるね」

「RGBとは別の色指定方法。最終的にはRGBに変換するけど、この方がどの数字を変えるどういう色になるか、わかりやすい場合がある。これを応用して、ある色のSやVを徐々に変化させて1周とかもできるはず。この方法の問題点は、隣の色との見分けがつきにくいこと。だから区切り用の線を入れるとかした方がいいかもしれない。まあ数が少なければ問題はないんだけど」

「100分割とかするとこういう風に、どこで区切られてるのかさっぱりわからなくなる。まあそんなルーレット使うことって、そうそうないとは思うんだけど」

おまけ

「扇型の中身を塗り分けるというアイデアも試してみた。塗り方を工夫すれば、区切りがなくても隣の色との区別ができるんじゃないか？　という発想。たまあんまり好みの見た目んにはならなかった。やり方や色合いを調節すればもっとよくなるかもしれない」

「この方法なら単色でもいいのでは……と思ったけど、なんかモナカ菓子のようになってしまった。このへんは好みの問題だから、テクスチャを貼ったっていいし、色々工夫の余地がある」