読者です 読者をやめる 読者になる 読者になる

いものやま。

雑多な知識の寄せ集め

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

ゲーム開発 Swift YWF

昨日は駒を作った。

今日は残りの部品を作っていく。

ボードの作成

変種オセロのUIを作ってみた。(その2) - いものやま。で作ったマットと木材を使って、ボードを作っていく。

まず、ボードのマット部分を用意。
柔らかみを出すために枠を角丸にしようと思うので、それに合わせてマットも角丸に。

f:id:yamaimo0625:20150721193748p:plain

ここにラインを追加。

f:id:yamaimo0625:20150721193802p:plain

さらに、木材の素材を使って、枠を作成。

f:id:yamaimo0625:20150721193815p:plain

なお、この枠は、まず角丸の四角形を2つ作って(一つは枠の外側のパス、もう一つは枠の内側のパス)、外側のパスから内側のパスを減算することで、穴を空けている。

ただ、これだけだとのっぺりとしていて立体感がないので、ここに立体感を加えていく。

まずは、濃いドロップシャドウを枠の下側に細く加える。
こうすると、段差がある感じを表現できる。

ドロップシャドウなし f:id:yamaimo0625:20150721194243p:plain

ドロップシャドウあり f:id:yamaimo0625:20150721194313p:plain

さらに、ボード自体と枠の影を出すために、薄く広いドロップシャドウを追加。

f:id:yamaimo0625:20150721194540p:plain

そして、枠のヘリの暗さを出すために、インナーシャドウを追加。

f:id:yamaimo0625:20150721194817p:plain

最後に、枠全体の丸みを表現するために、インナーグローを広く追加してやる。

f:id:yamaimo0625:20150721195058p:plain

そんな感じで、最終的な見た目は以下。

f:id:yamaimo0625:20150721195320p:plain

一番最初の段階と見比べて欲しいのだけど、陰影をつけてあげるだけで、だいぶ立体感が出て、それっぽくなることが分かると思う。
このように、陰影を簡単につけられるように設計されているのが、iDrawのいいところ。
illustratorだと、もうちょっと手間がかかるはず)

ボタンの作成

次に、ボタンの作成。

まず、ベースとなる木材を用意。

f:id:yamaimo0625:20150722150713p:plain

ここに、角丸の矩形を用意。

f:id:yamaimo0625:20150722150753p:plain

ここにグラデーションを追加して、ボタンの丸みを出す。

f:id:yamaimo0625:20150722150921p:plain

両端は暗く、やや上の方にハイライトを入れる感じ。
ブレンドは「ソフトライト」にしてある。

これでも十分ボタンっぽいんだけど、押し込めるように見せるために、ボタン部分がやや落ち込んでいるようにする。
そのために、インナードロップをボタンの上側に追加。

f:id:yamaimo0625:20150722151130p:plain

そして、ボタンの下側にもインナードロップを追加。

f:id:yamaimo0625:20150722151201p:plain

これで質感を出すのは完了。
見た目はこんな感じ。

f:id:yamaimo0625:20150722151312p:plain

ここに文字を追加。

f:id:yamaimo0625:20150722151355p:plain

このままだとボタン自体は透明なので、ボタンの背景となる木材を追加。

f:id:yamaimo0625:20150722151700p:plain

背景の木材を消すと、こんな感じ。

f:id:yamaimo0625:20150722151740p:plain

これでEnable状態のボタンは完成。

あと、Disable状態のボタンも用意する必要があるので、ちょろっと作業。

まず、文字を薄く。

f:id:yamaimo0625:20150722152040p:plain

そして、ボタンの枠も薄くすると、こんな感じ。

f:id:yamaimo0625:20150722152119p:plain

これでDisable状態のボタンもOK。

今日はここまで!