株式会社ヘキサドライブ | HEXADRIVE

こんにちは！大阪開発デザイナーのかわさきです。
そろそろ桜が綺麗な季節になりますね。
会社の近くの公園でもちらほら桜が咲き始めていたので、
今日はデザイナーのもっちさんと一緒にお弁当を持ってランチ兼ぷちお花見をしてきました！

本日から新年度スタートということで、東京開発にて入社式が行われました！
新たなメンバーと共に今年度も頑張っていきますのでどうぞよろしくお願い致します！

さて今回のブログは、unityでゲーム作りの続きを行っていきたいと思います！

第1回はこちら
https://hexadrive.jp/hexablog/design/15473/

前回は最低限の機能実装までを行ったので、
今回は前回入れられなかったグラフィック要素を乗せていきます。

※前回なぜか正常に動かなかったスコアに関しては
　プログラム部分で単純なスペルミスを犯していたのが原因だったため、無事実装することが出来ました。

①UI類の作成
ゲームオーバーの文字を作って前回の仮っぽさから脱却しました！
UIはそのゲームの印象を左右する大切なものなので、どんな世界観にしたいのかを頭において作っていきます。

ここで突然ですがPhotoshopのプチテクニックを一つご紹介します！
UIなどの画像素材類を作っているときにフチ付けをしようと

Photoshopのレイヤースタイルで「境界線」を使う方は多いと思いますが、

「境界線」を使ったら画像のフチがジャギった！

線が思ったような太さにならない！

なんてお困りになることがたまーにあるのではないでしょうか？

そんなときに私がオススメしたいのは「光彩(外側)」です！

参考用に少し解像度を荒くした画像で比較してみました。白フチの滑らかさが全然違いますね！
元画像の解像度が低い場合や元々の画像がガビついている、元画像が小さいときなどは「光彩(外側)」によるフチ付けが特に有効な手段となります。

話が逸れたので、ゲーム作りに戻ります！

②アニメーションの作成
まずは待機アニメーションの完成イメージがこちらです。

頭と身体と風船の角度を変えただけの簡単なものですが、これだけでも少しゲームっぽさが出ましたね！
(前回から主人公のイラストが変わっていますが、
どうせ動かすなら揺れモノが欲しいな、ということで長髪の女の子にチェンジしました。)

アニメーションの中身はこのような感じで、2枚の画像を差し替えて表示させています。
横並びの状態ではわかりづらいですが、1枚目の女の子と2枚目の女の子で微妙に絵が違っています。

続いて、こちらはまだ作成途中ですが、
先ほどの待機アニメーションよりも枚数を増やしたアニメーションです。
絵の枚数を増やすとより大きな動きをつけることが出来ます。

アニメーションはまだ作りきれていないので、続きはまた次回に…！
次回はアニメーション作成における基礎知識orちょっとしたテクニックをご紹介したいと思います。

余談ですが、android上でもゲームが無事動作しました…！！
自分で作ったものがこうして触れる形になった瞬間はやはり嬉しいですね！

それでは！