JPPGBゲームコンテスト#1で発表をさせて頂きました疑似3Dシューティングゲーム「Power Guardians」の仕組み解説2回目となります。今回は、地平線の中心から放射状に延びる線の描画について解説をしたいと思います。
画面の中心から放射状に延びる線は、より遠近感を感じてもらうために描画しています。遠近感を感じさせるため、前の手順で地面に横線を引いて、奥から流れるようにアニメーションをさせてみましたが、本来ならその線というのは側面にも上側にも適用されていないと、おかしな話ですよね。ですが、今回作成するのは疑似３Dです。あらゆる方向に平面画像で描写をしていては、いくら画像を用意してもキリがありませんので、中央から放射状に延びる線を描くことで奥行を追加表現しているのです。色々なゲームで表現されている手法ですので、今回はこの方法を採用させて頂きました。
地面の放射状の線はSVGで作成しています。特に難しい計算式などは使用しておらず、24本の線を“polygon“を使用して描いているだけです。ゲームをプレイされた方は気付いていると思いますが一番上にある頂点の座標はプレイヤー機の動きと連動しています。そのため、 (Sc1_img_Player.X)/という座標はプレイヤー機のX座標の値と連動するようにセットしています。実際の設定では、移動量を半分にすることで、より遠近感を感じさせるように設定をしています。
下記にSVGのサンプルを置いていますので、試してみたい方は、画像コントロールを置いて、プロパティImageに張り付けてみてください。その際はプレイヤーの
画像コントロールも追加し、名前を”Sc1_img_Player”とします。
"data:image/svg+xml,"&
EncodeUrl(
"<svg width='"& Self.Width & "' height='" & Self.Height & "' viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<polygon points='0,0 "& (Sc1_img_Player.X)/2+350 &",0 -1500,250 -1600,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 -1500,250 -1600,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 -1300,250 -1400,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 -1100,250 -1200,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 -900,250 -1000,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 -700,250 -800,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 -500,250 -600,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 -300,250 -400,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 -100,250 -200,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 100,250 0,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 300,250 200,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 500,250 400,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 700,250 600,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 900,250 800,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 1100,250 1000,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 1300,250 1200,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 1500,250 1400,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 1700,250 1600,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 1900,250 1800,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 2100,250 2000,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 2300,250 2200,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 2500,250 2400,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 2700,250 2600,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 2900,250 2800,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 3100,250 2800,250 1136,0' fill='#33339966'></polygon>
</svg>"
)“polygon“で描く三角形の頂点のX座標をプレイヤー機のX座標（出来れば画像の中央）に合わせ、プレイヤー機を手動でマウスで掴んで動かしてみます。すると、放射状に描かれる線の頂点が、プレイヤーの動きに追随して動くのがわかるかと思います。
前回作成した横線と、今回の放射状の線を、高さを合わせて重ね合わせてみてください。続いて、2つの地面のコントロールの高さを、プレイヤー機（ Sc1_img_Player ）の縦の動きに合わせて変化するよう設定してみます。設定例を載せておきます。
Yは"440+Sc1_img_Player.Y/5"、Heightは"200-Sc1_img_Player.Y/5"としてみてください。
設定ができたら、マウス操作で編集画面からプレイヤー機の画像コントロールを動かしてみます。プレイヤーの動きに追随するように地面が動けば設定は成功です。
補足ですが、今回は、奥から流れる線と、放射状の線を別々のコントロールに分けてセットしました。この2つの内容は1つのSVGにまとめられそうなのですが実際に１つのSVGにまとめてしまうと、プレイヤー機を動かした際にアニメーションが固まってしまいました。SVGのアニメーション処理にプレイヤーの操作を加えるのはPower Apps 上では無理があるようです。
さて、地面の描画が出来たところで、次回はプレイヤー機の操作についてお話させて頂ければと思います。評価コントロールを使ったアクションは様々なゲームに応用ができるテクニックだと思いますので、どうぞお楽しみに。
