テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

Unityでドット絵の1ドット単位移動

「ドット単位の移動」なる物についてTwitterにて話題があったので
やり方を書いておこうと思う。

今回は、レンダリング直前にドット絵的に中途半端な位置にあるオブジェクトの位置を補正し、レンダリング後に元に戻す方法を紹介する。

ドットベースの移動2
画面左はスムーズに動くが、画面右はドット単位で動く

やり方

Pixels to units で1ドットの大きさを1mにする。
これで1m動かした際に1ドット動くようになる。

ついでに、Filter ModeをPointにしてボカシを無くし、FormatをTrueColorにして圧縮をキャンセルする。

スクリーンショット 2014-07-06 14.38.42
次に、今作成したスプライをシーンに突っ込み、下のコンポーネントをアタッチする。

やってる事は簡単で、Update後・レンダリング前のLateUpdateに現在の座標を登録後、現在の座標を丸めて座標更新。こうする事で、INT単位で座標を動かす。で、レンダリングが終わるOnRenderObjectのタイミングで何事もなかったかのように座標を戻す。次のアップデートではちゃんとfloatの座標で表示される訳だ。

using UnityEngine;
using System.Collections;

[ExecuteInEditMode]
public class PixelBase : MonoBehaviour {

    private Vector3 cashPosition ;

    void LateUpdate () 
    {
        cashPosition = transform.localPosition;
        transform.localPosition = new Vector3
                        Mathf.RoundToIntcashPosition.x),
                        Mathf.RoundToIntcashPosition.y),
                        Mathf.RoundToIntcashPosition.z));
    }

    void OnRenderObject()
    {
        transform.localPosition = cashPosition;
    }
}

さて、このままだと大きすぎるので、小さくする。

空のオブジェクトを適当に作り、その中に先ほど作成したドット絵ベースのスプライトを突っ込む。次に下のコンポーネントを空オブジェクトにアタッチし、Pixel Sizeの値を1m相当にしたいピクセルサイズに設定する(つまり、32ピクセルの天子を1mとしたい場合、32と設定する)

で、最後にスプライトのスケールを(x:1, y:1, z:1)にする。これはグローバルスケールではなくローカルスケールなので、ここを変更すれば親オブジェクトが縮小した分小さくなる。これで、プリミティブボックス(四辺1m)と同じ大きさになるはずだ。

スクリーンショット 2014-07-06 15.20.52
物理演算を使わなければ意味は無いが、物理演算を使う場合はDefaultScaleを0.4くらいにしておくと良い。2Dゲームでキャラクターが1mもあると、大抵大きてモッサリ動く為だ。重力を上げるのは最終手段だ。

スクリーンショット 2014-07-06 15.09.42

using UnityEngine;
using System.Collections;

public class ResizeByPixel : MonoBehaviour 
{
    public int pixelSize;
    public float defaultSize = 1;

    void OnValidate()
    {
        defaultSize = Mathf.Max(0.0001fdefaultSize);

        ifpixelSize < 1 )
            return;
        float rate = defaultSize / pixelSize;
        transform.localScale = new Vector3(rateraterate);
    }
}

後は適当にカメラのSizeを調整すれば、概ねドットベースで動いているっぽくなる。
ゲーム内で動かす場合はposition、ドット単位で動かす場合はlocalpositionを使えばOKだ。
レンダリング結果をドット絵に合わせてるだけなので物理演算も使える。でも回転は勘弁な。

なんちゃってドット絵風ゲームに。

(ドットベースの移動かつピクセルパーフェクトは、マルチレゾリューション(複数解像度)かつ高解像度(意識して見ないとドットが視認出来ない)の環境が一般的な現在においては割と価値を見出すのは難しい)

ピクセルパーフェクト? コレがしたいのかい?

スクリーンショット 2014-07-06 15.17.24
フルHDピクセルパーフェクトでドット絵を置いた図

2014年七夕追記

Twitterでヒントを貰ったので、少し機能を更新した物を公開。実解像度とは別に想定解像度を設定して、想定解像度に対してピクセルパーフェクトにする版も作成した。
ソースコード

動作はこんな感じ。詳しい解説はまた今度。
…縦長ピクセルって需要あるのかな?あればソレも公開しようかしら

LikePixelPerfect.jpg


画像はえるるのだいありさんよりお借りしました。天子ちゃんマジ天子
(椛のドット絵もある)

このブログでは、皆様の意見・感想・調査対象を募集しています。何かあれば、下のコメント欄か@tsubaki_t1まで。