オイナルメモ帖

ask.fmに来た質問より

東方の霊夢をつくりたいです 教えてください

具体的に何がしたいのかよくわからないですけど、私に聞いてきたってことはドット絵でキャラチップ作りたいってことなんだろうなと勝手に解釈しました。
しかしながら、たぶんドット絵打ったことなさそうな感じだし、主にEDGEの使い方だけスクショ撮りましたので、作り方がわかっていただければ幸いです。

霊夢の作り方といっても一応スクショもありますが、今回はEDGEの使い方的な意味合いが強いです。
「東方　キャラチップ」「東方　歩行グラ」「東方　ホコグラ」などで調べれば霊夢のキャラチップは出てくるので、それをEDGEで読み込んだのを見ながらやってみると良ろし。（改変規約に注意）
（※その場合フルカラー画像だとインデックスカラーに変換するソフトが必要になります）


長いので続きを読むからどうぞ

---

と、言うわけで、ドット絵ソフトのEDGEをダウンロードするところから。
まずTAKABO SOFTでEDGEをDLしてきてください。


無事ダウンロードできたら、解凍して、フォルダ内にあるedge.exeを起動します。
起動するとこうなります。
↓

早速作っていきます。左上の新規作成をクリック


サイズなどを聞かれますので、サイズは32*32pix、カラーパレットは自分で作りますから全て黒を選択します。
（すでにあるパレットを使っても別に構いませんが、原色すぎてキツかったり、色が選びにくかったりするので自分で色を作るのをおすすめします。ドット絵っぽい色の作り方もうまい人のを見て学べば分かるようになります。）



左上にちっこいキャンバスが出たらOKです。


この状態で一旦保存しましょう。保存はいつしても構いませんが、はじめに名前を付けて保存し、緊急時にさっと上書き保存できた方がいいです。

場所はどこでもいいですが、私は目につきやすいデスクトップに作業スペースを置いています。できたら保管用フォルダにポイです。
名前もなんでもいいです。
しかし、拡張子は必ずpngかgifにしましょう。
ドット絵ではどちらかじゃないと様々な事情で疎まれます。
gifはアニメーションも作れるのでその関係上、それで保存する人が多いですが、
ゲームのエディタだと使えないことがあるので私はpngで保存しています。

最後に、拡張子を変更したら忘れずに「背景色を透過させる」にチェックを入れておきましょう。
長いので説明を省きますが、パレットで設定した「背景色」という色1色をPC上で見るときに透明にしてくれる機能です。EDGEでは基本的に背景色は透過せずに表示されますが、設定が上手くいっていれば出力された画像の背景は透明になっているはずです。
設定ができたら保存を押します。



保存ができたのでいよいよドット絵…と行きたいところですが、まだ少し準備が残っています。
まずキャンバスが小さすぎるので、虫眼鏡ツールで拡大してやります。
ツールを選択したらキャンバス上で何回か左クリックしましょう。

無事大きくなりましたが、これは画像のサイズが大きくなったわけではなく、
単に1ドットを大きく表示しているだけで実際のサイズは変わっていません。

そうしたら次に色を作ります。

一番最初から表示されているカラーパレットの、並んでいる黒い四角の左上をクリックします。
パレットウィンドウの下の方に「赤緑青」というバーが並んでますが、そこをいじって数値を変えてみてください。

キャンバスがカラフルに変化したと思います。
これはカラーパレットの左上が背景色に設定されていて、キャンバスが背景色で塗りつぶされているからです。
このようにドット絵ソフトは色を置いた後からでも、そのパレットの色を変えれば容易に色を変更できます。
(画像の種類にはおおまかにインデックスカラーとフルカラーという2種類があり、ドット絵ソフトはインデックスカラー画像を作るためのソフトなのでこういうことができるわけですが、ちょっとむずかしいし長いので割愛。普通のイラストソフトはフルカラー用なのでこういうことは出来ません。）

背景色を変えたところで、1pixグリッド（網線）が表示されていて少々見づらいのでこれを消します。
消さなくても描けますが、色が見づらいとちょっとつらい…。

---

…っと、ようやくメインの色を作ります。
このへんからは個人差があり、最初に色全部作ってしまう人や、作りながらやって最後に調整する人などいます。
（私は後者なので、教えるのめちゃくちゃ向いてないんですが、頑張って前者の人風にやってます。）
キャラクターの色を何色使うか最初に決めてやります。
博麗霊夢なので、肌色・赤・黒・白・黄色ってところでしょうか。
更にそれぞれを何色ずつのグラデーションにするかを決めるわけですが、キャラクターの色の割合や、ドット絵にした時に多いほうが良いとか少なくていい色があるので、そのへんは経験で学びましょう。
私はいつも肌色グラデ多めにするので、肌4色。
赤はそんなに無くても大丈夫なので、赤3色。
黒と白はまたいで使えるので、合わせて6色。
黄色は適当に、3色。使用するのは胸のリボンで、アクセントなので少なくても良いです。

と決めたところで、実際に作っていきましょう。
初心者の方に教えるのにあまり良くないのですが、グラデーションはEDGE側の機能にあるやつを使います。
使わないで自分でグラデーションの色合いを決めていったほうがいいですが、教える側の私がそれ超苦手なので、使って後から調整します。
まず、肌色4色なので、背景色の隣に、明るい肌色とその2個先に暗い肌色を作ります。


次に、パレットウィンドウの選択範囲ツールをクリックし、作った肌色をドラッグで囲います。（4色囲っています）


その状態のまま、パレット→グラデーション作成をクリックすると、囲んだ端っこと端っこの色から、何個分飛ばしているかを計算して、バランスよく間の色を作ってくれます。




その調子で他の色を作りましょう。


　↓↓↓
→←
　↑↑↑
透過されちゃってますが、ここにこの時点でのパレットが入っている画像置いておきますので、左クリック→右クリック→「名前をつけて画像を保存」してEDGEで開いてみてください。（完成ではないので、とりあえずこんなかんじで色作るよってことで）

ドット絵はよく「16色制限」と言って、画像に使われている色を背景色を含めた16色（ですから実際に使える色は15色）に制限して作られることがあります。
昔のゲーム用のドット絵が作られていた時の名残なのですが、その制限の中いかに美しいドットを打つかという暗黙の了解みたいなものがあり、変に色数オーバーするのがためらわれるのですが、最初のうちは気にしないでおきましょう。私は今も気にしないで行きたい。
似たような色があるならできるだけ新しく作らず、統一するくらいで良いと思います。（やってないけど）

---

色を作ったところで基本的な動作の確認です。
画像に書くのを忘れましたが、現在キャンバス用ツールは、虫眼鏡を選択している状態ですが、それを2個隣の鉛筆ツールに変えてください。虫眼鏡の隣の手のひらツールのそのまた隣です。
ドット絵は基本的に鉛筆ツールでポチポチ打っていきます。
鉛筆ツールから右隣は色々と便利な描画用ツールが揃っていますが、今回は使わなくてもできるので割愛。
興味がわいたら試してみてください。

鉛筆ツールを選択したらいよいよポチポチ開始です。
カラーパレットから左クリックで色を選択し(①)、キャンバスに左クリックで描画します(④)。
キャンバス上で右クリックすると、色をスポイトして描画色として取得することが出来ます。キャンバスに置いた色ならわざわざパレットに取りに戻らなくても良い(③)。
カラーパレットで右クリックすると、カラーパレットの背景色を変更しますが、あまり使わない上に、画像を出力した時に透過色がおかしくなるので、変に弄ってしまったらパレットの左上の色を右クリックして直しておきましょう(②)。

---

ということで説明終わりです。
こっから霊夢描きますが、特に教えることがないので、スクショ3枚しか無い。

まず、肌色と黒で顔を描きます。かわいいと思う顔のキャラチップのゲームを検索して真似るのが良いと思います。FFが一番好きなのでそれっぽく目の輪郭を強調しています。


髪の毛とリボンがあるので、顔の位置が変わり、それにともなって体が小さくなりました。
色をある程度置いて、全体像をはっきりさせます。


キャラをイメージ出来たので、カラーパレットの色を変えて調整しました。

赤がキツイので、柔らかめに。（Rを少し下げて、GとBは上げる）
袖やフリルの白はそのままだと赤と相反して強い色になるので、ちょっと赤っぽく（紫っぽく？）。
袖やフリルを赤っぽくしたら髪の黒が浮いてるので、明るさを調整し、赤毛っぽい感じに。
さっきの色味のまま調整してもいいんですが、服以外の色を服の色に寄せてあげるとよりしっとりと色がまとまります。
まあこの辺は好き好きで私もコロコロと変わりますが、

このチップのサイズだと解像度低めのゲームに拡大率2倍で表示されるのがちょうどいい
→となると、色数も多く使わないほうがそれらしく見える
→色数が多くないとなると、色味を近づけてあげるとまとまりやすい

って感じで今回はそうしました。
解像度が大きいゲームなら1ドットを小さく表示するので多少コントラストが強くてもあまり気にならないです。
その代わり綺麗にするために色数が多く必要になり、結果ドット絵を打つのが難しくなります。単純にでかいからむずいし大変というのもありますが。


（そういえば地味に黄色を肌色で代用して16色制限クリアしました。やった！）


完成したドット絵置いときますね。良ければ保存してパレットを確認してみてください。




あとできればアニメさせようかと思ったんですが、力尽きました。ごめん
でも正面絵できたら腕振って体を上下に揺らせば歩行になりますので、そのへんは既存のキャラチップ調べればわかると思います。
EDGEのアニメも「EDGE アニメ　作り方」と調べればわかりやすいのがいっぱい出てくるの思います。
今回はEDGE導入編ということで勘弁して下さい。