作って学べる
プログラミング講座
アプリを作りながら学習
自分のペースですぐに始められる
困ったら何回でも質問可能
ゲームアプリ (Catch the Ball)

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

Sara

2023年11月 Android Studio Giraffe | 2022.3.1 で動作確認済み。

ここまでの記事はこちら

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

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

  1. 青い箱
  2. 赤いボール
  3. オレンジボール
  4. 黒いトゲトゲ
  5. スコアを表示するTextView
  6. 「タップしてスタート」というテキスト

【完成イメージ】

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

画面サイズについて

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

解説

1. Code? Split? Design?

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 画面でレイアウトを作っていきましょう。

プレビュー表示の設定

Split 画面を開くと、以下のようにプレビューが表示されているかもしれません。

プレビュー画面が見にくいので、いくつか設定を変更します。 

プレビュー画面内のメニュー左上にある「青い正方形が重なったようなアイコン」をクリックして、Design を選択します。

次に、すぐ下にある「目のようなアイコン」をクリックして、Show System UI を選択します。

「Pixel」をクリックすると、画面サイズを切り替えることができます。

ここでは使用する Android Emulator に合わせておくのがお勧めです。

ここからはこのような画面で開発を進めていきましょう。

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

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

Android Studio 画面左側のプロジェクト構造から res → values → themes → themes.xml を開きます。

3行目あたりにある

<style name="Theme.CatheTheBall" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

<style name="Theme.CatheTheBall" parent="Theme.MaterialComponents.DayNight.NoActionBar">

に変更します。

ユーザがスマホ端末のダークテーマを有効にした場合に使われる themes.xml(night) も同じように変更してください。

3. 画像を準備する

画像のダウンロード

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

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

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

Android Studio画面の左側のプロジェクト構造の中にある drawable フォルダの上で右クリックするとメニューが出てきます。

Macの場合は「Open → in Finder」、Windowsの場合は「Open → in Explorer」を選択します。

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

4. レイアウトの作成

レイアウトについて

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

<androidx.constraintlayout.widget.ConstraintLayout

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

ConstraintLayout(コンストレイント レイアウト)とは、ボタンやテキストの位置を相対的に置くことができるレイアウトです。

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

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

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

レイアウトの作成

activity_main.xml 開いて、以下のようにコードを書きます。

少し長いですが、一気に書いてしまいましょう!

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

いろいろな属性

orientation
android:orientation="vertical"

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

この画面では TextView と FrameLayout を vertical(垂直方向)に並べています。

id

それぞれのビュー要素には id 属性をつけています。

例えば TextView には

android:id="@+id/scoreLabel"

と書いています。

ゲームのスコアはプレイ中に変化するので、MainActivity.java から更新できるようにする必要があります。

id を使って名前を付けることで MainActivity.java からこの 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/ファイル名と書きます。

5. アプリを実行

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

このような画面が表示されれば完成です。

次に行うこと

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

Subscribe
Notify of
guest
6 Comments
古い順
新しい順 人気順
Inline Feedbacks
View all comments
しらす
しらす
3 years ago

res/values/styles.xml  が存在しません

そうう
そうう
1 year ago

Can’t determine type for tag ‘<macro name=”m3_comp_bottom_app_bar_container_color”>?attr/colorSurface</macro>’

エミュレータを立ち上げようとすると上記のようなエラーが出てアプリが実行されないのですがどうしたらよいのでしょうか。

そうう
そうう
1 year ago
Reply to  Sara

解決しました!
参考までつけていただきありがとうございました!

ABOUT ME
Sara
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました!
>> お問い合わせはこちら
本格的に学びたい方へ

Code for Fun プログラミング講座

Code for Fun プログラミング講座では、プログラミングの基礎からアプリ開発まで学ぶことができます。

わかりやすく・シンプルをモットーに

  • 同じコードを書けば必ず完成できること
  • 専門用語を使いすぎないこと

を重視しています。

POINT 01

動くコード

プログラミングの文法だけを学んでも、そこから動くアプリを開発をするのは難しいです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなど「アプリとして機能するもの」を作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

分からないことがあっても、前のレッスンに戻ることができるので安心です。

お申し込みしたその日からからすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

6
0
この記事にコメントするx
記事URLをコピーしました