スコアと画像の表示

• スコアの表示
• 画像の表示

スコアの表示

まずはクリックされた回数を表すスコアを画面上部に表示します。この時点ではただ数字を表示するだけです。

score = 0    -- クリックされた回数
scoreX = 0   -- スコアの表示X座標
scoreY = 20  -- スコアの表示Y座標

function love.load()
  local font = love.graphics.newFont(22)
  love.graphics.setFont(font)

  updateScorePosition()
end

function love.draw()
  love.graphics.print(tostring(score), scoreX, scoreY)
end

-- ==========================
-- スコアの表示位置の更新
-- ==========================
function updateScorePosition()
  local font = love.graphics.getFont()

  -- スコアを画面の横中央に表示するための座標計算
  scoreX = math.floor(
    (love.graphics.getWidth() - font:getWidth(tostring(score))) / 2
  )
end

updateScorePosition関数ではスコアを横中央に表示するための位置の計算を行っています。スコアはゲームをプレイしていく内に桁数が変わります。その際、スコアの横幅も変化します。そのため、X座標を固定で指定することができません。

現段階ではスコアを更新する処理がないので0のままですが、後で実装するスコアの更新処理でupdateScorePosition関数を使用します。

画像の表示

次はクリックされる対象物の画像を表示します。クリッカーゲームは何かをクリックするという設定であることが多いです。Cookie Clickerならクッキー、Tap Titansなら敵キャラになります。今回はタマゴの画像を表示してみます。

score = 0      -- クリックされた回数
scoreX = 0     -- スコアの表示X座標
scoreY = 20    -- スコアの表示Y座標
imgEgg = nil   -- 画像（タマゴ）
eggX = 0       -- タマゴの表示X座標
eggY = 0       -- タマゴの表示Y座標

function love.load()
  local font = love.graphics.newFont(22)
  love.graphics.setFont(font)

  imgEgg = love.graphics.newImage("img/egg.png")

  eggX = math.floor((love.graphics.getWidth() - imgEgg:getWidth()) / 2)
  eggY = math.floor((love.graphics.getHeight() - imgEgg:getHeight()) / 2)

  updateScorePosition()
end

function love.draw()
  love.graphics.print(tostring(score), scoreX, scoreY)
  love.graphics.draw(imgEgg, eggX, eggY)
end

-- （省略）

タマゴの画像を画面中央に表示しています。スコアと違ってタマゴは表示位置は変わらないのでlove.loadの中で表示位置を指定しています。

表示関係は一通り実装しました。次はクリック処理を実装していきます。

• スコアと画像の表示
• クリック処理の実装