Blockchain code Metaverse VR

Unity×VR×Blockchain(241)

スポンサーリンク

//tips

//unity/webview連動

昨日の続きで、前回の情報をもとに新たにTexture2Dで色付けしたものを生成することもできる。

Texture2Dは引数を取ることができ、第一引数はテクスチャの幅、第二引数はテクスチャの高さ、第三引数はテクスチャフォーマット、第四引数はミップマップを作成するか否かになる。

下記で1ピクセルごとの色指定がなされている。

Color col = new Color(1.0f, 0.0f, 0.0f, 1.0f); // Red/Green/Blue/Alphaの順に色指定.
for (int y = 0; y < m_texture.height; y++) {
for (int x = 0; x < m_texture.width; x++) {
m_texture.SetPixel(x, y, col);
}
}
m_texture.Apply();

SetPixel()で色指定、Apply()で確定する。

TextureFormat.ARGB32は色数が多くやピクセル単位が重要で、透過情報も必要なときに使用されるフォーマットでunityの画像にはこのようなテクスチャ形式が割り当てられている。

private static Texture2D _debugTexture = null;
private void OnGUI()
{
if (_debugTexture == null)
{
_debugTexture = new Texture2D(4, 4, TextureFormat.ARGB32, false);
for (int y = 0; y < _debugTexture.height; y++)
{
for (int x = 0; x < _debugTexture.width; x++)
{
Color color = new Color(1.0f, 0.0f, 0.0f, 0.5f);
_debugTexture.SetPixel(x, y, color);
}
}
_debugTexture.Apply();
}
var rect = _screenRect;
rect.yMax = Screen.height - _screenRect.yMin;
rect.yMin = rect.yMax - _screenRect.height;
GUI.DrawTexture(rect, _debugTexture);
}
}

ここから本題に入っていく。screenRectの情報を取得できているのでこれをwebviewの表示領域に適応させる。

まずは単純にWebViewSample2スクリプトのvar margins = WebViewUtils.ToMarginsの引数として[SerializeField] RectTransform _rectTrans;をimage画像のアタッチによって差し込んでみたが表示は全範囲でなされてしまっていた。

一旦初期の下記の形で考えていく。TestRectTransformToScreenSpaceRect スクリプトのCalcurateScreenSpaceRectとWebViewSample2のint[] CalcMargins(GameObject target)のどこに違いがあり後者でWorldCornersToScreenCornersを使用するとエラーが発生するのかを認識していく。

margins = CalcMargins(targetObject);
webViewObject.SetMargins(margins[0], margins[1], margins[2], margins[3]);

下記のようにwebviewsamplesを編集してみたが、なぜかgoogleの画面がimageの中に表示されない。

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class WebViewSample2 : MonoBehaviour
{
[SerializeField]
RectTransform targetObject;

WebViewObject webViewObject;

[SerializeField]
TestRectTransformToScreenSpaceRect TestRectTransformToScreenSpaceRect;

[SerializeField] RectTransform _rectTrans;

//WebViewUtils WebViewUtils;

int[] margins = { 0, 0, 0, 0 };

[SerializeField]
Camera mycamera;

void Start()
{
webViewObject = (new GameObject("WebViewObject")).AddComponent<WebViewObject>();
webViewObject.Init(
ld: (msg) => Debug.Log(string.Format("CallOnLoaded[{0}]", msg)),
enableWKWebView: true);

#if UNITY_EDITOR_OSX || UNITY_STANDALONE_OSX
webViewObject.bitmapRefreshCycle = 1;
#endif
// お好きなMarginにしてください
margins = CalcMargins(targetObject);
webViewObject.SetMargins(margins[0], margins[1], margins[2], margins[3]);

webViewObject.SetVisibility(true);
// お好きなURLにしてください
webViewObject.LoadURL("https://www.google.co.jp");
}

int[] CalcMargins(RectTransform target)
{

var canvas = target.GetComponentInParent<Canvas>();

Vector3[] targetWorldCorners = new Vector3[4];
target.GetWorldCorners(targetWorldCorners);//targetworldcornersに格納

Vector2[] targetScreenCorners = new Vector2[4];

targetScreenCorners[0] = RectTransformUtility.WorldToScreenPoint(mycamera, targetWorldCorners[0]);
targetScreenCorners[1] = RectTransformUtility.WorldToScreenPoint(mycamera, targetWorldCorners[1]);
targetScreenCorners[2] = RectTransformUtility.WorldToScreenPoint(mycamera, targetWorldCorners[2]);
targetScreenCorners[3] = RectTransformUtility.WorldToScreenPoint(mycamera, targetWorldCorners[3]);

margins[0] = Math.Abs((int)targetScreenCorners[0].x);
margins[1] = Math.Abs(Screen.height - (int)targetScreenCorners[2].y);
margins[2] = Math.Abs(Screen.width - (int)targetScreenCorners[2].x);
margins[3] = Math.Abs((int)targetScreenCorners[0].y);

return margins;
}
}

Marginsがうまく計算されておらず、初期設定の0になっていないかをデバッグで確認。
そうすると下記の数値が取得できた。

Debug.Log(margins[0]);//128
Debug.Log(margins[1]);//762
Debug.Log(margins[2]);//1604
Debug.Log(margins[3]);//2

marginsは0:左、1:上、2:右、3:下なのでこの数値は少しおかしいことがわかる。

一旦スクリーンのサイズを確認し、現在のimageのスクリーン位置を算出し確かめてみることにする。

まずは簡単に値を変えて実行。webViewObject.SetMargins(100, 100, 100, 500);にすると下がかなり削られることがわかる。width1726,height760での表示であることがcanvasからもわかるので上記のmarginsは数値の取得元がおかしいことになる。

webViewObject.SetMargins(100, 200, 1000, 200);とするとおおよその感覚がわかる。まずページは伸縮せずに一部削れた形で表示されるが、中央部分はきちんと反映対象に含まれている。そして、スクロールも機能する。

このようなmarginsの値にならない原因を探す。

まずはDebug.Log(targetScreenCorners[0]);などを表示させ確認する。

Debug.Log(targetScreenCorners[0]);//(128.3, -2.8)
Debug.Log(targetScreenCorners[1]);//(301.7, -2.1)
Debug.Log(targetScreenCorners[2]);//(122.3, -2.1)
Debug.Log(targetScreenCorners[3]);//(-106.5, -2.8)

となり描かれている点が、正方形のimageの各頂点と一致しない。平面に直す前のDebug.Log(targetWorldCorners[0]);の方も確認する。

Debug.Log(targetWorldCorners[0]);//(313.0, 330.0, 0.0)
Debug.Log(targetWorldCorners[1]);//(313.0, 430.0, 0.0)
Debug.Log(targetWorldCorners[2]);//(413.0, 430.0, 0.0)
Debug.Log(targetWorldCorners[3]);//(413.0, 330.0, 0.0)

こちらでは正常な値を取れている。RectTransformUtility.WorldToScreenPointの内容がうまくいっていないことが問題であることがわかった。

今回は平面であるためtargetWorldCorners[0]を計算に適用するだけで良いので、一旦そちらで反映を行えないか試してみる。

marginsの反映部分をtargetWorldCornersに変更する。

margins[0] = Math.Abs((int)targetWorldCorners[0].x);
margins[1] = Math.Abs(Screen.height - (int)targetWorldCorners[2].y);
margins[2] = Math.Abs(Screen.width - (int)targetWorldCorners[2].x);
margins[3] = Math.Abs((int)targetWorldCorners[0].y);

検索スペースの少しの部分しか表示することができなかったが無事にgoogleのページを移すことができた。

ここからはなぜRectTransformUtility.WorldToScreenPointが機能しなかったのかを探っていく。

 

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.