Star Ruby Ruby extension library for creating 2D games

描画

Star Ruby における描画は、「テクスチャ」と呼ばれるオブジェクトを介して行います。 PNG 画像ファイル、中間バッファ、最終出力すべてがテクスチャです。基本的に「テクスチャからテクスチャへ描画」という操作を毎フレーム繰り返すことによって、ゲーム画面を表現します。

画像を表示する

手始めに、次の画像 (ruby.png) を画面に表示するコードを書きます。

ruby.png

require "starruby"
include StarRuby

texture = Texture.load("ruby.png") # (1)

Game.run(320, 240) do |game|
  game.screen.clear # (2)
  game.screen.render_texture(texture, 8, 8) # (3)
end
(1)

画像ファイルからテクスチャオブジェクトを生成します。Texture クラスの API リファレンスもご参照ください。

(2)

game.screen は、画面そのものを表すテクスチャです。 game.screen はフレーム開始時に前回のフレームの状態のままになっているので、毎回 Texture#clear メソッドを呼び出して消去したほうがよいでしょう。

(3)

ゲーム画面 (game.screen) に対して、画像を描画します。「テクスチャからテクスチャへの描画」は、 Texture#render_texture メソッドを使用します。第 2、 3 引数は、描画位置を表す X、 Y 座標です。

実行すると、次のような画面になります。

実行画面

画像を動かす

require "starruby"
include StarRuby

texture = Texture.load("ruby.png")

i = 0
Game.run(320, 240) do |game|
  game.screen.clear
  game.screen.render_texture(texture, i, 8)
  i += 1
end

描画の X 座標を毎フレーム増やしています。実行するとルビーが徐々に右に移動していきます。そのうち画面外に出てしまいます。

実行画面

画像を拡大する

require "starruby"
include StarRuby

texture = Texture.load("ruby.png")

Game.run(320, 240) do |game|
  game.screen.clear
  game.screen.render_texture(texture, 8, 8, :scale_x => 2.0, :scale_y => 2.0)
end

Texture クラスの render_texture メソッドの第 4 引数には、描画の際のオプションが指定できます。オプションを指定して、画像を幾何変形したり、色調を変更することが出来ます。

たとえば画像を拡大するには、 :scale_x または :scale_y を指定します。

実行画面

Ruby のメソッドは、最後の引数に Hash を指定する場合、中括弧を省略できるというルールがあります。そのため、第 4 引数にキー、値ペアを複数引数として指定しているように見えますが、実際にはまとめて一つの Hash オブジェクトを第 4 引数に指定しています。省略して書かない場合、以下のようになります。

  game.screen.render_texture(texture, 8, 8, {:scale_x => 2.0, :scale_y => 2.0})

描画にエフェクトを書ける場合、基本的にオプションを指定するだけで事足ります。また、 Star Ruby は描画の対象を (画面でさえも) 全てテクスチャとして扱いますが、テクスチャからテクスチャへの描画は無制限にエフェクトをかけることが出来ます。仕組みは単純でも柔軟な表現が可能となっています。

画像を回転させる

require "starruby"
include StarRuby

texture = Texture.load("ruby.png")

i = 0
Game.run(320, 240) do |game|
  game.screen.clear
  game.screen.render_texture(texture, 8, 8,
                             :angle => i * Math::PI / 180,
                             :center_x => texture.width / 2,
                             :center_y => texture.height / 2)
  i += 5
end

画像を回転させるには :angle オプションを指定します。単位はラジアン (一周が 2π) です。また、拡大縮小や回転などの幾何変換の中心を指定する :center_x、 :center_y オプションもあります。今回は描画するテクスチャの中心を回転中心として指定しました。

実行画面

画像の色調を変える

require "starruby"
include StarRuby

texture = Texture.load("ruby.png")

Game.run(320, 240) do |game|
  game.screen.clear
  game.screen.render_texture(texture, 8, 8, :tone_blue => 128)
end

:tone_blue オプションなどを使用して、色調を変えることが出来ます。正の値ならば青色を強め、負の値ならば逆に弱めます。

実行画面

他に :saturation オプションを指定して、モノクロに描画することができます。

画像に文字を書く

require "starruby"
include StarRuby

font = Font.new("MS UI Gothic", 20)
yellow = Color.new(255, 255, 0)

texture = Texture.load("ruby.png")
texture.render_text("Foo", 10, 10, font, yellow)

Game.run(320, 240) do |game|
  game.screen.clear
  game.screen.render_texture(texture, 8, 8)
end

Hello, World の例でも使用しましたが、 Texture クラスの render_text メソッドでテクスチャに対して文字を描画することができます。

実行画面

上のサンプルではルビーの画像に文字を描画しました。ところで画面も Texture の一種なので、同様に文字を描画することができます。同様に描画したときのサンプルを下に示します。ルビーが動いて、画面に書かれた文字が徐々に表示されます。

require "starruby"
include StarRuby

font = Font.new("MS UI Gothic", 20)
yellow = Color.new(255, 255, 0)

texture = Texture.load("ruby.png")
texture.render_text("Foo", 10, 10, font, yellow)

i = 0
Game.run(320, 240) do |game|
  game.screen.clear
  game.screen.render_text("Bar", 30, 30, font, yellow)
  game.screen.render_texture(texture, i, 8)
  i += 1
end

実行画面

アニメーション

ルビーを描画するのはそろそろ飽きたので、別の絵でアニメーションを表示することにします。爆発アニメです。

爆発セルアニメ

テクスチャの「一部分」を切り取ってテクスチャに転送するには、 :src_x オプションなどを使い、描画元矩形を指定します。

require "starruby"
include StarRuby

explosion_texture = Texture.load("explosion") # (1)
cell_width  = explosion_texture.width  / 8 # (2)
cell_height = explosion_texture.height / 2 # (2)

i = 0 #(3)
Game.run(320, 240) do |game|
  game.screen.clear
  game.screen.render_texture(explosion_texture, 8, 8,
                             :src_x => (i % 8) * cell_width,  # (4)
                             :src_y => (i / 8) * cell_height, # (5)
                             :src_width => cell_width,   # (6)
                             :src_height => cell_height) # (6)
  i += 1
  i %= 8 * 2 # (7)
end
(1)

上の爆発画像を取り込みます。実は load メソッドは、拡張子を省略して指定できます。

(2)

1 セルあたりの大きさを計算します。横を 8 分割、縦を 2 分割します。合計 8×2 で 16 セルです。

(3)

変数 i は今回、表示するセルの番号も表しています。セル番号を振るとすると、左から右、上から下に、 0 から 15 です。

(4)

現在のセル番号から、描画元矩形の X 座標を計算します。セル番号を 8 で割った余りに、セルの幅をかけると求められます。

(5)

(3) と同様、現在のセル番号から、描画元矩形の Y 座標を計算します。

(6)

描画元矩形の大きさを指定します。

(7)

セル番号を 0 から 15 に循環させるために、 16 で割った余りを代入します。

実行画面例は次のようになります。

実行画面

この部分描画機能を利用して、 RPG によくあるタイル状のマップなども作ることができます。

画像を組み合わせる (中間バッファの利用)

© Copyright 2012 Hajime Hoshi