「アイマス会話メーカー」シリーズの開発で培った画像作りについての雑感

概要

非常に短い記事です。Qiitaに書くまでもないと思ったので。

当初はHTML+CSSで組んでいた

最初に作成した頃は、Canvas APIを知らなかったので、HTML+CSSで組んでいました。
画像は<img>タグ、枠組みは<div>タグとし、CSSでサイズ調整や位置調整を行うイメージですね。

ただこのアプローチだと、アイマス会話メーカーで使っている技術・テクニックまとめで書いた通り、position:relative;とposition:absolute;で位置合わせするわけですが、これに加えて各エレメントのサイズ調整もJavaScriptで実施する必要があります。そのため、レスポンシブ対応などを考慮して書くと物凄く面倒臭いです。

Canvas APIで書くように変更

ある時から、こちらでレンダリングするようにしました。
このアプローチの場合、「canvasの表示サイズ」と「canvas内で描画するサイズ」とを別にできるので、後者でサイズ設計し、前者でレスポンシブ対応(＝横幅調整)を行えるのが最大の利点です。
また、Canvas APIだと標準で画像化のAPIが提供されているのも大きいです。HTML+CSSで書いていた頃は、html2canvasで画像化を頑張ってましたから。

ただ、素のCanvas APIは手続き型のアプローチなので、「CanvasからCanvasRenderingContext2Dを取り出して描画処理を設定する」処理を書くのがまあまあ大変でした。普通、Reactではデザイン設計をJSXで行うので、JSXのような宣言型の記述ができないのは苦痛……。

react-konvaという光明

そこで、別途ライブラリとしてreact-konvaを導入しました。react-konvaライブラリが使って便利だったので使用法などをメモにも書いた通り、JSX記法でデザイン設計できるのはかなり助かりました。現状では、Reactで2Dグラフィックを描く際、これを使って書いてます。

​