対決!WEBGL!(THREE編) | やまだの「死ぬまでにゲームをつくりたい!!」

対決!WEBGL!(THREE編)

Effekseer を活用したくてWEBGLを今月調べていました

 

しかし、WEBGL苦手だなあ・・・。

CANVAS2Dめちゃくちゃ楽だったので・・。

 

  THREEでまずは静止画を出す

こちらが良いです。すぐ動きました。

 

画面いっぱいに出すのが難しかった。

camera.position.set(0, 0, 10); と plane.scale.set(w, h, 1); あたりが、

調整パラメータっぽい。とりあえず、

camera.position.set(0, 0, 50); と plane.scale.set(50, 50, 1);

くらいに設定したらうまくいった気がする。勉強が必要。。。

 

  THREEでEffekseer をつかってみる

ここまでならいけるっすよ。

 

以下のファイルだけ何とか調達ください。(Effekseer公式とMZ素材)

effects["Laser02"] = xxx.loadEffect("Resource_/Laser01.efk");
effects["Watter02"] = xxx.loadEffect("effects/WaterAll2.efkefc");

 

このあと、

 

CANVASの上にこのWEBGLを重ねよう。

よし、WEBGLの背景を透過にしよう!!

 

としたら黒くなった。

(これが仕様っぽいと気が付くのに2週間弱かかる・・)

 

なんとなく、オブジェクトは加算。

全く描画しないところは0で透過維持で良いけど、

1でも差分画素があれば、背景に足すっぽい。

なので、透過属性が消えて黒くなる。と理解した。

そういうドキュメントがあるわけではないので、体験談として。

 

これはWEBGLのCANVAS内で閉じるので、

2DのCANVASと重ねても、黒になってから。

 

  背景変えていろいろ試した結果

renderer.setClearColor(0x0000FF, 1); まあ水に見える

renderer.setClearColor(0xCCCCFF, 1); ほぼ白

renderer.setClearColor(0xF8F8F8, 1); ギリギリ見える???

背景をちゃんとすれば、まあエフェクト見えるかーと思った。

黒になる事件を受けて、

ツクールはちゃんとできているんだからPIXIの方がいいのかな

ということで、PIXI編も行ってみます。

(オチを先に。PIXIでも同じ結果でした・・・。)