レベルエンター山本大のブログ

面白いプログラミング教育を若い人たちに

BLOCKVROCKリファレンス目次はこちら

VSCode「デコレーターの実験的なサポートは将来のリリースで変更になる可能性がある機能です」を消す

VSCodeでtypescriptを書いていてデコレーターを使うと、

デコレーターの実験的なサポートは将来のリリースで変更になる可能性がある機能です。'experimentalDecorators' オプションを設定してこの警告を削除します

というワーニングがでる。

tsconfig.json

"experimentalDecorators": true
をやるだけでは取れなかったが、
 

 以下の記事をみて設定から、Experimental Decoratorsにチェックを入れたらワーニングが消えた。

ihatetomatoes.net

視線の方向に常に直進する

 VRの視点を操作してVR空間を自由に動き回りたい時は、カメラに「常に直進」属性ブロックを設定します。

 

f:id:iad_otomamay:20200125190818p:plain

カメラを常に直進する

スマートフォンVRでは、コントローラーやタッチなどで操作できない場合が多いため、スマートフォンの向きを変えることでスマートフォンの向いている方向に直進していきます。

 

[公式]カメラを常に直進させる

 

常に直進のブロックは、カメラだけではなく直方体や球体などの物体に設定することもできます。

 

 

 

カメラを操作する

VR空間では、カメラという物体でユーザの視点を決めます。

カメラはシーンに1つだけ登録できます。

 

[公式]カメラ

 

このプログラムでは、カメラブロックを表示してYの位置を10にセットしています。

これによって上空に視点が移動して空を飛んでいるような表現になりました。

f:id:iad_otomamay:20200124132123p:plain

カメラの操作

 

殴れる物体を作る

「動きのある物体」で重力の影響を受ける物体を作ることができます。

また「動きのある物体」に「クリックした時〜のチカラでなぐる」ブロックを設定することで、注視点カーソルでクリックした時に力を発生させることができるようになります。

 

土台ブロックにするために「静止した物体」を設定した直方体をXZ方向に広げて透明にしておきます。

 

[公式]殴れる物体を作る

f:id:iad_otomamay:20200105205207p:plain

殴れる物体を作る

 

クリックしたときに物体を移動させる

クリックした時に反応する処理を作るには、「ブロック〜をパラメータ〜を受け付けるように定義」のブロックでクリックされた時に行うべき処理を先に定義しておいて、「クリックした時に〜を処理する」ブロックに、その名前を記述します。

物体を注目点カーソルでクリックすると「定義」したブロックの内容が実行されます。

 

[公式]クリックした時に物体を移動させる

 

f:id:iad_otomamay:20200105202839p:plain

クリックした時に物体を移動させる

 

物体をアニメーションさせる

物体をアニメーションさせるためには、「アニメーション用のコマ送り」ブロックと、「〜づつ〜する」というブロックを組み合わせます。

このサンプルは、物体を回転させます。

 

[公式]アニメーションループ

アニメーション用のコマ送りブロックは、「繰り返し」ブロックの一種ですが繰り返しの1回1回で画面の描画します。そのため繰り返しとしての実行速度は大変に遅いですが、繰り返しの中で発生させるプログラムがアニメーションの効果を持ちます。

 

「ID〜の回転を〜づつ回転する」というブロックは、IDで対応づけしたブロックの回転を徐々に変化させるブロックです。必ずIDで指定したブロックが先に作られているようにしてください。

 

f:id:iad_otomamay:20200105201910p:plain

アニメーション

「〜の回転を〜づつ回転させる」の他にも、「〜の回転を〜にする」というブロックもあり、動きが異なるので注意してください。

チェックポイントによる移動

Aframe が先日2019年12月16日に晴れてVersion1.0リリースとなりました。 早速BLOCKVROCKもAframe Version1.0に対応しています。

チェックポイントによる移動という機能によって、「常に直進」とは異なるやり方でカメラを移動させることができます。

以下のプロジェクトで空中に浮かんでいるブロックにフォーカスしてみてください。 ブロックに飛び乗るような感覚になります。

[公式]チェックポイントへの移動

このプログラムでは「チェックポイント」属性ブロックが使われています。 チェックポイントがついたオブジェクトを、フォーカスによってクリックした時に、カメラがチェックポイントの上(「視点の高さ」分上方)に移動します。 f:id:iad_otomamay:20191218214601p:plain