「RunCat」の自作ランナーをMacのメニューバーで動かしてみた
RunCat とは
Macのメニューバーでネコを飼えるアプリです。
ネコがメニューバーを走る様子
ネコは走るスピードでMacのCPU使用率を教えてくれます。
公式サイトにわかりやすい説明が載っています。
自作ランナーを作ろう
これには、自作ランナー登録機能があり、PNG画像を複数フレーム作成し登録することで、アニメーションとして動かすことができます。
自作ランナー登録機能の紹介[1]
私も何かアニメーションさせたくなったので、フクロウのアイコンを使っているので、フクロウをモチーフにして、自作ランナーを作ってみました。
完成したのがこちら
首が回るフクロウの自作ランナー（CPU負荷小）
首が回るフクロウの自作ランナー（CPU負荷大）
CPU負荷が高まると、ニヤリとしながら作業をしています。
たまにフクロウに釣られて首を回すストレッチをしています。
アニメーションの作り方
ここからは、このフクロウのアニメーションの作り方を軽く紹介します。
最終的には、以下の条件を満たすPNG画像を複数枚作ればいいので、ツールとしてはペイントツールでもなんでもよいです。
- 画像フォーマット：PNG
- 高さ：36px
- 幅：10~100px
枚数的には枚数（フレーム数という方がいい？）が多いほど、滑らかに動くので、デザインとこだわり具合次第です。
私のフクロウの場合は、8フレームじゃ物足りなかったので、16フレーム分画像を作成しました。
私はツールとしては、「Procreate for iPad」を元々購入していたので、そちらを使用しました。
アーティスト御用達と書いてあり恐れ多いですが、臆せず描いていきましょう。
サイズについて
新規キャンバスで作成するとき、サイズをどうするかですが、私は答えを持っていません😇プロに聞きたい。
大きいピクセル数で描くと、最終的に「高さ：36px」に落としたときに思ったのと違う絵になるかもしれませんし、逆に最初から「高さ：36px」で描くと、ドット絵に近くなり、これはこれで難しさがあります。
私は大きいピクセル数で先に描いて失敗したので、2回目は「高さ：36px、幅：100px」でサイズを設定して描き始めました（幅は完成後にカットして調整）。
失敗例（高さ360pxで作成したとき）
最初はかわいらしいスタイルでフクロウを描きました。
これが...
こうなる😇
うん、見えない。
これを教訓に、2回目は最初から「高さ：36px」で描いてみました。
Procreate のアニメーションアシスト機能を使う
さて、アニメーションアシスト機能の使い方ですが、画像左側にあるような「アニメーションアシスト」のトグルをオンすると、画像の下方にシートが現れます。
アニメーションアシスト機能をオンにしたときの様子
（あら、なぜか右下隅でSiriが起動してますが、全然関係ないです）
画像の下方のシートの右側にある「フレームを追加」ボタンを選択すると、フレームが追加されていきます。
Procreateを使っている人にとっては、実態としてはいつもの「レイヤー」が増えるだけです。
設定次第で、前のフレームを透かして表示するかが設定できたりします（オニオンスキンと呼ぶらしい）。この機能のおかげで、アニメーションが描きやすい！
画像の下方のシートの左側にある「再生」ボタンを選択すると、アニメーションが再生されます。
もうそろそろきもちわるいですね。
PNG画像の出力
できあがったら、各フレームをPNG画像として出力します。
が、Procreateの出力機能（「共有」ボタンから可能）には、「アニメーションGIF」や「アニメーションPNG」はあるのですが、これらは、1ファイルとしてしか出力されないので、RunCatにそのまま登録することはできませんでした。
共有できるイメージフォーマット
そのため、多少手間ですが、アニメーションの各フレームを１つ１つドラッグ＆ドロップでFinderにコピペします。Macのユニバーサルコントロール機能を使うといいでしょう。
ひたすら16回（フレーム数分）ドラッグ＆ドロップを繰り返しました。
自作ランナーの登録
あとはこのフレームをRunCatに登録するだけです。
メニューバーから[自作ランナー]を選択し、必要事項を入力して、フレームを追加します。
フレームはFinderから全選択して一気に追加できるようです。
メニューバーからアプリのメニューを開いた様子
自作ランナー登録画面
以上で登録完了です。お疲れさまでした。
まとめ
自作ランナーを使い始めて1日も経つと、こんなイラストでも親しみが湧いてきて面白いです。
これをきっかけに他のアニメーションも描いてみたいと思いました。
おまけ
また、Procreateでアニメーションを描いてみたい方は、「Procreate アニメーションアシスト」で検索して出てくる動画を見ていくと、イメージが湧きやすいです。
とはいえ、人によっては実際にツールを使ってみるのが一番早いのかもしれません。
Discussion
ランナーを自作する際は、解像度を高さ72pxで作っておいて、36pxに縮めるのがおすすめです。ちょうどいい感じにアンチエイリアスがかかる印象があります。（デフォルメされているキャラクターなどの場合は最初から36pxの方がいいです。）
また、macOSのPreview.appはGIFやAPNGの各フレームを分解して閲覧可能なので、全選択してPNGとして出力することができると思います。その場合、オリジナルのファイルはAPNGがいいと思います。GIFだと色数が少ないため汚くなっちゃいます。
Kyome さま！コメントありがとうございます！
めちゃくちゃ助かります...！次回はぜひそのように作ってみます🙌