デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

Androidアプリ開発奮闘記 漢字ゲームを作る①

こんにちはKoheiです。

最近、Androidアプリ開発の勉強をしてます。とりあえず、以下の参考書を一通りやってみて、本を見ながら簡単なアプリが作れるようになってきました。

さらに理解を深めるには、色んなアプリを自分で作ってみるのが一番ですよね。ということで、今回は、僕の子供が漢字が苦手なので、簡単な漢字ゲームをAndroidアプリで作ってみました。

自分自身のAndroid開発のノウハウ整理のために、制作のノウハウ等をこのブログにまとめていくことにします。

スポンサーリンク

1.仕様

1-1.ゲーム完成形の仕様

まずは、アプリ制作に入る前に、漢字ゲームの仕様をざっくり決めました。
最初は、漢字の読みを答えていくゲームにしようかと思いましたが、子供が漢字の書き取りが苦手だということで、書き取りゲームになりました。(個人的に制作の難易度がかなり上がりました。。)

画面は、トップ画面と文字入力画面の2画面構成です。

文字入力画面がゲームのメイン画面になります。

簡単に仕様を説明すると、①のエリアに問題が表示されるので、②の手書きエリアに漢字を入力し、完了ボタンを押すと、文字判定処理が動き、正解の場合は、お金(報酬)がもらえるというゲームです。
あとは、手書きの文字は、「戻る」、「進む」、「クリア」ボタンでやり直しができるようにしました。
また、「スキップ」ボタンを押すと、次の問題へ移るようになっています。

1-2.今回の目標

完成形まで一気に作ると大変なので少しずつアプリを完成させることにしました。
本記事では、まずは文字ゲームの基本部分である、トップ画面から文字入力画面への遷移部分と文字入力画面の基本部分を作ることにします。

2.レイアウトファイル、アクティビティクラスについて

開発に入るまえに、まずは、Androidアプリ開発で重要なレイアウトファイルとクラス構成について説明します。
Androidアプリ開発では、画面構成を記載するレイアウトファイル(.xmlファイル)とその画面処理を記載するアクティビティクラス(Javaクラス)があります。
画面ごとにレイアウトファイルとアクティビティクラスを作っていくイメージです。

今回、ゲームのトップ画面と文字入力画面2つの画面を作ったので、以下のようなレイアウトファイルとアクティビティクラスの構成になっています。

3.Androidアプリ開発の流れ

Androidアプリ開発のパターンとしては以下のような流れで作ります。
開発ツールは、AndroidStudioを使います。※AndroidStudioのインストール方法などは今回は省略します。(ネットで調べればいっぱい紹介されていますので、ググってみてください)

Androidアプリ開発のパターン
1.レイアウトファイル(.xml)で画面レイアウトを作成する
2.アクティビティクラスなどのJavaファイルに処理を記述する
3.アプリを起動して動作確認

それでは、早速順に作っていきたいと思います。

4.レイアウトを作る

4-1.トップ画面のレイアウト

まずは、トップ画面用のレイアウトから作ります。
まずは、AndroidStudioから新規プロジェクトを作成し、空のActivityを作りましょう。(僕は、MainActivityという名前にしました)

activity_main.xmlを開き、textViewとButtonを追加します。
AndroidStudioは、とても便利で、Designタブからボタンやテキストビューを直接ドラッグすることで、直感的にパーツを配置できます。
まずは、activity_main.xmlを選択し、[Design]タブを選択します。

パーツ(Button,TextView)を好みの位置に配置したら、「Infer Constraints」を押して制約をつけます。(レイアウト上に固定する)

あとは、Attributes画面から、パーツのIDやtextを入力しましょう。

配置したパーツのAttributes
・Button ID:button_start/ text:ゲームをはじめる
・TextView ID:textView/ text:かんじゲーム

[Text]タブからは、直接Xmlでコードを書いてパーツを配置できます。
一応、私が作ったレイアウトのコードを以下に載せてます。

activity_main.xml

4-2.文字入力画面のレイアウトを作る


次に、文字入力画面レイアウトを作りましょう。javaフォルダを選択した状態で、右クリック→New→Activity→Empty Activity(空のActivity)を選択します。

名称は、DrawActivityとしました。

先程のトップ画面と同じように、activity_draw.xmlを開き、以下のようにパーツを追加しましょう。※文字入力のエリアは、SurfaceViewを配置します。

配置したパーツのAttributes
・Button ID:button_undo/ text:戻る
・Button ID:button_redo/ text:進む
・Button ID:button_clear/ text:クリア
・SurfaceView ID:surfaceView

一応、私が作ったレイアウトのコードを以下に載せてます。
[Text]タブから、直接Xmlでコードを記載するときに参考にしてください。

activity_draw.xml

これで、とりあえず、2つの画面のレイアウトが完成しました。
次は、アクティビティに処理を実装していきます。

5.トップ画面の処理を実装する

5-1.ボタン押下処理

ボタンが押されたというイベントを検出するためには、リスナと呼ばれるものを登録します。
MainActivity.javaに以下の処理を実装します。

MainActivity.java

【コード解説】
まず、1行目で、View.OnClickListenerインターフェースを実装宣言をします。
15行目〜25行目で、onClickメソッドを実装します。
また、onCreateメソッド内に、リスナー登録します。(10行目〜12行目)

これで、「ゲームをはじめる」ボタンを押すと、onClickメソッドがコールされ、switch文の[R.id.button_start]処理に飛んできます。

5-2.画面遷移

次に「ゲームをはじめる」ボタンを押すと、ゲーム画面に遷移させます。
別のActivityを起動するには、Intentクラスを使います。具体的には以下のようにやります。

画面遷移の方法
1.Intentクラスをnewする
2.起動先のアクティビティへ渡すデータを設定する
3.アクティビティを起動する

今回、特に渡すデータはないので、1,2の処理だけ入れます。
onClickメソッドに以下の処理を実装します。

MainActivity.java

【コード解説】
・Intentクラスをnewして、startActivityを実行することで、DrawActivityへ遷移させています。

6.文字入力画面の処理を実装する

6-1.surfaceViewで文字入力

今回手書きの文字入力処理は、surfaceViewを使います。

今回、surfaceViewを使った手書き入力は、以下の記事を参考にさせて頂きました。
[Androidアプリ開発]タッチでお絵かきしてみた

DrawActivity.javaを開き、以下を追加しましょう。

DrawActivity.java

【コード解説】
・onCreateメソッド内で、SurfaceViewの初期設定を実装しています。134行目は手書き線の太さで30に設定しています。(119行目〜134行目)

・SurfaceHolderのコールバックメソッドを実装しています。surfaceCreatedは、surfaceViewの描画準備が整ったらコールされます。その中で、描画位置のオフセットを計算しています。(11行目〜38行目)

・onTouchEventメソッドで実際に文字エリア内でタッチされたときの描画処理等を実装しています。(56行目〜78行目)

6-2.文字操作ボタン処理追加

続いて、文字操作系のボタン(戻る、進む、クリア)処理を追加します。
DrawActivity.javaを開き、以下を追加しましょう。

DrawActivity.java

【コード解説】
・1行目で、View.OnClickListenerインターフェースを実装宣言をします。
・onCreateメソッド内で、各種ボタンのリスナーを登録しています。(24行目〜30行目)
・「戻る」、「進む」、「クリア」キーをクリックすると、onClickメソッドが実行され、それぞれ処理が実行されます。(52行目〜126行目)

7.動作確認

さて、ここまで実装できたら、早速動作確認してみましょう。
Androidの実機を使って動作確認してもいいのですが、せっかくAndroidStudioを使ってるので、エミュレータを使ってみます。
まずは、AndroidStudioの上部にある三角マーク(Run)をクリックします。

ここで、「Create New Virtual Device」をクリックすると、仮想デバイスの種類等を選択する画面になりますので、デバッグしたい機種を選択していってください。

私は、すでに登録済みなので、Nexus5Xを選択し、OKを押します。

特にビルドエラー等がなければ、以下のようにエミュレーター上で作成したアプリを動作させることができます。

無事に文字入力まで動作させることができました!

8.最後に

以上、今回は、漢字ゲームの基本部分を作成しました。
次回はゲーム完成に向けて、入力した文字の判定処理などを実装していこうと思います。
少しでも参考になるところがあれば幸いです。

それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン