キャンバス

• キャンバスの動作確認
• キャンバスの利点
• renderTo

キャンバスの動作確認

Love2Dではオブジェクトはオフスクリーンレンダリングを行うためにCanvasオブジェクトが用意されています。キャンバスを上手く利用することで描画処理を軽くすることができます。

function love.load()
  cvs = love.graphics.newCanvas(100, 50)
  love.graphics.setCanvas(cvs)
    love.graphics.setColor(1, 0, 0)
    love.graphics.rectangle('fill', 0, 0, 50, 50)
    love.graphics.setColor(1, 1, 1)

    img = love.graphics.newImage("img/face.png")
    love.graphics.draw(img, 50, 0)
  love.graphics.setCanvas()
end

function love.draw()
  love.graphics.draw(cvs, 0, 0)
end

実行すると赤色の四角形と画像face.pngが表示されます。ここで重要なのは、この2つはスクリーン（画面）に直接描画しているのではなくキャンバスに描画していることです。love.drawではキャンバスの描画のみを行っています。

2行目

love.graphics.newCanvasでキャンバスを新規作成しています。引数にはキャンバスの幅と高さを指定しています。これで幅が100px、高さが50pxのキャンバスが作成されます。

3行目

love.graphics.setCanvasで描画するキャンバスを指定します。この関数が呼び出されると、次にlove.graphics.setCanvasが呼び出されるまで描画対象が指定したキャンバスに変更されます。

今回のプログラムの場合、次にlove.graphics.setCanvasが呼び出されるのは10行目です。そのため、図形と画像の描画はキャンバスcvsに行われます。

10行目

引数なしのlove.graphics.setCanvasによって、描画対象がスクリーンに変更されます。

14行目

作成したキャンバスを描画しています。

キャンバスの利点

キャンバスは位置が変わらない画像を描画するときに使うと便利かつ描画処理を軽くすることができます。例えば背景として複数の画像を表示したい場合、キャンバスに1度すべての画像を描画させておきます。すると、その後はこのキャンバスを表示すれば背景全体の描画を1回で行うことができます。

renderTo

キャンバスを使用するときに注意しないといけないのは描画対象のキャンバスの管理です。複数のキャンバスを使用する場合、love.graphics.setCanvasの呼び忘れがあると意図しないキャンバスに描画が行われてしまいます。

CanvasオブジェクトにはrenderToという関数が用意されています。この関数はlove.graphics.setCanvasのショートカット記述になります。renderToを使用することで描画対象のキャンバスの切替えミスを防ぐことができます。

上記のプログラムは以下のように書き換えられます。

function love.load()
  cvs = love.graphics.newCanvas(100, 50)
  cvs:renderTo(function()
    love.graphics.setColor(1, 0, 0)
    love.graphics.rectangle('fill', 0, 0, 50, 50)
    love.graphics.setColor(1, 1, 1)

    img = love.graphics.newImage("img/face.png")
    love.graphics.draw(img, 50, 0)
  end)
end

function love.draw()
  love.graphics.draw(cvs, 0, 0)
end