【Playdate】フォントを自作して読み込んで使ってみる #playdate

PlaydateではCapsというブラウザベースのフォント作成エディタがあり、フォントを自作することができます。
英数字の他、ひらがなやカタカナ、記号なども対応しています。

今回はCapsでPlaydate用のフォントファイルを自作し、プロジェクトに読み込んで使ってみます。
ベースとなるプロジェクトはこちらを使用します。

Capsからフォントファイルを生成する

Capsはplaydateサイトにログインした状態で上記URLにアクセスすると起動することができます。
左側メニューの Font がフォント全体の設定で、制作済みフォントの読み込みもここから行えます。
Glyphs が各文字の一覧となり、ビットマップとしてフォントを描画します。
Kerning が文字同士の間隔を調整する画面ですが、英文テキストの多いゲームで無い限り使う機会はほぼないと思います。

一つひとつフォントを作成していっても良いですが、今回は美咲ゴシックをベースにして予め作ってあるデータを使います。
下記URLから、Misaki.fntとMisaki-table-8-8.pngをダウンロードします。

次に Font メニューからOPENを押下し、Misaki.fntを選びます。
選択後以下のダイアログが表示されるのでOPENを押下し、Misaki-table-8-8.pngを選び、FINISHを押下するとフォントが読み込めます。

読み込んだ後、統合されたフォントファイルとしてダウンロードします。
左側のSAVE & DOWNLOADの下をAll-in-oneにし、SAVE & DOWNLOADを押してファイルをダウンロードします。

フォントファイルを読み込んで使用する

ダウンロードしたフォントファイルをプロジェクト内に配置します。
格納先は以下のようにしました。

myProjectName/
    source/
        main.lua
        Images/
            playerImage.png
            background.png
        Fonts/
            Misaki.fnt ← 追加

次のフォントの読み込みです。

main.lua

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

local gfx <const> = playdate.graphics

local playerSprite = nil

function myGameSetUp()
	
	local fontFamily = gfx.font.new( "Fonts/Misaki" ) -- フォント読み込み
	gfx.setFont(fontFamily) -- 読み込んだフォントをセット

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

	playerSprite = gfx.sprite.new( playerImage )
	playerSprite:moveTo( 200, 120 )
	playerSprite:add()

	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("こんにちは!", 176, 80) -- テキスト描画
			gfx.setImageDrawMode(gfx.kDrawModeCopy) -- 塗りをそのままにする
		end
	)

end

-- 以下略 --

gfx.font.new( "Fonts/Misaki" )でフォントファイルを指定して読み込み、gfx.setFontで読み込んだフォントをセットしています。
制作したフォントは黒塗りなのでgfx.setImageDrawMode(gfx.kDrawModeFillWhite)で塗りを白くするようにし、
drawTextでテキスト描画後、gfx.setImageDrawMode(gfx.kDrawModeCopy)で塗りをそのままにするよう戻しています。
ビルド後は以下のような画面で出力されるはずです。