KEIS BLOGは株式会社ケイズ・ソフトウェアが運営しています。

KEIS BLOG

[Android] ライフゲージのお手軽実装方法


ライフゲージは、格闘ゲームなどで残り体力を表すのによく用いられます。
ただ、描画からちまちま実装していくのは結構メンドイです。

Androidのウィジェットにはプログレスバーがあり、その名のとおり進捗率を表すのに
使用されます。それを応用した、ライフゲージのお手軽実装方法を紹介します。

まず、アクティビティのレイアウトXMLにHorizontalなプログレスバーを記述します。

[layout/activity_main.xml]

  <ProgressBar
      android:id="@+id/progressBar1"
      style="?android:attr/progressBarStyleHorizontal"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:layout_marginLeft="10dp"
      android:layout_marginRight="10dp"
      android:layout_marginTop="20dp" />

表示を確認するため、アクティビティのonCreate()で値を設定します。
[MainActivity.java]

   ProgressBar bar = (ProgressBar)findViewById(R.id.progressBar1);
    bar.setMax(100);
    bar.setProgress(80);

表示はこんな感じです。

1

どう見てもプログレスバーです。
ライフゲージっぽくなるよう色を変えたいところですが、それに該当するような
プロパティはないようです。

そこでDrawbleを別途定義し、外観をカスタマイズできるようにします。
drawble/progressbar.xmlを新規作成します。内容は以下のとおり。

[drawble/progressbar.xml]

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/background">
        <shape android:shape="rectangle" >
            <solid android:color="#ff0000" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle" >
                <solid android:color="#00ff00" />
            </shape>
        </clip>
    </item>
</layer-list>

次にアクティビティのレイアウトを修正し、drawbleのXMLファイルを参照させます。
[layout/activity_main.xml]

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:progressDrawable="@drawable/progressbar"  ←追記
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="20dp" />

表示はこんな感じです。

2

どう見てもライフゲージです。
それでは敵のライフも表示させてみましょう。

[layout/activity_main.xml]

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:progressDrawable="@drawable/progressbar" 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="20dp" />
    <ProgressBar
        android:id="@+id/progressBar2"
        style="?android:attr/progressBarStyleHorizontal"
        android:progressDrawable="@drawable/progressbar" 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="20dp" />

[MainActivity.java]

   ProgressBar bar = (ProgressBar)findViewById(R.id.progressBar1);
   bar.setMax(100);
   bar.setProgress(80);
   bar = (ProgressBar)findViewById(R.id.progressBar2);
   bar.setMax(100);
   bar.setProgress(80);

3

二つ並んで表示されましたが、ライフの減る方向が同じ向きになってしまっています。
古くはイー・アル・カンフーの時代から、ライフは中央に向かって減ることに
決まりきっているのです。左側のライフゲージの向きを逆にしてやりましょう。

それには表示を反転させる事ができればいいのですが、
生憎そんな都合のいいプロパティはありません。
ではどうするのかというと、ライフとダメージの色を入れ替えてしまうのです。

drawbleのXMLファイルをもう一つ作り、android:colorの定義色を入れ替えます
(XMLファイルは省略)。
そして左側のプログレスバーのレイアウトXMLで、android:progressDrawableの
参照先を追加したXMLファイルに変更します。

4

双方のライフとも中央に向かって減るようになりました。
左側のプログレスバーは進捗率も逆転させてやります。

[MainActivity.java]

   ProgressBar bar = (ProgressBar)findViewById(R.id.progressBar1);
   bar.setMax(100);
   bar.setProgress(100-80); ←進捗率を逆転させる
   bar = (ProgressBar)findViewById(R.id.progressBar2);
   bar.setMax(100);
   bar.setProgress(80);

5

ライフゲージができました。

あとはキャラ描画をチョロっと書いてコマンド入力をチョロっと書いて
衝突判定をチョロっと書けば格闘ゲームのできあがりです。
ゲームはほぼ完成したも同然ですね。