昨日は画面設計を行った。
今日は必要な素材を作っていく。
素材の話
ボードゲームをテーマにしたアプリを見てみると、素材にあまりこだわりのないアプリと、素材をちゃんと作り込んであるアプリがあるように思う。
例えば、自分がインストールしたバックギャモンのアプリを見てみても、次のような感じ。
https://itunes.apple.com/jp/app/pocket-backgammon/id328598451?mt=8&uo=4&at=10l8JW&ct=hatenablog
もちろん、アプリは見た目がすべてではないのだけど、重要であることは事実。
もし検索して同じようなアプリが見つかったら、見た目が良さそうなアプリをまず試してみたいと思うから。
とはいえ、なんか無駄に派手な演出も困る（＾＾；
昔、なんじゃこりゃ？と思ったアプリは、ブリスコラというイタリアの古いトリックテイキングをアプリにしたもの。
https://itunes.apple.com/jp/app/brisca-briscola-briscas/id304123067?mt=8&uo=4&at=10l8JW&ct=hatenablog
イタリア風のカードなのはともかく、なんか炎が出てるw
これで切り札を分かりやすくしてるっぽいのだけど、ちょっとね（＾＾；
さらに、トリックをとると謎演出がw
確かに、見た目がいいことを求めてはいるんだけど、そういった演出が欲しかったわけじゃないんだw
ということで、簡単にまとめると、以下の通り。
- 見た目は重要
- 単調に塗っただけなのは良くない
- 質感が感じられるようなのがいい
- 無駄に派手な演出はマイナス
やはり、「実際のボード、駒に触れているんだ」という感覚が得られる見た目がいいのだと思う。
マットの素材の作成
まず作ったのは、ボードに張る緑色のマットの素材の作成。
いざ素材を作ろうとしても、実際に作ろうとするとなかなか困るもの。
あのフェルトの質感をどうやって出したらいいのか・・・？
自分がとった方法は、写真を使う方法。
といっても、そのままだと使い物にならないので、写真は質感を出すためだけに使う感じ。
とりあえず、いつもカードゲームをプレイするときなどに使っているフェルト生地をパシャリ。
そこから使えそうな部分を切り抜いたのが、以下の画像。
これを使ってマットの質感を表現していく。
（なお、自分はiDrawというドローソフトを使っているけど、illustratorでも同様のことが出来るはず）
まず、ベースとなる色の矩形をレイヤーに用意。
ここに、先ほどの写真の画像を追加して、ブレンドを「オーバレイ」にしてやる。
そうすると、次のような感じで、単調な色に模様が！
これだけだとサイズがあってないので、画像をコピペして万遍なく配置していく。
はみ出ちゃった部分については、パスの結合とかを使って切り取る感じ。
（マスクが使えるなら、マスクを使うのもあり）
ただの緑色の四角より、ずっと味が出るよね。
木材の素材の作成
次に、背景となるテーブルや、ボードの枠に使う木材の素材の作成。
これもマットと同様に、写真を使って作成していく。
まず、本棚の天板をパシャリ。
これも先ほどのようにオーバレイして使うのだけど、（写真の撮り方のせいもあって）ちょっと問題が。
影ができないように左側から光をあてて撮った関係で、明るさが均一でなくなってしまっている。
これも一緒に解決していく。
とりあえずは、ベースとなる色の矩形をレイヤーへ。
そして、先程と同様に、写真をオーバレイ。
これだけだと左側と上側が明るくなりすぎてしまってて、よくない。
そこで、まずグラデーションのかかった矩形（左側がアルファを弱めたベースの色、右側が透明）を用意し、ブレンドを「乗算」にしてやる。
そうすると、次のような感じで、明るくて白寄りになっていた部分の色が、ベースの色に近くなる。
これを、縦方向にもやってあげたのが、以下。
これで全体的に同じ明るさになって、しかも木材の質感がちゃんと出た感じになっている。
この方法の嬉しいところは、直接写真を使うのと違って、色合いを簡単にいろいろ変えられるということ。
例えば、ボードの枠を同じように木材で作られたような質感にしたのだけど、そちらは同じ写真を使いながら、より濃い色合いにした。
ちょっと立体感を出すためにいろいろ加工を加えてるけど、木材の質感を出すときに使ったのは、さっきの写真。
同じ写真を使ってるのに、ベースの色を変えることで、だいぶ雰囲気が変わってるでしょ？
ちなみに、自分が使ったiDrawというソフト（※Mac専用）は、以下。
illustratorに比べると機能は少ないけど、基本的なことは出来る感じ。
何より、売り切りで価格も良心的。
（たまに落ちることがあるけど・・・）
今日はここまで！
