Babylon.jsのチュートリアルをやってみるその18
これは
昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。
今日の参照
Particle
今日もパーティクルです。
昨日は基本的なパーティクルを作って再生させてみました。
今日はパーティクルが持っているパラメータを見ていくことにします。
Life time
Unityでもおなじみのライフタイムです。
パーティクルが生成されて消えるまでの時間を定義することができます。
// パーティクルのライフタイムを定義。min/maxで最小最大を決めらる particleSystem.minLifeTime = 1 particleSystem.maxLifeTime = 10;
Size
パーティクルの一つ一つの粒子のサイズをどのくらいにするかて定義できます
// パーティクルのサイズも定義可能 particleSystem.minSize = 0.1; // max/minスケールを定義している場合下のほうが優先される particleSystem.maxSize = 3;
全体のスケールだけでなくxyを定義することもできます
// パーティクルのサイズも変更可能 particleSystem.minScaleX = 0.1; particleSystem.maxScaleX = 3; particleSystem.minScaleY = 0.2; particleSystem.maxScaleY = 3;
Color
もちろんパーティクル自体の色の変更も可能です。
パーティクル生成時からブレンドされる2色と消える直前に変化する3つを定義できます。
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0); particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0); particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
カラーグラデーションの定義も可能です。
カラーグラデーションを使うと上で指定した3つの色の定義は無視されます。
// addColorGradient(0or1,色定義) // 0or1はこの間であれば自由にグラデーションカラーを設定できる。 //0は始まり1は終了を意味する particleSystem.addColorGradient(0, new BABYLON.Color4(1, 1, 1, 0), new BABYLON.Color4(1, 0, 1, 0)); particleSystem.addColorGradient(1.0, new BABYLON.Color4(1, 1, 1, 1)new BABYLON.Color4(1, 0, 1, 1));
BlendMode
ブレンドは以下のデモが良くできていたのでそちらを参考にします。
・BLENDMODE_ONEONE デフォルト設定。単純に色が追加される
・BLENDMODE_STANDARD パーティクルのアルファを使用する
・BLENDMODE_ADD color + particleColor * alphaで生成される
・BLENDMODE_MULTIPLY 乗算した色を追加
・BLENDMODE_MULTIPLYADD マルチパスレンダラー
emitRate
1秒間に放出するパーティクル量を設定することができます。
particleSystem.emitRate = 1000;
Direction
パーティクルを放出する方向を2方向設定することができます
また、パーティクル自体に重力を適用することができるので
Directionと合わせると紙吹雪を投げたような動きになる
particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3); particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3); // パーティクルに重力を適用 particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
Rotation
パーティクルの回転速度や角度の定義もできます
// 回転の設定 particleSystem.minAngularSpeed = 100; particleSystem.maxAngularSpeed = Math.PI; particleSystem.minInitialRotation = 0; particleSystem.maxInitialRotation = Math.PI; particleSystem.addAngularSpeedGradient(0, 1.5);
作ってみたパーティクルはこんな感じになりました。
今日はここまで
次はParticleの続きをやります。
Babylon.jsのチュートリアルをやってみるその17
これは
昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。
今日の参照
Particle
今日はパーティクルです。
パーティクルは種類も多いため何回かに分けます。
昨日のSprite同様まずはParticleSystemオブジェクトを作成します。
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
細かな設定をするのが大変な場合はBabylon.js側でデフォルトで用意してくれています。
BABYLON.ParticleHelper.CreateDefault(emitter)
Particleはアニメーションと同様スタートとストップで再生停止を制御できます。
// 再生 particleSystem.start(); // 停止 particleSystem.stop();
生成したパーティクルインスタンスに対してパラメータを与えることができます。
// 5秒経過したらパーティクルを止める particleSystem.targetStopDuration = 5; // パーティクルが停止したら削除する particleSystem.disposeOnStop = true;
作ってみたパーティクルはこんな感じになりました。
今日はここまで
次はParticleの続きをやります。
Babylon.jsのチュートリアルをやってみるその16
これは
昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。
今日の参照
Sprite
Spriteとは2Dゲームでよく見かけるキャラがアニメーションしたり
たくさんの木を生やしたりするのに使う。あれです。
木を生やした感じが以下の画像。
まずはSpriteManagerを作ります。
作ったマネージャはそのままだと何もしないので、インスタンスを作成してあげます。
下のコードでは木が一本だけ表示されます。
(マネージャ側には数を定義しているので同一の場所に2000表示されていると考えられる)
// スプライトマネージャを作成
// マネージャ名,テクスチャ,インスタンス数,セルサイズ,追加するシーン
var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "Assets/Palm-arecaceae.png", 2000, 800, scene);
// ↓のようなセルサイズのWidth/Heightを指定した定義の仕方もある
// new BABYLON.SpriteManager("playerManager","Assets/Player.png", 2, {width: 64, height: 64}, scene);
// インスタンス作成
var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
それでは味気ないので2000の座標をランダムにします。
// 作成したインスタンスにパラメータを渡して座標をランダムにする
for (var i = 0; i < 2000; i++) {
var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
tree.position.x = Math.random() * 100 - 50;
tree.position.z = Math.random() * 100 - 50;
tree.isPickable = true;
}
Sprite Animation
たくさんの画像を用意することでanimationも可能です。
2Dゲームでキャラクタが倒れたりあるったりするアニメーションを表現できます。
// スプライトマネージャは1テクスチャずつの定義なので木と同時に表現したい場合はまた
// 作成する必要がある
var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "textures/player.png", 2, 64, scene);
// 同一のキャラクタを複数定義したい場合は別名でインスタンス作成すればOK
var player = new BABYLON.Sprite("player", spriteManagerPlayer);
var player2 = new BABYLON.Sprite("player2", spriteManagerPlayer);
アニメーションさせたい場合は以下のようにplayAnimatiionをしてあげればOK
player.playAnimation(0, 40, true, 10);
「cellIndex 」を使えばspriteの特定の部分を切り取って表示することも可能
今日はここまで 次はParticleをやります。
Babylon.jsのチュートリアルをやってみるその15
これは
昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。
今日の参照
https://doc.babylonjs.com/babylon101/raycasts
Raycastと述語関数
Raycastの続きです。
昨日はRayを使ってcubeを大きくするのをやりました。
たまたま一つしかcubeがなかったのでよかったのですが、
自分からは見えない奥のやつを取得したい場合困ったことになります。
こんな感じに。
ではどうするかというと述語関数を使って 対象とするmeshを指定できるようにします。
// rayの情報を使って対象とするmeshを判定する
// 述語関数
// raycastが当たったmeshを受け取って、対象にしたいmeshだったらfalseを返す。
function predicate(mesh)
{
if (mesh == box || mesh == box)
{
return false;
}
return true;
}
// 呼び出し
var hit = scene.pickWithRay(ray, predicate);
すると以下のように奥のcubeが大きくなるようになりました
scene.pickWithRayってなんだろと思ったので以下を参照しています。
doc.babylonjs.com
multiPickWithRay
対象を一つではなく複数にしたい場合はmultiPickWithRayを使います。
// 複数を対象にしたい場合はmultiPickを使います。
var hits = scene.multiPickWithRay(ray);
if (hits)
{
for (var i=0; i<hits.length; i++)
{
hits[i].pickedMesh.scaling.y += 0.01;
}
}
複数のcubeが大きくなるようになりました
RayHelperは昨日触ったので
きょうはここまで。
明日はSpritesをやります。
Babylon.jsのチュートリアルをやってみるその14
これは
昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。
今日の参照
https://doc.babylonjs.com/babylon101/raycasts
Raycast
Raycastはきちんと理解して行きたいので何回かに分けます。
RayCastを使うのに必要なのは
・Rayを定義する
・対象のメッシュを作る
・メッシュにRayが当たったことを検知する
サンプルではRaycastやる時のあるあるの自分に当たっちゃってる問題を回避するために
以下を定義しています。
// Defaultはtrueなのできちんとfalseにする // 今回はRayをだす側がboxだったので以下のように定義 box.isPickable = false;
Rayがどこを向いているかわかるようにするため
Babylon.jsではRayHelperを用意していて以下のようにすると可視化されます。
let rayHelper = new BABYLON.RayHelper(ray); rayHelper.show(scene);
Raycastがhitしたことを検知するためにsceneに対して
pickWithRayがあったかどうかチェックしています。
var hit = scene.pickWithRay(ray);
if (hit.pickedMesh)
{
// RayにHitした対象を大きくする
hit.pickedMesh.scaling.y += 0.01;
}
今回サンプルを参考にして作ったのはこんな感じ。
きょうはここまで。
明日はRaycastの続きをやります。
Babylon.jsのチュートリアルをやってみるその13
これは
昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。
今日の参照
Picking Collisions
あまりピンとこないタイトルでしたがやっていることは単純
画面クリックなどのイベントを検知して、処理を行うようにしています。
addEventListenerをAPIから調べてもわからなかったのですがjsとして基本的持っている機能らしい。
なのでググったらあっけなく出てきた。
//クリックイベントが発生したとき
window.addEventListener("click", function () {
var pickResult = scene.pick(scene.pointerX, scene.pointerY);
}),
サンプル上は以下のように検知するよう作られていた。
scene.onPointerDown = function (evt, pickResult)
pickResultで取得できるパラメータは以下
思ってたより取得できる情報が多いです。
・hit（bool）
・distance（float）
・pickedMesh（BABYLON.Mesh）
・pickedPoint（BABYLON.Vector3）
今回作ったサンプルはこんな感じ。
きょうはここまで。
明日はRaycastをやります。
Babylon.jsのチュートリアルをやってみるその12
これは
昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。
今日の参照
[https://doc.babylonjs.com/babylon101/intersect_collisions-mesh:embed:cite]
Intersect Collisions -Mesh
これなんだろと思って読み進めるとぱっと見MeshColliderのように見えた。
画像の緑になってる部分
meshが交差したときに検知できるような仕組みを作ります。
// intersectsMesh(交差対象,検知するメッシュの範囲) // 検知するメッシュの範囲はtrueだと計算量が多くなるが、よりメッシュの形に近い判定 // falseではmeshが持つエリアの判定になるので正確性が欲しい場合はtrueに balloon1.intersectsMesh(plan1, false)
もう一つは点で判定する場合
// 判定エリアを作成
var pointToIntersect = new BABYLON.Vector3(10, -5, 0);
// intersectsPointで対象を選んで条件にすることで検知させる
if (balloon3.intersectsPoint(pointToIntersect))
{
balloon3.material.emissiveColor = new BABYLON.Color4(1, 0, 0, 1);
}
細かな条件がよくわからなかったのでAPIを参照して補足するようにした
intersectsMeshとintersectsPointのあたり。
今回作ったサンプルはこんな感じ。
チュートリアルを参考に、理解しやすくするために対象を絞った。
きょうはここまで。
明日はまた別の種類のCollisionをやります。
