pixi.jsを触るも、使い勝手悪くね

喋った：

ゲーム制作をしてると色々気付く事があるね、という事で今日はpixi.jsについて俺分かっちゃったかも、という事について話したいと思います。
pixi.jsというのは元々RPGツクールMVやMZにも利用される、描画ライブラリという位置づけで、
ええ、まず大体2009年くらいからかな、元々ブラウザってのは特定の画像だったり線だったりしか出せなかったんですけど、
canvasという技術の策定が始まり、そのcanvasの上なら好きに線を描いたり、何かと何かを重ね合わせようとか、そういう事が出来るようになったと。

けれど根本的な技術というのは色々な用途に対応せんければならんので
大概、七面倒くさい記述を重ねて書き綴らねばならんと、一例を挙げると

//描画コンテキストの取得
var canvas = document.getElementById('sample1');
if (canvas.getContext) {
	var context = canvas.getContext('2d');
	//左から20上から40の位置に、幅50高さ100の四角形を描く
	context.fillRect(20,40,50,100);
	//色を指定する
	context.strokeStyle = 'rgb(00,00,255)'; //枠線の色は青
	context.fillStyle = 'rgb(255,00,00)'; //塗りつぶしの色は赤
	//左から200上から80の位置に、幅100高さ50の四角の枠線を描く
	context.strokeRect(200,80,100,50);
	//左から150上から75の位置に、半径60の半円を反時計回り（左回り）で描く
	context.arc(150,75,60,Math.PI*1,Math.PI*2,true);
	context.fill();
}

 
これはもののサイト　から持って来たcanvasのサンプルコードですが、これを見るだけであぁんもう面倒臭い、となるのではないでしょうか。
１，２……と、ただ長方形やら半円やらを出すだけで１０行もコード書いてるじゃないかと。
このcanvasでゲーム画面の描画をしたいんですよ、そら図形とスプライトじゃ単純には比較できませんが、
例えばスプライトだとこのcanvasを毎回消して、スプライトを座標移動させて、新しく毎回描き込む。
そういうコードも書かないといけません。
ただ表示、描画するだけで何百、何千とどれだけコードを書かねばならんのだ、
コードが長いという事はそれだけまず書くのに大変ですし、バグも出やすくなる、修正しようとすればどこがどこだかとなる、
これはcanvasというのをそのまま使うのは是非避けたい事態である。

ってな訳で、HTML5のcanvasをもっと手軽に扱えるようにしようと、そういうJavaScriptのライブラリが一時期雨後の筍が如く
色々出たんですが、最近はだいぶ絞れてきて、その有効例の一つがpixi.jsではないかな、という世界観ではないかなと。

で私は今までcanvasさえ使わず、言わば2009年以前の技術でゲームを作っていたんですが、
この間出した[シン・アンゼリカ]なんかで言うと、巨大娘や飛行機がブーンと飛来するとかがそうですね、
ばらばらになる街はcanvasでやりましたが。
実は2009年以前の技術、DOMの直操作って事にも利点があると思っているので。

でまあ、今回のエロ格闘ゲーから遂に、全ゲーム画面をcanvas描画しようと、それに付きましてはpixi.jsでやろうと、
ここに多大な期待があった訳であります。

で最近pixi.jsを触っているんですが、ええっとまぁ見て下さい、まずはこれ。
文字が書かれてて、で背景グラデーションが黒い幕になっていますよね。
割と見るテキストウィンドーの表現ではないかと思います、でこれがpixi.jsの機能では出来ないみたい！

なんか調べ間違いでは無いかと思うんですが、英語で掲示板で何か回答されていた所によると、
このグラデーション塗りっていうのが出来ねぇと、
やるならcanvas直操作で画像を作って、それをテクスチャとしてコピってくれみたいな。
え……？　ってなりました。
もしやり方知ってる人が居たら是非教えて下さい。

で次はこれは仕方無いかと思うんですけど、
こういう会話フキダシみたいのを作りました。
で本来はね、こういうフキダシはこう、閉じてる所からぱかっとじょじょに開いて現れる、みたいな表現をしたいんですね。
ちなみにツクールだとwindowクラスの.openとか.closeだったかな、そういうメソッドを指定すれば
じょじょに閉じたり、ぱかっと開いたり、そういう動き方をしてくれるので。
でまあ、それも無いですと……まぁ仕方無い、描画ライブラリでアニメをサポートするかってのは割と分かれる所だと思います、
いや描画はしっかりやるから、アニメのロジックはお前が書けと。
pixi.jsはどうもそういう事なのかなと、ただ簡単な物で良いからこの辺あると、
段違いでラクだったろうなぁって思うんですが……
ツクールとかも描画はpixi.jsにあるはずですから、結局windowクラスのopenとかcloseはツクール側で実装していたんですね。
それが故に選ばれるというか、そういう所がまた生産性を上げており、選ばれる一つの理由になっているんだろうなぁ、なんて
改めて思ったり。

で更にこの会話フキダシですが、ちょっと詳しく見て下さい。拡大してみましょう。
この尖った尻尾の部分だけ、微妙に背景の青色が濃いじゃないですか。
もっと良い方法があったらなって思うんですが、これが少なくともスムーズなやり方としては限界だったと思います。
つまり角が丸まった四角っていう描画方法もあるんですよ、また三角っていう描画もあるんですよ、
でもこれらを組み合わせてこういうフキダシ作っても、三角の枠が目立って、思ったようにはフキダシぽくならないんです。
問題なのは三角の一辺であるので、ここだけ消せたらなって思うんですが、この「この部分だけ消す」ってメソッドは無いみたいですね、
あったら教えて下さいぜひ。
で仕方無いんで、ああなんだ、直線二本で表現すればいいじゃんって思ったんですが、
それだと閉じてないんで、背景色が塗れませんよという事らしく。
結局どうやったかと言うと、まず直線二本で描いた後、これだと中が塗られてない、白色とかになるんで、
その後にその直線二本よりも微妙に小さい、枠線が無い青色の三角を重ねました。

いやぁ苦労したけど出来たなぁって思ったんですが、でもまず初めに背景色を持った四角があって、
その上に背景色を持った三角を重ねるって事ですから。
その重なりの部分だけ背景色が濃くなってしまったと、そういう顛末でございます。

まじであれだけ出たcanvasの描画ライブラリの中で生き残り、有力になった物がこの使い勝手なのかと。
多分ですがpixi.jsは使い勝手はそんなに良く無い、特定の部分の表現に優れてるのかなぁと思うんですが、
一応フォローすると、スプライトの扱いなんかはかなりラクになりますね、
いちいち画面更新とかのロジック書かなくて済むので。

まあ[ありすの乳頭エロトラップダンジョン]というゲームはこれ完全にフルDOM、ノーcanvasで見た目を作って。
それが2年8ヶ月とか掛かったんで。
プロジェクト自体のまずさもあったんですが、その時ずっと思ってたのが「フルcanvasだったらもっとラクになるのにー！」って事だったんですが、
まぁやっぱ適材適所だわと、夢が覚めた感じがありました。

とにかく描画に関するロジック、ソースコードを短くしたい、スマートにしたいなってのがあるんですが、
pixi.jsももっと勉強したらそこが慣れて上手く出来るようになるのか、
あるいは別の描画ライブラリで良いのがあるのか。
そうでなくてもう、それは結局はゲームエンジン採用みたいになっちゃうのか。

今はそんな発見や手触りが面白いというか、まあ選択肢があるって心の余裕を生むよね、
pixi,jsはきっとこんななんだろうなーと諦め諦めやって、その手法に合った方法をしていくってのも
案外楽しいものです、とね。