[Glaeja] The Case of the Cottingley

…というわけで、『Galeja』の［イメージ］レイヤーおよび［スプライト］レイヤーのチュートリアルです。

・はじめに

チュートリアルの前に、Android における画素の取り扱いとその単位について、簡単にまとめておきます。

画像の大きさを扱う単位で、最も基本的なものは「画素単位（ピクセル、単位は px.）」で、これは Android でも同じです。この単位は言うまでもありませんが、表示デバイス（LCD、EL等）の１画素を単位とするもので、いわゆる「ドット」というものです。この単位を用いると、画像の大きさを「何画素分」という形で表現することになります。

世の中には、様々な大きさの表示デバイスがあり、またその画素数も色々あります。同じ大きさのデバイスでも、その画素数が異なるものがあり、それは画素の大きさが異なることによるわけです。
この「画素の大きさ」をマイクロメートル等の実サイズで表しても、いまいちピンときませんｗ　そこで、「デバイス上の１インチ内に収まる画素数」という「ピクセル密度（dots per inch、単位は dpi.）」という単位を用いることが多いです。
同じ１インチの線を引くのに、160 dpi. のデバイスでは１６０画素、240 dpi. のデバイスでは２４０画素が必要となります。

これは逆に考えると、「160 px.」の長さを持つ線は、160 dpi. のデバイス上では１インチで表示され、240 dpi. のデバイス上では、２/３インチで表示される、ということになります。このことは、“同じ画像は、どんなデバイス上でも同じように表示したい”という立場からするとあまり都合よくありません。

そこで、「密度非依存ピクセル（density independent pixels、単位は dp.）」という単位が導入されました。これは、「デバイス上で １/１６０インチとなる大きさ」が 1 dp. となる仮想的な単位です。「160 dp.」の長さを持つ線は、160 dpi. のデバイスだろうが240 dpi. のデバイスだろうが、全て１インチで表示されます。

この「dp.」という単位は、「画面の見た目を揃える」という点では使い勝手のよい単位なんですが、やはり欠点はあります。それは「デバイスサイズによっては画像が拡大縮小されるのでジャギーになる」という点です。
例えば、「160 px. ×160 px.」の画像ファイルがあり、これをデバイス上で１インチ角となるよう表示する場合、160 dpi. のデバイスなら「1dp. = 1 px.」なのでドット・バイ・ドットで表示されます。しかし、240 dpi. のデバイスでは、「1dp. = 1.5 px.（１インチ = 160 dp. = 240 px.）」なので、画像を１.５倍拡大しなければならず、ジャギーが発生して美しくありません。

特に Android のウィジェット（AppWidget）は、その配置サイズが「72 dp., 146 dp., 220 dp., 294 dp.」と dp. 単位で規定されているので、異なるデバイスサイズの端末で同じ（ピクセル数の）画像ファイルを表示させると、大きさを揃えるために拡大・縮小させざるを得ません。
ですので、ウィジェットに画像ファイルをキレイに（ドット・バイ・ドットで）表示させたい場合には、デバイスのピクセル密度に応じてピクセル数を変えた画像ファイルを用意しなければならない、ということになります。

拙作『DigitalClockDesigner』『Battery Designer』および『Glaeja』では、ウィジェットサイズが１マス［横 80 dp.×縦 100 dp.］で、日本国内の多くの端末が［240 dpi.］のピクセル密度なので、大体［横 120 px.×縦150 px.］を基本に画像ファイルを作っておけばイイんじゃないでしょうか。


・［イメージ ］レイヤーと［スプライト ］レイヤーの表示位置の違い

［イメージ］レイヤーでは“ウィジェット内の指定した位置に、画像ファイルの左上がくるように表示”され、［スプライト］レイヤーでは“画像ファイルの中心が、ウィジェット内の指定した位置にくるよう表示”されます（下図参照）。

・アナログ時計を作ってみよう

やっとチュートリアルですｗ　以前の［ハンド］レイヤーでも作りましたが、［スプライト］レイヤーの回転を利用してここでもアナログ時計を作ってみます。

１．文字盤画像を用意し、［イメージ］レイヤーで表示させます。

ここでは、240 dpi. のデバイスを持つ端末に、２×２のウィジェットを表示させるという想定で画像を作りました。

アンカーポイントを調整し、ウィジェットの真ん中に表示されるようします。

２．［スプライト］レイヤーを新規追加し、用意した長針画像ファイルを設定します。
用意する画像ファイルは、画像の中心が針の回転中心となるよう、右のようなサイズで作る必要があります。

針が正しい位置に表示されるよう、中心位置（水平）・（垂直）を設定します。
このとき、中心位置は固定なので、［現在値となる項目］をゼロにした上で、［開始位置］を調整することで、表示位置を調整します。

時計分針として機能させるため、［角度］を
・［開始角度］： ０
　・［終了角度］： ３６０
　・［現在値となる項目］： $m$
　・［最大値となる項目］： ６０
に設定します。

３．上記［スプライト］レイヤーを複製して追加し、画像ファイルを短針用のものに差し替えます。

そして、時計時針として機能させるため、［角度］を

・［開始角度］： ０

　・［終了角度］： ３６０

　・［現在値となる項目］： $i$

　・［最大値となる項目］： ７２０

に設定します。

情報偽装ダイアログで時刻を色々イジり、針がズレてないか確認してください。。

４．お好みで［シャドウ］とかつけたら完成です。

使った画像ファイルをZIPにまとめてココに置いておきます。

















・ドロイド君のバッテリー残量ゲージを作ってみよう

時計ばっか作っててもツマンナイので、バッテリー残量計も作ってみましょう（これも作り飽きましたがｗ）。

１．ゲージ部分となる画像ファイルを用意し、［イメージ］レイヤーで配置します。ここでは４×１を使いました。

画像ファイルの数字は、各桁（00、10、…、90、99）の真ん中が等間隔になるようカーニングが調整してあります。

２．ドロイド君の画像ファイルを用意し、これを［スプライト］レイヤーで表示します。

［中心位置（水平）］の［開始位置］［終了位置］を、［現在値となる項目］がゼロおよび１００のときに、ドロイド君が該当する数値の真上にくるよう調整します。

［中心位置（垂直）］を調整し、ドロイド君が数値の上に乗るようにします。

３．［中心位置（水平）］の［現在値となる項目］を”#P#”にして、バッテリー残量％に連動するようにします。偽装ダイアログでバッテリー残量を変えながら、表示位置を確認してください。


これで完成、、、ではツマンナイのでもうちょっとイジってみましょう。




４．歩いているドロイド君の画像を作り、下のようにファイル名をつけます。

５．［スプライト］レイヤーの［画像ファイル］を、

• ［ファイル名のマッチ］： ファイル名の最も似たものを表示
• ［パターン文字列］： droid_#PPP#@1/2/@

と設定します。

このパターン文字列は、「"droid_"の後ろに、バッテリー残量％を３桁の数値で表し、その後ろ１文字目から２文字を削除したものを追加」という意味で、

• バッテリー残量 ２％ ⇒ droid_002 ⇒ droid_2
• バッテリー残量 １２％ ⇒ droid_012 ⇒ droid_2
• バッテリー残量 ２５％ ⇒ droid_025 ⇒ droid_5

という風に補完されます。

これでドロイド君がバッテリー残量％に応じて歩くことができました。

コマ割りが悪いんで、ギクシャクですがｗ























６．これで完成、と思ったんですが、これだと放電中はドロイド君がﾊﾞｯｸｽﾃｯﾎﾟｗになってしまいますね…
というわけで、ドロイド君の画像ファイルに逆向きのものを追加して、以下のようなファイル名をつけます。

バッテリー残量が増える方向へ向かうドロイド君には“_charging_”を、減る方向へ向かうドロイド君には”_discharging_”をつけておくわけです。また、満充電時用に”_full_0”をつけたファイルも用意します。

７．そして［スプライト］レイヤーの［画像ファイル］を、

・［ファイル名のマッチ］： ファイル名の最も似たものを表示
・［パターン文字列］： droid_#S#_#PPP#@1/2/\d@

と設定します。

これで左のように充放電状態に応じて歩く向きを変えることができました。

用いた画像ファイルとスキンをココに置いておきます。

---

とりあえずこんなとこで。