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

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

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

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

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

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

 

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

 

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

JavaScriptコードモードを使って物体をアニメーションさせる

BLOCKVROCKには、コードモードという機能があります。 コードモードでは、JavaScriptを使ったプログラミングが可能です。

BLOCKVROCKで作った物体や世界は、Webで使われるHTMLとJavaScriptで出来上がっているためJavaScriptを使うことで自由に操作することができます。

以下のサンプルでは物体に回転のアニメーションをつけています。

[公式]JavaScriptコードモードで物体にアニメーションをつける

BLOCKモードでシーンスタートと直方体だけを用意しておきます。

f:id:iad_otomamay:20191213094754p:plain
JavaScriptを使って物体をアニメーションさせる

コードタブに以下のプログラムを記述します。 //の部分はコメントなので記述する必要はありません。

let box1 = document.getElementById("block1");
// roには{x:"xの回転",y:"yの回転",z:"zの回転"}が取れる
let ro = box1.getAttribute("rotation");
forever(()=>{
    ro.y += 1;
    let roString = `${ro.x} ${ro.y} ${ro.z}`;
    box1.setAttribute("rotation", roString);
});

1行目のdocument.getElementById()は、HTMLで書かれた要素をJavaScriptの変数に取り込むための記述です。 これにより、box1という変数にid"block1"の物体が取り込まれます。

box1.getAttribute("rotation")は、id"block1"の物体の回転属性を取り出します。これもroという変数に取り込んでいます。

forever()という機能は、BLOCKVROCK特有の機能です。 ループを表すのですが、ループしている間もユーザー操作を止めないようになっています。

このforever()で属性値を変えると、徐々に値が変化するように見えるため物体がアニメーションします。

foreverの処理の内側では、yの回転を 1づつ増やして物体にセットし直しています。 rotationの属性は、"x y z"というスペース区切りで3軸の回転値を持つ文字列であり、値を組み立てなくてはいけません。

「`」(グレイヴ・アクセント)という記号で括られた文字列には、${}で変数を埋め込めます。これをつかって"x y z"になるような文字を組み立てています。

NodeからRDSの接続で SSL/TLSの証明書を rds-ca-2019に更新する

RDS のCA証明書が2019になるとアナウンスがあって、最終警告っぽいメールがきてたので慌てて対応。

 

そのメールのタイトルはこちら。

重要なお知らせ:2020年2月5日までにお客様のAmazon RDS SSL/TLS証明書の更新を行ってください | Important Reminder: Update Your Amazon RDS SSL/TLS Certificates by February 5, 2020

 

 

ドキュメントを見て、証明書をダウンロードして、

https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/UsingWithRDS.SSL.html

 

クライアントからテストしてみたらここまではスムーズに通る

mysql -h myinstance.c9akciq32.rds-us-east-1.amazonaws.com
--ssl-ca=[full path]rds-combined-ca-bundle.pem --ssl-mode=REQUIRED

 

しかし nodejsのプロジェクトからmysql2を利用したDBアクセスが疎通しない。

 なんとか動かしてみられたので、原因を記録

 

原因1:中間証明書を含むpemをつかっていない

原因2:Node v12以降は、TLSv1.0が使えない

 

対処1:中間証明書とRoot証明書を含むpemを使う

https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/UsingWithRDS.SSL.html

 

対処2:(暫定対処)

Node v11を使う

(最新が使いたいので、Connection のオプションに以下などとしてみたが疎通しない。)

暫定対処で、v11を使うことにした。 

nを使ってNodeのバージョンを切り替えられるようにする

// インストール

npm i -g n

// リストアップ

sudo n list 

// バージョンのインストールと利用(11.x.xが入って有効になる)

sudo  n v11 

// バージョン確認

node -v

 

 

恒久対処に向けて覚書

Nodeのバージョンをあげたい。TLSv1.3を使ってセキュアにDBアクセスしたい。

mysql2のConnection生成時に以下を書いてみたが、Node11なら通る。Node13なら通らない。

,ssl : {
ca: fs.readFileSync( [Caのパス] )
,rejectUnauthorized: false
,maxVersion: 'TLSv1.3'
,minVersion: 'TLSv1.3'
}

 

 

 

物体の位置

物体の位置は、3つの軸で決定します(X軸、Y軸、Z軸)

Xは左右(プラスになるほど 右)

Yは上下(プラスになるほど 上)

Zは奥行き(プラスになるほど 手前)

を表します。

 

以下のサンプルプログラムでは

赤い物体を左右に

青い物体を上下に

黄色い物体は、奥と手前(カメラ初期位置から見ると後ろ)

に配置しています。

 

f:id:iad_otomamay:20191211135258p:plain

物体の位置

 

 

 

[公式]物体の位置

物体を受け止める土台を作る

動きのあるブロックは、重力を受けるようになるのでそのままでは落下していきます。

「静止した物体」属性をつけたブロックは、動きのある物体に対して衝突判定があります。

静止した物体の大きさのXとZ方向を広くすれば、重力のある物体を受け止める土台として機能します。

 

以下のプログラムでは青色のブロックが土台となります。

f:id:iad_otomamay:20191203191025p:plain

ブロックを受け止める

 

[公式]ブロックを受け止める