ケツイがみなぎったジェネレーター

DELTARUNE Chapter「2」制作開始記念

こじつけ？うるせえな

web1week、やりたいなーと思いながらずっと出来ていなかったのですが、今回こそはと思い参加しました。
幸運にも大学の夏休み。今回のお題は「2」ということで、どうしようかな～～と思いつつ、ゲーム片手にアイディアが降ってくるのを待ちます。

ゲームたのし～いｗｗｗ

そう、UNDERTALEを遊んでいたのです。
楽しい。これは楽しい。
記事執筆時点でもう５周目のプレイです。

しかもUNDERTALE、2020年9月15日に５周年を迎えるというではありませんか！
こんなおめでたいゲーム、お祝いするしかない。
ハッピーバースデーUNDERTALE。ハッピーバースデー日本語訳版。

５周年を前に、公式様もなかなか力が入っているようです。
週刊ファミ通 2020年9月24日号（2020年9月10日発行）は、UNDERTALEの特集が組まれ、表紙をUNDERTALE描き下ろし記念ビジュアルが飾っています。

祝『UNDERTALE』5周年／日本語版3周年！記念日お祝い特集。トビー氏＆テミー氏の新イラストやコメントが満載の永久保存版【先出し週刊ファミ通】

さらに、５周年にあたる米国時間2020年9月15日、公式サイト undertale.jp にスペシャルなコンテンツがたくさん追加されるそうですよ！ファミ通の取材で開発者のToby Foxさんが話してたから！

…えっと、それで何が「２」だったのかと言うと。

UNDERTALEシリーズ２作目の「DELTARUNE」について、ファミ通の中で「トビー氏より『DELTARUNE』開発進捗報告！」というページがあり、その中でトビーさんがこう語っているのです。

「数か月前からチャプター２の制作を開始！　開発は順調です！」

現在DELTARUNEは開発中で、Chapter 1に限り無料配信しています。
その続きが無事制作が進んでいることに喜んだのは僕だけではないはず。

そういうことなので、もう充分「２」要素は満たしてるわけですよ。

べっ、別に「こんなお題、思いつくわけないし適当に作って適当な理由付けてこじつけたほうが早いやろ」なんて思ってませんからね…？（）

作ったもの

前置きがやたら長くなりましたが、それで作ったのがこちら「ケツイがみなぎったジェネレーター」です。

UNDERTALEのセーブポイントで出てくるメッセージ「ケツイが　みなぎった」を書き換えて遊ぶことができる画像ジェネレーターです。

背景も変えることができるので、好きな背景に差し替えて遊べます。

「ケツイが　みなぎった」は印象的なメッセージなので、色々変えて遊んでみてもらえると嬉しいです。

技術的な側面

今まではPHPを使って画像加工処理をしてきましたが、だいぶJavaScriptも書き慣れてきたので、今回はcanvasで実装しました。

PHPは中々めんどくさかったので、canvasは手軽ですごいですね。びっくりしました。

その中で少し大変だったのは、文字についてです。
UNDERTALEは「東雲14ドット ゴシック体」を使っているのですが、レトロなドットが特徴のゲームのため、文字はピクセルパーフェクトで描画されています。
おそらくアウトラインフォントではなくビットマップフォントを使っているのではないかと思います。

しかし、canvasにはビットマップフォント(.bdf)を描画する手段がありませんでした。なんとかアウトラインフォントで実装するしかありません。

そこで自家製フォント工房さんの「JFドット東雲ゴシック14」を使うことにしましたが、これでも文字がにじんだり、実際の画面とは異なる文字幅で出力されてしまいました。

その原因は、フォントデータ内で若干座標にズレが存在していることと、UNDERTALEのメッセージウィンドウでは実際のフォントよりも詰めて文字を表示していることでした。

具体的には、東雲14では全ての文字が14×14で表現されているのですが、UNDERTALEは平仮名の表示が主ということもあり、横幅が13ピクセルに詰められています。

そこで、フォントデータを修正し、座標を整数値に合わせ、全角文字の幅を13ピクセルにし、半角文字は実際の画面を見ながら幅を整え（これもかなり元のフォントと異なる幅で実装されていて大変でした）、カスタマイズしたフォントを使うようにしました。

これで理論上は絶対にズレないようになったはず…でした。
実際、SafariとFirefoxでは完全にドットとしてゲームの文字を再現できるようになっていました。

……そう、Chromiumを除いては。

Chromiumだけは、canvasのレンダリング方法が異なるようで、どう調整しても滲んでしまいました。ブラウザの差、許すまじ…

仕方がないので、もう１つcanvasの文字専用レイヤーを作り、そこに文字を描画して、半透明ピクセルを除去してから、元のレイヤーと合成するようにしました。
これでChromiumでも他のブラウザと全く同じように表示できるようになりました。

もう１つクソポインツだと思ったのは、画像をピクセル的に表示する方法です。
CSSを使うと、画像やcanvasのアンチエイリアスを外すことができるのですが、その手段として２つの値があります。
image-rendering: pixelated と image-rendering: crisp-edges です。

両方ドットをドットとして表示してくれるように仕様に定められているのですが。

Safariちゃんはいい子でした。両方でドットとして表示してくれます。
Chromiumちゃんは、pixelatedではドットで表示してくれましたが、crisp-edgesではぼやけてしまいました。
Firefoxくんは……pixelatedではぼやけてしまい、 crisp-edgesではドットで表示してくれました。

えええええい！！！！！ひねくれてるなあ！！！！！

【解決方法】

両方書けばいいみたいです。意味不明すぎる。ブラウザ互換問題の中でもトップレベルでクソだと思う。

image-rendering: pixelated;
image-rendering: crisp-edges;

おわり

そんなわけで、ケツイがみなぎったジェネレーターで是非いろいろ遊んでみてください。
よろしくお願いします。

https://splamp.info/shed/kti_generator/

今回の経験を元にして、canvasを使ったサービスをこれからもっと作ってみたいなと思いました。