- 第１話　くまさん、大地に立つ -

＜これまでのあらすじ＞

突如、２機のＪＡＶＡがサイド７に侵入、破壊活動をはじめる。
パズルゲーム完成以降なりを潜めていたＪＡＶＡがついに動き出した。
宇宙世紀0091、宇宙の鼓動は新化する。

　ＪＡＶＡの進入を許したみゃあか！！

　もぉ〜だめもぉ〜

　大変だ！　やつらが！

　や、つららららららら・・・・・・・・

　ひでぶ！

　もぉ〜！　大変！！

　冬眠中のクマ先生を起こすみゃん！！

　いそぐも〜！！

　ＺＺＺ　素粒子Ｚ0

　クマ先生！！　起きるみゃん！！

　だめだも〜。　冬眠システムをシャットダウンするも〜

　どうやるみゃん？？？

　そこいら辺に、マニュアルがあるはずもー。

　えーと・・・　「冬眠システム 基本マニュアル」、これみゃん！！

　も〜、はやくシャットダウンの項目を読むも〜

　えーと・・・　　基本動作はコンピュータがやってくれるのみゃん・・・

　すごい、５倍以上のエネルギーゲインがあるみゃん！！

　やってみるみゃん。

（ピピピ・・・）

（ぷしゅ〜）

　おはようございます、みなさん！！

　非常にギャグのネタがわかりずらかったですが、とにかく目覚めました！！

　早速、ＪＡＶＡ講座　第２部　をはじめます！！

　はーい！

　さて、第２部ではロールプレイングゲームみたいに「キャラクタがマップ上をうろうろできるアプレット」を作っていこうと思います。

　その昔、爆裂健が「 Bakuretu Online 」という未完成のふざけたアプレットをホームページに乗せたら、数人から感想や質問メールが来たので、気を良くして第２部スタートです。

　ついにＲＰＧみゃん！！

　さて、さっそくゲーム画面の全体イメージを考えましょう。

　こんな感じになります。　山や木などの背景画像を全体に描き、中央にキャラクタを描きます。
キャラは絶えず中央で、後ろの背景が移動して歩くようにします。

　ファミコン時代のＲＰＧを思い出すも〜

　「消えたプリンセス」だみゃん！！

　１つの背景画像の大きさは ( 40 x 40 ) にしましょう。
これを縦９つ、横９つ並べて背景にします。

　つまり、ゲーム画面は ( 360 x 360 ) になるみゃん？？？

　そうです。 40 ドットの画像が９つ並びますから・・・

　じゃ全体イメージが見えたところで具体的に作っていきましょう。
今回のアプレットはＲＰＧ風のマップを表示するので「 MapPaint 」という名前にします。
まずは何をしますか？　みゃあちゃん？

　えーと・・・　なんだっけ？？？　ＪＡＶＡプログラムは久しぶりなんで忘れたみゃん・・・

　も〜　しっかりして欲しいも〜。　雛形ＪＡＶＡソースのファイル名をアプレット名に変えるも〜
そして、ソースのアプレット名をへんこうするも〜

　そうです。　ウシ君！　では、やってみてください。

　MapPaint.java にリネイム（名前の変更）して・・・・
MapPaint.java のアプレット名を MapPaint にかえるも〜

　そうですね。　あとこのアプレットを動かすための　ｈｔｍｌ ファイルも編集してください。
アプレットの全体サイズは 360 x 360 の予定なので、それも変更しておきます。
sample.html を開き、編集します。

　おもいだしましたか？　みゃあちゃん？

　そうだったみゃん！

　さて、プログラムをする前に、マップなどの画像が必要ですね。

　背景画像とキャラクタ画像が、も〜ひつよう。

　では早速描きます。　タブレットを持てい！！！！

　はは！　ここに！！

　（カリカリカリ・・・）

　完成しました。　とりあえず背景は「背景0」から「背景5」までの６枚です。
キャラクタは簡単なアニメーション（？）をさせるため、２枚用意しました。
画面のサイズはすべて ( 40 x 40 )です。　キャラクタは透明ＧＩＦです。

　　　　　　　　背景０　　back00.gif
　　　　　　　　背景１　　back01.gif
　　　　　　　　背景２　　back02.gif
　　　　　　　　背景３　　back03.gif
　　　　　　　　背景４　　back04.gif
　　　　　　　　背景５　　back05.gif

　　　　　　　　キャラクタ１　　kuma01.gif
　　　　　　　　キャラクタ２　　kuma02.gif

　ゲームらしくなってきたみゃん・・・

　さて、いよいよプログラムです。　今回の第１話では、マップを表示させます。
山や木の配置はランダムで行います。　プログラムの流れは、次のようになります。

１．「マップ画像」や「キャラ画像」ファイルを読み込む

２．山や木などのマップ配置をランダムで作る

３．画面に「マップ配置」あわせて、山や木の画像を表示する。

　では、まず最初に画像を読み込みます。
これはどこに記述すると良いですか？？

　もちろん init( ) みゃん！

　そうです。　では早速プログラムを作りましょう。
まずは使う画像データ変数を、 グローバル変数 で宣言しましょう。

　画像データなので Imege で宣言します。
haikei[] というのは、背景画像を入れておく変数です。
キャラ画像はそれぞれ、player1 player2 という変数に入れます。

　haikei[] のカッコはなんだも？？？？

　これは配列です。　背景画像はたくさんあるので、配列に収納することにします。
同様に マップ配置 も int 型の配列に入れるため、int map[][] と宣言します。

　なるほど。Ｃ言語といっしょだも〜。

　そうです。　しかし、Ｃ言語と違ってＪＡＶＡはポインタがないので、ポインタの配列はつくれませんよ・・・

　では変数は宣言したので実際に init() で画像を読み込みます。
しかしその前に、配列の大きさの宣言をします。

　グローバル宣言で haikei[] という変数を作りましたが、これには大きさがありません。
そこで、 init() で配列の大きさを決めます。

　このように宣言すると、６個の haikei変数 が使えるようになります。
つまり、haikei[0] から haikei[5] までの変数が使用可能になります。
haikei[0] には背景０の画像、haikei[1]には背景１の画像・・・という具合に画像を変数に入れることにします。

　とうぜんキャラ画像の２つも、player1 player2 という変数に入れます。

　じゃもしも背景が100個あったら、haikei = new Image[100]; と宣言すれば良いみゃん？

　そうです。　もしそうすれば haikei[0]〜haikei[99] の100個の変数が使用できます。

　次に「マップ配置」をランダムで作ります。
マップ配置の変数 map[][] はカッコが２つありますので、２次元配列といわれる配列です。
ＲＰＧのマップは X Y がある２次元のフィールドなので、２次元配列を使います。

　今回のゲーム（？）のマップのサイズは 300 x 300 にしましょう。
これでキャラクターは、300 x 300 のフィールドを自由にうろうろすることができます。
では、map[][] も heikei[] と同様に大きさの宣言です。

　これで map[][] は、 map[0][0] から map[299][299] までの 90000個の変数を持ちました。
この「マップ配置」に ランダムでデータをおいていきます。
ここでおいていく値は、数字です。

その数字がもし 0 でしたら「背景０」の野原、 3 だったら「背景３」の山になるわけです。

　ではランダムで、map[0][0] から map[299][299] までの 90000個の変数に 0 〜 3 までの数字を入れていきましょう。

　？？　クマ先生。　背景は 0 から 5 までの６種類あるみゃん。
0 から 3 までの数字で良いみゃんか？？？

　背景４ は「海」ですし、背景５は「家」ですからね。
これらが多数画面にあるとちょっと不自然なんですよ。　この２つの背景は後で使うことにします。

　なるほどみゃん。

　では、for 文 を使って、map[0][0] から map[299][299] までの 90000個の変数に 0 〜 3 までの数字を入れてきす。

　0 〜 3 までのランダムを作り出す命令は、 (int) (4 * Math.random()); です。
覚えてますか？？

　覚えてるも〜。　パズルゲームを作る時に、つかったも〜。

　では次に、画面に「マップ配置」あわせて山や木の画像を表示します。
map[][] には次のように 0 から 3 までの数字が入っています。

　その左上の ( 9 x 9 )の部分（赤の四角）を画面に表示しようと思います。
この絵の場合は、画面に表示されるマップの左上は 0 番なので「平地」です。
その右側も「平地」で、その右が「木」です。
左上の部分だけ考えると、実際に表示される画像はこのようになります。

　　あくまでこれは例です。　木や山の配置は ランダム で作られるので、どのようなマップが表示されるか誰にもわかりません。

　　では、画像表示させましょう。　画像表示のプログラムはどこに書きますか？？？

　paint( ) みゃん！！

　　そのとおりです。　またも for文を使って、９ ｘ ９ の背景画像を表示させましょう。

　結構難しいみゃん・・・

　なるほど。　for 文で mx という変数と my という変数をそれぞれ 0 から 8 まで動かして、
その場所の map[][] の中の数字を拾って、その数字の背景画像をひょうじさせているも〜かぁ・・・

　　そうなんです、ウシ君。　でも、ちょっと難しいですね。
map[mx][my] が 3 だったら、表示される画像は haikei[3] になるから、「山」が表示されます。

　では、仮にマップ画面左上の数字（ map[0][0] の値 ）が 3 だとします。
no = map[mx][my] と書いてあるので、mx が 0、 my が 0 の瞬間は  map[0][0]　は 3 となり、
変数 no は 3 となります。
次に画像 haikei[no] の作画命令があるので、左上には 背景画像３（山の画像）が表示されるわけです。

　なるほども〜。

　これで背景の画像は画面に表示されました。
これでＯＫなんですが、ＲＰＧ的な気分を出すため中央に「キャラ画像 ( player1 )」を置いてみましょう。

　これで、今回のプログラムは完成です！！！　

　わーい！　ＲＰＧゲームみたいみゃん！！

　まだ見掛け倒しです。　キャラを動かすことはできません。

　これじゃ、あそべないも〜。

　残念ながら、今回はこれでおしまいです。
次回は、キャラをマップ上で動かして見ましょう。
ではみなさん、さようなら。

　クマ先生、さようなら！

- 第２話につづく -