Webサイト制作コースのお申し込みはこちら Webサイト制作コースのお申し込みはこちら

初心者がプログラミングを学習するためには、一定量の学習時間が必要なります。勉強を続けるためには、モチベーションの維持が重要ですが、つまらない教材ばかりでは思うようにモチベーションが保てずに、学習が進まない人もいるでしょう。

この記事では、Javaで簡単な「じゃんけんゲーム」のAndroidアプリを開発する方法を解説します。

ゲーム開発者を目指しているのであればちろんのこと、そうでない人もゲームを作りながら楽しくプログラミングを学ぶことができるでしょう。

開発環境の準備

パソコン上に Android Studioをインストールする方法は、次の記事で紹介していますので、こちらを参考に開発環境を構築しておきましょう。

【関連記事】
Javaで簡単なAndroidゲームアプリを作る方法(環境準備)

新規プロジェクトの作成

開発環境の準備ができたら、Android Studioを起動して新規にプロジェクトを作成します。

[File]→[New Project]を選択し、新規プロジェクトの作成画面を表示し、左側のカテゴリの[Phone and Tablet]より[Empty Activity]を選択します。

次に、プロジェクトの保存先などを入力します。プロジェクト名(Name)やパッケージ名(Package Name)、保存先(Save location)は任意の内容を入力します。

また、言語(Language)には Javaを選択しておきましょう。

ポテパンダの一言メモ

近年では、Androidアプリ開発は JavaでよりもKotlinを使うのが一般的になっていますが、今回は Java初心者が基礎を学ぶためのサンプルアプリであるため、言語には Javaを選択します。

入力が終わって「Finish」をクリックすると、次のようにプロジェクトを作成されます。

作成されたプロジェクトを見ると、多くのフォルダが作成されており困惑するかもしれません。

最初は、すべてのフォルダの役割を理解する必要はありませんが、プロジェクトのフォルダ構成は、おおよそ次のようになっています。

--app アプリ全体のディレクトリ
  --build コンパイルされた apkファイルなどの成果物が入るディレクトリ
  --libs 依存するライブラリ
  --src
    --main
      --java javaソースを格納するディレクトリで、アプリの動作はここに書く
      --res  画像、レイアウト、設定情報を入れるリソースディレクトリ
        --drawable 画像を格納
        --layout 画面デザインを作るためのレイアウトファイルを格納
        --mipmap-xxx アプリアイコンを格納
        --values 文字の大きさやフォントなどの設定ファイルだよ

ゲーム画面の作成

最初は、ゲーム画面の作成から初めましょう。

プロジェクトツリーから「app/src/main/res/layout/activity_main.xml」をダブルクリックして、画面のレイアウトファイルを開くと、次のようなアプリ画面を編集するデザイナが右側に表示されます。

ポテパンダの一言メモ

「activity_main.xml」の実態はXMLファイルですが、Android Studioではビジュアルを確認しながら編集できるデザイナを使って画面デザインを作ることが可能です。

まずは、プレイヤーが選択する「グー」「チョキ」「パー」ボタンを作ります。

PaletteよりLinearLayout (hroizontal)を選択し、スマホの画面デザインの部分にドラッグします。 

Constraint Widgetの部分を赤枠で囲った部分の内容で入力し、さらに layout width、layout heightの部分も同様に入力します。

LinearLayoutの上に「グー」「チョキ」「パー」を選択するためのButtonを3つドラックして配置します。

配置をしたら、次の属性を3つのボタンにそれぞれ設定します。

プロパティ 設定値
Id / text btnRock:グー
btnScissors:チョキ:
btnPaper:パー
layout_height match_perent
layout_margin 5dp
textSize 35sp

 

上のプロパティを設定すると、次のようなデザインとなるでしょう。

次に、じゃんけんの勝敗を表示する TextViewと、コンピューターの手を表示する TextViewを追加します。

各コンポーネントのプロパティには、次の表の値を設定します。

<判定結果>

属性 設定値
Id judge
text (判定結果)
layout_marginTop 60dp
textSize 35sp

 

<コンピューターの手>

設定値
Id cpu
text じゃんけん…
layout_marginTop 108dp
textSize 54sp

activity_main.xmlの内容

ここまでの手順で作成した「activity_main.xml」の内容は次のようになります。デザイナで画面を編集するのが面倒な場合は、Codeウィンドウで次のXMLを貼り付ければ画面デザインが完成します。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/btnRock"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="グー"
            android:textSize="35sp" />

        <Button
            android:id="@+id/btnScissors"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="チョキ"
            android:textSize="35sp" />

        <Button
            android:id="@+id/btnPaper"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="パー"
            android:textSize="35sp" />
    </LinearLayout>

    <TextView
        android:id="@+id/judge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        android:text="(判定結果)"
        android:textSize="34sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout2" />

    <TextView
        android:id="@+id/cpu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="108dp"
        android:text="じゃんけん..."
        android:textSize="54sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/judge" />

</androidx.constraintlayout.widget.ConstraintLayout>

次はJavaを使ってゲームに動きをうけよう

今回の記事では、Android Studioを使って「じゃんけんゲーム」の画面デザインを作るところまでを解説してきました。次はいよいよ Javaを使ってゲームに動きをつけて、ゲームを完成させていきましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。