GameMaker 日本語掲示板

ドット絵を綺麗に描画する手法を教えてほしいです。

8 コメント
views
16 フォロー

現在ピクセルゲームを作っている初期段階なのですが、どうも綺麗にピクセルが維持されません。
カメラやオブジェクトの最終的な位置をround関数などで整数に直しているのですが、少し動かすだけでピクセルが太くなったり見えなくなったりします。

いろいろやってる内に何に原因があるのかわからなくなってしまいました。
1から処理を見直してみたいので基本的なことで気を付けるべきことなどがあれば教えてください。

lizu
作成: 2023/11/30 (木) 01:54:27
通報 ...
1

ドット絵が荒れないようにしっかり作りたい部分ですよね。
いろんな要素が絡んでいろんな現象が起きるので、初心者でも初心者じゃなくても悩むところだと思います。

ピクセルが荒れている様子のスクリーンショット
インスペクタでroom情報を見たところのスクリーンショット 

インスペクタの例
画像1

を投稿してもらえるでしょうか?

2

画像1
画像2
インスペクターと実際に歪んでいるゲーム画面の切り抜きです。
描画物が大きいので動かさないと分かりにくいかもしれませんが首輪あたりのドットの大きさが不ぞろいなのが見やすいと思います。
このオブジェクトはパーツごとに独立しており、それぞれ独自の動き方をします。例えば頭のパーツは1ドットずつ上下に動くなどの非常に簡単な動きです。

とりあえず動かし方を決めて多少の清書をした画像を載せてみたときにピクセル描画の問題点に気づいたのですがどうも直りません。

出力解像度に合わせて application_surfaceを操作するなどの文言は見つけましたが、具体的なやり方が見つからず、どういったものを指しているのかすらわかってません。
ゲームメーカーではピクセルアートをやる上で基本となる作り方などがあるのでしょうか?

3
asa 2023/11/30 (木) 19:40:57 修正

いくつか追加で教えてほしいのですが

  1. カメラなどの設定で拡大縮小表示させていますか?
  2. 元の画像を拡大表示させていますか?(image_xscale, image_yscaleなどで)

あと、試しに50px*50pxのドット絵(ピクセルが荒れてないものならなんでもいいです)を、同じように表示させた結果をスクショして見せてもらうことはできるでしょうか。
元の画像と結果を見比べたいので。

追記
この画像で試してもらえるでしょうか
画像1

4

画像1
50*50pxの四角いテスト画像を横に並べてみました。

カメラ設定を改めて見直したところ、このroomの前のroomがviewportが960560になっていました。
ですので結果的に当該roomでは33%ほどの拡大がされていたようです。試しにviewportを1280
720に直してみたところ、基本的な歪みは治りましたのでここが原因だったようです。
(画像の縮尺は変更していません。オブジェクトのスプライト設定部分にインポートしてそのままです。)

ただ今回のタイトルはウィンドウサイズは自由に可変でき、かつカメラの拡大縮尺もかなり使うものになる予定です。
上記の設定でもやはりカメラサイズ動かすと、マシにはなりましたがドット絵の歪みは出てきてしまいました。

ウィンドウサイズの可変はともかくとして、ゲームの基本システムとしてカメラサイズの拡縮はどうしても必須になってしまいます。
中途半端な倍率では歪みがどうしても出るものだとは思いますが、その影響を軽減できる方法などはあるでしょうか?

追記(追記画像に気が付かなかったので適当な画像を使ってしまいましたが根本的な原因は判明したので省略させてもらいます。追加で必要でしたらまた用意します。)

5
asa 2023/12/01 (金) 16:56:15 修正

とりあえず今出ている歪みが直ったということでよかったです!

スケーリングについてですが、GameMakerでは初心者向けの解説記事が複数ありますが大変複雑で難しく、
私はGameMaker歴がだいぶ長くなった今も理解できていません。
あまりにもいろんな要素が絡んでいて複雑で、正直、私には難しいです。
ここで初心者がつまずくのはGameMakerとして何とかしようと思わないのか?と以前から不満に思っている点です。

という私が認識していることを列挙します。
あくまでいいかげんな理解でのものなので、ちゃんと理解してる人の詳しい説明を望みます!

  • 元画像に対して拡大率を整数倍にしないと歪む
  • 元画像が縮小される拡大率で表示するとどうしても歪みが目につく
  • 拡大縮小率は、変化中は少数でも止める時に整数になるようにする
  • 画像(オブジェクトも)の表示位置が整数になるようにする
  • windowサイズを変えられて歪むのを防ぐにはGame Optionでwindowのアスペクト比を固定する
  • シェーダーでピクセルパーフェクトでの表示を実装するのも1つの手

私が気にしてることはこんなところです。間違ってる点があれば誰か指摘して欲しいです。

再度お断りしておきますが、私はちゃんとした理解ができてないので、
他に詳しい方がいたらぜひ回答の投稿をお願いしたいです。

6

基本的にはあらゆる位置を整数で扱い、拡大率も整数倍になるように作ることが基本なのですね。
確かにシェーダーのような機能を利用して基礎システムを考えるのは私にはまだかなり早そうです。

丁寧に回答いただきありがとうございました。

7
生高橋 2023/12/01 (金) 18:50:17

asaさん理解で自分も理解してます。
もし追加であるとすれば、ゲーム解像度と画像素材を大きくしていくことですかね。
低解像度よりも高解像度のほうが歪みの影響を受けにくいので。

8

確かに主義主張を横に置いといて、「ドット絵風のイラスト」を扱うほうが作りやすさと製作難易度は低くなりそうですね。
厳密なピクセルパーフェクトは非常に手間と難易度が嵩み易いようなので、そういった点も考え直してみます。