ゲームアプリ (Catch the Ball)

【Android Studio】 ゲームアプリ開発入門 第3回 「タッチイベントで画像を動かす」

ここまでの記事はこちら
 

前回はゲーム画面を作成をしたので、今回はタッチイベントで青いボックスを動かしてみます。
 
 


 

動画

動画では Android Studio 3.1.4 を使用していますが 3.6 / 4.0 でも動作確認済みです。

【Android Studio】ゲームアプリ開発入門 #3 タッチイベントで画像を動かす

 
 

解説

ゲーム開始の準備

MainActivity.javaを開いて、以下のコードを追加します。(コードの後に解説を書いています。)

3行目について

targetSDK を 28 にしている場合は
import android.support.v7.app.AppCompatActivity;
ではなく
import androidx.appcompat.app.AppCompatActivity;
となります。

 

12~17行目

activity_main.xml で作成した TextView や ImageView を MainActivity.java で使うための準備です。
 

画像のようにTextViewの部分が赤くなり、青いメッセージが出るかもしれません。(表示されずに自動で追加される場合もあります。)


 

これは「android.widget.TextView」をインポートしてくださいという警告です。

青いメッセージが出ている状態で altreturn を同時に押してください。
 

警告が消えましたか?
 

コードを見てみると、8行目 import android.widget.TextView; が追加されていると思います。
 

今後同じような警告が出た場合は、同じように altreturn を押して警告を消してください。

メモ

altreturn を押さずに
import android.widget.TextView;を直接書くこともできます。

 
 

20行目

private float boxY;

boxY は青いボックスの Y 座標の数値です。
Y 座標の変更には setY(float y) メソッドを使うので、float 型にしています。
 
 

27~32行目

前回 activity_main.xml を作成した時に TextView や ImageView に id を設定しました。
 

 

findViewById は「idからビューを見つける」という意味です。
 

これをすることで MainActivity.java から TextView に表示する文字を変えたり、ImageView の位置を変えることができるようになります。
 
 

34~39行目

ゲーム開始前なので、pink・orange・blackは画面の外に移動させておきます。(ゲーム開始時に画面の右側から出てくるようにします。)
 

 

-80.0f という数値に意味はありません。
画像が完全に画面の外にでる数値ならば、-77.7f や -100.0f など何でも良いです。
 
 

41~42行目

startLabel.setVisibility(View.INVISIBLE);
boxY = 500.0f;

startLabel(タップしてスタート)は現時点では必要ないので非表示にしておきます。

boxY は仮の値です。だいだい真ん中辺りの 500.0f にしています。
 
 

タッチイベントを追加する

次に、画面をタップした時の処理を書いていきます。

画面を触った時・離した時などを判定するには onTouchEvent を使います。
 

直接コードを書いても良いですが、今回は簡単に追加する方法を紹介します。
 

まずメニューの「Code」→「Override Methods」を選択します。

 

onTouchEvent(event:MotionEvent) を選択して「OK」を押します。


 
 

新しい Android Studio では入力補完ができるようになっています。


 
 

onTouchEvent メソッドが追加されたら、以下のようにコードを変更してください。

 

7行目

MotionEvent.ACTION_DOWN で画面をタップした場合の判定をすることができます。

 
 

8,10行目

画面をタップしたら boxY から 20 を引いて、box の位置を上に移動させます。

 
 

アプリの実行

ここで、アプリを実行してみます。

 
 

画面を一度タップするごとに、box が少しずつ(マイナス20)上に移動します。

動かない場合は、もう一度コードを見直してみてください。

 
 

ここまでのコード

 
 

次に行うこと

次回は、青いボックスを上下に動くようにしていきます

第4回 「タイマーで画像を動かす」に進む

 
 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

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

CAPTCHA