【ウディタ講座】ドット絵マップチップを綺麗に拡大する方法。【32px⇒40px】
こんばんは、氷瀬るんです。
【ウディタ講座2回目】の今回は、
【ドット絵マップチップを綺麗に拡大する方法】
についてお話します。
最近は高解像度のRPGゲームが増えて、【40×40px】以上の
大きなサイズのマップチップを扱うことが増えますよね。
でもそこで問題が。
……そう、昔からある【16×16px】、【32×32px】のマップチップはたくさん見つかるけれど、
【40×40px】以上のマップチップは
探しても探しても見つからない……!!
無理やりイラストソフトで拡大したり、シャープをかけてみても、
輪郭がぼやけてしまってドット絵ではなくなってしまう。
そうさ、こんな風に………↓

※マップチップ素材をお借りしました。 ⇒マップチップ素材:ぴぽや 様
これは、【16×16px】のマップチップを一般的な【バイリニア法】で
【40×40px】に拡大した画像です。
謎の線が入って、輪郭がぼやぼやに………なんとも無惨。
かと言って、修正するのも一から自分で作るのも手間と時間がかかるし、どうにかならないか………
もちろん、一から作り直すのが一番綺麗ですが、
今回はイラストソフトの機能を使用して、ワンタッチでかんたんキレイ!!
【ニアレストネイバー法】で拡大してみたいと思います。
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
≪ ~作業の流れ~ ≫
1. イラストソフトを起動
2. 【ニアレストネイバー法】で拡大する
3. 完成!
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
≪1. イラストソフトを起動≫
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
まず、工程2で 【ニアレストネイバー法で拡大する】機能を
使用するため、この機能がついているイラストソフトが必要です。
例) Photoshop、CLIP STUDIO PAINT
今回は【CLIP STUDIO PAINT】というイラストソフトで作成していきます。
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
≪2. 【ニアレストネイバー法】で拡大する≫
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
①イラストソフトにマップチップを読み込みます。
②画像を拡大します。
普段はデフォルトの【バイキュービック法】などで拡大・縮小をしている方が多いと思うので、
設定を【ニアレストネイバー法】に変更します。
【32×32px】のマップチップを【40×40px】に拡大するため、
【1.25倍】の拡大をかけます。【16×16px】の場合は【2.5倍】。
★【Photoshop】:
【イメージ】⇒ 【サイズ変更】⇒ 【画像解像度】⇒ 一番下のプルダウンメニューで【ニアレストネイバー法】を選択

★【CLIP STUDIO PAINT】:
【編集】⇒ 【画像解像度を変更】⇒ 補間方法のプルダウンメニューで【ハードな輪郭(ニアレストネイバー法)】を選択

今回は例として、【32×32px】の麗ちゃんのドット絵アイコンと、【16×16px】のマップチップを用意しました。

さぁ、どうですか?
【ニアレストネイバー法】で拡大した時だけ、輪郭がにじんでいませんし、
謎の線も入ってないですし、ドットが潰れずにきれいに仕上がったのではないかと思います。
※ただし、ニアレストネイバー法は非整数倍ですと激しく劣化することもあるようなので、
状況に応じて使い分けてください。
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
≪3. 完成!≫
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
ドットを打ち直すのが一番綺麗に仕上がりますが、
量が多い時には頼ってみるのもいいと思います。
ではまた、気が向いた時に。
氷瀬 るん 拝
【ウディタ講座2回目】の今回は、
【ドット絵マップチップを綺麗に拡大する方法】
についてお話します。
最近は高解像度のRPGゲームが増えて、【40×40px】以上の
大きなサイズのマップチップを扱うことが増えますよね。
でもそこで問題が。
……そう、昔からある【16×16px】、【32×32px】のマップチップはたくさん見つかるけれど、
【40×40px】以上のマップチップは
探しても探しても見つからない……!!
無理やりイラストソフトで拡大したり、シャープをかけてみても、
輪郭がぼやけてしまってドット絵ではなくなってしまう。
そうさ、こんな風に………↓

※マップチップ素材をお借りしました。 ⇒マップチップ素材:ぴぽや 様
これは、【16×16px】のマップチップを一般的な【バイリニア法】で
【40×40px】に拡大した画像です。
謎の線が入って、輪郭がぼやぼやに………なんとも無惨。
かと言って、修正するのも一から自分で作るのも手間と時間がかかるし、どうにかならないか………
もちろん、一から作り直すのが一番綺麗ですが、
今回はイラストソフトの機能を使用して、ワンタッチでかんたんキレイ!!
【ニアレストネイバー法】で拡大してみたいと思います。
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
≪ ~作業の流れ~ ≫
1. イラストソフトを起動
2. 【ニアレストネイバー法】で拡大する
3. 完成!
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
≪1. イラストソフトを起動≫
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
まず、工程2で 【ニアレストネイバー法で拡大する】機能を
使用するため、この機能がついているイラストソフトが必要です。
例) Photoshop、CLIP STUDIO PAINT
今回は【CLIP STUDIO PAINT】というイラストソフトで作成していきます。
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
≪2. 【ニアレストネイバー法】で拡大する≫
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
①イラストソフトにマップチップを読み込みます。
②画像を拡大します。
普段はデフォルトの【バイキュービック法】などで拡大・縮小をしている方が多いと思うので、
設定を【ニアレストネイバー法】に変更します。
【32×32px】のマップチップを【40×40px】に拡大するため、
【1.25倍】の拡大をかけます。【16×16px】の場合は【2.5倍】。
★【Photoshop】:
【イメージ】⇒ 【サイズ変更】⇒ 【画像解像度】⇒ 一番下のプルダウンメニューで【ニアレストネイバー法】を選択

★【CLIP STUDIO PAINT】:
【編集】⇒ 【画像解像度を変更】⇒ 補間方法のプルダウンメニューで【ハードな輪郭(ニアレストネイバー法)】を選択

今回は例として、【32×32px】の麗ちゃんのドット絵アイコンと、【16×16px】のマップチップを用意しました。

さぁ、どうですか?
【ニアレストネイバー法】で拡大した時だけ、輪郭がにじんでいませんし、
謎の線も入ってないですし、ドットが潰れずにきれいに仕上がったのではないかと思います。
※ただし、ニアレストネイバー法は非整数倍ですと激しく劣化することもあるようなので、
状況に応じて使い分けてください。
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
≪3. 完成!≫
*★*――――*★**★*――――*★**★*――――*★* *★*――――*★**★*――――*★*
ドットを打ち直すのが一番綺麗に仕上がりますが、
量が多い時には頼ってみるのもいいと思います。
ではまた、気が向いた時に。
氷瀬 るん 拝
- 関連記事
-
- 【ウディタ講座】ドット絵マップチップを綺麗に拡大する方法。【32px⇒40px】 (2020/05/10)
- 【ウディタ講座】ウディタ用オートタイルの作り方。 (2020/05/08)