画面上にボールを描こう！

講義の流れ

まず、今回の講義資料をダウンロードしてください。
第１回資料（Windows用）
第１回資料（Mac用）

この授業では、GameCanvasというゲーム用のフレームワーク(土台となるプログラム)を使ってゲームを作ります。

毎回の講義での注意点は、次の通りです。

Game.javaファイルにプログラムを記述します。
.java と最後についているファイルのことを「ソースコード」と呼びます。
Windowsの場合は compile.bat, Macの場合は compile.command ファイルを実行してゲームファイルを作ることを「コンパイル」と呼びます。
課題の提出時は、こちらから特別に指示が無い限り Game.java のみを提出して下さい。
課題が複数ある場合は、解ける範囲で最も難しいものを提出して下さい。(後ろの番号ほど難易度が高くなっています)

画像の表示

まずは、画面に絵を表示してみましょう。
ダウンロードした資料を解凍して、Sample01フォルダの中を見て下さい。

resフォルダの中には、img0.png, img1.png ファイルがあります。
それぞれ、黄色いテニスボール、赤いテニスボールの画像です。

resフォルダの中に置かれている画像ファイルは、ゲームで使うことができます。
ゲームで使う画像ファイルは、img0.png, img1.png, img2.png ... というファイル名でなければなりません。

次に、Sample01 フォルダ直下にあるGame.javaを開いて、以下の場所を見て下さい。

/********* 画像の描画はこちらに ******/
public void drawGame()
{
    // 画面を白で塗りつぶします
    gc.clearScreen();

    // img0.png を(50, 100)に描画します
    gc.drawImage(0, 50, 100);
}

ゲームのプログラムは、数十分の1秒の単位で少しずつ内容を更新することで動きを表現しています。
GameCanvasでは、次のような仕組みで動いています。

最初に1度だけinitGame が呼び出される。
1/30秒ごとに、updateGame　→　drawGame　の順で呼び出される。
最後に1度だけfinalGame が呼び出され、その後ゲームが終了する。

今回は画像を表示するだけなので、drawGame 内に命令を記述します。
updateGame などの他の部分は次回以降に扱うので、今回は気にしなくても結構です。
（描画に関する命令は、drawGame 内に書かなければなりません）

プログラムは上から順に実行されます。
このプログラムでは、画面を白く塗りつぶしてから画像を表示しています。

それぞれの命令は以下の通りです。
（命令の最後には、セミコロンを置かなければなりません。忘れるとエラーとなりますので注意しましょう)

gc.clearScreen();

画面全体を白く塗りつぶす。
毎回最初に塗りつぶさないと、前回書いた内容がそのまま残ってしまうため、最初に必ず行う必要がある。

gc.drawImage(0, 50, 100);

指定した画像を、指定した座標に表示する。
最初の 0 は、画像の番号です。ここを 1 にすると、img1.pngが描画されます。
2番目と3番目は、X, Y座標です。ここでは、X=50, Y=100 の位置を指定しています。
座標系は、左上が(0, 0) で、右下が(640, 480) となるスクリーン座標系となります。
指定した座標に、画像の左上部分が来るように描画されます。

図：スクリーン座標系

なお、ソースコードに書くプログラムは、半角英数字でなければなりません。
全角文字や、日本語を書くとエラーとなるので注意しましょう。

それでは、Sample01 を実行してみましょう。
Windows の方は、Sample01 フォルダ直下にある、compile.bat をクリックしてください。
Mac の方は、同フォルダ内にある、compile.command をクリックしてください。

ソースコードの中には、コメントを書くことができます。
コメントとは、人間が見た時に分かりやすくするためのメモのようなものです。
コメントは日本語や全角文字でも書くことができます。

//　で始まっている行は、1行コメントです。
この行に書かれた文字は全てコメントとなります。

/*　～　*/　で挟まれている部分は、複数行コメントです。
この記号で挟まれている範囲に書かれた文字は全てコメントとなります。

文字の表示

次に、Sample02 フォルダ直下にあるGame.javaを開いて、以下の場所を見て下さい。

/********* 画像の描画はこちらに ******/
public void drawGame()
{
    // 画面を白で塗りつぶします
    gc.clearScreen();

    // 黒色をセット
    gc.setColor(0, 0, 0);
    
    // あいうえお　を、(50, 100)に描画します
    gc.drawString("あいうえお", 50, 100);
}

文字を書く場合には、gc.drawString という命令を使います。
"" で挟まれた部分が文字列となります。""で挟まれた部分だけは日本語を使うことが可能です。

また、文字を書く前には色を指定しなければなりません。
gc.setColor という命令で、現在の色をセットすることができます。
drawString は、現在セットしてある色を元に描画されます。

このプログラムでは、gc.clearScreen();　の部分で白く塗りつぶしているため、白色がセットされています。
文字の色を変えるためには、文字を書く前に色をセットし直さなければいけません。