Update Arial font: add Japanese glyphs from Osaka Regular-Mono.ttf

In order to render japanese characters, we need to have a font which has japanese characters and make sure they
are added to the .font64 file with mkfont during compilation.

I wrote a small program before to figure out which Japanese characters are actually used in the Japanese gameboy
cartridges.

I only added those unicode ranges to the fonts to keep them small.

There was no easy way to have a font that has both latin and Japanese characters, especially not free. So I
used FontForge to merge the japanese glyphs from Osaka Regular-Mono into Arial.ttf
This commit is contained in:
Philippe Symons 2024-12-17 13:21:21 +01:00
parent 34825889e6
commit a1a6817dbf
17 changed files with 61 additions and 57 deletions

View File

@ -36,8 +36,12 @@ filesystem/%.sprite: assets/%.png
@echo " [SPRITE] $@"
$(N64_MKSPRITE) $(MKSPRITE_FLAGS) -o filesystem "$<"
filesystem/Arial.font64: MKFONT_FLAGS+=--size 11 --outline 1.0 --char-spacing 1.0 --range 20-E9 --range 3040-309F
filesystem/Arial-small.font64: MKFONT_FLAGS+=--size 10 --outline 1.0 --char-spacing 1.0 --range 20-E9 --range 3040-309F
# We also need Japanese characters
# I wrote a program to determine the character ranges for the japanese characters actually used by
# the gameboy games.
filesystem/Arial.font64: MKFONT_FLAGS+= -v --size 11 --outline 1.0 --char-spacing 1.0 --range 20-E9 --range 2026-2026 --range 25B6-25B7 --range 25BC-25BC --range 2640-2640 --range 2642-2642 --range 3002-3002 --range 300C-300F --range 3041-3089 --range 308B-308D --range 308F-308F --range 3092-309C --range 30A1-30D7 --range 30DB-30EF --range 30F2-30F4 --range 30FB-30FC --range 5186-5186 --range FF1A-FF1A
filesystem/Arial-small.font64: MKFONT_FLAGS+=-v --size 10 --outline 1.0 --char-spacing 1.0 --range 20-E9 --range 2026-2026 --range 25B6-25B7 --range 25BC-25BC --range 2640-2640 --range 2642-2642 --range 3002-3002 --range 300C-300F --range 3041-3089 --range 308B-308D --range 308F-308F --range 3092-309C --range 30A1-30D7 --range 30DB-30EF --range 30F2-30F4 --range 30FB-30FC --range 5186-5186 --range FF1A-FF1A
filesystem/logo-libdragon.sprite: MKSPRITE_FLAGS += -f RGBA32
filesystem/logo-bulbagarden.sprite: MKSPRITE_FLAGS += -f RGBA32

Binary file not shown.

1
assets/Arial-small.ttf Symbolic link
View File

@ -0,0 +1 @@
Arial.ttf

BIN
assets/Arial.ttf Executable file → Normal file

Binary file not shown.

View File

@ -22,8 +22,8 @@ public:
void render(RDPQGraphics& gfx, const Rectangle& sceneBounds) override;
protected:
private:
uint8_t fontIdArial_;
uint8_t fontArialStyleWhiteId_;
uint8_t fontIdMainFont_;
uint8_t fontMainFontStyleWhiteId_;
sprite_t* logoLibDragon_;
sprite_t* logoBulbagarden_;
sprite_t* logoRetroGameMechanicsExplained_;

View File

@ -22,8 +22,8 @@ private:
sprite_t* pokeTransporterGBLogoSprite_;
sprite_t* qrCodeSprite_;
sprite_t* fennelPictureSprite_;
uint8_t fontArialSmallId_;
uint8_t fontArialSmallWhiteId_;
uint8_t fontMainFontSmallId_;
uint8_t fontMainFontSmallWhiteId_;
};
#endif

View File

@ -23,7 +23,7 @@ protected:
DialogWidget dialogWidget_;
WidgetFocusChainSegment dialogFocusChainSegment_;
uint8_t arialId_;
uint8_t mainFontId_;
uint8_t fontStyleWhiteId_;
uint8_t fontStyleYellowId_;
private:

View File

@ -48,8 +48,8 @@ private:
Gen2GameReader gen2GameReader_;
sprite_t* menu9SliceSprite_;
SpriteRenderSettings backgroundRenderSettings_;
uint8_t fontArialSmallId_;
uint8_t fontArialSmallWhiteId_;
uint8_t fontMainFontSmallId_;
uint8_t fontMainFontSmallWhiteId_;
TextRenderSettings textSettings_;
TextRenderSettings smallTextSettings_;
TextRenderSettings statsSettings_;

View File

@ -40,8 +40,8 @@ SPECIAL THANKS TO:
AboutScene::AboutScene(SceneDependencies& deps, void*)
: AbstractUIScene(deps)
, fontIdArial_(1)
, fontArialStyleWhiteId_(0)
, fontIdMainFont_(1)
, fontMainFontStyleWhiteId_(0)
, logoLibDragon_(nullptr)
, logoBulbagarden_(nullptr)
, logoRetroGameMechanicsExplained_(nullptr)
@ -70,14 +70,14 @@ AboutScene::AboutScene(SceneDependencies& deps, void*)
})
, bButtonPressed_(false)
{
fontIdArial_ = deps.fontManager.getFont("rom://Arial.font64");
fontIdMainFont_ = deps.fontManager.getFont("rom://Arial.font64");
const rdpq_fontstyle_t arialWhite = {
const rdpq_fontstyle_t mainFontWhite = {
.color = RGBA32(0xFF, 0xFF, 0xFF, 0xFF),
.outline_color = RGBA32(0, 0, 0, 0xFF)
};
deps.fontManager.registerFontStyle(fontIdArial_, fontArialStyleWhiteId_, arialWhite);
deps.fontManager.registerFontStyle(fontIdMainFont_, fontMainFontStyleWhiteId_, mainFontWhite);
}
AboutScene::~AboutScene()
@ -99,8 +99,8 @@ void AboutScene::init()
const TextWidgetStyle headerTextStyle = {
.renderSettingsNotFocused = {
.fontId = fontIdArial_,
.fontStyleId = fontArialStyleWhiteId_,
.fontId = fontIdMainFont_,
.fontStyleId = fontMainFontStyleWhiteId_,
.halign = ALIGN_CENTER
}
// ,.backgroundColor_ = 0xF801
@ -108,15 +108,15 @@ void AboutScene::init()
const TextWidgetStyle commonLeftAlignedTextStyle = {
.renderSettingsNotFocused = {
.fontId = fontIdArial_,
.fontStyleId = fontArialStyleWhiteId_,
.fontId = fontIdMainFont_,
.fontStyleId = fontMainFontStyleWhiteId_,
.halign = ALIGN_LEFT
}
};
const TextWidgetStyle commonCenterAlignedTextStyle = {
.renderSettingsNotFocused = {
.fontId = fontIdArial_,
.fontStyleId = fontArialStyleWhiteId_,
.fontId = fontIdMainFont_,
.fontStyleId = fontMainFontStyleWhiteId_,
.halign = ALIGN_CENTER
}
};

View File

@ -199,11 +199,11 @@ void DistributionPokemonListScene::setupMenu()
.bounds = {0, 1, 20, 20}
},
.titleNotFocused = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleWhiteId_
},
.titleFocused = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleYellowId_
},
.leftMargin = 24,

View File

@ -49,7 +49,7 @@ void InitTransferPakScene::init()
setFocusChain(&tpakDetectWidgetSegment_);
pokeMe64TextSettings_ = TextRenderSettings{
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleWhiteId_,
.halign = ALIGN_CENTER
};
@ -185,7 +185,7 @@ void InitTransferPakScene::setupTPakDetectWidget()
{
const TransferPakDetectionWidgetStyle style = {
.textSettings = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleWhiteId_,
.halign = ALIGN_CENTER
}

View File

@ -202,11 +202,11 @@ void MenuScene::setupMenu()
const MenuItemStyle itemStyle = {
.size = {160, 16},
.titleNotFocused = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleWhiteId_
},
.titleFocused = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleYellowId_
},
.leftMargin = 35,

View File

@ -20,8 +20,8 @@ PokeTransporterGBRefScene::PokeTransporterGBRefScene(SceneDependencies& deps, vo
, pokeTransporterGBLogoSprite_(nullptr)
, qrCodeSprite_(nullptr)
, fennelPictureSprite_(nullptr)
, fontArialSmallId_(0)
, fontArialSmallWhiteId_(0)
, fontMainFontSmallId_(0)
, fontMainFontSmallWhiteId_(0)
{
}
@ -35,13 +35,13 @@ void PokeTransporterGBRefScene::init()
pokeTransporterGBLogoSprite_ = sprite_load("rom://logo-poketransporter-gb.sprite");
qrCodeSprite_ = sprite_load("rom://qrcode-poketransporter-gb.sprite");
fennelPictureSprite_ = sprite_load("rom://fennel-picture.sprite");
fontArialSmallId_ = deps_.fontManager.getFont("rom://Arial-small.font64");
fontMainFontSmallId_ = deps_.fontManager.getFont("rom://Arial-small.font64");
const rdpq_fontstyle_t arialWhite = {
const rdpq_fontstyle_t mainFontWhite = {
.color = RGBA32(0xFF, 0xFF, 0xFF, 0xFF),
.outline_color = RGBA32(0, 0, 0, 0xFF)
};
deps_.fontManager.registerFontStyle(fontArialSmallId_, fontArialSmallWhiteId_, arialWhite);
deps_.fontManager.registerFontStyle(fontMainFontSmallId_, fontMainFontSmallWhiteId_, mainFontWhite);
SceneWithDialogWidget::init();
@ -80,8 +80,8 @@ void PokeTransporterGBRefScene::render(RDPQGraphics& gfx, const Rectangle& scene
.renderMode = SpriteRenderMode::NORMAL
};
TextRenderSettings textSettings = {
.fontId = fontArialSmallId_,
.fontStyleId = fontArialSmallWhiteId_
.fontId = fontMainFontSmallId_,
.fontStyleId = fontMainFontSmallWhiteId_
};
gfx.drawSprite(logoRectangle, pokeTransporterGBLogoSprite_, renderSettings);

View File

@ -8,7 +8,7 @@ SceneWithDialogWidget::SceneWithDialogWidget(SceneDependencies& deps)
, dialogFocusChainSegment_({
.current = &dialogWidget_
})
, arialId_(1)
, mainFontId_(1)
, fontStyleWhiteId_(0)
, fontStyleYellowId_(1)
{
@ -26,11 +26,11 @@ void SceneWithDialogWidget::init()
.style = {
.size = {140, 16},
.titleNotFocused = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleWhiteId_
},
.titleFocused = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleYellowId_
},
.leftMargin = 5,
@ -38,7 +38,7 @@ void SceneWithDialogWidget::init()
}
},
.textSettings = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleWhiteId_
},
.margin = {
@ -81,19 +81,19 @@ void SceneWithDialogWidget::showDialog(DialogData* diagData)
void SceneWithDialogWidget::setupFonts()
{
arialId_ = deps_.fontManager.getFont("rom://Arial.font64");
mainFontId_ = deps_.fontManager.getFont("rom://Arial.font64");
const rdpq_fontstyle_t arialWhite = {
const rdpq_fontstyle_t mainFontWhite = {
.color = RGBA32(0xFF, 0xFF, 0xFF, 0xFF),
.outline_color = RGBA32(0, 0, 0, 0xFF)
};
const rdpq_fontstyle_t arialYellow = {
const rdpq_fontstyle_t mainFontYellow = {
.color = RGBA32(0xFF, 0xFF, 0x00, 0xFF),
.outline_color = RGBA32(0, 0, 0, 0xFF)
};
deps_.fontManager.registerFontStyle(arialId_, fontStyleWhiteId_, arialWhite);
deps_.fontManager.registerFontStyle(arialId_, fontStyleYellowId_, arialYellow);
deps_.fontManager.registerFontStyle(mainFontId_, fontStyleWhiteId_, mainFontWhite);
deps_.fontManager.registerFontStyle(mainFontId_, fontStyleYellowId_, mainFontYellow);
}
void SceneWithDialogWidget::setupDialog(DialogWidgetStyle& style)

View File

@ -40,7 +40,7 @@ void SceneWithProgressBar::setupProgressBar(ProgressBarWidgetStyle& style)
.color = RGBA32(0x0, 0x61, 0xFF, 0xFF)
};
style.textSettings = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleWhiteId_,
.halign = ALIGN_CENTER,
.valign = VALIGN_CENTER

View File

@ -78,11 +78,11 @@ void SelectFileScene::init()
.spriteBounds = { 5, 2, 16, 16}
},
.titleNotFocused = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleWhiteId_
},
.titleFocused = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleYellowId_
},
.leftMargin = 24,
@ -187,7 +187,7 @@ void SelectFileScene::render(RDPQGraphics& gfx, const Rectangle& sceneBounds)
if(context_->titleText && !isZeroSizeRectangle(titleBounds))
{
const TextRenderSettings renderSettings = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleWhiteId_,
.halign = ALIGN_CENTER
};

View File

@ -66,18 +66,18 @@ StatsScene::StatsScene(SceneDependencies& deps, void* context)
.renderMode = SpriteRenderMode::NINESLICE,
.srcRect = Rectangle{6, 6, 6, 6}
})
, fontArialSmallId_(2)
, fontArialSmallWhiteId_(0)
, fontMainFontSmallId_(2)
, fontMainFontSmallWhiteId_(0)
, textSettings_(TextRenderSettings{
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleWhiteId_
})
, smallTextSettings_(TextRenderSettings{
.fontId = fontArialSmallId_,
.fontStyleId = fontArialSmallWhiteId_
.fontId = fontMainFontSmallId_,
.fontStyleId = fontMainFontSmallWhiteId_
})
, statsSettings_(TextRenderSettings{
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleWhiteId_,
})
, spriteBounds_(spriteBounds)
@ -118,16 +118,16 @@ void StatsScene::init()
bool shiny;
menu9SliceSprite_ = sprite_load("rom://menu-bg-9slice.sprite");
fontArialSmallId_ = deps_.fontManager.getFont("rom://Arial-small.font64");
fontMainFontSmallId_ = deps_.fontManager.getFont("rom://Arial-small.font64");
trainerName = deps_.playerName;
SceneWithDialogWidget::init();
const rdpq_fontstyle_t arialWhite = {
const rdpq_fontstyle_t mainFontWhite = {
.color = RGBA32(0xFF, 0xFF, 0xFF, 0xFF),
.outline_color = RGBA32(0, 0, 0, 0xFF)
};
deps_.fontManager.registerFontStyle(fontArialSmallId_, fontArialSmallWhiteId_, arialWhite);
deps_.fontManager.registerFontStyle(fontMainFontSmallId_, fontMainFontSmallWhiteId_, mainFontWhite);
deps_.tpakManager.setRAMEnabled(true);
switch(deps_.generation)
{

View File

@ -53,11 +53,11 @@ void TestScene::init()
.itemStyle = {
.size = {280, 16},
.titleNotFocused = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleWhiteId_
},
.titleFocused = {
.fontId = arialId_,
.fontId = mainFontId_,
.fontStyleId = fontStyleYellowId_
},
.leftMargin = 10,