2015年1月25日日曜日

【Unity】タッチで飛び出すメニューみたいなものを作る【uGUI】

名称がわからないのでこういう表現になるんですが、ポチっと押すとグインと飛び出すメニューのようなものを作っていきます。
とりあえずスクロールビューを作ります。これは前回のおさらいです。

① Canvas > Panel > Vertical(Panel)
② Vertical > Button
③ Button をプレハブ化
    (同じものを複数扱う場合は必ずプレハブに)
④ Vertical > Button, Button, Button...
    (この時点では Button は全て同じ位置にある)
⑤ Vertical に Vertical Layout Group(Component) を追加
    (追加すると領域いっぱいに自動で Button(子オブジェクト)を配置してくれる)
⑥ Vertical に Content Size Fitter(Component) を追加、Horizontal Fit を Preferred Size に
⑦ Button に Layout Element(Component) を追加、 Preferred Height にチェック、値を入れる
    (デフォルトは 10、適当に大きくすると1つだけ Button が大きくなる)
⑧ 変更した Button のインスペクター右上の Apply を押す
⑨ Panel に Vertical Layout Group(Component) を追加、Panel > Vertical の Pivot > y を 1.0 に
⑩ Panel の名前を ScrollView にし、Sroll Rect(Component) を追加、Horizontal のチェックを外す
⑪ Scroll Rect の Content に Vertical を設定
⑫ ScrollView の Rect Transform の Width, Height を調整、アンカー位置も調整
    (アンカーの調整は Width, Height を変えたらその都度必ず行う方が良い、アンカーの設定にも依るが)

一段落、動かしてみましょう。

続いてスクロールバーを付けていきます。


⑫ Canvas > Scrollbar
    (Scrollbar は ScrollView の子にせず、ScrollView よりも下に作らないと画面に表示されない)
⑬ Scrollbar の Scrollbar(Component) の Direction を Bottom To Top に
⑭ Scrollbar の Rect Transform の Width を調整、アンカーも調整
⑮ ScrollView の Scroll Rect(Component) > Vertical Scrollbar に作成した Scrollbar を指定
⑯ ScrollView に Mask(Component) を追加

途中経過

いい感じです。


⑰ ScrollView より少しだけ縦に大きい MenuWindow(Panel) を作成、ScrollView と Scrollbar を放り込む
⑱ MenuWindow と同じサイズの Menu(Panel) を作成、 MenuWindow を放り込む
⑲ Menu の子に MenuButton(Button) を作成、大きさとアンカーの調整、色とかお好みで調整
⑳ Menu > Image(Component) > Color のアルファ値をゼロに
(Image のチェックを外しても多分問題ない)

途中経過

ここから Animator を使っていきますが、触ったことのない方は少し難しく感じるかもしれません。


① Menu を選択、Animationビューの記録ボタンを押して MenuStayDown.anim を作成
(Menu.controller は自動で作成されます)
② Add Curve > Rect Transform > Anchored Position を追加し、Add KeyFrame からキーフレームを作成、Menu の位置をキーフレームに記録し、アニメーションを作成する
③ 同様に MenuStayUp.anim, MenuUp.anim, MenuDown.anim を作成
④ Animatorビューに移り、各ステートを Transition でつなげる
⑤ Assetsフォルダに animファイルが4つできていることを確認、各アニメーションのループを切っておく

途中経過

Transition の設定が Exit Time になっているので現状ではオートで上下しています。

⑥ Animatorビューの左下にある Parameters から Bool型変数 UP を追加
⑦ スクリプトを書く、書いたら Menu にアタッチ
⑧ MenuButton > Button(Component) > OnClick() の設定を Runtime Only, MenuButton, Button.SendMessageUpwards, 呼び出す関数名(ここでは ControlMenuAnimator ) とする
⑨ Animatorビューから Transition の設定を変える
(Conditions を Exit Time から UP にし、true, false を選択)

Menu にアタッチしたスクリプト
using UnityEngine;
using System.Collections;

public class MenuOpener : MonoBehaviour {

    public void ControlMenuAnimator()
    {
        Animator _menuAnim = gameObject.GetComponent<Animator>();
        _menuAnim.SetBool ("UP", !_menuAnim.GetBool("UP"));
    }
}

シーン実行、動作確認

MenuButton の設定

ヒエラルキー

やりたいことがやれましたのでこれで終わります。
最後に、スクロールすると空白みたいなものが出て嫌な場合、ScrollView > Scroll Rect(Component) > Movement Type を Clamped にすると上端、下端でピッタリ止まりますのでお試しあれ。


参考:
お仕事募集中 【Unity】新しくなった4.6の新GUIでスクロールビューを実装してみる

2015年1月23日金曜日

【Unity】Unity 4.6.1 と Android SDK と

<追記>
ビルド、端末で動作確認できました。長かった…

Unity 4.6.1f1 にアップデートしたらアンドロイドにビルドできなくなってしまったというのが事の始まりでした。
どれが効いたのかわからないんですがやったことを羅列しておきます。

パッチを当てる(適用直後、Norton等に mono が弾かれている場合復元する)
・Android 5.0.1(API 21) と Android SDK Build-Tools(Rev 21) を SDK Manager を使ってインストール(SDK Manager は管理者として実行することを忘れない
・JDK を最新のものにする(現在の最新は 1.8.0_31 )
(・64bitマシンを使っている場合、C:/Windows/System32 から system64 に java.exe コピー(未実証))
・コンピュータのプロパティから SDK, JDK の環境変数を設定する(JDKについては必要ないかも、パスが通ったかはcmdで確認できる、それぞれ adb, javac と入力して反応があれば良い)
・Unity で Edit > Preferences > External Tools > Android SDK Location を確認
・C:\Program Files\Android\android-sdk (AVD Manager や SDK Manager のあるフォルダ)に zipalign.exe を入れる
・過去にビルドした事がある場合、生成する apk の名前を変えてみる
・Player Settings > Identification > Bundle Identifier も変えてみる

以上です。

既に書いた記録は何らかの形で役に立つかもしれないので一応残しておきます。

<追記おわり>



これは解決策ではありません。
Unityが動かなくなったりシステムを復元したりします。真似するとアンドロイドにビルドできなくなります。
既にビルドできなくなってしまった方向けの情報、何をしてどういうことが起こったかの記録です。
よろしければどうぞ。

ちなみにまだビルドできていません。何か情報があれば宜しくお願いします。

===========================================================


Unityのバージョンを 4.6.0f3 から 4.6.1f1 に引き上げました。
アンドロイドに Build & Run ができなくなりました。マジか…

出てくるポップアップとメッセージは以下。
Android SDK is outdated
SDK Build Tools version 20 < 21

どうもビルドツールが古いってことですね。Update SDK を選択してもどうしてもここで止まってしまいます。
Updaing Android SDK - Tools and Platform Tools...

そしてまた3択を迫られることになります。これを何回か繰り返しました。
管理者権限とかそういうので実行できないんですかねぇ…じゃあ Android SDK Manager に直接頼むからいいよと思い C: > ProgramFiles > android と下っていって直接起動した結果。

起動できませんでした。破損したのかな?いつの間に…
ということで公式ページから Android SDK のインストーラを持ってきて再インストールすることになりました。
Android SDK Manager でインストールするファイルはとりあえずこんなもんでいいんですかね?

インストール長い。耐える。何か失敗してるけどインストーラーは動いているので待ちます。

これで解決するかなーと思ってビルドしてみると…
Android SDK is outdated
SDK Build Tools version 0 < 23

おいおいどうなってんだ。

調べてみると 4.6.1 にして動かなくなったという例はけっこうあるみたい。
その中でパッチを当てたら解決したという話を見つけたのでパッチに頼ることにしました。
Unity を 4.6.1p4 にセットアップ。

プラグインを適用して起動してみるとシーンの実行すらできなくなっていました。

Internal compiler error. See the console log for more information. output was:

Norton が mono を自動削除している可能性があるとのこと。

本当だ。やってくれるじゃないの。
mono を復元してシーンの実行を確認。ビルド。

Unable to find suitable jdk installation.

Error building Player: UnityException: Unable to find suitable jdk installation. Please make sure you have a suitable jdk installation. Android development requires at least JDK 7 (1.7). The latest JDK can be obtained from the Oracle 
http://www.oracle.com/technetwork/java/javase/downloads/index.html

今度は JDK ですか。JDK 1.8.0 だ。文句ないだろ。

同じエラーが出ます。

再起動が必要なのかと思って再起動してもダメ。
環境変数Pathを設定してもダメ。(環境変数の設定についてはここを参考にしました)

システム復元しました(^q^)

復元したらUnityが開けなくなりました。
4.6.0f3 インストーラーをダウンロード、再インストール。
これでとりあえず開けました。
アンドロイドにビルドしてみましょう。
Build failure
Unable to list target platforms. Please make sure the android sdk path is correct. See the Console for more details.

Preferenceの設定に間違いはない。というか Preference > Android SDK Location も環境変数も 4.6.1 を落とす前と変わってない。これは間違いない。

そうなるともうこのエラーをどうしたらいいのかわからなくなってしまった。

そんなこんなしているうちに新しいパッチが来ていた。
4.6.0f3 → 4.6.1f1 → 4.6.1p5 にアップデートする。
今回も mono は消されてしまっていたので復元。
エディタ上でシーンの再生はOK。アンドロイドにビルド。

Android SDK is outdated
SDK Build Tools version 20 < 21

構わず Update SDK を押す。
Unable to update the SDK. Please run the SDK Manager manually to make sure you have the latest set of tools and the required platforms installed. See the Console for more details.

SDKのアップデートができないらしい。SDK Manager を使ってやってくれと言われている。
また公式ページに行って落とすことになる。システム復元でインストーラーが消えてしまっていた。

こうなれば SDK Build-tools を全部落としてやる。

終わったので再度アンドロイドにビルド。
21落としたと思ったんですがね…


またか。コンソールでエラー詳細を見る。

Error building Player: CommandInvokationFailure: Unable to update the SDK. Please run the SDK Manager manually to make sure you have the latest set of tools and the required platforms installed. See the Console for more details.
C:\Program Files\Java\jdk1.8.0_20\bin\java.exe -Xmx1024M -Dcom.android.sdkmanager.toolsdir="C:/Program Files/Android/android-sdk\tools" -Dfile.encoding=UTF8 -jar "C:/Program Files/Unity/Editor/Data/BuildTargetTools/AndroidPlayer\sdktools.jar" -

stderr[
Error:Invalid command y
]
stdout[

]


-Dfile.encoding=UTF8 -jar "C:/Program Files/Unity/Editor/Data/BuildTargetTools/AndroidPlayer\sdktools.jar" -

java.exe のシステム・プロパティ設定。さっきからこいつで止まっているような気がするぞ。
検索かけるとJAVA_HOME設定すれば直るという話が。うーん…堂々巡りな気が…
まぁ損はしないしもう一度JDK 1.8.0_31 に上げておこう。
再度環境変数を設定してトライ。
まぁダメでした。エラー内容は変わらず。
それから C:/Windows/System32 から system64 に java.exe コピーすれば直るという話もありました。自分のは 32bit なので関係ないですね。
zipalign.exe を Android SDK のあるファイルに入れれば直るとかいう話も。直りませんでした。

ちなみに Update SDK を無視して Continue を2回押すと

となります。
アップデートしようとすると Error:Invalid command y
Continueすると Error:Invalid command android

しばらくアンドロイドなしでやっていこう(提案)

Preferences で設定しても path 間違ってると言われちゃうと困る。
Preferences の設定は C:\Program Files\Android\android-sdk
コマンドプロンプトでは javac , adb 共に通るので環境変数関連は問題ない。

SDK Manager を開く。

やられた。落ちてない。管理者権限のせいか。
Android 5.0.1(API 21) と Android SDK Build-Tools をもう一度インストールする。
インストールが終わってから SDK Manager を再起動、必要なファイルが Installed になっていることを確認し、Unity を開く。
シーン実行を確認。アンドロイドにビルド。
かなりいいところまでいくが最後の最後で止まってしまう。

Installation failed with the following output: pkg: /data/local/tmp/Package.apk Failure [INSTALL_FAILED_INTERNAL_ERROR] 3146 KB/s (14977062 bytes in 4.648s) UnityEditor.BuildPlayerWindow:BuildPlayerAndRun()

ためしに Player Settings の Identification > Bundle Identifier を変え、ビルドする apk のファイル名を変えてからビルド。
ここで初めて通る。端末で動作確認。

2015年1月22日木曜日

【Unity】uGUIでスクロールビュー

スクロールビュー、非常に使えそうでしかもかっこいいので作ってみます。
やることを箇条書きにしてみましょう。

まずノードプレハブの用意

① Canvas > Image(name: Node) 作成
② Node > Image, Text, Toggle 配置、アンカー及び位置調整、Toggle の Label は消していい。
③ Node に LayoutElement Component 追加
④ LayoutElement の MinHeight に Node の Height と同じ値を入れる
⑤ Node をプレハブ化

続いてスクロールビューの作成

① Canvas > Create Empty(name: ScrollView)
② ScrollView のサイズ調整、範囲の設定
③ ScrollView > ScrollRect, Mask, Image Component を追加
④ ScrollView > Create Empty(name: Content)
⑤ Content の RectTransform の Pivot を (x:0.5, y:1.0) とする。((x:0.5, y:0.0) でも良い。)
⑥ Content に VerticalLayoutGroup, ContentSizeFitter Component を追加
⑦ ContentSizeFitter の VerticalFit を Preferred size に設定
⑧ ScrollRect の Content に Content(オブジェクト)を指定
ここでシーンのセーブ推奨。PCによっては Node が Content の範囲から溢れた時にディスプレイドライバが停止する。ScrollView に追加した Mask Component のShow Mask Graphic のチェックを外していると高確率で起こる。)
⑨ Content の下に Node(プレハブ) を沢山配置

Content の範囲から溢れるほど Node を配置(溢れた Node はマスクされます)
Mask の Show Mask Graphic のチェックを外している場合。

Mask の Show Mask Graphic のチェックをつけている場合。
付けないほうがかっこいい。(ディスプレイドライバが停止しなければ言うことないんだけど…)

動作チェック

割といいですね。
Contentの領域外に出ないように調整できればなお良いと思いましたのでちゃちゃっとやります。
ScrollView の ScrollRect Component の Horizontal のチェックを外します。

これで水平方向の移動が制限されます。

とりあえずこんなところですかね。
スクリプトを使えばuGUIのノードを動的に作れるらしいのですがまだそこまでやる必要はないかな。
アイテム沢山装備品沢山な ARPG とか FPS とかになってくると必要なんだろうけど現状考えていないので。


最近 uGUI をいじっていて便利な所だったりこれってどうなの?って所だったりが少しずつ見えてきたように思います。
画面の大きさ(Gameビューの大きさ)で Text の文字の解像度が自動調整されるとか…どうなんでしょうね、対応策は探せばあるのかな。
なんにせよ便利な代物に変わりはないですね。楽しいですよ、uGUI、是非やってみてください。



参考サイト:
テラシュールブログ UnityのuGUIでスクロールビューを作る

2015年1月20日火曜日

【Unity】uGUIでボタン作成、長押しまで

タイトル通りです。まずやりたいことを列挙します。

・uGUIでボタンをつくる
・モバイル端末に移す、モバイルでの動作確認
・ボタン連打、長押しの差別化

こんなところです。では早速やっていきましょう。

まず Hierarchyビューの create > UI > Button でボタンを作ります。
1クリックで最低限必要なものが全て作られます。

Gameビューにボタンが出てきます。


Canvas > Button にスクリプトの追加と On Click(UnityEngine.UI.ButtonClickedEvent)に対象として Buttonオブジェクトを追加。
On Click() は右下の + アイコンを押せば追加できます。

Runtime Only は Editor and Runtime でもいいんですが Off にはしないでください。
Off にするとボタンを押してもスクリプトが呼ばれなくなってしまいます。
Runtime Only と Editor and Runtime の違いはシーン未実行時に On Click() を実行するかの違いらしいのですが Button だと動作に違いはありませんでした。Button ではなく Slider とかだと機能何か違いが出るらしいのですが…
アタッチしたスクリプトはこちらです。
using UnityEngine;
using System.Collections;

public class ButtonTest : MonoBehaviour {
    public void ClickMyButton()
    {
        Debug.Log("Button is clicked");
    }
}

シーン実行、Gameビューのボタンを押して Console にメッセージが出ればOKです。

ボール動かしてみましょう。
ButtonTest.cs を以下の上書き、
using UnityEngine;
using System.Collections;

public class ButtonTest : MonoBehaviour {
    SphereMovement _sphereMovement;
    GameObject _sphere;

    void Awake()
    {
        _sphere = GameObject.Find("Sphere");
        _sphereMovement = _sphere.GetComponent<SphereMovement>();
    }

    public void ClickMyButton()
    {
        Debug.Log("Button is clicked");
        _sphereMovement.AddForce2Sphere();
    }
}

Sphere と Capsule を作成、Cube で地面を作って3つ全てに Rigidbody & 拘束条件追加。
Sphere に以下をアタッチ、
using UnityEngine;
using System.Collections;

public class SphereMovement : MonoBehaviour {
    public float _power = 5.0f;
    //Rigidbody _rigid;

    void Awake()
    {
        //_rigid = gameObject.GetComponent<Rigidbody>();
    }

    public void AddForce2Sphere()
    {
        rigidbody.AddForce(Vector3.right * _power);
    }
}

シーン実行、ボタン連打、

動きましたね。どうもデフォルトではボタンを押して離した時、つまりボタンが上がった時に On Click() で設定したスクリプトが実行されるようです。更に言えば上がる瞬間にカーソル(もしくは指)がボタン上になければ実行されません。

これ、押した直後にとか設定できないのかな?On Click() を使っている以上無理なのか。

モバイルに転送してみましょう。

モバイルでも動きました。しかしやけにボタンが小さいような…。これが前回問題になりそうで問題にならなかったやつかな?今回は無視します。


次は長押しの設定です。
出来合いのものだと現状無理らしいので作るしかないそうです。

UnityEngine.EventSystems の EventTriggerクラスの Pointer Down, Pointer Up を使う

ヒエラルキーにある EventSystem の Previewビューを見ていて、UnityEngine.EventSystems.PointerEventData.pointerPress を使えばできそうだなーと最初は思ってたんですがこのオブジェクトは EventSystems.EventTrigger.OnPointerDown のレシーバーっぽいのでやはり EventTrigger 使うのが正解のようですね。

以下のスクリプトを Button にアタッチします。
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.EventSystems;

public class UGUILongPress : MonoBehaviour, IPointerDownHandler, IPointerUpHandler
{
    public UnityEvent _onLongPress = new UnityEvent ();//長押しで呼び出すイベント
    public float _intervalAction = 0.2f;//イベントを呼び出す間隔、イベントは長押ししてる間何度も呼ばれる
    public bool _callEventFirstPress;// 押下開始時にもイベントを呼び出すフラグ//trueにすると連打との区別ができなくなる
    float _nextTime = 0f;// 次の押下判定時間
    public bool _pressed//押下状態
    {
        get;
        private set;
    }

    float _chargePower = 0.0f;
    //Reference
    GameObject _sphere;

    void Awake()
    {
        _sphere = GameObject.Find("Sphere");
    }

    void Update ()
    {
        if (_pressed && _nextTime < Time.realtimeSinceStartup)
        {
            _onLongPress.Invoke ();
            _nextTime = Time.realtimeSinceStartup + _intervalAction;
        }
    }

    public void OnPointerDown (PointerEventData _eventData)
    {
        _pressed = true;
        if (_callEventFirstPress)
        {
            _onLongPress.Invoke ();
        }
        _nextTime = Time.realtimeSinceStartup + _intervalAction;
    }

    public void OnPointerUp (PointerEventData _eventData)
    {
        _pressed = false;
        _sphere.rigidbody.AddForce((Vector3.right + Vector3.up) * _chargePower * 100.0f);
        _chargePower = 0.0f;
    }

    public void LongPress()
    {
        _chargePower += 1.0f;
        Debug.Log (_chargePower);
    }
}

インスペクター上でいくつか設定します。

設定が終ったら動作確認をしてみましょう。

長押しの動作を追加することができました。
ボタンの上にカーソルがある時にボタンを赤くする設定は Button のインスペクターで設定できます。

ひとまずはこんなところですかね、ちょっと問題も残っていますけど。

問題というのは長押しを実行すると加えて単押しも実行してしまうという事が1つ目。
もう1つはボタンからカーソルが外れた場合の処理。
現状、『 押し → 押しっぱなしでボタンからカーソルを離す → 離す 』 でも長押し動作が実行されてしまいます。このように。

ここらへんの処理を変えるにはスクリプトをいじるしかないです。必要に応じて追々やっていきます。その時にまたまとめようと思います。


<おまけ>
デフォルトの設定だと画面サイズが変わるとボタンが写らなくなってしまう、ということもあります。

Button のインスペクターでアンカーの位置を右上に変えておきましょう。


いいかんじですね。それではまた。



参考:
テラシュールブログ Unityの新GUI、UGUIのイベント制御について
チラ裏Unity uGUIでボタンのクリックイベントを取得
Unity公式Community Long press gesture on uGUI button?
West Hill 開発メモ [Unity][uGUI] uGUIでボタン 長押し 判定

2015年1月19日月曜日

【Unity】バーチャルパッドを追加してみる【Android】

Sample Assets (beta) for Unity 4. 6 の中にある複数のバーチャルパッド、いくつかいじってみました。

参考: テラシュールブログ Unityのゲームにスマホ向けなバーチャルパッドを追加する

テラシュールブログ様には本当にお世話になっております。
バーチャルパッドを使うためには、簡潔にまとめると…

① ヒエラルキーに EventSystem を追加
② ヒエラルキーにバーチャルパッドの Prefab を追加 (MobileSingleStickControlRig, DualTouchMobileControlsなど)
③ バーチャルパッド対応のコードに切り替え (Input → CrossPlatformInputManager)
④ Mobile Input > Enable (Disableでバーチャルパッドは消え、PCのキー入力が復活)

これだけやればOKらしいのでやってみました。追加するのは MobileSingleStickControlRig にしました。
①~④までやって再生ボタンを押してみたんですがバーチャルパッドは表示されませんでした。なぜ??

とりあえず実機に落としてみよう。ということで Build Settings をアンドロイドに指定して Build&Run 。そうしたら出ました。エディタにも実機にも出ました。

これ以降は普通に Mobile Input > Enable(Disable) を切り替え、再生ボタンを押すだけでGameビューにもSceneビューにも出るようになりました。
出なかったのは最初だけ。1回ビルドしなきゃダメなんですかね?

いい感じです。Gameビューでも動くのがグッドですね。
実機でも問題なく動きます。動作は思いの外良好です。


続いて DualTouchMobileControls についてやってみましょう。
タッチできるエリアをわかりやすくするためにロボットくんに出張ってもらいました。

実機縦

実機横

設定なんてなにもいじらずに使えそうですね。
ただ実機を横にした時に少し気になったことがありました。左右差があったんです。左端が遅い。
GetAxis の返す値は Rect の左端で -1.0 、右端で +1.0 になるはずです。しかし右端 +1.0 とするならば左端は(あくまで体感ですが) -0.7 ぐらいでした。

これ、多分実機のせいです。
iPad とかでもそうなんですけどスマホとかタッチパネルの画面端って補正がかかっていて少し内側をタップさせるんですよね。そのせいで -1.0 より大きい値になってしまっている。
Rect のアンカー位置を調整すれば解決しそうです。

テラシュールさんの記事ではモバイルに出力すると、タップできる Rect が超小さくなると書かれていたので内心ビビっていたんですがそうはなりませんでした。よかったです。

ちなみに ReferenceResolution.cs は見つかりませんでした。
このアセット、自分が昔落とした物と内容が所々変わっているようなので(2Dロボットのステージ構成とか)もしかしたら無くなってしまったのかもしれません。
インストールが上手くいってない可能性も微レ存。Import ALL 連打したのでないとは思いますが。


バーチャルパッドについてはこれくらいで終わります。
言っちゃなんですが多分使わないので。
単純にスマホとバーチャルパッドは相性が悪い、というかイラつく原因になる可能性が非常に高いのと(そもそもこれでアクションをやりたいと思わない、自分が)、GetAxisRaw な動きの方が好きなのでボタンを配置するにしてもスティックではないんですよね。

uGUIについては絶対に必要なのでこの先もやっていきます。



<追記>
ReferenceResolution の件なんですが私の勘違いでした。スクリプトの話ではなかった。
Canvas のインスペクターで設定できる値の話でした。

モバイルでボタンが超縮小されてしまう場合、Ui Scale Mode を Scale With Screen Size に変え、ReferenceResolution にモバイルの画面サイズ(XperiaA2の場合1280×720)を入力すればいいみたいです。

2015年1月15日木曜日

【Unity】ドット絵がぼやけて表示される【Android】

アンドロイドでビルドランするとドット絵素材がぼけて表示されてしまう。

ぼけぼけです。というわけで今回はその対策について少し調べてみました。

画像のインスペクターの Format を Compressed から Truecolor に変えると直るという情報を得たのでやってみました。

…が、直りませんでした。

XperiaA2の解像度はHD : 1280×720 なので 16×16 のウサギは小さすぎるのでは?と思いサイズを10倍にしたところきれいに表示されました。

真ん中にいるちょっときれいなウサギだけ160×160のウサギです。
拡大はMicrosoftのペイントを、透過処理はEDGEを使いました。
ちなみに160×160のウサギの Format を Compressed、Truecolorと変えてみましたが大きな違いは見られませんでした。

それから 64×64 の2Dドットユニティちゃんも試してみたんですが微妙にぼやけました。
スマホできれいに表示するにはけっこう大きいサイズにする必要があるみたいです。

PCのエディタ上ではさほど気にならないんですけどね…。でも比較するとエディタ上でも違いますね。元サイズが大きい画像の方がやはりきれいに映ります。


うーん…でも16×16の画像をきれいに映す方法はあるんじゃないかなぁ…



<追記>
某所で有益な情報を教えて頂きました。

素材のインスペクタにある Filter Mode を Point に変更するとテクスチャ補完が線形補完から近傍点になってドットの滲みは解消できる。
ただ、表示座標がきっちり液晶のピクセルの座標になっていないと波打つように伸縮するので注意。

…ということでしたのでやってみました。
左:16×16 FilterMode Point
右:160×160 FilterMode Bilinear

拡大。中間色が全くありません。若干色味が明るくなっているような…

Sceneビューでの表示がPersepectiveなのでカメラから見てオブジェクトが少し斜めになっています。その結果ドットが少し荒れています。

実機に落とし込んでみます。

滲みは全くありませんでした。ぼやけてないです。
ただやはり元画像が小さいとダメなようです。


FilterMode Point はピクセルを使った表現をする場合とても使えそうです。
ピクセルをキッカリ描画できる。これは利点です。
ただオブジェクトが斜めに傾いていたり0.5ピクセルずれが起こるとドット絵が荒れるので、描画するスクリーンの大きさがあらかじめ決まっている、もしくは指定できる環境でのみ力を発揮するのではないかと思われます。