初心者のためのゲームプログラミング入門

プログラミングとゲームの杜

初心者のためのプログラミング入門 & ゲームプログラムの作り方入門

Small Basic 入門

21.メテオゲームを作ろう その2

 

メテオゲームを作ろう ] の続きです。

 

ゲームに使う絵を保存しよう

見本のゲームには7枚の絵を使っています。
これからの作業に必要なので、次の絵をパソコンに保存しましょう。

1.自機

自機の絵

2.隕石

隕石

3.爆発

爆発

4.背景

背景

5.タイトル

タイトル

6.ゲームオーバー

ゲームオーバー

7.メッセージ

メッセージ

 

7枚の絵をそれぞれ保存します。
画像の上で右クリックするとメニューが表示されます。
その中の画像を保存をクリック。
1枚ずつ保存してください。

 

画像の保存の仕方

 

 

保存した絵は、プログラムを保存したフォルダに入れます

 

画像はプログラムと同じフォルダに入れる

 

 

自機の絵を入れよう

さっそく絵を入れてみましょう。
変更するのはサブルーチン init の中です。

 

自機の絵を入れる

 

自機の絵を入れているのは 13 行目です。
player = Shapes.AddRectangle(pw,ph)
から
player = Shapes.AddImage(dir+"p_player.png")
に変更しました。
AddImage で絵を扱うことができます。

変数 pw, ph に入れる値も絵のサイズに合わせて変更しました。
画像ビューワーを使ってサイズを確認し、幅(pw) 41、高さ(ph) 51 に設定します。
絵を入れたことにより変数 pw, ph は使わなくなりましたが、
このあとの当たり判定で使うことになります。

 

ツールで絵のサイズを確認する

 

 

Shapes.AddImage の使い方

AddImage を使うときにはディレクトリ付きのファイル名を指定します
そこで今回は、実行中のプログラムのディレクトリを取得して
これをファイル名にくっ付けています。
絵のファイルを、プログラムを保存した場所に入れた理由がここにあります。

 

実行中のディレクトリを取得してファイル名とくっ付ける

 

Program.Directory を使って実行中のディレクトリを取得してます。
これをファイル名とくっ付けるのですが、注意点が1つ。
ディレクトリとファイル名の間に ”¥” を入れます

要注意の所ではバックスラッシュになってますが、キーボードから入力するときには
キーを押します。

 

プログラムと違う場所ある絵を使うこともできますが、絵の場所を変更するたびに
プログラムも変更することになります。

 

 

背景を表示しよう

続けて背景の絵を入れます。

 

背景の絵を表示する

 

自機と同じように AddImage を使います。
ここで注意してもらいたいのが、表示の順番です。
Small Basic では実行した順番と描画の順番が同じなので、早く実行した絵は
下の方に描かれます。

つまり、背景・自機の順番で実行すれば、背景が下、自機が上に表示されます。
自機・背景の順番だと、自機が下、背景が上に表示されて自機が見えなくなります
試しに 11行目で表示している背景をコメントにして
16行目で背景の表示をしてみてください。
自機が見えなくなります。(確認後は元に戻してください)

 

 

絵の種類と透過について

自機( p_player.png ) と背景( p_bg.jpg )、この2つのファイルは拡張子が違います。
自機の絵は透過させる(特定の色を透明にすること)必要があったので png を
使いました。
ゲーム制作では絵の種類や透過についての知識が必要です。
下のページに簡単な説明があります。確認しましょう。

[ ゲーム制作でおすすめの画像タイプとは ]