モグラ叩きゲームで学ぶアンドロイドプログラミング (3/8)

前回にひき続き、今回はいよいよモグラを登場させましょう。

まず、モグラの画像を res/drawable-hdpi/mole.png にコピーします。

次に、MainActivity.javaを修正していきます。
全体のソースコードは以下にあります。
https://gist.github.com/mrp1q7z/9705061

ボタンを保持する変数を定義します。（１１行目）
縦５ｘ横４の合計２０個の配列として宣言します。

Button[][] mButton = new Button[5][4]; // [行][列]

ボタンを保持する変数に値をセットします。（１８〜４１行目）

mButton[0][0] = (Button) findViewById(R.id.Button1A);
mButton[0][1] = (Button) findViewById(R.id.Button1B);
mButton[0][2] = (Button) findViewById(R.id.Button1C);
・・・
mButton[4][3] = (Button) findViewById(R.id.Button5D);

モグラの画像を表示するメソッドを追加します。（７１〜７５行目）
行と列は乱数を発生させてランダムな場所に表示します。

private void printMole() {
  int row = (int) (Math.random() * 5);
  int col = (int) (Math.random() * 4);
  mButton[row][col].setBackgroundResource(R.drawable.mole);
}

上記メソッド(printMole)をアプリケーションの画面が表示された直後に
発生するイベント「onResume」で呼び出すようにします。（５３〜５７行目）

@Override
protected void onResume() {
  super.onResume();
  printMole();
}

ここまでできたら実行してみましょう。
ランダムに表示位置を変更しているので、画面を閉じて再度実行すると違う場所に表示されるはずです。

今日はここまで。次回に続く。

モグラ叩きゲームで学ぶアンドロイドプログラミング (2/8)

前回に続いて、今回も画面周りを作っていきましょう。

1.画像を追加

以下の画像を res/drawable-hdpi にコピーします。

モグラを叩いたときの手のマーク：btn_push.png
モグラの出てくる穴：hole.png

2.ボタンの背景画像を作成

モグラが出てくる部分はボタンにします。
そのボタンの背景画像を作成します。

res/drawable-nodpi/bg_button.xml というファイルを作成し、以下のように記述します。
※drawable-nodpi というフォルダがない場合は新規作成します。

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- ボタンが押されている -->
    <!-- フォーカスされていない -->
    <item android:state_focused="false" android:state_pressed="true">
        <layer-list>
            <item android:drawable="@drawable/btn_push">
        </item></layer-list>
    </item>

    <!-- ボタンが押されていない -->
    <!-- フォーカスされていない -->
    <item android:state_focused="false" android:state_pressed="false">
        <layer-list>
            <item android:drawable="@drawable/hole">
        </item></layer-list>
    </item>

    <!-- ボタンが押されている -->
    <!-- フォーカスされた -->
    <item android:state_focused="true" android:state_pressed="true">
        <layer-list>
            <item android:drawable="@drawable/btn_push">
        </item></layer-list>
    </item>

    <!-- ボタンが押されていない -->
    <!-- フォーカスされた -->
    <item android:state_focused="true" android:state_pressed="false">
        <layer-list>
            <item android:drawable="@drawable/hole">
        </item></layer-list>
    </item>

</selector>

これは、ボタンが押されていないときは、モグラの穴を表示し、ボタンが押された時には手のマークを表示するように設定しています。

3.画面にボタンを配置する

縦に５つ、横に４つの格子状にボタンを配置します。
あと、上部にはスコアと、タイムの表示をします。
activity_main.xml を以下のように修正します。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bk_grass"
    tools:context="com.yojiokisoft.whacmole.app.MainActivity">

    <LinearLayout
        android:id="@+id/relativeLayout"
        android:layout_width="fill_parent"
        android:orientation="horizontal"
        android:paddingTop="20dp"
        android:paddingLeft="10dp"
        android:layout_height="60dp">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Score:"
            android:textSize="25sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="100"
            android:textSize="30sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Time:"
            android:textSize="25sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="60"
            android:textSize="30sp" />

    </LinearLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="false"
        android:layout_below="@+id/relativeLayout">

        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true">

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1">

                <Button
                    android:id="@+id/Button1A"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button1B"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button1C"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button1D"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1">

                <Button
                    android:id="@+id/Button2A"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button2B"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button2C"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button2D"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1">

                <Button
                    android:id="@+id/Button3A"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button3B"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button3C"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button3D"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1">

                <Button
                    android:id="@+id/Button4A"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button4B"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button4C"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button4D"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1">

                <Button
                    android:id="@+id/Button5A"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button5B"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button5C"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button5D"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

            </TableRow>
        </TableLayout>
    </RelativeLayout>

</RelativeLayout>

Button の背景には先ほど作成した bg_button を指定しています。

4.実行してみる

スコアやタイムは固定だし、モグラも出て来ませんが、モグラ叩きっぽくなりました。
ボタンを押すと、押した部分が手のマークになります。

今日は、ここまで。次回に続く。

モグラ叩きゲームで学ぶアンドロイドプログラミング (1/8)

アンドロイドプログラミングを始めようと思っている人に向けて
サンプルプログラムを作りながら学んでいくコーナーです。

ステップ、バイ、ステップで少しずつ開発していき、
最終的にモグラ叩きゲームの完成を目指します。

※開発環境は整っているという前提です。
※ここでは、Android Studio 0.5.1 を使います。


1.プロジェクトを作成

プロジェクト名は「WhacMole」にしました。

Blanck Activity を選択して、次へ

Activity Name は「MainActivity」にして、フィニッシュ。

2.背景画像を追加

drawable-hdpiに bk_grass.jpg を追加します。

activity_main.xml を開き、RelativeLayout の background に先ほど追加した
bk_grass を選択します。

3.実行してみる

背景画像が表示されました。

今日は、ここまで。次回に続く。

人類はデスクワークにゆっくりと殺されつつある

まず、以下の動画を見てください。


歩きながらパソコン仕事をしています。

“歩きデスク”の生産性向上効果を研究が実証
という記事を読んで、なんか良さそうと思いました。
座っているとおしりも腰も痛くなってきます。
これでそれも解消です。

歩きながらできるのか？とも思いますが、
歩くスピードはゆっくりなのでキーボード入力も支障がなさそうです。
ただ、マウスでの細かいグラフィックの描画とかは手元が狂いそうです。

今度、DIYで作ってみようかな？