Skip to content

Latest commit

 

History

History
160 lines (121 loc) · 6.27 KB

first-week.md

File metadata and controls

160 lines (121 loc) · 6.27 KB
Raw

第一週目

先ず、下記リスト内容を理解した上でゲーム作成の内容に入る。

DXRuby について

ゲームを作成するには様々なツール (道具) があります。 その中でも比較的に利用が簡単な物として、 DXRuby という物を選んでいます。

DXRuby はインストールを行なわなくとも、 フォルダを Windows PC に置くだけで使えるようになります。 但し、Direct X がインストールされている必要はあります。

また、をインストールせずに使用する場合は、 DXRuby をまとめているフォルダに、 画像や作成したプログラムを入れておくようにして下さい。

これからその使い方について解説を行なっていきます。

Window の作成

Window を作成するだけであれば、 DXRuby では下記の様に書く事で実現出来ます。

# -*- coding: cp932 -*-
require 'dxruby'

Window.loop do

end

ただし、上記プログラムのみではウィンドウを表示するだけで、 ゲームとしては成り立ちません。 このプログラムに少しずつ形を与える事で ゲームに近づいていきます。

require 'dxruby' という行は、 DXRuby を実行する為に必要な記述です。

画像データの読み込み方と表示

ゲームに使用するキャラクター (画像) の読み込み方法を示します。

# 一つのファイルに一つの画像しか無いときに使う
# "filepath" には文字列でファイルの名前の保存されているフォルダの名前とファイルの名前を記述する
image = Image.load("filepath")

# 一つのファイルに全てのサイズが同じである複数の画像がある場合に使う
# xcount には画像ファイルの中に何個の画像が横並びになっているかを記述する
# ycount は xcount の縦版を記述する
image_array = Image.load_tiles("filepath", xcount, ycount)

この時点では、 画像を読み込み、変数にて保持しているだけなので表示はされません。 実際に画像を表示する為には、その為の命令を Window.loop do ... end の中に記述する必要があります。

画像データをゲーム上で扱いやすくする為に

DXRuby では、画像データを読み込んだままの状態ではゲーム上で (ゲーム作成の都合上) 扱いにくいため、 今回は、面倒くさい処理を裏方に任せるメソッドを使うことにします。

タイル上の画像を読み込む場合

x = 0
y = 0

image = Image.load_tiles("../character.png", 4, 4)

# Sprite.new とはゲーム上でキャラクタを扱う為に使用するメソッドで、
# このメソッドによって作られたデータを使うことで、
# キャラクタの位置の変更や衝突の判定を簡単に行うことが出来る
sample_sprite = Sprite.new(x, y, image[0])

Window.loop do
  # Sprite.draw メソッドを使うと指定した Sprite データを画面に表示 (描画) することが出来る
  Sprite.draw(sample_sprite)
end

1 枚の画像を表示する場合

x = 0
y = 0

image = Image.load("../character.png")
sample_sprite = Sprite.new(x, y, image)

Window.loop do
  Sprite.draw(sample_sprite)
end

画像データを扱う場合に image という名前の変数を使う人が多いですが、 image では何の画像か分かり辛いので、 画像データの中身に合わせた変数名にすると良いです。 何らかのキャラクタの画像ならば、 そのキャラクタの名前を変数名に使うなどが、例として考えられます。 サンプルでは、どの様な物として扱うのかを分かり易くする為に、 一般的な名前を使用しています。

Sprite データの処理 (画像データの画面内移動)

Sprite データは x, y という二つの座標データを持っています。 このデータは Sprite.new を実行した際に登録した二つの座標です。 そして、画像が表示されている場所は Sprite データが持っている座標に従っています。

ゲームで扱う座標は、 数学とは違い原点である 0 は画面の一番左上となっているので、 間違い易い為気を付けましょう。 左から右に X 軸がプラス方向、上から下に Y 軸がプラス方向となっています。 この時 Y 軸の扱いが数学のグラフとは逆になっている為注意が必要です。

Sprite データの x, y 座標は Sprite データの変数名に、 それぞれ .x .y をつけることで扱う事ができます。 この座標に対して計算を行ない、 座標を少しずつずらしていく事で、 パラパラ漫画のように Sprite を移動させることが出来ます。 ゲームのキャラクタ等の移動はこの様な方法を使って実現しています。

Window.loop do
  # sample_sprite という Sprite データの x 座標をプラス 1 する
  # += という記号の組み合わせは、左辺の値に右辺の値をプラスし、代入する意味を持つ
  # 他にも、-=, *=, /= などもある
  # += 1 の場合だと左辺の変数の値が 1 ずつ増加していく
  sample_sprite.x += 1

  # y も 1 ずつ増加
  sample_sprite.y += 1

  # Sprite.draw メソッドを使うと指定した Sprite データを画面に表示 (描画) することが出来る
  Sprite.draw(sample_sprite)
end

上記の様なプログラムを書いて、 実際に表示させた Sprite を移動させて見て下さい。 sample_sprite の増加値を変えると移動速度が変わる事も確認して下さい。

問題 6.

先程のプログラムでは sprite は画面の右に向かって進んでいますが、 別途、画面の左に向って移動するプログラムを作成して下さい。 この時、時間の経過によって画面の外に出て返ってこない状態になる事を 正常な動作とします。

問題 7.

問題 6 で作成したプログラムで、 sprite が画面の左端から外に出ない様にして下さい。 画面の左端は X 軸の 0 です。