私的東方原作風ドット備忘録
突然ですがnoteを使うのが初めてで記事の書き方がわかりません（一敗）
この記事は、弾幕風で使用する東方原作風のドット絵を作る際の手順、心がけなどの備忘録です。完全に自己流で、再現度よりも「それっぽさ」と「かわいさ」を追求しています。
それでも問題ない方はどうぞ先にお進みください。
あと死ぬほど文章が下手です。許せ。
この記事に向いている人
・怠惰な人
・とりあえず動くドットを描きたい人
・フィーリングで理解する人
この記事に向かない人
・既にドット絵を作れる人
・きちんとした手法で作りたい人
・詳しい解説が欲しい人
・真面目ちゃん
使用ツール
ドット絵を描く際に自分が使用しているツールです。
CLIP STUDIO EX
……だけです。強いて言うならペンタブ、気力維持のための作業用BGMとおやつでしょうか。水分もとってください。
他のソフトでも問題ありませんが、クリスタEX、PRO、DEBUTにはアニメーション機能がついているらしいので作業がしやすいと思われます。
アニメーション機能が付いていれば、どのソフトを使っても問題ないでしょう（無くても描けますが、差分管理や動きの確認にひぃひぃ言うはめになるかもしれません）。
敵グラの描き方
まず先に、作業の大まかな流れを確認しておきましょう。
ポーズと動きを考える
（キャラデザを確認する）
下書きをする
ドットを描く
動かす
簡単ですね。
今回は、うづきねい（ https://twitter.com/april_neigh ）さんの二次創作作品に提供させていただいたドット絵を参考に解説していきます。
原作はNEEDY GIRL OVERDOSEというゲームです。NGOの登場人物であるあめちゃん/超絶最かわてんしちゃん（以下てんちゃん）を東方ボス的なドット絵にしました。
完成品はこんな感じ
かわいいですね。
パタパタしている手足がとても愛らしいです。
てんちゃん（くねくねしている方）を参考画像にして、まずはアイデア出しから見ていきましょう。
ポーズと動きを考える
紙でもデジタルでもなんでも良いので、動きとポーズの案を書き出します。自分さえわかれば良いので雑で構いません（他人の作品に協力するにはアレだけど）。
解説にするには画像が汚すぎますが、それには触れないでください。
こんな感じで、動きのイメージを固めていきます。
最低限必要なものは正面・移動の2つです。作りたいものによって、力を溜めるなどの特殊モーションを考えます。
上の画像で出した案を参考に正面は②を、移動は③を選びました。
さて、ではパソコンでの作業に移り下書きを描いていきましょう。
下書きをする
ところで、一般的にドット絵というとこういったものを想像されると思います。
例えばこれは16×16pxの画像の中に、1pxずつ色が置かれてリンゴが描かれています。
東方原作のドット絵を見てみましょう。申し訳ないですが画像は略すので各自検索してください。
上のぱきっとしたものと違って、立ち絵を縮小してぼかされているように見えます。最近の作品になるほど、立ち絵の縮小らしさが顕著です。
ここでは原作風のドットが描きたいので、一般的なドット絵のように1ドットずつ手打ちするような真似はしません。もっと大雑把に、大きめに描いた画像を縮小する手法をとります。
画像サイズはどうしましょう、となりました。
過去に自分で使うために描いたルーミアを取り出してきましょう。弾幕風で使用するとちょうど良い大きさです。
画像サイズは64px×64pxでした。これくらいの大きさがちょうど良いので、完成形が64*64になるようにしたいです。
先述の通り、今回は大きめに描いた画像を縮小する手法をとるので、キャンバスサイズは4倍の256*256にしましょう。ここは完全に好みですので、いっぱい描いて自分にとっての適切サイズを見つけてみてください。
ちなみに、弾幕風では読み込むファイルの縦横は2の累乗、切り出す矩形の大きさは2の倍数だと綺麗になるらしいです（間違っていたら恥ずかしいぞ）。でも計算するのが面倒くさいので、余白が大きくてもいつも64*64にしています。怠惰こそ勝利なり。
ではお手元のイラストソフトで256*256のキャンバスを作成して、
できました。ラフ画像です。絵が下手なのがバレてしまうのでラフを晒すのは勇気が要ります。
ここでもどういう絵にするかは自分だけがわかればいいので、丁寧に描く必要はないです。
立ち絵と同じポーズでドット絵を用意したい場合は、立ち絵を縮小してそのまま持ってきてもいいですね。立ち絵を縮小しただけだと荒いので、次の段階で描き直します（最近風を描くなら話は別です、以降の工程を立ち絵の段階で済ませておくことを推奨します）。
ドットを描く
ここからが本題です。ドットを描いていきましょう。
普通のイラストを描く要領で描いていくのですが……
その前に、もう一度完成品のてんちゃんを見てみましょう。
動いている箇所は、パーツごとに分けてそれぞれ動かしています。色分けしてみましょう。
レイヤーの上から順に
頭、胴体、右腕、左腕、スカート、右足、左足、右ツインテ、左ツインテ
の9つのパーツに分かれています。
これはてんちゃんがくねくねとした動きをしているからで、動きの少ないものを作るときはもっと少ないパーツで済みます。例えば永夜抄の慧音のように直立でスカートのみ靡いているなら、パーツは2つ（本体・スカートなびき部分）でいいでしょう。
画像が猟奇的であれですが、足やスカートのように重なった部分もきちんと描いてあげましょう。
動く際にある程度余裕がないと、不自然な動きになったりパーツとパーツの間に隙間ができてしまいます。かわいそうなので、きちんと描きましょう。
ドット自体の描き方としては、普段描くようなイラストとほぼ変わりません。強いて言うなら、あまりに細かい部分は潰れて訳が分からなくなってしまうので、ある程度簡略化しましょう。
今回の場合は、頭のリボンや服についている飾りなどですね。線を何本か描くだけにしたり、複雑なパーツは丸や四角にしてしまいましょう。
パーツが揃ったなら、ついに動かす時です。準備はいいか？
動かす
みんな大好き、アニメーションのお時間です！
ここから先はアニメーション機能がついているソフトだと、差分管理と動きの確認が楽かもしれません。使い方は各自で調べてください。
本当は動かし方の解説をしたいのですが、あまり動かし方に自信が持てないため詳しくは「アニメーション 描き方」などでググった方が幸せになれます。基本はそれと同じです。
もしかしたら、Live2Dなどの動かし方も調べると参考になるかもしれません。
本来はアニメーションの描き方と同じく、一枚一枚動きを描いても問題ありません。が、東方的なドットにしては手が込みすぎると感じてしまいました。ですので、パーツを分ける→分けたパーツを回転・変形して動かす の手法を取っています。
ラフを見返して、想定していた動きの確認をします。今回やりたいのは、腕を動かしながらくねくねと腰を振る動作です。
アニメーションの中割りというものはご存知でしょうか。説明が難しいので各自検索してください。ドットを動かす際にも、同じ手法でやっていきます。
1.左に振れる→2.真ん中（下書きのポーズ）→3.右に振れる
となるようにパーツを配置してみました。体の中心が画像の中心から動かないように注意してくださいね。
この画像で言うと、12321232……という順番で動かしたいです。まずはこのまま動いてもらいましょう。あ、フレームレートは現在5fpsです。1秒間に5枚画像が表示できるということですね。
このままでも十分です。動いてもらうという目的は達成できました。
ですが、どうせ動くならもっとぬるぬる動いてほしいですよね？ ね？
先述の中割りをこのドット絵でもして、1と2、2と3の間にそれぞれ中間の動きを入れてあげましょう。
パーツ分けをしているので、1や3の画像のようにパーツを動かすだけで大丈夫です。新規に絵を描く必要はありません。
こんな画像を用意してあげましょう。さっきの画像の2と変わらない感じがしますね。さっきの123のアニメーションに挟んであげましょう。
挟む順番は「14253」です。
こんな感じになりました。
ややカクカクしているので、フレームレートを10fpsにしてみましょう。
完璧です！！！！
最高に可愛いですね。
動きができたので、1コマずつ画像を出力しましょう。ループする部分は使いまわせるので、各コマ1枚だけあれば問題ありません。
描き出すときに64*64pxに縮小するのを忘れないでくださいね。
最後に、縮小して潰れてしまった部分があったらそこを修正してあげましょう。目などを黒や赤の点にしてあげるとそれらしさが出ます。
あとは背景のRGBを0, 0, 0にするか透明にして、全ての画像を2の累乗のキャンバスにまとめてあげれば弾幕風で使用できますね。
自分以外の人が画像を使用する場合、まとめないでバラの画像を渡した方が喜ばれるかもしれません、が、相手次第だと思います。
雑な解説でしたが、これにて敵グラの作り方の解説は終了です。お疲れ様でした。
もっと文章と解説が上手な人がこのような記事を作ってくれることを祈っています。恥ずかしいので。
自機のグラフィックも敵グラと同じ要領で作れます。
敵グラと違うところは、本体に大きな動きがなく髪や服のなびきがメインなところでしょうか。
参考になればと、先日描いた自機霊夢さんのgifを貼って終わりたいと思います。
……実際に使用したものでは修正済みですが、このgifのように体の中心が画像の真ん中に合っていないと、左右移動させた際に当たり判定が変なところに出てしまいます。
リボンの中心などを基準にして、体の中心が絶対画像の中心になるようにしてあげてくださいね。
それでは、お疲れ様でした。
あ！ イラストの似せ方は各自勉強してくださいね！ 俺も知りたい！！
この記事が気に入ったらサポートをしてみませんか？