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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2021 All Rights Reserved Powered by AFFINGER5.