ボタンの作成

ボタンはゲームのトップ画面やメニューで必要になることが多い部品です。しかし、Love2Dはあらかじめ部品として提供されていません。そのため、自分で作成する必要があります。ここではクリックしたら反応する簡単なボタンを作成していきます。

• ボタン用のオブジェクトの作成
• クリックの検出
• クリック検出処理を関数にまとめる

ボタン用のテーブルの作成

以下のようなボタン用のテーブルを作成していきます。

function love.load()
  objBtn = {}
  objBtn.img = love.graphics.newImage('img/button.png')
  objBtn.x = 40
  objBtn.y = 40
  objBtn.w = objBtn.img:getWidth()
  objBtn.h = objBtn.img:getHeight()
  objBtn.onClick = function(self)
    print("Click!!")
  end
  objBtn.isHit = nil    -- (後で実装する)
end

function love.draw()
  love.graphics.draw(objBtn.img, objBtn.x, objBtn.y)
end

objBtnオブジェクトは画像と座標の情報を持っているので、その情報を使ってボタン画像を表示させています。

クリックの判定

objBtnは座標とサイズの情報を持っています。クリックの検出はクリックされた座標がobjBtnの表示範囲内かどうかで判定します。

function love.load()
  -- (省略)
end

function love.draw()
  love.graphics.draw(objBtn.img, objBtn.x, objBtn.y)
end

function love.mousepressed(x, y, button, istouch)
  if x >= objBtn.x and
     x <= objBtn.x + objBtn.w and
     y >= objBtn.y and
     y <= objBtn.y + objBtn.h then

    objBtn:onClick()
  end
end

クリック判定処理を関数にまとめる

今回の例では1つのボタンしかクリックの判定していませんが、複数のボタンを判定する場合はlove.mousepressedにボタンごとの判定処理を書いていくとソースコードが長くなり、読みづらくなります。

クリック判定処理もonClickのようにテーブルに持たせましょう。

function love.load()
  objBtn = {}
  objBtn.img = love.graphics.newImage('img/button.png')
  objBtn.x = 40
  objBtn.y = 40
  objBtn.w = objBtn.img:getWidth()
  objBtn.h = objBtn.img:getHeight()
  objBtn.onClick = function(self)
    print("Click!!")
  end
  objBtn.isHit = function(self, x, y)
    if x >= objBtn.x and 
       x <= objBtn.x + objBtn.w and
       y >= objBtn.y and
       y <= objBtn.y + objBtn.h then

      return true
    end

    return false
  end
end

function love.draw()
  love.graphics.draw(objBtn.img, objBtn.x, objBtn.y)
end

function love.mousepressed(x, y, button, istouch)
  if objBtn:isHit(x, y) then
    objBtn:onClick()
  end
end