mieki256's diary

矩形を自由変形させて多関節処理っぽいことができないかなと。そのためには各頂点をどう動かすか指定するツールが欲しいよなと。そういうツールを作るとしたら何を使うのがいいだろう。FlashやJavaScript等を使えばOSが違っても使えるかも、と。

しかしそもそも、ActionScriptやJavaScriptでテクスチャを貼った四角形ってどうやって描画できるのか、そこからして知らないのでググってたり。

以下のページが参考になりそうだなと…。

_drawTrianglesであそぼ1 -とりあえず使ってみる | _level0 - KAYAC Front Engineer Blog
_第45回　領域をビットマップで塗る − テクスチャマッピング：ActionScript 3.0で始めるオブジェクト指向スクリプティング｜gihyo.jp … 技術評論社
_第46回　分割した三角形にビットマップを変形して塗る：ActionScript 3.0で始めるオブジェクト指向スクリプティング｜gihyo.jp … 技術評論社
_四角形の自由変形
_[AS3.0] drawTriangles()メソッド！ (1) | にゃあプロジェクト
_Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング（仮題） - 2009-02-11 - 最速チュパカブラ研究会
_canvasを使って知識ゼロから独学してみた「エセ」テクスチャマッピング入門以前編 | 秋葉秀樹個人ブログ
_テクスチャマッピングを理解してみる　その２ - デジタル・デザイン・ラボラトリーな日々
_テクスチャマッピング入門 - jsdo.it - Share JavaScript, HTML5 and CSS
_テクスチャマッピング入門　メッシュ編 - jsdo.it - Share JavaScript, HTML5 and CSS

ActionScript の場合は、drawTriangles という、三角形を描画できるメソッドがあるらしい。ソレを使って、三角形2つを描画すれば四角形を描画できるやろと。

JavaScriptの場合は、四角形の各頂点を自由に移動して自由変形するメソッドはナサゲ。ただ、一旦は四角形を回転・傾斜して、三角形に見えるようにclipしてやることで三角形が描画できるらしく。ソレを使って三角形2つを描画すれば四角形を描画できるやろ、ということらしい。

JavaScriptでも三角ポリゴンが一応描画できるなら、Flash・ActionScriptのノリで使える CreateJS にも drawTriangles が用意されてるのかな、と思いきや、CreateJS にはそういうメソッドが見当たらず。どうやら自分で実装しないといかんらしい。

何にせよ、JavaScript で四角形の自由変形、というよりテクスチャを貼った三角形の描画は、メソッドを呼んでハイ終わりというわけではないっぽいなと。

となると、その手の多関節スプライトエディタが、各パーツの回転拡大縮小ぐらいしかサポートしてないのは仕方ないのかもしれないと思えてきたり。ポリゴンの頂点を動かして云々のやり方では、実機(?)上でリアルタイムに描画するまでがちと面倒だからサポートしなくてもええやろ、と判断されたりしそうだなと。

ただ、今時のブラウザなら WebGL が使えるやろと。WebGL ならテクスチャを貼った三角形ポリゴン、あるいは四角形ポリゴンを描画できるだろうから、四角形の自由変形もやりやすいのではないのか、という疑問も。

と思って WebGL についてググってみたけど、検索キーワードが悪いのか、それらしい情報に辿り着けず。