ゲームアプリ (Catch the Ball)

【Android Studio】 ゲームアプリ開発入門 第2回 「ゲーム画面の作成」

ここまでの記事はこちら
 

前回プロジェクトを作成をしたので、今回はゲーム画面を作っていきましょう。
 

ゲーム画面に必要なのは、この6つです。

  • 青い箱
  • 赤いボール
  • オレンジボール
  • 黒いトゲトゲ
  • スコアを表示するラベル
  • 「タップしてスタート」というテキスト

 

【完成イメージ】


 
 

それでは、Android Studioを開いて始めていきましょう!
 

画面サイズについて

開発中はNexus4のサイズで進めて行きます。
Nexus4よりも大きい画面サイズで実行するとゲームの動きが遅くなりますが、Nexus4サイズで完成後、全てのデバイスに対応するように調整をします。


 

動画

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

0:35 ~

【Android Studio】ゲームアプリ開発入門 #2 プロジェクトの作成とゲーム画面

 
 

解説

Code? Split? Design?

activity_main.xml ファイルを開きます。

activity_main.xml を開くと、右上に「Code」「Split」「Design」の3つのボタンがあります。


 
 

Android アプリ開発ではレイアウトを XML で書いていくのですが、このとき「Code」「Split」「Design」の3つの画面から作成方法を選ぶことができます。

XMLとは?

XMLとはExtensible Markup Language(エクステンシブル マークアップ ランゲージ)の略です。簡単に言うと HTML のデータ管理バージョンです。HTML はウェブサイトの画面を作るときに使いますが、XML は主にデータを管理するときに使われます。

 


 

① Code

「Code」では自分で XML を書いていきます。

スッキリとした XML コードを書けることがメリットですが、慣れるまで少し手間がかかることがデメリットです。
 
 

② Split

「Split」では Code 画面とプレビュー画面が分割で表示されます。

左側に XML を書きながら、右側でスマホ画面のプレビューを確認することができます。
 
 

③ Design

「Design」ではドラッグ&ドロップでボタンやテキストなどの要素を置いていきます。要素を置くと自動的に activity_main.xml に XML コードが追加される仕組みです。

簡単に画面が作れるのがメリットですが、XML がゴチャゴチャするするのがデメリットです。
 
 

どれを使うか?

どれを使っても良いですが、個人的にはコードがスッキリとする「②Split」をいつも使用しています。初めての方にもわかりやすいと思うので、今回は「②Split」でレイアウトを作っていきましょう。
 
 

レイアウトについて

activity_main.xml を開いてみると、2行目にこんなコードが書いてあります。

<android.support.constraint.ConstraintLayout

(API 28 以上の場合は androidx.constraintlayout.widget.ConstraintLayout)
 

これは「ConstraintLayout というレイアウトを使用します」という意味です。

ConstraintLayout(コンストレイトレイアウト)とは、ボタンやテキストの位置を自動的に最適化し調整してくれるレイアウトです。
 

今回はこれを使わずに LinearLayout(リニアレイアウト)を使います。

LinearLayout を使うと、ボタンやテキストなどを簡単に横一列・縦一列に並べることができます。

このゲームアプリでは LinearLayout と FrameLayout(フレームレイアウト)を組み合わせて作っていきます。(レイアウトについてはこの後解説します。)
 
 

アクションバーを非表示にする

まずは、ゲームに必要ないアクションバーを非表示にします。


 

res/values/styles.xml を開いたら、4行目

<style name=”AppTheme” parent=”Theme.AppCompat.Light.DarkActionBar“>

<style name=”AppTheme” parent=”Theme.AppCompat.Light.NoActionBar“>

に変更します。
 

これでアクションバーを非表示にすることができます。
 
 

画像を準備する

画像のダウンロード

以下のリンクから画像をダウンロードしてください。(4つの画像が入っています。)

ご自身で用意した画像を使用して頂いて問題ありません。その場合は画像サイズが大きくなり過ぎないよう注意してください。

 
 

画像をdrawableフォルダにセット

Android Studio画面の左側のプロジェクト構造の中にある「Drawable」の上で右クリックするとメニューが出てきます。Macの場合は「Reveal in Finder」、Windowsの場合は「Show in Explorer」を選択します。
 

 
 

直接開く場合のパスはこちらです。

Macの場合
/Users/あなたのアカウント名/AndroidStudioProjects/CatchTheBall/app/src/main/res/drawable

Windowsの場合
C:¥Users¥あなたのアカウント名¥AndroidStudioProjects¥CatchTheBall¥app¥src¥main¥res¥drawable
 
 

drawableフォルダを開いたら、先ほどダウンロードした画像を置いてください。
 

 
これで画像を使う準備ができました!
 
 

レイアウトの作成

activity_main.xmlファイルを開いて、以下のように書きます。
長いですが、一気に書いてしまいましょう!

Warning が出ている箇所があると思いますが、最後に修正するのでそのままにしておいて下さい。

 

何箇所かコードを解説します。
 

8行目

android:orientation="vertical"

LinearLayout内の要素を vertical(垂直方向)に並べるために書きます。

この画面では、スコアを表示する TextView と FrameLayout を vertical(垂直方向)に並べています。

 
 

10~17行目:TextView


 

id
android:id="@+id/scoreLabel"

TextView に id(名前)をつけています。

ゲームのスコアはプレイ中に変化するので、MainActivity.java から更新できるようにする必要があります。id を付けることで MainActivity.java からこの TextView を呼び出せるようになります。

このあと TextView 以外の要素にも id をつけていきますが「一つのアクティビティ内で同じ id 名を使うことはできない」ことだけ注意です。
 
 

width(幅)とheight(高さ)
android:layout_width="match_parent"
android:layout_height="50dp"

幅と高さを設定する方法は3つあります。

  1. match_parent
  2. wrap_content
  3. 好きなサイズ

 

match_parent は親要素の高さ・幅に合わせます。

wrap_content は余白なしの文字列ピッタリの高さ・幅になります。
 

このアプリではスコアが常に増えていくので、幅は一定ではありません。Score:10000000000 となる可能性もあるので、幅は親要素(LinearLayout)に合わせる "match_parent" にしました。高さは変化することがないので 50dp で固定しています。
 
 

padding(余白)
android:paddingLeft="10dp"

スコアが見やすいように、文字の左側に少しだけ余白を入れます。
 
 

gravity
android:gravity="center_vertical"

文字が上下中央になるようにします。
 
 

FrameLayout

はじめに書いた LinearLayout(リニアレイアウト)は、要素をタテまたはヨコに並べるレイアウトでした。

FrameLayout(フレームレイアウト)を使うと、要素を重ねることができます。

このゲームでは、青い箱がボールと重なるとポイントゲット、黒のトゲトゲと重なるとゲームオーバーとなるので、要素を重ねることができる FrameLayout を使います。
 
 

ImageView

android:src="@drawable/box"

先ほど画像を drawable フォルダに置きましたが、その画像を表示するためのコードです。
@drawable/ファイル名と書きます。
 
 

アプリを実行

アプリを実行してみてください。

エラーが出ず、このような画面になっていれば完成です。


 
 

次に行うこと

これで activity_main.xml は完成です!
次回は青い箱を動かしてみます

第3回 「タッチイベントで画像を動かす」に進む
 
 

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

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

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

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

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

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

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

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

無料体験はこちら

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

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

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

3. Treehouse

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

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

COMMENT

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

CAPTCHA