シリーズ第2回は、ねこに着せるドット絵をどう作って、どうアプリに組み込んだかという話です。前半は「エクセルでドット絵を描くための専用ツールを自作した」話、後半は「そのドット絵を実際にねこへ合成表示するときにハマった話」を書きます。
エクセルでドット絵お絵かきシステムを作った
ねこや首輪、リボンなどのドット絵は、16×16マスの方眼で表現しています。この方眼、実はイラストソフトではなくExcelで作っています。マス目に色ではなく「数字」を打ち込み、その数字とパレットの色を対応づける、というやり方です。
最初は数字を手打ちして、1つずつセルの背景色を塗り替えていたのですが、さすがに手間がかかりすぎるので、Excelのマクロ（自動化の仕組み）を3つ作ってもらい、専用のお絵かきツールに育てました。
① 数字の絵をJS用のデータに変換するマクロ
16×16マスに打ち込んだ数字を読み取って、アプリのプログラムがそのまま読み込める形式のテキストファイルに書き出すマクロです。
- Ctrlキーでシートを複数選択すれば、まとめて一括で書き出せる
- パレット専用のシート（「ColorPallet」）は自動的に除外されるので、間違えてパレットごと書き出してしまう心配がない
- パレットの色を読み取って、「この数字はこの色」という対応表も一緒に自動生成してくれる
② 数字を打っただけで色が一気につくマクロ
色を塗るのって、実はカーソルでポチポチ選ぶより、キーボードで数字を打ち込んでいく方が速いことがあります。そこで、「数字だけ打ち込んだシート」に対して、パレットに登録された色を一気に反映するマクロも作りました。数字だけをザッと打ち込んでから、ワンボタンで色をつける、という描き方ができるようになっています。
③ 画面の隅に置いておけるカラーピッカー
普通にセルを塗ろうとすると、Excel標準の塗りつぶし機能はメニューが深くて面倒です。そこで、画面の端にずっと表示しておける専用のパレット画面を作りました。
- 塗りたいマスを選んで、パレットの色ボタンを押すだけで「数字」と「色」が同時に入る
- 「消す」ボタンを押せば消しゴムとして使える
- パレットに新しい色を追加すると、ボタンも自動で増える
- 暗い色のボタンは文字が自動で白くなるなど、見やすさの工夫も入っている
制作の流れ
道具が揃ったあとの実際の作業は、だいたいこんな流れになりました。
- パレットに必要な色を登録する
- カラーピッカーを画面の横に出しておく
- 新しいシートを用意して、マス目をポチポチ塗ってドット絵を描く
- 描き終わったシートを選んで、書き出しマクロを実行する
- 出てきたテキストファイルが、そのままアプリ側のドット絵データになる
ファイル自体は「テンプレ」として1本保存しておき、「ネコ系」「イヌ系」のようにジャンルごとにテンプレをコピーして分けています。1つのファイルにシートを詰め込みすぎると重くなるので、カテゴリで分割しておくと後々の管理がラクでした。
イラストソフトを新しく覚えるより、普段使っているExcelの上に「描く・塗る・書き出す」の3つの手間を自動化するボタンを足しただけ、というのが今回の一番のポイントです。ハードルがぐっと下がりました。
描いた絵を、ねこに着せる
ドット絵ができたら、次はアプリの画面上でねこに重ねて表示する作業です。ここでも地味にハマりどころがありました。
猫のポーズに合わせて重ねる
最初は、おめかし（首輪・リボン・王冠）を猫のバッジのように進捗バーの隅に浮かせて表示していました。ドット絵が揃ったタイミングで、猫の絵そのものに直接重ねて表示する方式に変更しました。
やっていることは単純で、「猫の絵の上に、おめかしの絵を、決めた位置・大きさで重ねる」だけです。ただし、アイテムごとに「どのくらいの大きさで」「どの角を基準に」「そこからどれだけずらすか」を数値で調整する必要がありました。首輪は猫とぴったり同じサイズ・同じ位置で乗せればよかったのですが、リボンや王冠は頭の上に乗せる関係で、縮小してから右上を基準に細かくずらす、という調整が必要でした。
「のびるねこ」への対応
このアプリには、タスクの進み具合に応じて猫がにょーんと伸びるアニメーション（「のびるねこ」）があります。これは実は1枚の絵が動いているのではなく、しっぽ・胴体・頭という3つの部品を別々に描いて組み合わせている作りでした。胴体だけが伸び縮みして見えるため、体が伸びているように見える仕組みです。
おめかしを重ねるときは、この「頭」の部品にだけ合成しておけば、頭が進むのと一緒におめかしも自然についてきます。この発見のおかげで、「のびるねこの間だけ別の表示に切り替える」という余計な仕組みを作らずに済みました。
座り姿勢と歩き姿勢でズレる問題
猫には「座っている絵」と「歩いている絵」の2種類のポーズがあります。最初は、おめかしの重ね位置を1つの数値だけで固定していたのですが、これだと座り姿勢にぴったり合わせた首輪が、歩き姿勢だと猫の輪郭が変わる分だけズレて見えてしまいました。
対応として、ポーズごとに別々の位置調整ができる仕組みを追加しました。「座っているときはこの位置、歩いているときはこの位置」と個別に指定できるようにしたことで、どちらの姿勢でも自然に見えるようになりました。
光るねこのバグ
30日連続で達成すると仲間になる「伝説のねこ」には、常に金色にキラキラ光る演出をつけました。ここでも、見た目にまつわる面白い不具合が2つありました。
頭だけ光らない
のびるねこの「頭」の部品には、輪郭をくっきり見せるための影を常につけていました。ところがこの影が、キラキラ光る演出の効果を打ち消してしまい、頭の部分だけ光って見えない、という状態になっていました。光る演出は猫全体を包むように後からかけていたのですが、頭の部品がすでに自分専用の影を持っていたせいで、その影が優先されてしまっていたのです。光っているときだけ、頭の固定の影を一時的に外すようにして解決しました。
ゴールの印まで一緒に光ってしまう
逆のパターンもありました。進捗バーの先端にある、えさ（魚の印）や達成後の骨の印まで、猫と一緒に光ってしまっていたのです。光る演出を「猫を含むもっと広い範囲」にかけてしまっていたのが原因でした。光らせたい部分（猫本体）だけをひとまわり内側の入れ物でくくり直し、そこにだけ演出をかけるようにしたことで、ゴールの印は光らず、猫だけが光るようになりました。
「光る」「影がつく」といった見た目の効果は、意図せず広い範囲に効いてしまったり、逆に他の効果に打ち消されて見えなくなったりすることがある、というのを実感した出来事でした。
アイコンもぜんぶドット絵に統一
操作アイコン（編集・削除・複製など）も、最初は絵文字を使っていました。ただ、絵文字はスマホやパソコンの機種によって見た目や色味が微妙に違ってしまうことがあります。見た目をきっちり揃えたかったので、これも段階的に自作のドット絵に置き換えていきました。最後まで絵文字のまま残っていた集中タイマー周りのアイコン（ストップウォッチ）も同じ方式に統一し、アプリ内の見た目はすべて自作のドット絵だけで完結するようになりました。
まとめ
ドット絵まわりで一番効いたのは、実はイラストの上手さではなく「道具づくり」でした。Excelにボタンを3つ足しただけで、絵を描く・色を塗る・アプリ用データに変換する、という一連の作業がぐっと速くなりました。そして絵ができた後も、「どこに」「どれくらいの大きさで」「どのポーズのときに」重ねるか、という細かい調整には結局それなりの手間がかかる、というのも今回よく分かったことです。
次回は、この見た目のできた仕組みを外部サービス（Firebase）と繋いだときに起きた大騒動について書きます。