Glaejaスキン : SHIELD ENERGY

IS 〈インフィニット・ストラトス〉というハーレム系アニメがあります。すいません、まだ見たことないです。それに出てくるというシールドエナジーゲージというものに似せたGlaejaスキンを作ってみました。

本日のネタ元

がじぇろいどの取扱説明書:ISのエナジーゲージ風バッテリーゲージを描写してみたw

これを見て、作ってみようと思いました。

とりあえずこんなのが出てくるらしい。
140609-1
おーカッコイイ…。

完成図

というわけで、これ…そのままはできなかったので、っぽいものを作ってみました。

140609-2

なんかいろいろ違うのはわかっているんですが、なんとなくやりたかった方向はわかってもらえるでしょうか?

とりあえず、何か近未来風の何かを作りたかったのと、円を歪めたかったのです。

バッテリー残量で色が変化

140609-7
バッテリー残量によってサークルの色が変わっていきます。

スキンができるまで

スキンを作っていく過程について説明しようと思います。

140609-3

まず主に「サークル」を使って多重円とバッテリーサークルを作ります。バッテリーサークルは立体感ぽいものを作りたかったので、下に少しずらして薄くしたものと、2つのサークルがあります。
内側の模様は「テクスチャ」です。

140609-4

次に「色と透明度」を使って、これらのサークルなどがバッテリー残量の減りとともに色が変化していくようにします。これは「色と透明度」のRGBそれぞれに二次関数的なものを入れればできます。

140609-5

さらに、「トリガー」を使って、普段は隠れているけど一定の条件(バッテリー10%以下)で表示されるEMPTYボードを作ります。

140609-6

最後に「変形と移動」そして「台形変数」を使って円やテキストを歪めていきます。ここの歪め方が上手ければ、もっと立体的に見えるようにもできると思います。

何はともあれ、これで完成です。こうして考えると簡単ですね。

ダウンロード

このスキンは以下からダウンロードできます。良かったら中身を覗いてみてください。フォントは入ってませんので、好きなフォントに変えて使ってください。

DOWNLOAD
http://ux.getuploader.com/orefolder/download/167/shield-energy.zip

※今回は細いサークルなどをそのままレイヤーで残していますが、最終的にはこのあたりの変化のないものは画像化してしまったほうが軽くなりますし、レイヤーも少なくなって見やすいと思います。

この記事が気に入ったら
いいね!しよう
 シェアする  ツイートする
PREVIOUS POST
NEXT POST
ANDROID
GIVES YOU
MORE