Glaejaスキン : SHIELD ENERGY

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

  • 本記事は広告およびアフィリエイトプログラムによる収益を得ています。

本日のネタ元

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

とりあえずこんなのが出てくるらしい。
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

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

本記事に記載された内容は記事公開時点のものであり、必ずしも最新の情報とは限りません。記事をご覧いただく際には、最新の情報を確認するようお願いいたします。

OREFOLDERの最新情報をお届けします
author icon
orefolder

OREFOLDER編集長。
1979年静岡県清水市生まれ、現静岡市清水区在住。

様々な巡り合わせから、このサイト1本で生活してる氷河期世代の一人。ガジェットに限らず広く浅く様々なものに興味があります。

スマートフォンは2010年にXperia SO-01Bを買ったのが最初。同時にb-mobile U300で格安SIMも始めました。これまでに数百台のスマホを手にし、格安SIMも常時20種類以上契約しています。

⇨orefolderの記事一覧