ゲームアプリ (Catch the Ball)

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

ここまでの記事はこちら
 

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

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

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

 

【完成イメージ】


 
 

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

画面サイズについて

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


 

動画

0:35 ~

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

 
 

Design? Text?

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

activity_main.xmlを開くと、下の方に「Design」「Text」というタブがあります。


 
 

Androidアプリ開発では、画面レイアウトをXMLで書いていきます。
このとき「Design」「Text」の2つの方法を選ぶことができます。

XMLとは?

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

 

Design(デザイン)

デザインタブでは、ドラッグ&ドロップでボタンやテキストを置いていくことができます。
それらを置くと自動的にactivity_main.xmlにコードが追加されます。

長所:簡単に画面が作れる
短所:XMLファイルがゴチャゴチャする
 

Text(テキスト)

テキストタブでは、自分でXMLを書いていきます。

長所:コードがスッキリする
短所:手間がかかる
 
 

どちらが良いとは断言できませんが、私はコードがスッキリとする「Text」をいつも使用しています。初めての方にもわかりやすいと思うので、今回は「Text」でレイアウトを作っていきましょう。
 
 

レイアウトについて

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

<android.support.constraint.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ファイルを開いて、以下のように書きます。
長いですが、一気に書いてしまいましょう!

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

8行目

android:orientation="vertical"

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

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

 

10~17行目:TextView

 

 

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 : 300」ちょうどのサイズになります。
 

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

 
 

android:paddingLeft="10dp"

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

 
 

android:gravity="center_vertical"

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

 
 

19行目: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

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