チュートリアル

画像ファイルの扱い

Nyleを使った画像ファイルの扱いについて、具体的な例を挙げながら説明します。

 

(1)画像ファイルの読み込みと表示

まずは、何も描かれていない真っ白な画面を作ってみます。

require 'nyle'

class Screen < Nyle::Screen
  def initialize
    super
  end
end

Screen.new.show_all
Nyle.main

つぎに、initializeメソッドに画像ファイルを読み込む処理を書ます。
そしてdrawメソッドを追加して、ファイル読み込んだ画像を表示する処理を書きます。

require 'nyle'

class Screen < Nyle::Screen
  def initialize
    super
    @image = Nyle.load_image("./img.jpg")   # 追加
  end
  def draw
    Nyle.draw_image(0, 0, @image)           # 追加
  end
end

Screen.new.show_all
Nyle.main

---

(2)画像ファイルの部分読み込み

(1)で読み込んだものと同じファイルを使って、
画像の一部分だけを読み込んで表示することもできます。

require 'nyle'

class Screen < Nyle::Screen
  def initialize
    super
    @image = Nyle.load_image("./img.jpg", {cx: 200, cy: 100, cw: 320, ch: 240})   # 変更(オプション)
  end
  def draw
    Nyle.draw_image(20, 20, @image)   # 変更(表示位置)
  end
end

Screen.new.show_all
Nyle.main

Nyle.load_imageメソッドのオプションで、切り出す部分の基点座標とサイズを指定します。

この例では、座標(200, 100)から 320×240のサイズの分だけ切り出しています。

---

(3)画像の拡大/縮小

同じく(1)で読み込んだものと同じファイルを使って、画像の拡大/縮小をさせてみます。

require 'nyle'

class Screen < Nyle::Screen
  def initialize
    super
    @image = Nyle.load_image("./img.jpg", {sx: 0.5, sy: 0.5})   # 変更(オプション)
  end
  def draw
    Nyle.draw_image(20, 20, @image)
  end
end

Screen.new.show_all
Nyle.main

Nyle.load_imageメソッドのオプションで、縦横の倍率を指定します。

この例では、縦横とも 50％に縮小しています。

---

(4)画像の分割読み込み

同じく(1)で読み込んだものと同じファイルを使って、
画像を小さなピースに分割して配列に入れてみます。

require 'nyle'

class Screen < Nyle::Screen
  def initialize
    super
    @image = Nyle.load_image_tiles("./img.jpg", 4, 3, {sx: 0.5, sy: 0.5})  # 変更
  end
  def draw
    3.times do |y|                                                  # 変更
      4.times do |x|                                                # 変更
        Nyle.draw_image(20 + x * 100, 20 + y * 100, @image[x][y])   # 変更
      end                                                           # 変更
    end                                                             # 変更
  end
end

Screen.new.show_all
Nyle.main

Nyle.load_image_tilesメソッドで、縦横の分割数を指定します。

この例では、縦4×横3の合計12個のピースに分割しています。
(さらにオプション指定で 縦横とも 50％にサイズを縮小しています)

Nyle.load_image_tilesメソッドは、ゲームのキャラクタやマップ情報など
１つのファイルに複数の画像が含まれている場合などにも効果的です。

---

 

Nyleでの画像ファイルの扱いについて記載しました。

提供されるメソッドなどの詳細はAPI一覧および
リンク先の各メソッドの説明を参照してください。

また、ヒント集(Tips)やサンプルプログラム紹介なども参考にしてください。