【中級編】ドラクエ風マップ、キャラクター画像の作り方

2017年12月22日中級編

ドラクエ風のマップとキャラクターを作ることで、見る人の頭の中にはあの日の冒険の思い出が再生されることになります。

一番手間がかかると思われる部分でもありますし、登場人物の部屋や持ち物、周囲の状況などを再現できる自由度が高く、作りがいのある部分でもあります。

１．素材を集める

一からマップやキャラクターの画像を作ることは、普通の人には相当ハードルが高い作業です。
（それができるほどのスキルを持っている人は、そもそもこのサイトを見ていないでしょう。）

まずマップやキャラクターに使える著作権フリーの画像を手に入れましょう。

マップ、キャラクター画像に役立つリンク

フリー素材

ゲーム制作用の画像素材を公開配布しているサイトです。
日本語サイトなのでわかりやすいです。
利用規約をよく読んで使用しましょう。

海外のゲームファンたちがオープンソースのゲームを作るために、著作権フリーで画像などのデータを公開しているサイトです。
好みの素材を探してみましょう。

ドット絵ツール

ひとつずつドットを打ってピクセルアートを作りたい人は、ブラウザ上でお手軽に始められます。
絵心がある人や、とりあえずドット絵に触れてみたい人にもおすすめです。

２．素材を並べて配置してマップを作る

用意した画像素材から、マップに使えるタイル状の画像をPhotoshop上で並べて配置し、自分の好きなマップを作ります。

ALTキーを押しながら選択ツールでドラッグすると、効率よくタイルをコピーできます。

３．フィールド用キャラクターを作る

用意した画像素材から、キャラクター画像を作ります。

素材のままで登場人物に合っていればそのままでもいいでしょうし、ちょっとアレンジを加えてみても面白いと思います。

加工するときは、つぎのことに注意するとうまくいくと思います。

キャラクターは16×16ピクセルで加工する

元になる素材のサイズにもよりますが、ファミコン版ドラクエ風のキャラクターであれば、キャラクターのサイズは16×16ピクセルになります。

素材のサイズが大きければ、16×16ピクセルに縮小して1つずつドットを打っていく（描いていく）とやりやすいと思います。

画像の拡大縮小はニアレストネイバー法を使う

画像を拡大縮小するときにPhotoshopのデフォルト設定の「バイキュービック法」などを使うと輪郭がぼんやりしてしまい、ファミコン風味が薄れてしまいます。

ファミコン風の粗いドットのまま拡大縮小するには「ニアレストネイバー法」を使いましょう。

設定は簡単で、Photoshopで「画像解像度」を変更するときや拡大縮小する時に、補間方法を「ニアレストネイバー法」にするだけです。

キャラクターの配置は少し上にずらす

キャラクターをマップ上に配置するときは、少し上にずらして配置するとファミコン版のドラクエに近づきます。

オリジナルのドラクエをよく見ると、完全にマップのタイルの上には配置されておらず、少し上にずらしてあります。
こうすることで、扉やお店のカウンターなどとの奥行きを表現していると思われます。

 著作権に注意（画像）

画像も音源と同じく著作権をクリアにしておく必要があります。
ゲームに登場する画像をコピーして使うことはNGです。
自由に使ってよい素材や、条件を守れば使える素材など、違法にならない画像を使いましょう。