点睛集積＞色変え＞素材の色違いを作ろう

いきなり始まった、加工・改変から始めるドット絵講座

前からドット絵講座的なコンテンツを用意したいとは思っていました。しかし今日、ドット絵講座的なサイトは既にネット上に幾つもあります。一からドット絵素材を作りたい！という自作意欲旺盛な方は「ドット絵講座」「ドット絵　描き方」等のキーワードでググれば色々出てくる筈なので、その中から気に入ったものを選んで参考にすれば良いでしょう。ですので今更私が普通のドット絵講座サイトを作ってもあまり意味はないと考えます。では一から作るのではなく、既存素材の改変から始めてみるのはどうだろうか？という発想からこの記事を書きました。改変から始めれば、一からドット絵の描き方を覚えるよりは手っ取り早くクオリティの高い望みの素材を得ることができます。また、改変元の素材そのものがある種のお手本となり、自分でドット絵を描き始める時にも参考になるのではないかと思います。「あるサイトのフリー素材が気に入っているのでそれをメインに使いたい。でも自分のゲームに使うには素材の量が足りない。自分は絵心に自信がないので、足りない素材を完全な自作で賄うのは難しい」というような場合にはピッタリなのではないでしょうか。邪道と言われるかもしれませんが、そういうスタートの仕方もアリだと私は考えます。あ、もちろん改変素材を利用した作品を公開するつもりなら、改変OKの素材を選んでくださいね。自由にやりたい気持ちは解りますが、素材提供者の意思は尊重しましょう。（公開しないで自分だけで楽しむ、という手もありますが。私的利用の範囲なら大抵のことは大丈夫なはず…）


素材の色違いを作ろう　～色変換編
ここではチルノのドット絵を改変して、東方天空璋に出てくる日焼けチルノを作ってみることで、「色変換」による色違い素材の作り方を紹介します。今回の内容を理解すれば、既存のドット絵素材から髪や服などの色のみが違ういわゆる色違いキャラを量産することができるようになると思います。ちなみに天空璋のチルノは日焼け的に肌の色が変化している以外にも、胸にヒマワリのブローチが付いているなど細かな違いがありますが、今回は余計なことは考えず、肌の色の変更のみで満足するとします。なお、使用ツールはDotPainterALFARです。ALFARについては当サイト内に紹介記事が書いてあるので、知らない方はそちらも見てくださるとよろしいかと。 EDGEやEDGE2でも似た機能として「色置換」があるので、興味のある方は試してみると良いでしょう。今回紹介する方法以外にも色違いの素材を作る方法はきっとありますので、目的、状況やご自分自身に合った方法を選ぶと良いと思います。さて、今回の対象となるチルノのドット絵を早速読み込んでみます。 ALFARで普通に読み込みました。ファイルを読み込もうとした時に「減色設定」というウィンドウが出ずにすぐに読み込むことができたなら、今回の色変換が使えると考えて良いです。現在ドット絵に使われている画像データはPNG形式が多いですが、PNG形式の中でも大きく分けて2種類ありまして、256色あるパレットと呼ばれる色データを使用して作成されている画像データ（PNG-8）と、フルカラーの色数が使用されている画像データ（PNG-24及びPNG-32）があります。このうち今回の色変換の方法が使えるのは、前者のパレット式のPNG画像です。当サイトで公開しているドット絵素材はほとんどこちらのパレット式のPNG画像データですので今回の色変換は問題なく使用できますが、他の素材サイト様やご自分で作成されたPNGファイルですと、フルカラーのPNGになっていて今回の色変換が使用できないということがあるかもしれません。 ALFAR、EDGEとも256色以内の画像ファイルしか扱えず、 ALFARではフルカラーのPNGファイルを無理やり読み込むことはできますが、減色しないと読み込めないので、そこで256色かどうか判定できます。 EDGE2だとフルカラーでも読み込めてしまうので、PNGファイルなのにパレットが画像に使われている色と全然違っている場合はフルカラーのPNGファイルである可能性が高いです。話が逸れました。色変換を行うには、変換する対象のパーツにパレット上のどの色が使われているかを確認する必要があります。 ALFARでは右クリックにスポイト機能（カーソルの位置のドットに使われている色を拾って描画色にする機能）が割り当てられているので、それで使用色を確認します。今回は肌の色を変換したいので、肌に使われている色をスポイトで拾ってみます。上図のように、キャンバス上を右クリックして使われている色を探していきます。結果として、この辺の色が肌に使われている色であることがわかります。さて、このパレット自体をいじって色を変えるという方法も手っ取り早くて良いのですが、今回紹介するのはパレット自体はそのままでドット絵の色のみを変える方法です。こちらのやり方を覚えれば応用範囲は広いと思います。今回は肌の色を「暗く」するので、ドット絵の肌の部分を1～2段階ほど暗い色にずらすイメージになります。こんな感じで肌に使用しているパレットの色番号を変えるイメージです。では色変換を行っていきましょう。メインウィンドウ内のキャンバス外の場所で右クリックするとサブメニューが出ますので、その中の「色変換」を選びます。すると、下のような小さなウィンドウが出るはずです。この色変換用パレットが出ている間はペンや塗りつぶし等の描画が色変換モードになります。操作方法としては、色変換パレットの左クリックorドラッグで色変換元を選択し、右クリックで選択中の変換元に対する変換先の色を指定する感じです。色変換の設定前の準備として、「AをBに」チェックボックスをオフにし、「クリア」の文字をクリックします。「クリア」は色変換の設定をリセットするものです。慣れないうちはちょっとした操作ミスで色変換が設定されてしまったことに気付かない場合がよくあるので、色変換の設定前にはクリアを必ず行うようにしてください。では、いよいよ色変換の指定を行います。上画像の(1)の色を左クリックし、(2)の色を右クリックします。次に(3)の色を左クリックし、(4)の色を右クリックします。これで(1)の色が(2)に、(3)の色が(4)に色変換されるようになります。次は複数色まとめて指定を行ってみましょう。この青矢印をなぞるように左ドラッグした後…… このポインタの位置で右クリックします。すると、左ドラッグで指定した範囲の色をそれぞれ2つ先の色に変換する指定になります。複数色の指定の場合はその先頭の色が基準として指定されるということです。さて、これで目的とする色変換の設定は完了です。それでは、色変換を実行していきましょう。そうです。この時点ではまだ色変換そのものは実行していないのです。どの色をどの色に変換するかという指定を決めただけなので、その色変換を実行するまでは対象の画像そのものには変化はありません。ではどう実行するかというと、それはただ「塗ること」です。この状態でツールをペンにして描画をすれば、なぞった部分が色変換されます。四角塗りで描画すれば、その四角形の範囲が色変換されます。文字描画を行えば、その文字の部分だけ色変換されます。今回の場合は（というか大抵の場合はそうなのですが）画像全体を色変換したいので、全領域塗りつぶしを使います。まず、ストックウィンドウの赤い四角をドラッグして、画像全体を描画領域にします。そして、メインウィンドウ右下の領域にある… これが全領域塗りつぶしをするボタンです。ちなみに、このボタンはALFARでは意外とよく使う応用範囲の広いボタンなので覚えておきましょう。通常の色でこのボタンを押すとキャンバスが全てその描画色で塗りつぶされるのですが、これを色変換の状態で塗りつぶすと描画領域全体が色変換されます。こうなります。パレットを変更せずに一部の色を別の色に変換することができました。ちょっと黒過ぎるような気もしますが、これで気に入ったら画像を保存して終了です。透過色の設定を忘れずにしましょう。気に入らなければアンドゥで色変換前の状態に戻して、変換先の色をお好みの色に選択しなおして再度チャレンジしましょう。参考として、今回の記事から出来た日焼けチルノです。もっと天空璋のチルノに近づけたければ、ブローチやリボンの色を変えればそれっぽくなるでしょうから、今回の記事の応用として挑戦してみるのも良いと思います。
最後に
さて、なんで今更ALFARを採り上げてこんな記事を書いているかというと、もちろん当サイトの素材をより活用して欲しい、色違いの素材をいちいちこちらで用意するのがめんどくさい（ぁ）等の理由もあるんですが、他のツールにもALFARの使用感をマネして欲しいというのが大きいんですね。例えば今回のチルノですと、服の色だけを変えたいという場合。髪の色と服の色に一部同じ色を使っているので、これまで説明した知識だけで色変換しようとするとうまくいきません（髪の色も一緒に変換されてしまう）。ところがALFARの場合は対処する方法があって、色変換するときに全領域塗りつぶしではなく四角塗りツール等を使って、キャラクターの首から下部分だけを「色変換で塗りつぶす」ことで、服の部分だけを色変換することが可能です。全部を色変換するのに比べて一手間は掛かりますが、状況によって柔軟に対処することができます。 ALFARはドット絵素材を作成する上で便利な機能がただあるというのではなくて、非常に直感的で手触りの良い形で実装されていると私には感じられます。それがこのまま古い時代のソフトウェアとして忘れ去られていくのがもったいなくて、歴史の語り部としてこの記事が残ればいいな、と思っています。他のドット絵ツールについても触れておくと、EDGEでは「色番号を他の色番号へ置換」によって一色ずつの置換のみできます。複数の色を置換するには、この操作を何度も繰り返す必要がありますので、少々不便な機能です。一方、有料のソフトになりますが、EDGE2の「色置換」では複数の色を一度に置換することが可能です。 EDGE、EDGE2共にあらかじめ任意の領域を選択しておくことで、自分で決めた範囲のみを色置換することができます。 EDGE2は置換前に置換結果がわかるプレビュー機能もあり、色置換に関して見てもALFARと遜色ない柔軟な使い方ができる印象です。 GraphicsGaleには丁度良い機能がなく、色選択→塗りつぶしを行うか、カラーリプレイスを使って頑張れば一色ずつなら置換することができますが、色変換によって色違い素材を作るにはそもそも向いてないような気がします。GraphicsGaleを使うならパレットそのものを弄った方が良いでしょう。それぞれのソフトでの色違い素材の作り方を詳しく書くと、それだけで一記事書けてしまうぐらいの量になりそうなので、今回は自分の使い慣れたALFARでの方法のみということでご勘弁ください。


点睛集積 > 加工・改変から始めるドット絵講座 > 素材の色違いを作ろう