//tips
//unity/webview連動
Unity側にてスクロールができないか再度確認を行う。
確認したところ非常にもっさりしていたが固定画面内でのスクロールを行うことができた。google画面を一度クリックしていなかったことが昨日スクロールできなかった要因のよう。
そういえばwordpressなどのフレームワークを使用しているためスクロールのスクリプトを記述したことはなかったが、ドラッグイベント感知と画像の移動処理を組み合わせる仕組みになっていそう。3Dモデルを動かすのとイメージは同じかもしれない。
先のunity画面にカプセルと表示したい領域を設定し、そこにgoogleを表示させられないか検証してみる。
カプセル前にpanelを配置し、その中にgoogleなどのサイトの情報を表示させる方法を考える。
Panelのrecttransformを取得し、スクリーンの表示領域に対応させる。
https://qiita.com/fukaken5050/items/b0d0183c3c61630d9473
https://github.com/baba-s/UniWebViewMarginsFromRectTransform
先の参考ページにてWorldCornersToScreenCornersにてエラーが生じているので、WebViewSample2スクリプトにて反映オブジェクト取得部分から模索していく。
まずはrecttransformでの例があったのでそちらを参考にcanvas上の2d imageのrecttransfromを取得して、そこにページを反映できるようにしていく。
まずは位置情報の取得とデバッグ確認から行う。
上記参考ページのTestRectTransformToScreenSpaceRectスクリプトを参考に進めていく。こちらの[SerializeField] RectTransform _rectTrans;部分にcanvasに作成したimageを代入。
下記スクリプトを順次理解していく。
public class TestRectTransformToScreenSpaceRect : MonoBehaviour
{
[SerializeField] RectTransform _rectTrans;
private Rect _screenRect;
private void Update()
{
_screenRect = CalcurateScreenSpaceRect(_rectTrans);
}
反映したい2dオブジェクトのrecttransformを取得してCalcurateScreenSpaceRectを実行する。計算結果はRectという四角形のx,y,width,height情報となる。
private static Rect CalcurateScreenSpaceRect(RectTransform rectTrans)
{
var canvas = rectTrans.GetComponentInParent<Canvas>();
GetComponentInParentで親オブジェクトのcanvasコンポーネントを取得。
var camera = canvas.worldCamera;
新たに4点の座標をvector3で作成し、imageの4隅の情報を取得していく。
var corners = new Vector3[4];
GetWorldCorners (Vector3[] fourCornersArray);を利用することにより、arrayの形で4隅の情報を一度に入手できるので、取得した情報を
rectTrans.GetWorldCorners(corners);
ワールド座標をスクリーン座標に変換するにはRectTransformUtility.WorldToScreenPointを使う。ここでカメラが必要になっているのは、どのカメラにとってのスクリーン座標に変換するのかを定義しなければならないため。
var screenCorner1 = RectTransformUtility.WorldToScreenPoint(camera, corners[1]);
var screenCorner3 = RectTransformUtility.WorldToScreenPoint(camera, corners[3]);
ここからweb表示するscreenRect情報について整理していく。
//左下基準
var screenRect = new Rect();
screenRect.x = screenCorner1.x;
screenRect.width = screenCorner3.x - screenRect.x;
screenRect.y = screenCorner3.y;
screenRect.height = screenCorner1.y - screenRect.y;
Debug.Log(screenRect);
対角の点をとっているのでrectの４情報は入手できた。
#if false
//左、上、右、下
var margin = new Vector4( screenCorner1.x, Screen.height - screenCorner1.y, Screen.width - screenCorner3.x, screenCorner3.y );
Debug.Log("margin x:" + margin.x + "y:" + margin.y + "z:" + margin.z + "w:" + margin.w );
_WebView.SetMargins( (int)margin.x, (int)margin.y, (int)margin.z, (int)margin.w );
#endif
return screenRect;
}
ここまでで実行してやるときちんとCanvas上のimageをスクリーン座標に変換した値を入手できた。
(x:313.00, y:330.00, width:100.00, height:100.00)
これらの情報をもとに新たにTexture2Dで色付けしたものを生成することができる。
