React VRとはFacebookが開発している、JavaScriptでVRを開発できるフレームワークです。 ReactVRの空間内を移動するボタンを作ってみたので、その内容を共有します。
動作環境
下記の環境で動作させました。
名前 バージョン Ubuntu 17.10 Node.js 9.1.0 React VR 2.0.0 Chromium 62.0.3202.75 プログラムの説明
index.vr.jsを変更し、static_assetsにhalake_logo.pngというファイル名でHaLakeのロゴを置きました。 index.vr.jsの変更内容を説明します。
視点の設定
<Scene style={{ transform: [ {translate: [this.state.translateX, this.state.translateY, this.state.translateZ]} ] }} />
Scene の操作で視点の位置を変更できるため、this.stateの値に応じて座標を変更できるようにしました。
ボタンの設置
<View style={{ transform: [ {translate: [this.state.translateX, this.state.translateY + 2, this.state.translateZ - 6]} ] }}> <VrButton onClick={()=>{ this.setState({translateX: this.state.translateX - 1}) }}> <Text style={styles.button}> Left </Text> </VrButton> .. .. </View>
視点と一緒に操作ボタンも移動してほしいので、ボタンを囲むviewの座標をstateで設定しています。 ボタンがクリックされたら、setStateで座標位置を更新しています。
画像の設置
<Image style={{ width: 1, height: 1, transform: [ {translate: [-0.5, 0, -4]} ] }} source={asset('halake_logo.png')} />
移動したことが分かるように、移動しない画像を設置しました。
画像データは static_assets に置いています。
デモ
動作させた様子です。
プログラムは下記のリポジトリで管理しています。
分かったこと
Panoで設定した画像は、視点を動かしても変化しない
視点移動で画像がズームされたりするのかと思っていましたが、違いました。 背景は無限遠に配置されるようです。
視点と一緒に移動する物体が、視点移動時にカクつく
物体の移動と視点の移動のタイミングが異なるからか、カクカクします。 他の方が作っている視点移動のデモでは、視点ではなく物体の座標を移動させていて、その例ならスムーズに動いているように見えました。 カクつきなく動かすには、視点を移動させずに周りに配置した物体を移動させるのが良さそうです。
参考
前回の記事 に引き続きPhaser3+Typescriptを使って RPG の基礎を作っていきます。 この記事は前回の記事を呼んだ前提で説明していきますので、ぜひそちらを先に読むことをお勧めします。 また、今回の記事は前回よりも難易度と内容量が上がっていますが、記事の最後に作業後の リポジトリ のリンクがありますので、そちらを先にダウンロードしてそちらと比較しながら学習することができます。 前回まで作成した状態のプログラムが以下の リポジトリ からダウンロードできますので前回まででうまくいっていない方は参考にしてみてください。 github.com 最終目標(再掲) ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・ゲームの作り方の断片を知る ・キャラの表示できるようにする ・キャラを移動できるようにする ・当たり判定をつける ・ NPC の追加してみる ・話しかけられるようにする 開発前提(再掲) ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール(再掲) ・typescript(Typescriptの コンパイル 用) ・phaser(フロントの Javascript 用ゲームライブラリ) ・live-server(ソースを監視してブラウザのページをリロード) ・ts-loader(webpackがTypescriptをバンドルする用)webpack(言わずと知れたモジュール依存をいい感じに解決しバンドルする) ・webpack- cli (webpackを コマンドライン で使用するのに必要) 注:各Nodeモジュールバージョンは後述 当ブログ仕様の画像素材の注意点 当ブログで使用する画像素材は『 ピポヤ倉庫 』より許可なしで無償再配布・改変が認められたものを改変して作成されたものです。 中には許可なく再配布・改変してはいけない素材もインターネット上には多く存在するのでそれらを使用するときは十分に規約を呼んでから使用しましょう。 1. キャラの表示 想定画面 今回は、はじめにキャラつまり操作
コメント
コメントを投稿