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

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

Random Posts

Forecast:マテリアルデザインの表示が爽やか!グラフもスッキリデザインな天気アプリ
ふぁぼーん:ツイートをスマホに保存!元ツイートが削除されてもオフラインでも閲覧可能
タブでサクサク切り替えできる、あのウェブサイト風ホーム【ホーム画面企画2016】
ドロイド君が新緑に紛れ込んだシンプルホーム【ホーム画面定期コンテスト】
楽天モバイルのau回線がスタートしたのでさっそく契約!実店舗で即日開通だったけど…
ただの壁紙:和名洋名で選んで単色や6種類の模様付き壁紙を設定できるアプリ
【アンケート】Androidスマホの日本語入力(キーボード)アプリなに使ってますか?
シャアの再来を感じさせる配色!革と赤と黒の渋い端末 Leagoo Venture 1
MVNO各社の格安SIM月額料金比較表:2017年2月の変更を受けて
「アンドロイドのホーム画面をカスタマイズする本10」PDF版および書店委託販売のご案内
Androidスマホの日本語入力アプリなに使ってますか? 1位はGoogle日本語入力、2位はATOK
Playストアで有料アプリを公開&無料セールを設定する-アプリ販売始めました
YOME【ホーム画面定期コンテスト】
画面消女:スクリーンオフまでの時間を変更したり消灯しないようにできるアプリ
こんにちわぐ!【ホーム画面定期コンテスト】