iOSでスプライトを使ったプログラムを書いてキャラクタを自由に動かす #Ruby

ofruby-0.7の絵文字表示機能を使うと自分で絵を書かなくても簡単にゲーム的なものを作ることが出来ます。簡単に移動、回転、スケールさせるためにPure Rubyで簡単なスプライトライブラリも実装してみました。

↑の🐖🚴🌴のソースコード全体はこちらから参照出来ます。

使い方

初期位置と読み込む画像を指定します。読み込みたい絵文字はofrubyをインストールした後に、Sample: emoji.rbを使って確認して下さい。Emoji cheat sheetなどで取得出来る絵文字は大体いけるのでそっちを使ってもいいです。ただし指定はシンボル形式(:pig2)で。

まずはSprite.new(x, y, image)で生成します。

@pig = Sprite.new(50, 0, Image.emoji(:pig2))

デフォルトの基準座標は右上ですがset_anchor_centerで中心に変更することが出来ます。

@pig = ....
@pig.set_anchor_center

基準座標を足下にしたり、mirror(vertical, horizontal)で画像を上下左右反転させることも出来ます。

@bicyclist = Sprite.new(50, GY, Image.emoji(:bicyclist))
@bicyclist.set_anchor_bottom
@bicyclist.mirror(false, true)

vx, vy に値を設定すると一定速度で動きます。Sprite#updateを呼び出すのを忘れないようにしましょう。

@bicyclist = ...
@bicyclist.vx = 2

スケーリングや回転も簡単にかけることが出来ます。

# スケーリング
@pig.sx = @pig.sy = 3

＃回転
@pig.rotate = 45

サンプルコードの説明

豚 .. 大きくして毎フレーム回転させる
自転車 .. 足下基準にして左右反転して地面に配置、横速度一定、画面左端に来たら座標を右端に戻す
ヤシの木 .. スプライト使わずに描画、Yスケール掛けて一定間隔で配置

スプライトライブラリ本体

40行位で書けました。Image#drawの前にset_color_hex 0xffffffしているのはopenFrameworksの画像描画は少しクセがあって、現在のset_colorの値をブレンド係数として使うからです。0xffffffだと画像の色がそのまま出力されます。0x0だと真っ黒になります。

class Sprite
  attr_accessor :x, :y, :rotate, :sx, :sy
  attr_accessor :vx, :vy

  def initialize(x, y, image)
    @x = x
    @y = y
    @image = image
    @rotate = 0
    @sx = 1
    @sy = 1
    @vx = @vy = 0
  end

  def mirror(x, y)
    @image.mirror(x, y)
  end

  def set_anchor_center
    @image.set_anchor_percent(0.5, 0.5)
  end

  def set_anchor_bottom
    @image.set_anchor_percent(0.5, 1.0)
  end

  def update
    @x += @vx
    @y += @vy
  end

  def draw
    push_matrix do
      translate @x, @y
      Kernel.rotate @rotate
      scale @sx, @sy

      set_color_hex 0xffffff
      @image.draw(0, 0)
    end
  end
end

Sprite#draw内のset_color_hexを0xff0000`に変更すると画像のR(赤)成分だけが出力されます、不気味ですね。

ヤシの木だけ色が変わらないのはスプライトライブラリを使わずに描画しているからです。

おわりに

ぜひ絵文字機能を使ってゲームっぽいものを実装してQiitaで共有してください。分からない機能などありましたらこちらやTwitterで聞いて下さい。