mrubyでインタラクティブアプリケーションを作ろう！RubyKokubanで画像が表示出来るようになりました

前回リリースからさらに機能を追加しました。RubyKokubanの基本的な使い方やインストール方法などはこちらをどうぞ。

画像の表示 (Image)
色を制御するクラスを追加 (Color)

画像を表示する

Image.load(filename)を使います。適当な画像をスクリプトと同じ場所に置いて下さい。1行目の||=は最初の一回だけ初期化コードを実行するRubyでよくあるイディオムです。

def draw
  @image ||= Image.load("sample.png")
  set_color(255, 255, 255)
  @image.draw(0, 0)
end

実行します。

$ kokuban exec image001.rb

左上の(0. 0)に画像が表示されました。簡単ですね。

f:id:tuto0621:20131020173940p:plain

set_colorはなんのため？

Image#drawの際にset_colorで設定された値と乗算された色で描画されます。

def draw
  @image ||= Image.load("sample.png")
  set_color(0, 255, 255)
  @image.draw(0, 0)
end

例えばset_colorをR=0にすると下記のようにR成分が0になった状態で描画されます。

f:id:tuto0621:20131020174011p:plain

画像そのままの色 で出力したい時は set_color(255, 255, 255) もしくは set_color(Color::White) を設定して下さい。

拡大縮小させる

次はアニメーションさせてみましょう。

def update
  @scale ||= 0.0
  @scale += 0.05
  @scale = 0.0 if @scale > 3.0
end

def draw
  @image ||= Image.load("sample.png")
  set_color(Color::White)
  @image.draw(0, 0, @image.width * @scale, @image.height * @scale)
end

update関数で@scaleメンバを増加させてImage.drawにパラメータとして渡しています。

$ kokuban exec image003.rb

f:id:tuto0621:20131021234835g:plain

マウスに追従させる

最後はマウスで動かせるようにしてみます。

def setup
  @image = Image.load("sample.png")
  @image.set_anchor_percent(0.5, 0.5)
end

def draw
  set_color(Color::White)
  @image.draw(Input.mouse_x, Input.mouse_y)
end