美学を損なわずにピクセルアートスプライトを回転させるにはどうすればよいですか?


11

私は今、巨大な「ゲームデザイン」の質問の前にいます。ピクセルアート風のゲームを作成しています。双線形補間を使用すると、アニメーションの問題の多くを解決できます。一方、もはや「ピクセルゲーム」ではありません。

バイリニア補間を使用すると、アニメーションは機能しますが、「ハイブリッドっぽく」見え、アートスタイルが失われます。アニメーションを台無しにするか、アートスタイルを台無しにする。どちらもないようです。

これを解決する他の方法はありますか?

ここに画像の説明を入力してください


4
それがあなたのゲームです。あなたが決めるのは:)
Vaillancourt

「モノリニア」補間(通常は単に「リニア補間」と呼ばれます)はオプションですか?
Philipp

1
私は、意見に基づいて聞こえないように質問を書き直しました。
Philipp

待って..。何?これを承認する必要はありませんか?:D
OC_RaizW 2016

1
また、シアリングによる回転の可能性もあります。これは、入力ピクセルを複製/削除/ブレンドせずに移動することです。
DMGregory

回答:


14

ピクセルアートの90度以外の角度による自動回転は、通常はうまくいきません。ピクセルアートの美学を維持したい場合は、通常、各角度でアートを再描画する必要はありません。

スプライトが実際に見るよりもはるかに高い解像度であるフェイクレトロな外観を使用する場合、グラフィックエディターで補間せずに整数係数でそれらをアップスケーリングし、実行時に線形補間で回転させることで回避できる場合があります。スプライトが元の方向にあるときにぼやけないようにするには、描画位置が最も近い整数に丸められるようにしてください(一部のグラフィックエンジン/フレームワーク/ライブラリでは、浮動小数点座標にスプライトを描画できるため、ぼやけが発生することがよくあります)。しかし、それは通常、手作業で達成できる品質に達しない、単なる怠惰な代替品です。

元のサイズのスプライトの例を次に示します。補間なしで係数3で拡大され、線形補間で30度回転されます。

ここに画像の説明を入力してください


1
基本的に、各「ピクセル」は10x10ピクセルまたはそのようなものになりますか?
ジョン

2
@ジョンはい、それは私が偽レトロで意味するものです。10x10は少し大きいかもしれません(もちろん、ターゲットとするハードウェアプラットフォームの解像度によって異なります)。しかし、それは基本的には考え方です。あなたは、16x32ピクセルアートピースのように見えるスプライトを持っていますが、実際には48x96のテクスチャであり、各「可視」ピクセルは実際には同じ色の3x3ピクセルです。
Philipp

thaaatは私が考えていたのとほぼ同じでした...
OC_RaizW

「可視」ピクセルが実際に3x3の実際のピクセルの正方形である場合、Starboundでも同じアプローチが使用されていました
trollingchar

15

見て RotSpriteを

RotSpriteは、Xenowhirlによって開発されたスプライトのスケーリングおよび回転アルゴリズムです。最近傍回転アルゴリズムよりもはるかに少ないアーティファクトを生成し、EPXのように、(ほとんどの補間システムとは異なり)画像に新しい色を導入しません。

RotSpriteの例

このアルゴリズムは、最初に画像を元のサイズの8倍に拡大縮小し、類似した(同一ではない)ピクセルを一致として扱う変更されたScale2xアルゴリズムを使用します。次に、境界ピクセルではないサンプルポイントを優先して、使用する回転オフセットを計算します。次に、大きな画像を元のサイズに縮小して回転する最近傍スケーリングと回転アルゴリズムを使用して、回転画像を作成します。最後に、ソース画像の対応するピクセルが異なり、宛先ピクセルに3つの同一の隣接ピクセルがある場合、見落とされた単一ピクセルの詳細が復元されます。

このアルゴリズムは、ゲームの描画コードの一部として自分で実装することも、事前に回転アセットを作成するために使用することもできます。ピクセルアートツールAsepriteは、Sprite Editorの一部としてを統合しています。

動作中のrotspriteのGIF

また、UnityでRotSpriteを使用する方法、およびRotSpriteに関するより一般的な情報については、このUnityフォーラムスレッドをご覧ください。


ねえ。私は団結のために、それをテストすることをダウンロードした-そしてそれは結果は通常のユニティ・ピクセルレンダリングよりもはるかに悪いです..しかし、おかげで
OC_RaizW

@OC_RaizWそれは起こらないはずです。Unityアセットの開発者に連絡してください。
Rudey 2017年

-4

ページの左上はオプションです:自動選択:グループとレイヤー。レイヤーオプションを選択して回転します。それは誰もあなたに言わない方法です。


4
どの画像エディタについて話しているのですか?質問では、特定のツールについては触れられていません。したがって、品質の低下を最小限に抑えて低解像度のスプライトを回転することが実際にとても簡単な画像エディタを知っている場合は、これらの手順のどれに該当するかを教えてください。
フィリップ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.