ハマった小さなバグの話（画像処理・フォント編）

開発していると、機能そのものよりも地味な部分で何時間も溶かすことがあります。今回は、画像処理まわりで実際にハマった話を、備忘録として残しておきます。

可変フォントが画像生成でうまく動かなかった話

ゲームのクリア・シェア画像には、日本語のテキストを画像に焼き込む処理が必要でした。フォントには見た目のきれいな可変フォント（同じフォントファイルの中で太さなどを連続的に変えられるタイプ）を使おうとしたのですが、画像処理ライブラリでこのフォントを読み込むと、文字が正しく描画されなかったり、処理自体が失敗したりすることがありました。

原因を調べたところ、画像処理ライブラリの多くは、可変フォントという仕組み自体への対応が十分でないケースがあることが分かりました。可変フォントは比較的新しい技術のため、対応状況にはまだばらつきがあるようです。

対策はシンプルで、太さが固定された「静的フォント」に切り替えることでした。デザイン的な自由度は少し下がりますが、確実に動くことを優先しました。同じように日本語フォントを画像に焼き込む処理を実装する人は、フォントの種類（可変か静的か）を最初に確認しておくと、無駄にハマらずに済むと思います。

背景を透過させる処理でハマった話

キャラクター画像の背景を透過させる処理でも、単純に「特定の色を透過する」だけでは、絵の中に同じような色の部分（例えば瞳の中など）まで一緒に透過されてしまう問題がありました。

これは、画像の外側から塗りつぶすように背景色を辿っていき、外部と繋がっている領域だけを透過させる、という処理に切り替えることで解決しました。絵の内部で孤立している同系色の部分は、外側の背景と繋がっていないため、透過されずに残ります。

地味なバグではありますが、同じように立ち絵や画像を加工して使う人には、参考になる部分があるかもしれません。