Android用VRアプリを作成する(センサーにも対応) ~Delphiでお手軽プログラミング
はじめに
Android用VR(Virtual Reality)アプリケーションを作成します。(Delphiだとソースコードは超短いです。)両眼視差(右目と左目は位置が違う為、ずれが発生し、その違い[視差]により奥行きを感じる)とセンサーを使ってVRを再現します。
Android機用のVRゴーグルは980円くらいでアマゾンなどで販売されています。
![](./img/vr/goggle.jpg)
新規アプリケーションの準備
Delphiを起動し「ファイル」→「新規作成「→「マルチデバイスアプリケーション - Delphi」を選択します。
![](./img/vr/vr01.jpg)
空のアプリケーション を選択します。
![](./img/vr/vr02.jpg)
コンポーネントを追加
ツールパレットからTOrientationSensorをフォームへドラッグします。![](./img/vr/vr11.jpg)
ツールパレットからTLightMaterialSourceをフォームへドラッグします。
![](./img/vr/vr12.jpg)
ツールパレットからTGridPanelLayoutをフォームへドラッグします。
![](./img/vr/vr13.jpg)
GridPanelLayout1のAlignプロパティをClientに設定します。
![](./img/vr/vr14.jpg)
GridPanelLayout1のRowCollectionプロパティの「・・・」ボタンを押します。
![](./img/vr/vr15.jpg)
行1を選択し、削除ボタンを押します。
![](./img/vr/vr16.jpg)
以下のようになったら×ボタンで閉じます。
![](./img/vr/vr17.jpg)
ツールパレットからTViewport3DをGridPanelLayout1の上にドラッグドロップします。
![](./img/vr/vr18.jpg)
Viewport3D1のAlignプロパティをClientにします。
ツールパレットからTViewport3DをGridPanelLayout1の上にもう1つドラッグドロップします。
![](./img/vr/vr20.jpg)
Viewport3D2のAlignプロパティをClientにします。
![](./img/vr/vr21.jpg)
ツールパレットからTCameraをViewport3D1の上にドラッグドロップします。
![](./img/vr/vr22.jpg)
ツールパレットからTCameraをViewport3D2の上にドラッグドロップします。
![](./img/vr/vr23.jpg)
ツールパレットからTLightをViewport3D1の上にドラッグドロップします。
![](./img/vr/vr24.jpg)
ツールパレットからTLightをViewport3D2の上にドラッグドロップします。
![](./img/vr/vr25.jpg)
すべて保存ボタンを押します。
![](./img/vr/vr40.jpg)
保存ボタンを押します。
![](./img/vr/vr41.jpg)
名前を付けて保存ダイアログが出ますので、保存ボタンを押します。
![](./img/vr/vr42.jpg)
ソースコードの記述
(参考:キーボードのF12を押すと、ソース画面とデザイン画面が切り替わります。)構造のForm1をクリックし、オブジェクトインスペクタの「イベント」タブをクリックし、OnCreateの右側をダブルクリックします。
![](./img/vr/vr50.jpg)
usesにFMX.Objects3Dを追加します。
![](./img/vr/vr51.jpg)
FormCreateに以下ソースコードを追加します。
![](./img/vr/vr51_2.jpg)
procedure TForm1.FormCreate(Sender: TObject); var i:integer; cube:TCube; x,y,z:single; begin Viewport3D1.UsingDesignCamera:=False; Viewport3D2.UsingDesignCamera:=False; //ViewPort3DにCUBEをランダムに配置する Randomize; for i := 1 to 99 do begin x:=Random(50)-25; y:=Random(20)-10; z:=Random(50)-25; cube:=TCube.Create(self); cube.MaterialSource:=LightMaterialSource1; cube.Position.X:=x; cube.Position.Y:=y; cube.Position.Z:=z; cube.Parent:=Viewport3D1; cube:=TCube.Create(self); cube.MaterialSource:=LightMaterialSource1; cube.Position.X:=x; cube.Position.Y:=y; cube.Position.Z:=z; cube.Parent:=Viewport3D2; end; //両眼視差が発生するようにメラの座標を設定 Camera1.Position.X:=-0.4; Camera2.Position.X:= 0.4; Camera1.Position.Z:=0; Camera2.Position.Z:=0; //ライトの方向を調整 Light1.RotationAngle.X:=285; Light2.RotationAngle.X:=285; Light1.RotationAngle.Y:=330; Light2.RotationAngle.Y:=330; //センサーをオンにする OrientationSensor1.Active:=True; //センサーの更新間隔を33ミリ秒にする OrientationSensor1.Sensor.UpdateInterval:=33; end;
キーボードのF12キーを押し、デザインモードに切り替えOrientationSensor1をクリックします。
オブジェクトインスペクタの「イベント」タブを選択し、OnSensorChoosingの右側をダブルクリックします。
![](./img/vr/vr52.jpg)
以下ソースコードを追加します。
![](./img/vr/vr53.jpg)
procedure TForm1.OrientationSensor1SensorChoosing(Sender: TObject; const Sensors: TSensorArray; var ChoseSensorIndex: Integer); var i: Integer; begin for i := 0 to High(Sensors) do begin if TCustomOrientationSensor.TProperty.TiltX in TCustomOrientationSensor(Sensors[i]).AvailableProperties then begin ChoseSensorIndex := i; Exit; end; end; ChoseSensorIndex := 0; end;
キーボードのF12キーを押してデザインモードに切り替えます。
ツールパレットからTTimerをフォームでドラッグドロップします。
![](./img/vr/vr54.jpg)
Timer1を選択して、オブジェクトインスペクタの「プロパティ」タブをクリックし、Intervalを33にします。
![](./img/vr/vr55.jpg)
Timer1を選択して、オブジェクトインスペクタの「イベント」タブをクリックし、OnTimerの右側をダブルクリックします。
![](./img/vr/vr56.jpg)
以下ソースコードを追加します。
![](./img/vr/vr57.jpg)
procedure TForm1.Timer1Timer(Sender: TObject); var x,y:single; begin x:=-OrientationSensor1.Sensor.TiltX-90; y:=OrientationSensor1.Sensor.TiltZ+360; Camera1.RotationAngle.Y:=y; Camera2.RotationAngle.Y:=y; Camera1.RotationAngle.X:=x; Camera2.RotationAngle.X:=x; end;
プロジェクトマネージャのターゲットプラットフォームのAndroidをダブルクリックします。
![](./img/vr/vr60.jpg)
メニューバーのプロジェクト⇒オプションをクリックします。
アプリケーション⇒向きをクリックします。
「カスタムの向きを有効にする」にチェックを入れます。
横(ホームボタンが右)、横(ホームボタンが左)にチェックを入れて、アプリケーションが縦向きにならないようにします。
OKボタンをクリックします。
![](./img/vr/vr61.jpg)
実機をPCにつなぎ、実行ボタン(右向きの三角ボタン)をクリックすると、 ソースコードがコンパイル、apkファイルが実機に転送されAndroid上で動きます。
![](./img/vr/vr70.jpg)
VRゴーグルにAndroid実機セットしてゴーグルを装着すれば3D体験ができます。