mieki256's diary



2015/09/21(月) [n年前の日記]

#1 [javascript] ActionScriptやJavaScriptで四角形の自由変形ができるか調べてたり

矩形を自由変形させて多関節処理っぽいことができないかなと。そのためには各頂点をどう動かすか指定するツールが欲しいよなと。そういうツールを作るとしたら何を使うのがいいだろう。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を使って知識ゼロから独学してみた「エセ」テクスチャマッピング入門以前編 | 秋葉秀樹個人ブログ
_テクスチャマッピングを理解してみる その2 - デジタル・デザイン・ラボラトリーな日々
_テクスチャマッピング入門 - 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 についてググってみたけど、検索キーワードが悪いのか、それらしい情報に辿り着けず。

以上です。

過去ログ表示

Prev - 2015/09 - Next
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30

カテゴリで表示

検索機能は Namazu for hns で提供されています。(詳細指定/ヘルプ


注意: 現在使用の日記自動生成システムは Version 2.19.6 です。
公開されている日記自動生成システムは Version 2.19.5 です。

Powered by hns-2.19.6, HyperNikkiSystem Project