いものやま。

雑多な知識の寄せ集め

変種オセロのUIを作ってみた。(その3)

昨日は素材の作成で、マットと木材を作った。

今日は駒を作っていく。

駒のデザイン

ボードゲームで駒といったら、やっぱりミープル。

ということで、ネットの画像などを参考に、パスをいじって作成したのがこちら。

f:id:yamaimo0625:20150721164152p:plain

ただ、これだと立体感が出ないので、影を落としてやる。

iDrawの場合、影をつけるのは簡単に出来て、パスを選択した状態で「ドロップシャドウ」を追加し、パラメータを設定してあげればいい。

f:id:yamaimo0625:20150721164517p:plain

こんな感じで、いい感じに影がついてくれる。

なお、illustratorの場合、パスをコピーして背面へペーストし、ちょっとズラして、ガウスぼかしをするといい感じになるはず。
illustratorを使ってたのはもうずっと昔なので、変わってる可能性が高いけど・・・

駒の色を変えてあげて、良い子(白)の駒も同様に作成。

f:id:yamaimo0625:20150721165313p:plain

「普通の子(灰色)」の作成

さて、悪い子(黒)と良い子(白)は、これでOK。
ちょっと大変なのは、普通の子(灰色)。

駒は片面が悪い子、もう片面が良い子で、この駒を立たせた状態が普通の子という扱い。
なので、ミープルが立った状態を上から見た様子を作らないといけない。

とりあえず、まずは手前が黒、奥側が白(間は元の木の色)の長方形を用意。
(一応、ドロップシャドウはつけてある)

f:id:yamaimo0625:20150721171038p:plain

これだけだと、「何だこれ?」という感じなので、ここに陰影を乗せて立体感を出していく。

まずは、ミープルの頭の右側から。
長方形を用意して、ここにグラデーション(左側は透明、途中に灰色、最後は濃い灰色)を設定し、ブレンドを「乗算」にしてやる。

f:id:yamaimo0625:20150721171056p:plain

こうすることで、右に向かって丸まっていってる様子が表現できる。

なお、グラデーションの途中に灰色を置いたのは、円を上から見たときに、途中まではなだらかで、端に行くほど急になることを表現するため。

同様に、右腕の部分にも陰影を乗せていく。

まずは、手の先が丸まっていることを表現。

f:id:yamaimo0625:20150721171712p:plain

さらに、頭の影になる部分があるので、そこにも陰影を追加する。

f:id:yamaimo0625:20150721171745p:plain

同じ感じで、ミープルの左側についても影を乗せていく。
そうすると、こんな感じ。

f:id:yamaimo0625:20150721172127p:plain

立体感が出て、それっぽくなったでしょ?

アニメーションの中割りの作成

これで、良い子、悪い子、普通の子の駒が出来たわけだけど、実際には駒の状態が変化するので、その変化のアニメーションの中割りが必要。
なので、それらを作っていく。

まずは、元のミープルを2つ用意し、その高さを縮小する。

f:id:yamaimo0625:20150721181014p:plain

それを、駒の厚さの分だけズラして重ねると、こんな感じ。

f:id:yamaimo0625:20150721181205p:plain

これだと、手足や顔の部分で凹みが出てしまうので、凹んでる部分に四角形をあててあげる。

f:id:yamaimo0625:20150721181249p:plain

そしたら、これらをパスの結合で合体。

f:id:yamaimo0625:20150721181328p:plain

同様にして、地の色のパスと、白のパスを作成。
(地の色の厚さを厚めにしておく)

f:id:yamaimo0625:20150721181441p:plain

これらを重ねてあげると、次のような感じ。

f:id:yamaimo0625:20150721181503p:plain

さらに、駒の影を落とせるようにするために、これらをコピペし、パスを結合した後に、ドロップシャドウを追加する。

f:id:yamaimo0625:20150721181648p:plain

影も重ねてあげると、次のような感じ。

f:id:yamaimo0625:20150721181734p:plain

ここから陰影を乗せて、立体感を出す。
まずは頭から。

駒の厚みの部分にパスを作成して、塗りをグラデーションにし、ブレンドを「乗算」にする。

f:id:yamaimo0625:20150721181947p:plain

同様に、右手、右足、左手、左足の部分にパスを作成して、陰影を乗せてあげ、最終的な見た目は以下のような感じになる。

f:id:yamaimo0625:20150721182657p:plain

同じ感じで中割りをいくつか作ってあげると、次のような感じ。

f:id:yamaimo0625:20150721183426p:plain

けっこう大変だったけど、いい感じ♪

今日はここまで!