PowerApps GameDev#3 カメラ画像の上にイメージをオーバーレイする

本日のゴール

こんなことができるようにする。

※ちょっと画像怖くてすみません。

何のために使うの？

そりゃARとかそういうことの為でしょうがｗｗｗ
それ以外にも動画の上で何らかの情報表示をさせたい時
予め作成した画像を指定した範囲内に表示するとかそういうのにも使えるんじゃないかと

参考にさせて頂いたサイト

@h-nagao さんの
PowerAppsでタコメータをつくる

株式会社TAM様
CSSだけで画像トリミングできたよ

早速製作開始

トリミング用のCSSを用意

trimming.css

.trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
}

これをPowerAppsに反映させるには

@h-nagao さんのページにもあるように、HTMLテキストを使用します！

入力する内容ですが、CSSはDIVタグに直接書く必要があるとのことなのでこうします。

Htmltext1(HtmlText)

"<div style='
	position: absolute;
	top: 0%;
	left: 0%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 50%;
	height: auto;
'>
</div>"

これで上記のCSSと同様の宣言をすることができました。
しかし、これでは、画像が指定されていませんので何も表示されないです。

そこで、DIVタグの間にIMGタグを使用して予めPowerAppsにアップロードしているこちらのイメージデータを指定しましょう。

Htmltext1(HtmlText)

"<div style='
	position: absolute;
	top: 0%;
	left: 0%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 50%;
	height: auto;
'><img src='" &  talk4_green_man  & "'>
</div>"

さて、表示されましたでしょうか？
多分表示されないと思います・・・。
PowerAppsにアップロードしたイメージデータのパスではなく、Base64のデータを渡しているため表示できないんじゃなかろうかと思われます。
イメージ指定すると

appres://resources/<イメージ名>

となってしまい、これが読めないっぽいですね。
多分仕様なんでしょう。

とりあえずURLを直指定してやりましょう。

Htmltext1(HtmlText)

"<div style='
	position: absolute;
	top: 0%;
	left: 0%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 50%;
	height: auto;
'><img src='https://1.bp.blogspot.com/-sT0aNSDSNd8/W6DT3AoIEtI/AAAAAAABO_4/OH0B97M-Hu8lyzYFM6V1m-z0qCx-WV_bgCLcBGAs/s800/talk4_green_man.png'>
</div>"

すると、こんな感じに表示されると思われます。

あとは、スライダーなどを使用して、動的パラメータをLeftなりTopなりのところに代入すれば
イメージがいい感じに動き、HTMLテキストの範囲内でのみ表示されるようになります。

最終系

Htmltext1(HtmlText)

"<div style='
	position: absolute;
	top: 0%;
	left: "& Slider1.Value &"%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 50%;
	height: auto;
'><img src='https://1.bp.blogspot.com/-sT0aNSDSNd8/W6DT3AoIEtI/AAAAAAABO_4/OH0B97M-Hu8lyzYFM6V1m-z0qCx-WV_bgCLcBGAs/s800/talk4_green_man.png'>
</div>"

オーバーレイについて

PowerApps自体、レイヤー構造になっているので、カメラ上になんらかのオブジェクトを置けば
それだけでオーバーレイにはなるのですが、やはり独自の凝ったイメージを貼り付けたいといったとき
PowerAppsの線とか□とかを組み合わせてつくるのは結構面倒なものです。
今回はその打開策の一例として紹介させていただきました。
他にもこんなやりかたがあるよ！なんて情報があればぜひコメントなどで教えてください！