【Playdate】ゲーム中メニュー画面に動的なパラメータを表示できるようにカスタマイズする

ゲーム中にPlaydateのMenuボタンを押したときにメニュー画面を表示できますが、メニュー画面の左側をデザインすることができます。
今回はメニュー画面のデザインカスタマイズを行います。

メニュー画面で表示する画像ファイルは以下を使います。

続いて、Menuクラスを作成します。
HPとEXPを数値表示とゲージ表示する処理を実装しています。

menu.lua

local gfx <const> = playdate.graphics

class('Menu').extends(gfx.sprite)

local menuImage = nil

local MAX_WIDTH <const> = 170
local HEIGHT <const> = 8
local hp = 50
local max_hp = 100
local exp = 5
local next_exp = 80

function Menu:init()
	Menu.super.init(self)
	self:draw()
end

function Menu:addHp(add)
	hp += add
	if hp > max_hp then
		hp = max_hp
	elseif hp < 0 then
		hp = 0
	end
end

function Menu:addExp(add)
	exp += add
	if exp > next_exp then
		exp = next_exp
	elseif exp < 0 then
		exp = 0
	end
end

function Menu:getHp()
	return hp
end

function Menu:getExp()
	return exp
end

function Menu:getMaxHp()
	return max_hp
end

function Menu:getNextExp()
	return next_exp
end

function Menu:draw()
	-- メニュー画面の表示
	menuImage = gfx.image.new("Images/menuImage")
	gfx.pushContext(menuImage)
		-- ゲージの描画
		gfx.setColor(gfx.kColorWhite)
		gfx.fillRect(15, 60, math.floor(hp/max_hp*MAX_WIDTH), HEIGHT) -- ゲージ:HP
		gfx.fillRect(15, 100, math.floor(exp/next_exp*MAX_WIDTH), HEIGHT) -- ゲージ:EXP
		-- テキスト描画
		gfx.setImageDrawMode(gfx.kDrawModeFillWhite)
		gfx.drawTextAligned("*"..hp.."/"..max_hp.."*", 188, 60-20,kTextAlignment.right) -- テキスト:HP
		gfx.drawTextAligned("*"..exp.."/"..next_exp.."*", 188, 100-20,kTextAlignment.right) -- テキスト:EXP
		gfx.setImageDrawMode(gfx.kDrawModeCopy)
	gfx.popContext()
	playdate.setMenuImage(menuImage, 0) -- メニュー画面にimageをセット
end

ポイントはdraw関数内です。
メニュー画面はplaydate.setMenuImage(menuImage, 0)でimageをセットして表示します。
第一引数にimage、第二引数がx座標のオフセット指定となります。
ここにimageを渡す際にテキストや画像を重ねたりして、動的なパラメータを表示するようにしています。
まず下地となる背景画像を読み込み、gfx.pushContext(menuImage)で画像の編集を開始します。
ここではHPとEXPのゲージの描画とテキストの描画を行っています。
描画したらplaydate.setMenuImage(menuImage, 0)でセットします。

続いてmain.luaの実装を行います。

main.lua

import "CoreLibs/object"
import "CoreLibs/graphics"
import "CoreLibs/sprites"
import "CoreLibs/timer"

import "menu"

local gfx <const> = playdate.graphics

local status = "PRESS MENU"

local menu = nil

function myGameSetUp()
	
	-- メニュー
	menu = Menu()

	local backgroundImage = gfx.image.new( "Images/background" )
	assert( backgroundImage )

	gfx.sprite.setBackgroundDrawingCallback(
		function( x, y, width, height )
			backgroundImage:draw( 0, 0 )
			
			gfx.setImageDrawMode(gfx.kDrawModeFillWhite)
			gfx.drawText(status, 20, 20)
			gfx.drawText("HP:"..menu:getHp().."/"..menu:getMaxHp(), 20, 36)
			gfx.drawText("EXP:"..menu:getExp().."/"..menu:getNextExp(), 20, 52)
			gfx.setImageDrawMode(gfx.kDrawModeCopy)
		end
	)

end

myGameSetUp()

function playdate.update()
	if playdate.buttonIsPressed( playdate.kButtonUp ) then
		menu:addExp(1)
		menu:draw()
		gfx.sprite.redrawBackground()
	end
	if playdate.buttonIsPressed( playdate.kButtonDown ) then
		menu:addExp(-1)
		menu:draw()
		gfx.sprite.redrawBackground()
	end
	if playdate.buttonIsPressed( playdate.kButtonLeft ) then
		menu:addHp(-1)
		menu:draw()
		gfx.sprite.redrawBackground()
	end
	if playdate.buttonIsPressed( playdate.kButtonRight ) then
		menu:addHp(1)
		menu:draw()
		gfx.sprite.redrawBackground()
	end
	
	gfx.sprite.update()
	playdate.timer.updateTimers()
end

import "menu"で作成したmenu.luaを読み込み、myGameSetUp関数内でMenuインスタンスを作成しています。
playdate.update()内ではデバッグ用に十字キーでのHPとEXPの増減処理を記述しています。