「十章：ちょっとしたゲームを作ってみる」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
タイトル通り今回は簡単なゲームを作ってみる。
モグラたたきのようなゲームを作ってみた。
内容的には、ほとんど今まで使ってきた内容で作成されている。
復習ついでにやってみよう。
↓今回使用した画像(ダウンロードして使ってください)
#image(http://www57.atwiki.jp/androtomato?cmd=upload&act=open&pageid=38&file=tap.png)
#region(ソース構成の説明)
・MainActivity(親アクティビティ)＋activity_main.xml(レイアウトファイル)
・GameActivity(子アクティビティその1)
・HelpActivity(子アクティビティその2)＋help_activity.xml(新規追加レイアウトファイル)
help_activity.xmlについてはHelpActivityの項目で解説する。
#endregion
#region(MainActivity周りのソースと解説)
といっても、ボタンを二つ用意してインテントを用いてGameActvityとHelpActivityという二つの
子アクティビティに振り分けているだけで今までと大して変わらない。
レイアウトファイルに関しては適当に作った。
#region(MainActivity.java)
#highlight(linenumber, java){{
public class MainActivity extends Activity implements OnClickListener{
Intent intent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//ボタンのクリックイベントを使えるようにする
Button button = (Button) findViewById(R.id.button1);
button.setOnClickListener(this);
Button button2 = (Button) findViewById(R.id.button2);
button2.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch(v.getId())
{
case R.id.button1:
//インテントを使用する
intent = new Intent(MainActivity.this, GameActivity.class);
//新たなアクティビティを開始する
startActivity(intent);
break;
case R.id.button2:
//インテントを使用する
intent = new Intent(MainActivity.this, HelpActivity.class);
//新たなアクティビティを開始する
startActivity(intent);
break;
}
}
}
}}
#endregion
#region(activity_main.xml)
#highlight(linenumber){{
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="106dp"
android:text="SAMPLE GAME" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="48dp"
android:text="PLAY" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/button1"
android:layout_below="@+id/button1"
android:layout_marginTop="43dp"
android:text="HELP" />
</RelativeLayout>
}}
#endregion
#endregion
#region(GameActivity周りのソースと解説)
ここのソースは五章：画像を出すⅡで用いたソースを改装して作っている。
↓ソース長いので注意。
#region(GameActivity.java)
#highlight(linenumber, java){{
public class GameActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//カスタムビュークラスを設定する
MyView view = new MyView(this);
setContentView(view);
}
}
class MyView extends View
{
private int x; //座標のx座標
private int y; //座標のy座標
private int targetW;//ターゲットのサイズ
private int targetH;//ターゲットのサイズ
private int score; //スコア
private Bitmap bmp; //変換後の画像
private Paint paint = new Paint();
private Activity activity = (Activity)this.getContext();
Resources res = this.getContext().getResources();//変換後の画像の格納先
public MyView(Context context)
{
super(context);
setFocusable(true);
//リソースファイル内の画像をBitmapに変換して格納する
bmp = BitmapFactory.decodeResource(res, R.drawable.tap);
//変換されたBitmapのサイズを取得する。
targetW = bmp.getWidth();
targetH = bmp.getHeight();
//座標の初期化
x = 0;
y = 0;
score = 0;//スコア初期化
}
/********
* 描画
*******/
protected void onDraw(Canvas canvas)
{
if(score < 200)
{
//背景色を指定
canvas.drawColor(Color.WHITE); //白い背景に設定する。
//変換したBitmapで描画
canvas.drawBitmap(bmp, x, y, paint);
//スコアの描画を行う
canvas.drawText("SCORE:"+score+" CLEAR:200", 20.0f, 20.0f, paint);
}
else
{
paint.setTextSize(30.0f);
canvas.drawText("CREAR", 320.0f, 450.0f, paint);
canvas.drawText("Please Tap to Finsh the Game.", 170.0f, 530.0f, paint);
}
}
/********
* タッチ
*******/
public boolean onTouchEvent(MotionEvent event)
{
//画面サイズの取得
int width = getWidth();
int height = getHeight();
//タッチ座標を取得してターゲットとの当たり判定を取る
int touchX = (int)event.getX();
int touchY = (int)event.getY();
if(x < touchX && touchX < x + targetW)
{
if(y < touchY && touchY < y + targetH)
{
//ディスプレイ内に収まるようにランダムな位置を生成する
x = (int)Math.round(Math.random() * width) - (targetW / 2);
y = (int)Math.round(Math.random() * height) - (targetH / 2);
//スコア加算
score += 10;
//再描画指令
invalidate();
}
}
//スコアが一定数いったらfinish出来るようになる
if(score > 190)
{
//タッチパネルが敏感なのでちょっと余分にとっておく
if(score > 230)
{
activity.finish();
}
score += 10;
}
return true;
}
}
}}
#endregion
#region(ソース解説)
五章では画像を出しただけだったが、今回はテキストも同時に出した。
こういう複合描画も可能。
また、描画の際に一番後ろにあった引数(paint)に今回は設定を追加した。
paint.set***()のように使うことで見た目を変えたりもできる。
あとはカスタムビュークラス内でアクティビティクラスでしか使えない命令を使いたいとき、
カスタムビュークラス内でActivity activity = (Activity)this.getContext();を宣言することで
カスタムビュークラスが親のアクティビティクラス(今回はGameActivity)の命令を使えたりする。
本ソース内では、98行目のactivity.finish();で使用している。
#endregion
#endregion
#region(恒例の小話)
実行してみた人はすぐに分かったと思うが、(ソースの時点で気づいた人もいると思うけど)
これ、実は相当制御の仕方やサイズの取り方など、かなり雑な作りなので
自分以外の端末との互換性を全力で無視している。
どこを直したらいいか、何を追加するべきか、そういうことを考えられて且つ実装するべき内容を
調べてでもいいから実装できるようになれば、&bold(){自信を持って開発者を名乗れるようになると思うよ！}
#endregion
タイトル通り今回は簡単なゲームを作ってみる。
モグラたたきのようなゲームを作ってみた。
内容的には、ほとんど今まで使ってきた内容で作成されている。
復習ついでにやってみよう。
↓今回使用した画像(ダウンロードして使ってください)
#image(http://www57.atwiki.jp/androtomato?cmd=upload&act=open&pageid=38&file=tap.png)
#region(ソース構成の説明)
・MainActivity(親アクティビティ)＋activity_main.xml(レイアウトファイル)
・GameActivity(子アクティビティその1)
・HelpActivity(子アクティビティその2)＋help_activity.xml(新規追加レイアウトファイル)
help_activity.xmlについてはHelpActivityの項目で解説する。
#endregion
#region(MainActivity周りのソースと解説)
といっても、ボタンを二つ用意してインテントを用いてGameActvityとHelpActivityという二つの
子アクティビティに振り分けているだけで今までと大して変わらない。
レイアウトファイルに関しては適当に作った。
#region(MainActivity.java)
#highlight(linenumber, java){{
public class MainActivity extends Activity implements OnClickListener{
Intent intent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//ボタンのクリックイベントを使えるようにする
Button button = (Button) findViewById(R.id.button1);
button.setOnClickListener(this);
Button button2 = (Button) findViewById(R.id.button2);
button2.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch(v.getId())
{
case R.id.button1:
//インテントを使用する
intent = new Intent(MainActivity.this, GameActivity.class);
//新たなアクティビティを開始する
startActivity(intent);
break;
case R.id.button2:
//インテントを使用する
intent = new Intent(MainActivity.this, HelpActivity.class);
//新たなアクティビティを開始する
startActivity(intent);
break;
}
}
}
}}
#endregion
#region(activity_main.xml)
#highlight(linenumber){{
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="106dp"
android:text="SAMPLE GAME" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="48dp"
android:text="PLAY" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/button1"
android:layout_below="@+id/button1"
android:layout_marginTop="43dp"
android:text="HELP" />
</RelativeLayout>
}}
#endregion
#endregion
#region(GameActivity周りのソースと解説)
ここのソースは五章：画像を出すⅡで用いたソースを改装して作っている。
↓ソース長いので注意。
#region(GameActivity.java)
#highlight(linenumber, java){{
public class GameActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//カスタムビュークラスを設定する
MyView view = new MyView(this);
setContentView(view);
}
}
class MyView extends View
{
private int x; //座標のx座標
private int y; //座標のy座標
private int targetW;//ターゲットのサイズ
private int targetH;//ターゲットのサイズ
private int score; //スコア
private Bitmap bmp; //変換後の画像
private Paint paint = new Paint();
private Activity activity = (Activity)this.getContext();
Resources res = this.getContext().getResources();//変換後の画像の格納先
public MyView(Context context)
{
super(context);
setFocusable(true);
//リソースファイル内の画像をBitmapに変換して格納する
bmp = BitmapFactory.decodeResource(res, R.drawable.tap);
//変換されたBitmapのサイズを取得する。
targetW = bmp.getWidth();
targetH = bmp.getHeight();
//座標の初期化
x = 0;
y = 0;
score = 0;//スコア初期化
}
/********
* 描画
*******/
protected void onDraw(Canvas canvas)
{
if(score < 200)
{
//背景色を指定
canvas.drawColor(Color.WHITE); //白い背景に設定する。
//変換したBitmapで描画
canvas.drawBitmap(bmp, x, y, paint);
//スコアの描画を行う
canvas.drawText("SCORE:"+score+" CLEAR:200", 20.0f, 20.0f, paint);
}
else
{
paint.setTextSize(30.0f);
canvas.drawText("CREAR", 320.0f, 450.0f, paint);
canvas.drawText("Please Tap to Finsh the Game.", 170.0f, 530.0f, paint);
}
}
/********
* タッチ
*******/
public boolean onTouchEvent(MotionEvent event)
{
//画面サイズの取得
int width = getWidth();
int height = getHeight();
//タッチ座標を取得してターゲットとの当たり判定を取る
int touchX = (int)event.getX();
int touchY = (int)event.getY();
if(x < touchX && touchX < x + targetW)
{
if(y < touchY && touchY < y + targetH)
{
//ディスプレイ内に収まるようにランダムな位置を生成する
x = (int)Math.round(Math.random() * width) - (targetW / 2);
y = (int)Math.round(Math.random() * height) - (targetH / 2);
//スコア加算
score += 10;
//再描画指令
invalidate();
}
}
//スコアが一定数いったらfinish出来るようになる
if(score > 190)
{
//タッチパネルが敏感なのでちょっと余分にとっておく
if(score > 230)
{
activity.finish();
}
score += 10;
}
return true;
}
}
}}
#endregion
#region(ソース解説)
五章では画像を出しただけだったが、今回はテキストも同時に出した。
こういう複合描画も可能。
また、描画の際に一番後ろにあった引数(paint)に今回は設定を追加した。
paint.set***()のように使うことで見た目を変えたりもできる。
あとはカスタムビュークラス内でアクティビティクラスでしか使えない命令を使いたいとき、
カスタムビュークラス内でActivity activity = (Activity)this.getContext();を宣言することで
カスタムビュークラスが親のアクティビティクラス(今回はGameActivity)の命令を使えたりする。
本ソース内では、98行目のactivity.finish();で使用している。
#endregion
#endregion
#region(HelpActivity周りのソースと解説)
ソース側に関しては九章の遷移先のソースそのままなので特に書かないが、
レイアウトファイルを新規作成してそちらをアクティビティで利用しているので
その作成方法を書いておく。
layoutフォルダーで新規→AndroidXMLファイルを選択して目的に適した項目を選択して
名前を付けて作成する。
あとはいつも通り適当にやってしまえばいい。
#region(一応レイアウトファイルのソース)
#highlight(linenumber){{
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".HelpActivity" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignRight="@+id/button1"
android:layout_marginRight="27dp"
android:layout_marginTop="56dp"
android:src="@drawable/tap" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/imageView1"
android:layout_marginTop="54dp"
android:layout_toRightOf="@+id/imageView1"
android:text="タップする" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/imageView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="67dp"
android:text="BACK" />
</RelativeLayout>
}}
#endregion
#endregion
#region(恒例の小話)
実行してみた人はすぐに分かったと思うが、(ソースの時点で気づいた人もいると思うけど)
これ、実は相当制御の仕方やサイズの取り方など、かなり雑な作りなので
自分以外の端末との互換性を全力で無視している。
どこを直したらいいか、何を追加するべきか、そういうことを考えられて且つ実装するべき内容を
調べてでもいいから実装できるようになれば、&bold(){自信を持って開発者を名乗れるようになると思うよ！}
#endregion
