PIXI.jsであそんでる

PIXI.jsであそんでる。

個人プロジェクトで使おうという意図もあるので、別に遊んでるわけではないけど、割と気に入って最近よく試している。何が気に入っているかと言われると、非常に簡単な点と、パフォーマンスがいいことかなー。

canvasでやっていき問題

僕としては2Dの表現をもっといろいろやりたいなーみたいなのがあって、canvasをやり始めた。端的に言うとパーティクルとか、画像をうねつかせるようなのとか、そういうのまずできるようになりたいな、みたいな。なので、ゲームを作りたいとかそういうのはあんまりない。今もそんなに興味はない。
ただ、キャラクターを動かすとかはちょっとやってみたい思いがあるけど、素材を用意するのが面倒だなというので尻込みしてる。

それで結局canvasgetContext('2d')して愚直にやってたんだけど、どうもパフォーマンスがあんまりだし、それ用のライブラリというものが世の中にはあって、触らないのもどうなんだとおもってCreate.jsとPIXI.jsを試してみた。

実際、書き方的には2Dを弄る分にはcanvasだろうとcreate.jsだろうとPIXI.jsだろうとあんまり変わらんなという印象。ただ、PIXIはデフォルトでWebGL使ってくれるのでパフォーマンスがいいし、カスタムフィルターみたいなのが用意されてて、できることも多い。

というか、canvasである程度アニメーションの書き方がわかってなかったら、どっちにせよで全然わかんなかっただろうなとも思う。

PIXI.js

そういうわけで今はPIXIにはまってちょっと触ってみてる。自分で作る時も次はPIXI入れるだろうなと思う。

パーティクル

See the Pen PARTICLE PIXI by bom_phage (@bom_phage) on CodePen.

パーティクルをマスクしたやつ

See the Pen PARTICLE PIXI LINES MASK by bom_phage (@bom_phage) on CodePen.

結局z軸問題がある

今の所z軸をいい感じに弄る方法がわかってないので、んーっていうところもある。three.jsももっと触ってみたいなと思うのと、シェーダーをちゃんとやりたいなと思う。