ボタンの作成

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

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

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

フィールド・関数説明
img画像
x表示するX座標
y表示するY座標
wボタンの幅
hボタンの高さ
onClickクリックされたときに呼ばれる関数
isHitクリックの検出を行う関数
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