超我流・フランキ式ドット絵カラテ
はじめに
※この記事はWWA Advent Calendar 2024の13日目です。こんな怪文書が13日目でいいのか
もういくつ寝ると12/25ですね。そう、ソビエト連邦崩壊の日です。もしくはバーナード・ワイズマン伍長の命日です。
そんな特別な日、大切な人と特別なWWAを作ってともに年の瀬を過ごしたいですよね。しかし、我々の未来は決して安泰ではないのです。もしあなたの手元にあるマップ素材がデフォルト素材のジジイだけだったら？
そう、今こそドット絵を自給自足する術を知り、来たるべきジジイアポカリプスに備えるべきなのです。この記事を読めば準備は万端。世界がジジイに埋め尽くされ、あらゆる生命体が死滅したとしても、死の灰の底から再び蘇るのです。未来に備えよう！
……ということで導入も終わったので本筋に入りましょう。ここから先基本的にずっとこのテンションなので覚悟してください。
ドット絵に使うツール
検索すると色々出てきますし、なんならWindows標準のMSPaintでもできなくはないのがドット絵ですが、自分はAseprite一択です。
ドット絵に特化していて、かつ開発&サポートが止まっていないツールというのもありますが、個人的な決め手は良さげなインディーゲーでの採用率の高さ。
ディーゼルパンクディストピア曇らせSTG「溶鉄のマルフーシャ」とか、
あとドット絵好きなら知らない人はいない「メタルスラッグ」のakio御大が鋭意制作中の「Black Finger JET」とか。
他にも恐らくドット絵グラフィックのインディーゲームの相当割合がAsepriteを使用していると思います。
いつだって道具の評価は実績が決めるもの。カタログスペックだけ良くても制式化されて前線に出るのと戦争が終わるのとどっちが先か分からないような兵器よりも、各地の戦場に続々配備されて戦果を挙げているT-34やM4シャーマンの方が偉いのです。
あと、使用者が多いということは即ちこんな駄文よりもずっと丁寧な講座がそこらへんに転がっているということでもあります。この記事で説明しきれない機能が山ほどあるので、より深く知りたい方はGoogle先生を頼るべし。
因みにAsepriteの数少ないデメリットを挙げるなら、販売元がSteamなのでAsepriteを起動するつもりでSteam立ち上げたのにいつの間にかゲームで遊んでることが多々あるくらいでしょうか。心を強く持ちましょう。
……因みに体感だと自分の周りには国産・古参のドット絵ツールEDGE2の使用者が多い気がします。
「AsepriteとEDGE2どっちが良いの？」って質問が噴き上がるはずですが、自分は既にAsepriteのShading機能（後述）無しには5分と生きられない身体なので、その疑問はどこかで誰かが答えてくれるのを期待しましょう。マルナゲ！
ドット絵を打とう！
WWAWing用の画像データについて
さて、今回はWWA Advent Calendar用の記事ということでWWA用の画像データを作成していきます。すなわち、
40x40ピクセル
GIF形式
mapcg.gifパレット準拠
という縛りを自らに課します。
……実際問題、PNG形式の画像が使えるようになったWWAWingでは、下の2項目は縛りプレイ以外の何物でもないんですが、それでも今回は伝統を踏襲していきます。昔気質のマゾと呼んでください。
Step0: 真の男こそ資料に頼れ
ここからは実際のドット絵作成手順を見ていきましょう。
まずはどこのご家庭にもあるFive-seveN USG 5.7mmピストルを用意します。
……半分冗談ですが半分本気です。ドット絵に限らずですが、何かを形にするには資料集めが第一です。
例えば、銃でなく包丁なら本当にどこのご家庭にもあると思いますが、何も見ずに正確な形の包丁を描けますか？ ジャパニーズヤンデレソードになってはいませんか？ 毎日見ているものでも、人は案外形状を覚えていないものなのです。
資料を見ずに描くのが偉いというのは悪い魔法使いのわなだ。真の男こそ写真を集め、可能なら現物を手に取り、それからドリトスを食うことで過酷なMEXICOのたたかいに備えるのだ。それができなければ凶暴なメキシコライオンサソリに食われるか、うらぶれたバーでコロナをあおるだけの腰抜けとして生きるかだ。おまえはそうではないだろう。メキシコを生き抜く真の男になれ。
Step1: ざっくりと形出し
決断的にAsepriteを起動し、40x40ピクセルのキャンバスを新規作成し、mapcg.gifパレットを読み込ませます。なおAsepriteの基本操作とかは公式マニュアルなり他の人の講座なりを見てください。マルナゲ！（2回目）
今回は現物が手元にあるので、時短のためにReference Layer機能を使って先程の写真を読み込ませ、トレスしていきます。
やり方は色々ありますが、これくらい小さいドット絵であれば自分は主線を引かず、色をグリグリ盛ったり削ったりしながら形を出していきます。パテ盛りとヤスリがけを繰り返しているイメージです。
主線を引かない理由ですが、このサイズだと1ピクセルの線であっても相当太い線になり、シルエットに悪影響を及ぼしてしまうからです。物体の形状は色を塗った部分だけで再現し、その外側に必要に応じて輪郭線の縁取りを付ける程度が個人的にはちょうど良いです。輪郭を追加するステップは最後にやります。
そうして形になったのがこちら。完全なトレスではなく、デフォルメしながら要点を拾っていきます。例えばアイアンサイトなんか本来であれば1ドットに満たない大きさなんですが、オーバースケールになるのを覚悟で描き込みました。サイトがない銃なんて日の丸弁当の梅干し抜きみたいなモンですからね。
ところでなんだか色合いがサイケデリックですが、こうしてパーツ単位で色分けしておくのがポイント。こうしておかないと、自分でも自分が何を描いてるか分からなくなって混乱するためです。
今回はアニメーションもせず、またスライドとフレームで色分けされているので最初から黒と緑で塗っても何とかなるレベルですが、闇の武器を携え漆黒のマントを纏いダークネスドラゴンを従えた暗黒竜騎士とかやろうとすると確実に謎の黒い塊になってあたまがばくはつします。
あと、キャラクターの場合は頭・胴体・手足でレイヤーを分けておくとポーズや装備違いを作りやすいので今のうちにレイヤーを分けておきましょう。途中まで1レイヤーで作ってキリのいいところで分割してもいいけどね。
今回みたいなアイテムの場合は1レイヤーでも良いと思いますが、パーツ違いのバリエーションとかを作りたい場合もあるので時と場合によります。今回は本体は1レイヤー、後から追加するアタッチメントをそれぞれ別レイヤーで作っていきます。
Step2: 陰と光を塗り込む
突然ですが、模型の話をします。自分はウォーハンマーという兵士やらモンスターやらの駒を作って塗って対戦させるゲームを嗜んでいるのですが、ミニチュアを作るには
まず組み立てる
ベースになる基本色を塗り分ける
暗い・奥まった部分は暗い色、明るい・手前にある部分は明るい色を重ね塗りする
という段階を踏みます。
今から行うのはこれと一緒の作業です。ただし相手は立体物ではなく平面のドット絵なので、光と陰がどこにどう来るのかイメージしながら塗る必要があります。
まずはmapcg.gifパレットから良さげな色を選び、先程のサイケデリックガンをそれっぽい色でベタ塗りしていきます。
ここからAsepriteの便利な機能、Shading Inkのご登場です。パレットの中にグラデーションになった色を用意して選択すると、左右のクリックで明るい/暗い色を自動で乗せてくれるので直感的にゴリゴリ陰影を付けられます。これが本当に便利。
ちょうどmapcg.gifパレットはいい感じのグラデーションになっているので、使いたいあたりをドラッグして選択、なんかそれっぽくなるように陰と光を載せていきます。
便宜上数字を付けてみました。光が当たりそうなところ、エッジ部分、尖った部分などはプラス、奥まったところや陰になる部分はマイナスです。「出っ張った部分」を+1で塗ったら、「出っ張った部分の角」を+2や+3で塗ったりするとそれっぽくなります。
そして、ベース色から遠く離れた色になることを恐れる必要はありません。下のタイムラプス的なアニメーションを見ると、例えばスライドは現物を見ると黒一色で成形されていますが、光が強く反射する部分にはほとんど白に近いグレーを乗せているのが分かるかと思います。それでもトータルで見れば黒い部品に見えるのでヨシ。
塗っているとなんとなくグラデーションっぽくなってきますが、大切なのはグラデーションになるのはただの結果であって、グラデーションを作るのが目的ではないということです。
さっきの図で言う+1のドットの右隣が-1、左隣が+3であっても、最終的になんかそれっぽく見えてれば誰も気にしません。アレがビャーッときたところをガッとして、最後になんか良い感じのブツが出来ていればそれで良いのです。本能のままにひたすらカーソルをグリグリポンしていきましょう。
「輪郭のキワのドットは-1で、その隣は+0、+1……」みたいにクソ真面目に考えすぎると立体感や光源がログアウトし、漏れなくションボリな仕上がりになります。自分もそれに気付くまでヘタクソでした。
最後に必要に応じて輪郭を描き足します。別に無くてもいいんですが、運悪く背景パーツと物体パーツが同じ色で光学迷彩を発動してしまうことを自分はいつも恐れています。
Asepriteには自動で縁取りを付けてくれる機能がありますが、一度それで輪郭を付けた後、手動で細部を調整してあげるとより良い感じの仕上がりになります。
ついでに筆が乗ったのでカラバリを追加したり、マイクロドットサイトやウェポンライトを増設したりといった暴虐の限りを尽くして完成です。この記事で作ったFive-seveNやらジャパニーズヤンデレソードやらはWWAのDiscordチャンネルにブン投げておくので煮るなり焼くなりしてください。
俺は銃じゃなくて（任意）を作りたいんだという人へ
ここまでの手順は基本的なもので、アイテムだろうとモンスターだろうと背景だろうとやり方はだいたい同じです。より詳しく言うなら背景の場合描き込みすぎると逆に画面が見辛くなるよとか色々あるんですが、そのへんはフィーリングでなんかしてください。やってるうちにコツが見えてきます。マルナゲ！（3回目）
強いて言うなら、キャラクターを作るときには最初に素体を作って、それから服や髪を描き足していくようにすると頭身や絵柄の統一が取れます。
これについては、WWAコンテスト2023に出品してびっくりするほど人気がなかった「フランキ式殺伐コンバットパック」を見てもらうのが早いです。一つの素体から何種類もキャラクターを作っているのが分かると思います。
因みにこの時は細身体型の素体しか用意しませんでしたが、体型違いのマッチョ素体とかデブ素体とかを用意しておくとキャラデザインに幅を持たせることができるので、いま自分の手元には数パターンの素体がいます。
……ところでこの手法、ニンジャ洞察力をお持ちの読者諸氏なら同じWWA Advent Calendar2024のひかを=サンの記事と真逆のことを言っていることにお気づきになるかと思います。
「このキャラだけは表情を見せたいから顔を大きく」というのも正解、「人間なのは同じだから同じプロポーションで統一」というのもまた正解です。答えは描き手の数だけあります。色々試して自分なりの正解にたどり着いたり着かなかったりしましょう。多様性重点！
余談：因みにさっきから時々いるこの青いのは2011年頃に作って去年のアドベントカレンダー企画でWWAWingに移植した「量産少女」の主人公です。さすがに昨今のWWA Script全開の力作と比べるとアレだけど良かったら手に取ってみてね。
あとがき
さて、明日は池田哲次=サンで「自分がWWA用のドット絵を描くときに気を付けていること」です。奇しくも同じ構えだ。どんな内容か楽しみですね。少なくともこの怪文書よりは実用的な記事なんじゃないかな。
……ところでドット絵を打ってる間ずっと参考資料にマルイのFive-seveNをガチャガチャしてたんですが、手が滑ってフローリングに激突、スライド後端が粉砕して名誉の戦死を遂げたことを申し添えておきます。まさかこのドット絵が遺影になるなんて。
