ゲームを作ろう! 地下迷宮その1 背景を作ろう


ひとまず、こちらを御覧ください。

迷宮

某ファミコンゲームの地下迷宮をそのままパクったような画面ですね。w
GraphicsWindow.FillRectangleの四角形描画と、GraphicsWindow.FillTriangleの三角形描画のみで描いています。
こういうのも、背景の画像を用意すればそれを表示するだけで済みますが、今回はあえて「画像ファイルを一切使わずに地下迷宮を探検するゲーム」を作ってみようと思います。

この絵では、まっすぐ前の通路と、左に曲がる通路が描いてありますが……

迷宮

このようにパーツを分割して描画し、各パーツの色を変更すれば右に曲がる通路や行き止まりも描けます。
「パーツを分割して描画」のプログラム部分は以下のようになります。長いです。

GraphicsWindow.Title = "meiro"
GraphicsWindow.Width = 640
GraphicsWindow.Height = 480

color1 = "White"
color2 = "LightGray"
color3 = "DarkGray"
color4 = "DimGray"
color5 = "Black"

GraphicsWindow.BackgroundColor = color5

GraphicsWindow.BrushColor = color1
GraphicsWindow.PenColor = color1
GraphicsWindow.FontSize = 18
GraphicsWindow.DrawRectangle(10, 310, 620, 160)
GraphicsWindow.DrawText(20, 320, "ここは、地下迷宮。")

'left
GraphicsWindow.BrushColor = color3
GraphicsWindow.FillRectangle(0, 0, 120, 300)

'right
GraphicsWindow.BrushColor = color3
GraphicsWindow.FillRectangle(520, 0, 120, 300)

'haikei 1
GraphicsWindow.BrushColor = color2
GraphicsWindow.FillTriangle(120, 0, 120, 60, 200, 60)

'haikei 2
GraphicsWindow.BrushColor = color1
GraphicsWindow.FillRectangle(120, 60, 80, 60)

'haikei 3
GraphicsWindow.BrushColor = color4
GraphicsWindow.FillTriangle(200, 60, 200, 120, 280, 120)

'haikei 4
GraphicsWindow.BrushColor = color2
GraphicsWindow.FillTriangle(120, 0, 280, 0, 280, 120)

'haikei 5
GraphicsWindow.BrushColor = color2
GraphicsWindow.FillRectangle(280, 0, 80, 120)

'haikei 6
GraphicsWindow.BrushColor = color2
GraphicsWindow.FillTriangle(360, 0, 360, 120, 520, 0)

'haikei 7
GraphicsWindow.BrushColor = color4
GraphicsWindow.FillTriangle(520, 0, 440, 60, 520, 60)

'haikei 8
GraphicsWindow.BrushColor = color4
GraphicsWindow.FillRectangle(440, 60, 80, 60)

'haikei 9
GraphicsWindow.BrushColor = color4
GraphicsWindow.FillTriangle(360, 120, 440, 60, 440, 120)

'haikei 10
GraphicsWindow.BrushColor = color1
GraphicsWindow.FillRectangle(120, 120, 80, 60)

'haikei 11
GraphicsWindow.BrushColor = color4
GraphicsWindow.FillRectangle(200, 120, 80, 60)

'haikei 12
GraphicsWindow.BrushColor = color5
GraphicsWindow.FillRectangle(280, 120, 80, 60)

'haikei 13
GraphicsWindow.BrushColor = color4
GraphicsWindow.FillRectangle(360, 120, 80, 60)

'haikei 14
GraphicsWindow.BrushColor = color4
GraphicsWindow.FillRectangle(440, 120, 80, 60)

'haikei 15
GraphicsWindow.BrushColor = color2
GraphicsWindow.FillTriangle(120, 240, 200, 240, 120, 300)

'haikei 16
GraphicsWindow.BrushColor = color1
GraphicsWindow.FillRectangle(120, 180, 80, 60)

'haikei 17
GraphicsWindow.BrushColor = color4
GraphicsWindow.FillTriangle(200, 180, 200, 240, 280, 180)

'haikei 18
GraphicsWindow.BrushColor = color2
GraphicsWindow.FillTriangle(120, 300, 280, 180, 280, 300)

'haikei 19
GraphicsWindow.BrushColor = color2
GraphicsWindow.FillRectangle(280, 180, 80, 120)

'haikei 20
GraphicsWindow.BrushColor = color2
GraphicsWindow.FillTriangle(360, 180, 360, 300, 520, 300)

'haikei 21
GraphicsWindow.BrushColor = color4
GraphicsWindow.FillTriangle(440, 240, 520, 240, 520, 300)

'haikei 22
GraphicsWindow.BrushColor = color4
GraphicsWindow.FillRectangle(440, 180, 80, 60)

'haikei 23
GraphicsWindow.BrushColor = color4
GraphicsWindow.FillTriangle(360, 180, 440, 180, 440, 240)

どれがどのパーツか、きちんと把握する必要がありますので、コメント文で細かくメモを入れていくと良いでしょう。

最初に掲載した画面に
「前に進む」
「左に進む」
「右に進む」
というボタンを設置し、迷路を進んでいく、というゲームができます。
最初の画面の時に「右に進む」を選ぶと、「壁があって進めない!」と表示すればいいかな。

ただ、簡単な迷路としても、方角を考えなければならないので色々と大変です。

迷宮

迷路とはいえない簡単な図です。
開始時は入り口から入りますので、前と左に進む道があるはず。
ここで前→4に移動して左に曲がる→5に移動して左に曲がる→2に移動して左に曲がる→1に戻るが、視点としては左にしか道が見えない。右に入り口が見える。
このように、「同じ場所に戻ってきたのに、見える景色が変わる」ということが起こりますね。
これを考慮して、
「1で北を向いている」
「1で東を向いている」
「1で南を向いている」
……といった、様々な絵を考える必要がありそうです。
整理してみましょう。
背後に壁がある時には絵を用意する必要はないはず。
「1で北を向いている」を「1N」、「1で南を向いている」を「1S」のように、部屋番号と方角で書きます。

1N 左2W 前4N
1S 右2W 正面に入口
1E 左4N 右に入口
1W -

2N -
2S 左1E 右3W
2E 左5N 前1E
2W 右5N 前3W

3N -
3S -
3E -
3W 行き止まりのため強制でもどる 2E

4N 左5W
4S -
4E 右1S
4W -

5N 正面に出口 右4E
5S -
5E -
5W 右に出口 左2S

全部で11ヶ所の絵を用意する必要があります。
あと、入口と出口もあるので、ドアの絵も作っておきたいですね。
当然、正面に出口がある時と、画面右に出口がある時の2通りのドアの絵を用意しなければなりません。

迷宮


'door chuou
GraphicsWindow.BrushColor = "SaddleBrown"
GraphicsWindow.FillRectangle(280, 60, 80, 180)
GraphicsWindow.BrushColor = "NavajoWhite"
GraphicsWindow.FillEllipse(345, 150, 10, 10)

'door migi
GraphicsWindow.BrushColor = "SaddleBrown"
GraphicsWindow.FillRectangle(440+25, 40, 25, 180+40)
GraphicsWindow.FillTriangle(440+25, 40, 440+50, 20, 440+50, 40)
GraphicsWindow.FillTriangle(440+25, 240+20, 440+50, 240+20, 440+50, 240+40)
GraphicsWindow.BrushColor = "NavajoWhite"
GraphicsWindow.FillEllipse(440+45, 150, 3, 10)

ドアはこんな感じになるはず。

迷宮

迷宮

出口用のドアと、入口用のドアは色を変えた方が良いですね。

次:その2 迷宮を作ろう


▲TOPへ戻る