<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>blog.alumican.net &#187; ActionScript3.0</title>
	<atom:link href="http://blog.alumican.net/tag/actionscript30/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.alumican.net</link>
	<description>日々の記憶と記録とActionScript とその周辺</description>
	<lastBuildDate>Tue, 20 Jul 2010 16:21:59 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>マウスイベント発生中に親を変更した場合の挙動</title>
		<link>http://blog.alumican.net/2010/07/21_011724</link>
		<comments>http://blog.alumican.net/2010/07/21_011724#comments</comments>
		<pubDate>Tue, 20 Jul 2010 16:17:24 +0000</pubDate>
		<dc:creator>alumican</dc:creator>
				<category><![CDATA[DEVELOPMENT]]></category>
		<category><![CDATA[ActionScript3.0]]></category>

		<guid isPermaLink="false">http://blog.alumican.net/?p=1839</guid>
		<description><![CDATA[想定外の挙動だったのでメモ。
MouseEvent.MOUSE_DOWNの発生後にマウスを押したまま対象インスタンスの親インスタンスを変更した場合、つまり別のDisplayObjectContainerにaddChild [...]]]></description>
			<content:encoded><![CDATA[<p>想定外の挙動だったのでメモ。</p>
<p>MouseEvent.MOUSE_DOWNの発生後にマウスを押したまま対象インスタンスの親インスタンスを変更した場合、つまり別のDisplayObjectContainerにaddChildし直した場合の挙動。</p>
<p>予想では、マウスダウン中に別の親にaddChildしてしまうとマウスを離してもMouseEvent.MOUSE_UPは発生しないと思っていたのだけど、普通にイベントが発生した。これを利用すると、たくさんのアイテムの中からドラッグ中のものを一時的に最前面に表示するなどの処理が実装しやすくなる。</p>
<pre><code>//親コンテナ parentA, parentB を作る
var parentA:Sprite = addChild( new Sprite() ) as Sprite;
var parentB:Sprite = addChild( new Sprite() ) as Sprite;

//子オブジェクト child を作り、parentA に配置しておく
var child:Sprite = parentA.addChild( new Sprite() );
child.graphics.beginFill(0x0);
child.graphics.drawCircle(0, 0, 50);
child.graphics.endFill();
child.x = 100;
child.y = 100;

//子オブジェクトに対してイベントを登録する
child.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void {
  trace("down");
  //マウスダウンで parentB の子として addChild し直す
  parentB.addChild(child);
});

child.addEventListener(MouseEvent.MOUSE_UP, function(e:MouseEvent):void {
  //マウスを離すと、マウスダウン時と親が違っていてもちゃんと実行される
  trace("up");
});</code></pre>
]]></content:encoded>
			<wfw:commentRss>http://blog.alumican.net/2010/07/21_011724/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>トップページ更新 Cells</title>
		<link>http://blog.alumican.net/2010/07/12_201337</link>
		<comments>http://blog.alumican.net/2010/07/12_201337#comments</comments>
		<pubDate>Mon, 12 Jul 2010 11:13:37 +0000</pubDate>
		<dc:creator>alumican</dc:creator>
				<category><![CDATA[DEVELOPMENT]]></category>
		<category><![CDATA[ActionScript3.0]]></category>

		<guid isPermaLink="false">http://blog.alumican.net/?p=1807</guid>
		<description><![CDATA[
トップページにコンテンツを追加しました。
» Cells
今回はボロノイ図とパーティクル操作を組み合わせたものとなっています。ボロノイ図のアルゴリズムには高速なFortuneのアルゴリズムを用いています。Fortune [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://alumican.net/#/c/cells"><img src="http://blog.alumican.net/wp-content/uploads/2010/07/cells.jpg" alt="" title="cells" width="478" height="200"/></a></p>
<p>トップページにコンテンツを追加しました。<br />
» <a href="http://alumican.net/#/c/cells">Cells</a></p>
<p>今回はボロノイ図とパーティクル操作を組み合わせたものとなっています。ボロノイ図のアルゴリズムには高速な<a href="http://en.wikipedia.org/wiki/Fortune">Fortuneのアルゴリズム</a>を用いています。Fortuneのアルゴリズムは空間を上から下に走査していきながら、各々のボロノイ母点が作り出す放物線（beach line）同士が交わる点列をボロノイ境界とみなします。</p>
<p>» <a href="http://research.engineering.wustl.edu/~pless/546/lectures/l16.html">アルゴリズム解説</a><br />
» <a href="http://www.cs.hmc.edu/~mbrubeck/voronoi.html">C++版 by Matt Brubeck</a><br />
» <a href="http://blog.controul.com/2009/05/speedy-voronoi-diagrams-in-as3flash/">AS3版 by Controul</a></p>
<p>wonderflに投稿されているkndさんの『<a href="http://wonderfl.net/c/t0iX">Fortuneのアルゴリズムの可視化</a>』が直感的で分かりやすいです。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alumican.net/2010/07/12_201337/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>PixelBender (.pbj) をActionScriptに埋め込む</title>
		<link>http://blog.alumican.net/2010/07/12_165011</link>
		<comments>http://blog.alumican.net/2010/07/12_165011#comments</comments>
		<pubDate>Mon, 12 Jul 2010 07:50:11 +0000</pubDate>
		<dc:creator>alumican</dc:creator>
				<category><![CDATA[DEVELOPMENT]]></category>
		<category><![CDATA[ActionScript3.0]]></category>
		<category><![CDATA[tool]]></category>
		<category><![CDATA[wonderfl]]></category>

		<guid isPermaLink="false">http://blog.alumican.net/?p=1775</guid>
		<description><![CDATA[まじめにPixelBenderやろうかなと思いつつ、いちいちpbjファイルをロードするのも面倒くさいなと思ったので、ちょっと便利そうなツールを作ってみました。

pbjファイルをローカルからアップロードすると、Pixel [...]]]></description>
			<content:encoded><![CDATA[<p>まじめにPixelBenderやろうかなと思いつつ、いちいちpbjファイルをロードするのも面倒くさいなと思ったので、ちょっと便利そうなツールを作ってみました。</p>
<div style="text-align:center;width:100%;margin-bottom:15px;"><iframe title="Embedded PixelBender Generator - wonderfl build flash online" scrolling="no" src="http://wonderfl.net/blogparts/gD6k" width="465" height="490" style="border:0px black solid;"></iframe></div>
<p>pbjファイルをローカルからアップロードすると、PixelBenderのコードを内部に埋め込んだActionScriptのクラスを生成します。pbjファイルがパラメータを含む場合は、各パラメータに対して自動的にgetter/setterも用意します。インプットに対しても自動でgetter/setterを生成します。</p>
<p>このツールの利点としては</p>
<ul>
<li>コンパイル時にPixelBenderのコードを含めることができるので、pbjファイルを外部読み込みする必要が無くなる</li>
<li>pbjファイルにどのようなパラメータやインプットを設定すればいいのか分かる</li>
</ul>
<p>といったことがあります。wonderflに投稿する際にメインのコードとPixelBenderをひとつのファイルにまとめたり、パラメータやインプットの指定ミスを減らせることができるかと思います。<br />
<span id="more-1775"></span><br />
エンコード/デコード処理はこのようになっています。</p>
<pre><code>//pbjファイル → 埋め込みコード
function encode(bytes:ByteArray):Array {
    var code:Array = new Array();
    bytes.position = 0;
    while (bytes.bytesAvailable) {
        code.push(bytes.readByte());
    }
    return code;
}

encode(loader.data);</code></pre>
<pre><code>//埋め込みコード → Shaderインスタンス
function decode(code:Array):ByteArray {
    var bytes:ByteArray = new ByteArray();
    for (var i:uint = 0, l:uint = code.length; i < l; ++i) {
        bytes.writeByte(code[i]);
    }
    return bytes;
}

var shader:Shader = new Shader( decode(code) );</code></code></pre>
<p><strong>おまけ</strong><br />
結局使わなかったのですが、このツールを作るにあたりpbjファイルをディスアセンブルするクラスをC++からASに移植しました。<br />
» <a href="http://www.kaourantin.net/2008/09/pixel-bender-pbj-files.html">Pixel Bender .pbj files （C++版のディスアセンブラ）</a></p>
<p>当初はpbjファイルをディスアセンブルしてパラメータのgetter/setterを自動生成ｓていたのですが、Shaderインスタンスのdataプロパティを列挙すれば必要な情報を取得できることに、移植完了後に気づきました。なのでディスアセンブラはお蔵入りとなってしまったのですが、せっかくなので置いておきます。使い方はクラスファイルの最初のほうを見てください。<br />
» <a href="http://lab.alumican.net/embedded_pixelbender_generator/PBJDecoder.as">PBJDecoder.as</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alumican.net/2010/07/12_165011/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>ActionScriptで変態言語Whitespaceのインタプリタ</title>
		<link>http://blog.alumican.net/2010/07/12_155751</link>
		<comments>http://blog.alumican.net/2010/07/12_155751#comments</comments>
		<pubDate>Mon, 12 Jul 2010 06:57:51 +0000</pubDate>
		<dc:creator>alumican</dc:creator>
				<category><![CDATA[DEVELOPMENT]]></category>
		<category><![CDATA[ActionScript3.0]]></category>
		<category><![CDATA[library]]></category>
		<category><![CDATA[Whitespace]]></category>
		<category><![CDATA[wonderfl]]></category>

		<guid isPermaLink="false">http://blog.alumican.net/?p=1723</guid>
		<description><![CDATA[何かを作るとき、色々な技術の応用や組み合わせばかりにとらわれている気がして、ActionScriptという言語自体に真剣に向き合ってみようと思ったらいつのまにかWhitespaceという言語に真剣に向き合っていた。な…　 [...]]]></description>
			<content:encoded><![CDATA[<p>何かを作るとき、色々な技術の応用や組み合わせばかりにとらわれている気がして、ActionScriptという言語自体に真剣に向き合ってみようと思ったらいつのまにか<a href="http://compsoc.dur.ac.uk/whitespace/">Whitespace</a>という言語に真剣に向き合っていた。な…　何を言ってるのかわからねーと思うが（ry</p>
<div style="text-align:center;width:100%;margin-bottom:15px;"><iframe title="Whitespace Interpreter - wonderfl build flash online" scrolling="no" src="http://wonderfl.net/blogparts/gpUu" width="465" height="490" style="border:0px black solid;"></iframe></div>
<p>RunをクリックするとSource Codeに記述したコードが実行され、実行結果がOutputへ出力されます。場合によっては（というかPreset Codeでは Hello, World! 以外全て）入力待ち状態になるのでその際はInputに要求された文字列もしくは数値を入力してSendをクリックします。<br />
<span id="more-1723"></span><br />
<strong>Whitespace？なにそれおいしいの？</strong><br />
Whitespaceは簡単なプログラミング言語です。ただし<span style="color: #eeeeee;">見えない</span>ことを除いては。なぜならばWhitespaceのソースコードは半角スペース、タブ、改行のみで構成されているからです。それ以外の文字は全てコメントとして扱われます。</p>
<p>ちなみに、公式サイトに掲載されているHello Worldのソースです。なんだろうこのドヤ感。<br />
» <a href="http://compsoc.dur.ac.uk/whitespace/hworld.ws">Hello World</a></p>
<p><strong>スタックマシンとしての動作と文法</strong><br />
Whitespaceは記憶領域としてスタック、ヒープというものを使います。ASで言うならばスタックはArray、ヒープはObjectと言ったところでしょうか。スタックは値を一番上に積み上げるか、一番上から取り出すことしかできませんし、値を見るだけでもいちいち取り出さなければいけません。ヒープは任意のラベル（アドレス）に値を保存したり、保存しておいた値を取り出しすことができます。</p>
<pre><code>//スタックのイメージ
stack.push(value);           //値の積み上げ
var value:int = stack.pop(); //値の取り出し

//ヒープのイメージ
heap[address] = value;         //値の保存
var value:int = heap[address]; //値の取り出し</code></pre>
<p>ソースコードは処理命令の羅列となっているので、Whitespaceはソースコードの最初から順番に処理命令を読み取りながら、スタックとヒープを操作してプログラムを実行していきます。ひとつの処理命令は「IMP + コマンド + パラメータ」のセットになっています。それぞれの役割は次のようになっています。</p>
<ul>
<li>IMP ･･･ Instruction Modification Parameterの略で、処理命令の大まかなカテゴリを表します（AS的にはパッケージのようなものです）。</li>
<li>コマンド ･･･ 処理命令の具体的な種類を表します（AS的にはメソッドのようなものです）。</li>
<li>パラメータ ･･･ コマンドを実行するための引数です。コマンドによっては無い場合があります。</li>
</ul>
<p>それぞれの具体的なコードは以下で解説されているので、心の目で見るといいと思います。<br />
» <a href="http://d.hatena.ne.jp/hiroshi128/20100201/1265031426">Whitespace基礎文法最速マスター</a></p>
<p><strong>ソースコード</strong><br />
<a href="http://wonderfl.net/c/gpUu/download">こちら</a>からダウンロードして自由に使ってください。496行目辺りからインタプリタのクラスが記述してあります。本当は正規表現でスマートにやりたかったんですけど、汚くなっちゃいました。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alumican.net/2010/07/12_155751/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>遺伝的アルゴリズムで歩行動作獲得への道　～３歩目～</title>
		<link>http://blog.alumican.net/2010/05/11_154025</link>
		<comments>http://blog.alumican.net/2010/05/11_154025#comments</comments>
		<pubDate>Tue, 11 May 2010 06:40:25 +0000</pubDate>
		<dc:creator>alumican</dc:creator>
				<category><![CDATA[DEVELOPMENT]]></category>
		<category><![CDATA[ActionScript3.0]]></category>
		<category><![CDATA[QuickBox2D]]></category>

		<guid isPermaLink="false">http://blog.alumican.net/?p=1658</guid>
		<description><![CDATA[
超マイペースでぼちぼち作っていた、AIで歩行動作を学習しようプロジェクト（１歩目、２歩目）なのですが、先日のイベントでお話したこともあり一段落したので、ひとまずトップページで正式公開することにしました。
» Earth [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://alumican.net/#/c/earthwalker"><img class="alignnone size-full wp-image-1579" title="earthwalker03" src="http://blog.alumican.net/wp-content/uploads/2010/05/earthwalker03.jpg" alt="earthwalker03" width="478" height="200" /></a></p>
<p>超マイペースでぼちぼち作っていた、AIで歩行動作を学習しようプロジェクト（<a href="http://blog.alumican.net/2009/10/29_003222">１歩目</a>、<a href="http://blog.alumican.net/2009/11/11_025133">２歩目</a>）なのですが、<a href="http://blog.alumican.net/2010/03/09_162432">先日のイベント</a>でお話したこともあり一段落したので、ひとまずトップページで正式公開することにしました。</p>
<p>» <a href="http://alumican.net/#/c/earthwalker">Earthwalker</a></p>
<p>今回のアップデートは遺伝的アルゴリズムの最適化、インターフェースの強化、そして<span style="color: #ff0000;">エディタ機能</span>です。</p>
<p>今までは頑張るイモ虫君を見ているだけでしたが、これからは好きな構造の生き物を創って歩かせることができます。誰も見たことのない生き物たちが頑張って歩き方を覚えていく様子を、ほほえましく見守ってあげてください。<br />
<span id="more-1658"></span></p>
<p><strong>エディタ機能</strong><br />
生物の作り方をちょっと説明。真ん中の地球にマウスを持っていくとエディタ機能に入れます。その後、地球の下のほうの「HELP!」にマウスを合わせるとエディタの使い方を見ることができます。基本的には動きの軸となる関節を、棒の体で繋いであげれば完成です。左下のNODEやJOINTは身体構造をあらわしていて、それぞれ関節の数、棒の数になっています。</p>
<p>あまりにパーツの多い生物を作るとPCが重くなっちゃうし、たまに物理演算が崩壊して生き物が飛んでっちゃうので注意ですが、やっとコンテンツとして1ステップ進めることができたかなあ、といった感じです。</p>
<p><strong>学習パラメータ</strong><br />
歩行動作のためのパラメータも少し変えました。<br />
0.5秒ごとに各関節の速度が決められた数値に切り替わるようにして、それを5回繰り返します。1回関節の速度が切り替わる単位を1ステップとします。5ステップをまとめて、1回の歩行動作（＝1サイクル）とします。個体評価は3サイクルでおこないます。計測前の座標と、3サイクル経過後の座標を比べて、どれくらい進んだのかを評価値として遺伝的アルゴリズムを実行します。</p>
<p>左下のSTEPやCYCLEはこの値となっています。ちなみにAGEは世代数、SCOREはその世代の中での最高得点です。それぞれの生き物にくっついてる数字やグラフ表現は個人的な趣味で、中身は適当です、すみません、でも好きなんですこういうの。</p>
<p><strong>今後の予定</strong><br />
このあとどうするかなのですが、まだノープラン。いろんな人の生き物を見れたりするビューアや、レースさせるバトル機能もおもしろそうですし、進化の系譜をまとめて図鑑にするのもいいかも。やりたいことは尽きないですけど、またマイペースに作っていきます。</p>
<p>今、自分が何を作りたいのか、恥ずかしながら模索中です。色々考えてはみるけど、いつも「たくさんの人に喜んでもらいたい」という結論にたどり着きます。僕にとってテクノロジーは大きなキャンバスであり、プログラムは絵筆なのかな。へっぽこプログラマな僕が言うのは何ともおこがましいのですが、音楽や文学や絵画やスポーツで世界中の人を感動させられるなら、プログラムにも何かきっとできるはず。</p>
<p>イベント会場でも、プロジェクタを使ってこいつを設置させてもらったのですが、多くの人に楽しんでいただき、僕が思いもかけないような生き物がたくさん生まれました。そんな生き物たちがだんだんと歩けるようになっていく様子がかわいくて、ただ感動していました（親心によるところも少なからずあると思いますが）。みなさま、どうもありがとうござました。</p>
<p>学習アルゴリズムというコアな技術の軸をぶらさずに、どう表現すればもっと多くの人に楽しんでもらえるのか。イモ虫君にとても勉強させてもらってます。感謝。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alumican.net/2010/05/11_154025/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>drawTrianglesで球面マッピング</title>
		<link>http://blog.alumican.net/2009/12/20_014813</link>
		<comments>http://blog.alumican.net/2009/12/20_014813#comments</comments>
		<pubDate>Sat, 19 Dec 2009 16:48:13 +0000</pubDate>
		<dc:creator>alumican</dc:creator>
				<category><![CDATA[DEVELOPMENT]]></category>
		<category><![CDATA[ActionScript3.0]]></category>
		<category><![CDATA[FlashPlayer10]]></category>
		<category><![CDATA[wonderfl]]></category>

		<guid isPermaLink="false">http://blog.alumican.net/?p=1607</guid>
		<description><![CDATA[既視感ありまくりのエントリで恐縮なのですが、今までGraphics.drawTrianglesを使ったことなかったのと、仕事で必要になったので勉強しました。

外部から読み込んだ画像をテクスチャとして球面上にマッピングし [...]]]></description>
			<content:encoded><![CDATA[<p>既視感ありまくりのエントリで恐縮なのですが、今まで<a href="http://help.adobe.com/ja_JP/AS3LCR/Flash_10.0/flash/display/Graphics.html#drawTriangles()">Graphics.drawTriangles</a>を使ったことなかったのと、仕事で必要になったので勉強しました。</p>
<div style="text-align:center;width:100%;margin-bottom:15px;"><iframe title="[Study] Sphere using Graphics.drawTriangles - wonderfl build flash online" scrolling="no" src="http://wonderfl.net/blogparts/4Hj9" width="465" height="490" style="border:0px black solid;"></iframe></div>
<p>外部から読み込んだ画像をテクスチャとして球面上にマッピングしています。<br />
パースはつけていません。<br />
<span id="more-1607"></span><br />
一応最適化ということで、頂点をなるべく重複点させないようにしています。ただし画像の端に対応する頂点が反対側の端と（極に関しては隣とも）うまくマージできずにほったらかしなので、頑張ればもうちょっと減らせると思います。</p>
<p>迷ったのが、多数の3次元座標を Matrix3D を使って一括投影するのに、<br />
<a href="http://help.adobe.com/ja_JP/AS3LCR/Flash_10.0/flash/geom/Utils3D.html#projectVectors()">Utils3D.projectVectors</a>と<a href="http://help.adobe.com/ja_JP/AS3LCR/Flash_10.0/flash/geom/Matrix3D.html#transformVectors()">Matrix3D.transformVectors</a>があるということ。<br />
前者は2次元座標に、後者は3次元座標に投影してくれる。投影後にzバッファしようと思ったら、projectVectorsは第3引数で渡したuvtのうちtに奥行きが入っているのでそれでソートしてやる。transformVectorsなら3次元座標のzを使えばよろし。</p>
<p>今回は球体ということで、z バッファは必要なかったので（視点と逆向きの法線ベクトルを持つポリゴンのみを描画すればよい）、drawTrianglesの第4引数であるcullingの値を適切に設定することでこっち側向いてるポリゴンだけ描画しました。</p>
<p>具体的にはポリゴンを形成する頂点を時計回りで指定して、球体の内側から外側に向かって面の法線ベクトルを伸ばしてます。このときcullingにTriangleCulling.NEGATIVEを設定すれば、あっち側（視点ベクトルと同じ方向）を向いてるポリゴンは描画されないのでいい感じ。球体を内側から見る場合にはTriangleCulling.POSITIVEにする。</p>
<p>話を戻すと、projectVectorsでもtransformVectorsでもどっちでも良かったので、両方やって速い方を使うことにしたのですけど、両者ほとんど差がない。一瞬transformVectorsのが速い気がしたんだけど多分気のせい。</p>
<p>やってる途中でハマったのが、projectVectorsで投影後のuvt値のうち、t値がどうしても全部1になってしまう問題。これは<a href="http://twitter.com/psyark">psyarkさん</a>に教えてもらって理解。多謝。</p>
<blockquote><p>
@alumican_net 全部1になるのは、第一引数のMatrix3DがProjection行ってないからではないかなー [<a href="http://twitter.com/psyark/status/6766133396">link</a>]</p>
<p>PerspectiveProjection#toMatrix3D使うと計算楽だよ [<a href="http://twitter.com/psyark/status/6766164546">link</a>]</p>
<p>Projection行ってるかどうかは、Vector3Dを変換してwが大きくなるかで分かります。もしくはMatrix3Dの4列目に0以外があるかどうか（これはあまり自信なし） [<a href="http://twitter.com/psyark/status/6766235920">link</a>]</p>
<p>普通はrawData[11]が1とかになる。z→wにするために。 [<a href="http://twitter.com/psyark/status/6766261388">link</a>]
</p></blockquote>
<p>Matrix3Dに<a href="http://help.adobe.com/ja_JP/AS3LCR/Flash_10.0/flash/geom/PerspectiveProjection.html">PerspectiveProjection</a>を設定しないとダメらしい。並行投影なのでその辺を端折ったのがいけなかったのか。</p>
<p>最後に、drawTrianglesは意外と重い、期待値が高かっただけに拍子抜け。<br />
限定的な使い方に絞って最適化頑張って、やっとPapervision3Dに勝てるくらい。</p>
<p>描画する頂点を全部まとめて毎フレーム1回のdrawTrianglesに押さえてはいますが、それでも結構くる。しかも残念なことに描画頂点数というよりは、むしろ描画領域が速度に大きく影響している。見えてないポリゴンをdrawTrianglesに渡さないとか色々試してみたけど結果はほとんど変わらず（むしろVectorを作り直すのに時間が余計かかったくらい）。結局画質を落とすのが一番パフォーマンスを上げるという結果になって萎え～。</p>
<p>とはいえdrawTrianglesを使えば簡単にかなりトリッキーなことができるので、使いどころを考えればおもしろい表現ができるはず。まだ完全には理解してないので、もっといい最適化手法がありそう。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alumican.net/2009/12/20_014813/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>遺伝的アルゴリズムで歩行動作獲得への道　～２歩目～</title>
		<link>http://blog.alumican.net/2009/11/11_025133</link>
		<comments>http://blog.alumican.net/2009/11/11_025133#comments</comments>
		<pubDate>Tue, 10 Nov 2009 17:51:33 +0000</pubDate>
		<dc:creator>alumican</dc:creator>
				<category><![CDATA[DEVELOPMENT]]></category>
		<category><![CDATA[ActionScript3.0]]></category>
		<category><![CDATA[QuickBox2D]]></category>

		<guid isPermaLink="false">http://blog.alumican.net/?p=1577</guid>
		<description><![CDATA[
どうも間が空いてしまってすいません。
前回の何も学習しなかったバージョンに脳みそを加えて、単純なGAを組み込んできました。ageが世代、fitnessがその世代の生物が記録した中で一番良かった成績です。この数値が上がっ [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://lab.alumican.net/earthwalker/02.html"><img src="http://blog.alumican.net/wp-content/uploads/2009/11/earthwalker02.jpg" alt="earthwalker02" title="earthwalker02" width="478" height="200" class="alignnone size-full wp-image-1579" /></a></p>
<p>どうも間が空いてしまってすいません。<br />
<a href="http://blog.alumican.net/2009/10/29_003222">前回</a>の何も学習しなかったバージョンに脳みそを加えて、単純なGAを組み込んできました。ageが世代、fitnessがその世代の生物が記録した中で一番良かった成績です。この数値が上がっていけば学習が成功しているといえます。3匹しか見えていませんが、一応裏側で10匹ほど動いています。</p>
<p>» <a href="http://lab.alumican.net/earthwalker/02.html">Earthwalker Prototype02</a></p>
<p>う～ん、学習してるような、してないような。なんとも微妙な感じです。まだまだ改良が必要です。<br />
GAの基本設定としては、エリート（淘汰や突然変異を受けず、次世代にそのまま残される個体）は生成最優秀の一匹、交配は2点交叉が1ペア、パラメータ化と評価方法は前回に示したとおり。かなり勘です。</p>
<p>ちなみに、今回から描画を<a href="http://nutsu.com/">nutsu</a>さん作の<a href="http://www.libspark.org/wiki/nutsu/Frocessing">Frocessing</a>でおこなっています。生物の体が曲線描画になっているところなんかそうですね。ありがたやありがたや。</p>
<p>見た目が貧相なので、エンジンをバージョンアップしていくと共に、次回はもうちょっとかっこよくなる予定です。思いっきり趣味に走ります。メーターとかグラフをいっぱいつけます。(*ﾟ∀ﾟ)=3 ﾑｯﾊｰ!!。ではまた。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alumican.net/2009/11/11_025133/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>遺伝的アルゴリズムで歩行動作獲得への道　～１歩目～</title>
		<link>http://blog.alumican.net/2009/10/29_003222</link>
		<comments>http://blog.alumican.net/2009/10/29_003222#comments</comments>
		<pubDate>Wed, 28 Oct 2009 15:32:22 +0000</pubDate>
		<dc:creator>alumican</dc:creator>
				<category><![CDATA[DEVELOPMENT]]></category>
		<category><![CDATA[ActionScript3.0]]></category>
		<category><![CDATA[AI]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[GA]]></category>
		<category><![CDATA[QuickBox2D]]></category>

		<guid isPermaLink="false">http://blog.alumican.net/?p=1531</guid>
		<description><![CDATA[
僕の大好きな、「マッチ箱の脳」という本があります。
人工知能についてとってもおもしろく解説してあるこの本を書いたのは、「がんばれ森川君2号」や「アストロノーカ」などの人工知能が組み込まれたゲームを作ったすごい人です。
 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://lab.alumican.net/earthwalker/earthwalker/01.html"><img class="alignnone size-full wp-image-1532" title="Earthwalker" src="http://blog.alumican.net/wp-content/uploads/2009/10/earthwalker01.jpg" alt="Earthwalker" width="478" height="200" /></a></p>
<p>僕の大好きな、「マッチ箱の脳」という本があります。<br />
人工知能についてとってもおもしろく解説してあるこの本を書いたのは、「がんばれ森川君2号」や「アストロノーカ」などの人工知能が組み込まれたゲームを作ったすごい人です。</p>
<p>» <a href="http://www.amazon.co.jp/gp/product/4883170802?ie=UTF8&amp;tag=alumicannet-22&amp;linkCode=as2&amp;camp=247&amp;creative=7399&amp;creativeASIN=4883170802">マッチ箱の脳(AI)―使える人工知能のお話</a></p>
<p>僕はアストロノーカしかやったこと無いのですが、人工知能が自然にゲームに組み込まれていてすごいなあと当時思ってました。中ではすっごい難しいことをやっているのに。その影響か、僕も人工知能を組みたいと思ってこれまで何度もチャレンジしては挫折してきましたが、懲りずにまたチャレンジすることにしました。</p>
<p>てなわけで、シャクトリムシに歩き方を学習させようと思います。昔は全部自分で作ろうとして失敗したけど、今は高速なAS3や物理エンジンライブラリもあるし、やってみよーGOGO！というわけで今はこんな感じ。</p>
<p>» <a href="http://lab.alumican.net/earthwalker/01.html">Earthwalker Prototype01</a></p>
<p>ちなみに、<strong>まだ人工知能を組み込んでいないので、どれだけ待ってもうまく歩けません</strong>。クリックでカメラを切り替えるなどという、見た目な機能ばかり付けています。さいさき不安です。<br />
<span id="more-1531"></span></p>
<p>まず、シャクトリムシの歩行について考えてみます。人工知能を組むときは、何を学習させるのかが一番大事なので、ここを見極めます。</p>
<p>いくつかの棒状のパーツが繋がった体をシャクトリムシと見立てます。体の繋ぎ目である関節を適当に動かすと、シャクトリムシがウニョウニョ動きます。でもこれだけだと、ただ暴れているだけで全然前へ進みません。前へ歩かせるためには、全ての関節が連携しながら動く必要があります。じゃあ、どのタイミングで、どのくらいの速さで、どれくらいの力で動かせば、もっとも前へ進めるのか。人が手動で調整しても良いのですが、関節の数が増えたら大変だし、途中で重力の大きさとか、少しでも変えるとまた最初から調整というのはちょっと。。。</p>
<p>なので、その辺をシャクトリムシ自身に学習してもらいます。問題を簡単にするために、0.5秒ごとに各関節の速度が決められた数値に切り替わるようにして、それを8回繰り返します。その8回の切り替わりをまとめて、1回の歩行動作のサイクルとします。関節は5個あるので、一体のシャクトリムシの歩行方法を決定するために、8×5=40のパラメータを必要とします。とりあえず、当面はこの40個のパラメータを学習していきます。そのうち形状の進化もさせたいので、そしたらまた別のパラメータにしなければならないのですが。</p>
<p>学習方法は、分かりやすくて学習過程が楽しい<span style="color: #ff0000;">遺伝的アルゴリズム</span>（Genetic Algorithm、以下GA）を使っていくことにします。</p>
<p>さてここからは、GAをちょっとでも分かってもらえればということで、GAの概要を書いておきます。うろ覚えな上に下手にドラマチックにしようとしたので、正確ではないと思いますが、興味のある方は何かの足しになるかも知れません。多分本当はもっとドラマチックなんです、きっと。それに、僕もこれ以上のことは分からずにやっているので大丈夫なはずです（何が）。本気で勉強したい人には<a href="http://www.obitko.com/tutorials/genetic-algorithms/japanese/index.php">このサイト</a>がおすすめです。</p>
<p><strong>準備編</strong><br />
適当な数のシャクトリムシを作ります。<br />
このとき、シャクトリムシの関節の動き方（どんなタイミングで、どんな速度で、どんな力で動かすのか）をランダムに決定し、パラメータとして持たせておきます。このパラメータを生物のそれぞれの個性になぞらえてシャクトリムシの<span style="color: #ff0000;">染色体</span>と呼びます。同じ染色体を持ったシャクトリムシは、全く同じ動きをするわけです。で、色んな個性をもったシャクトリムシをひとまとめにして<span style="color: #ff0000;">世代</span>と呼ぶことにします。</p>
<p><strong>激闘編</strong><br />
世代ができたところで、次はどいつが一番優秀なシャクトリムシなのかを見極めます。何をもって優秀なのかは色々意見がありますが、とりあえず全員を歩かせてみて、一定時間内に一番遠くまで歩いたシャクトリムシを優勝とします。歩かせた後は成績順にソートでもしておきましょう。</p>
<p><strong>愛憎編　～淘汰～</strong><br />
競争すれば優秀なやつも出てくるし、落ちこぼれも出てきます。手を繋いでみんなで一等賞なんてこの世界には存在しません。しょせんこの世は弱肉強食、弱いシャクトリムシは生存競争に負けて死んでしまいます。この弱肉強食の世界をGAでは<span style="color: #ff0000;">淘汰（選択）</span>という処理でおこないます。</p>
<p>GAとは、何百世代も世代交代しながら、だんだんと優秀なシャクトリムシを作っていくという仕組みです。弱いシャクトリムシは次の世代に自分の子孫を残せず、捨てられます。どのシャクトリムシを、どれくらいの数だけ淘汰させるのかを決める方法もたくさんあって、単純にランキング最下位から選んだり、確率的に選んだり色々です。</p>
<p><strong>愛憎編　～交叉～</strong><br />
生存競争に敗れるシャクトリ虫もいれば、生き残るシャクトリ虫もいます。そして、次世代に向けてシャクトリ虫をさらに進化させるべく、生き残ったシャクトリ虫の優秀な染色体をかけあわせて、もっと優秀な染色体をつくりだす処理を<span style="color: #ff0000;">交叉</span>といいます。</p>
<p>生き残ったシャクトリ虫の中から、何らかの方法（ランキングの上位からだったり、ランダムだったり色々あります）で2匹の親を選びます。選ばれた親は交配し、2匹の子供を作ります。この子供は、生き残った親の染色体から生まれるので、そこそこ優秀なシャクトリ虫だと予想されます。たまに親の良くない部分を引き継いだ子供も生まれますが。交叉の方法もそれこそたくさんあって、親の遺伝子をある1点で入れ替える一点交叉だったり、二点交叉だったり、解きたい問題によって良い方法は違ってきます。結構バクチなのがアレですが、これでひとまず次世代に希望をもたせることができました。</p>
<p>そうそう、淘汰しすぎた場合はランダムな染色体を持った新入りを追加したり交配したり、増えすぎた場合は多めに淘汰させるなどして、今の世代と次世代とでシャクトリ虫の総数が同じになるようにするのを忘れずに。いつの間にか絶滅しちゃったりとか寂しいから。</p>
<p><strong>愛憎編　～突然変異～</strong><br />
次世代の卵もそろい、愛憎編もそろそろ終幕です。が、最後にちょっと味付けします。というのも、淘汰と交叉だけを繰り返していくと秀才はだんだんと多くなっていくのですが、壁をぶち破る天才は生まれにくいのです。このままだと、やがてそこそこ優秀な染色体にみんな同化し、進化が止まってしまいます。</p>
<p>そこで、染色体のどこか一部分を、極めて低い確率で全く別の値に書き換えてしまいます。これを<span style="color: #ff0000;">突然変異</span>と呼びます。突然変異のおかげで進化が停滞せずに、常にチャレンジャーな世代を生み出すことができます。突然変異をさせすぎると、副作用としてせっかくこれまで培ってきた優秀な染色体の情報が壊されてしまうので注意です。</p>
<p><strong>歴史はちょっとだけ進んで繰り返す</strong><br />
そして、次世代はまた激闘編へと進み、だんだんとシャクトリムシは歩行動作を獲得していくのでした。</p>
<p><img style="border:none !important; margin:0px !important;" src="http://www.assoc-amazon.jp/e/ir?t=alumicannet-22&amp;l=as2&amp;o=9&amp;a=4883170802" border="0" alt="" width="1" height="1" /></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alumican.net/2009/10/29_003222/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>縦横比を保ったままリサイズするBoundaryResizerクラス</title>
		<link>http://blog.alumican.net/2009/10/07_225251</link>
		<comments>http://blog.alumican.net/2009/10/07_225251#comments</comments>
		<pubDate>Wed, 07 Oct 2009 13:52:51 +0000</pubDate>
		<dc:creator>alumican</dc:creator>
				<category><![CDATA[DEVELOPMENT]]></category>
		<category><![CDATA[ActionScript3.0]]></category>
		<category><![CDATA[library]]></category>
		<category><![CDATA[wonderfl]]></category>

		<guid isPermaLink="false">http://blog.alumican.net/?p=1435</guid>
		<description><![CDATA[読み込んだ画像をサムネイル枠内に収まるように縦横比を保ったままリサイズしたり、ステージの背景に敷くために拡大したりすることがあると思います。その都度計算式を書くのは面倒なので、クラス化しました。地味によく使っているので紹 [...]]]></description>
			<content:encoded><![CDATA[<p>読み込んだ画像をサムネイル枠内に収まるように縦横比を保ったままリサイズしたり、ステージの背景に敷くために拡大したりすることがあると思います。その都度計算式を書くのは面倒なので、クラス化しました。地味によく使っているので紹介します。<br />
このクラスはRectangleの情報をやりとりするだけなので、Bitmap以外にも何にでも使えます。</p>
<p><strong>サンプル</strong><br />
ご覧いただければ何が目的のライブラリなのか、だいたい分かると思います。</p>
<div style="text-align:center;width:100%;margin-bottom:15px;"><iframe title="[Sample] BoundaryResizer Demo - wonderfl build flash online" scrolling="no" src="http://wonderfl.net/blogparts/kF5j" width="465" height="490" style="border:0px black solid;"></iframe></div>
<p><strong>ダウンロード</strong><br />
» <a href="http://lab.alumican.net/boundary_resizer_demo/BoundaryResizer.zip">通常版はこちら</a><br />
» <a href="http://lab.alumican.net/boundary_resizer_demo/BoundaryResizer.txt">BoundaryResizer.asファイルのみ （拡張子をasに変更してください）</a></p>
<p><strong>使い方</strong><br />
コードはこんな感じで。</p>
<pre><code>var bmp:Bitmap = ...
var target:Rectangle = bmp.bitmapData.rect;
var boundary:Rectangle = new Rectangle(50, 50, 300, 300);
var scaleMode:String = BoundaryResizer.NO_BORDER;
var align:String = BoundaryResizer.TOP_LEFT;
<span style="color: #ff0000;">var resized:Rectangle = BoundaryResizer.resize(target, boundary, scaleMode, align);</span>
bmp.x = resized.x;
bmp.y = resized.y;
bmp.width = resized.width;
bmp.height = resized.height;</code></pre>
<p><span id="more-1435"></span></p>
<p>BoundaryResizer.resizeメソッドの引数はこんな感じで。</p>
<ul>
<li><strong>target:Rectangle</strong> ･･･ 第1引数。リサイズ対象オブジェクトの矩形を指定します。上の例ではリサイズしたい画像の矩形となります。</li>
<li><strong>boundary:Rectangle</strong> ･･･ 第2引数。リサイズの基準となる矩形を指定します。上の例ではリサイズ後の画像を収める枠となります。</li>
<li><strong>scaleMode:String</strong>（省略可） ･･･第3引数。 リサイズ時のスケールモードを指定します。このパラメータはStageScaleModeと互換性があります。このパラメータを省略した場合はBoundaryResizer.NO_SCALEとなり、リサイズはおこなわれません。</li>
<li><strong>align:String</strong>（省略可） ･･･ 第4引数 。boundaryに対するtargetの基準位置を指定します。このパラメータはStageAlignと互換性があります。このパラメータを省略した場合はBoundaryResizer.CENTERとなり、縦横ともに中央揃えとなります。</li>
<li><strong>戻り値:Rectangle</strong> ･･･ リサイズ後の矩形が返されます。target及びboundaryは変更しません。</li>
</ul>
<p>リサイズ方法を操作するscaleModeには以下の定数を指定できます。</p>
<pre><code>// targetとboundaryが完全に一致するようにリサイズされます。多くの場合、targetの縦横比は保たれません。
BoundaryResizer.<span style="color: #ff0000;">EXACT_FIT</span>

// targetが縦横比を保ち、かつtargetがboundaryの内側にフィットするようにリサイズされます。targetがトリミングされることはありませんが、上下または左右に隙間ができることがあります。
BoundaryResizer.<span style="color: #ff0000;">SHOW_ALL</span>

// targetが縦横比を保ち、かつboundaryがtargetの内側にフィットするようにリサイズされます。targetとboundaryの間に隙間ができることはありませんが、targetがトリミングされることがあります。
BoundaryResizer.<span style="color: #ff0000;">NO_BORDER</span>

// リサイズがおこなわれず、alignによる基準点合わせのみがおこなわれます。
BoundaryResizer.<span style="color: #ff0000;">NO_SCALE</span></code></pre>
<p>リサイズ後のオブジェクトの基準点を操作するalignには以下の定数を指定できます。</p>
<pre><code>BoundaryResizer.<span style="color: #ff0000;">TOP_LEFT</span>     // x軸方向:左　, y軸方向:上
BoundaryResizer.<span style="color: #ff0000;">TOP</span>          // x軸方向:中央, y軸方向:上
BoundaryResizer.<span style="color: #ff0000;">TOP_RIGHT</span>    // x軸方向:右　, y軸方向:上
BoundaryResizer.<span style="color: #ff0000;">LEFT</span>         // x軸方向:左　, y軸方向:中央
BoundaryResizer.<span style="color: #ff0000;">CENTER</span>       // x軸方向:中央, y軸方向:中央
BoundaryResizer.<span style="color: #ff0000;">RIGHT</span>        // x軸方向:右　, y軸方向:中央
BoundaryResizer.<span style="color: #ff0000;">BOTTOM_LEFT</span>  // x軸方向:左　, y軸方向:下
BoundaryResizer.<span style="color: #ff0000;">BOTTOM</span>       // x軸方向:中央, y軸方向:下
BoundaryResizer.<span style="color: #ff0000;">BOTTOM_RIGHT</span> // x軸方向:右　, y軸方向:下</code></pre>
<p><strong>追記 09.10.08</strong><br />
・多少最適化しました。以前のバージョンをお使いの方はBoundaryResizer.asを入れ替えて頂ければ大丈夫です。<br />
・wonderflのサンプルを更新しました。</p>
<p><strong>追記 09.10.22</strong><br />
・使い方のサンプルコードに間違いがあったので修正しました。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alumican.net/2009/10/07_225251/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>QuickBox2D 1.0 正式版リリース</title>
		<link>http://blog.alumican.net/2009/09/30_194751</link>
		<comments>http://blog.alumican.net/2009/09/30_194751#comments</comments>
		<pubDate>Wed, 30 Sep 2009 10:47:51 +0000</pubDate>
		<dc:creator>alumican</dc:creator>
				<category><![CDATA[DEVELOPMENT]]></category>
		<category><![CDATA[ActionScript3.0]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[QuickBox2D]]></category>

		<guid isPermaLink="false">http://blog.alumican.net/?p=1354</guid>
		<description><![CDATA[今までアルファ版だったのに、いつの間にかQuickBox2D 1.0がリリースされていました。QuickBox2DっていうのはActionSnippetのZevan氏が作ってる、Box2DFlashAS3を簡単に扱えるよ [...]]]></description>
			<content:encoded><![CDATA[<p>今までアルファ版だったのに、いつの間にか<a href="http://actionsnippet.com/?page_id=1391">QuickBox2D 1.0</a>がリリースされていました。QuickBox2Dっていうのは<a href="http://actionsnippet.com/">ActionSnippet</a>のZevan氏が作ってる、Box2DFlashAS3を簡単に扱えるようにするライブラリです。このブログでも<a href="http://blog.alumican.net/tag/quickbox2d">何度か</a>紹介させていただいてます。超オススメ。</p>
<p>なので久々にQuickBox2Dネタを書こうとActionSnippetを見てみると、僕の知らないサンプルが30個以上。凄い、どれを紹介しようか迷う。というか機能が増えすぎてよくわからん、やばい！というわけで何日かに分けてこのエントリに、サンプルがどんなことをやっているのか、どこの部分がキモなのかだけ勉強がてら書いてみます。間違っていればどうぞ突っ込みお願いします。<br />
<span id="more-1354"></span></p>
<p>QuickBox2Dのメソッドは引数にObject型を渡すことが多いです（Tweenerみたいに）。このObjectでメソッド特有の色々パラメータを指定します。例えば多角形を作成するaddPolyなど、剛体を作り出すaddXXX系のメソッドではx座標やy座標や角度などを標準で指定できます。今回このようなパラメータについて記述するとき、これらの標準プロパティについては省略して、addPolyならaddPolyでしか指定できない引数だけを記述していきます。addXXX系のメソッドで指定できる標準パラメータに関しては<a href="http://actionsnippet.com/?p=1261">こちらのエントリ</a>の下の方にまとまっていますので参照してください。</p>
<p>コード中に出てくるsimはQuickBox2Dのインスタンスを表しています。</p>
<pre><code> var sim:QuickBox2D = new QuickBox2D(this, {オプション});</code></pre>
<p>　<br />
<strong>追記 09.10.04</strong><br />
とりあえずタイトルだけ書いた、先に。<br />
　</p>
<p><strong>32. setGroupIndexによる衝突判定有無の切り替え</strong> &#8211; <a href="http://actionsnippet.com/?p=2268">QuickBox2D Mini-Machine</a><br />
執筆中</p>
<p><strong>31. テクスチャをジョイントに適用する</strong> &#8211; <a href="http://actionsnippet.com/?p=2239">QuickBox2D Joint Skinning</a><br />
執筆中</p>
<p><strong>30. テクスチャサイズの自動調整</strong> &#8211; <a href="http://actionsnippet.com/?p=2224">QuickBox2D Skinning Examples</a><br />
執筆中</p>
<p><strong>29. 指定したgroupIndex同士の衝突を検出する</strong> &#8211; <a href="http://actionsnippet.com/?p=2218">QuickBox2D Contact Filtering</a><br />
執筆中</p>
<p><strong>28. FlashPlayer10の3D表現</strong> &#8211; <a href="http://actionsnippet.com/?p=2209">QuickBox2D 3D</a><br />
執筆中</p>
<p><strong>27. QuickBox2Dによる衝突判定3</strong> &#8211; <a href="http://actionsnippet.com/?p=2201">QuickBox2D Contacts Part 3</a><br />
執筆中</p>
<p><strong>26. QuickBox2D 1.0の特長</strong> &#8211; <a href="http://actionsnippet.com/?p=2187">QuickBox2D 1.0 Features</a><br />
執筆中</p>
<p><strong>25. QuickBox2Dによる衝突判定2</strong> &#8211; <a href="http://actionsnippet.com/?p=2192">QuickBox2D Contacts Part 2</a><br />
執筆中</p>
<p><strong>24. QuickBox2Dによる衝突判定1</strong> &#8211; <a href="http://actionsnippet.com/?p=2179">QuickBox2D Contacts Part 1</a><br />
執筆中</p>
<p><strong>23. QuickBox2D 1.0リリース</strong> &#8211; <a href="http://actionsnippet.com/?p=2175">QuickBox2D 1.0</a><br />
執筆中</p>
<p><strong>22. 指定時間後に関数を呼び出す</strong> &#8211; <a href="http://actionsnippet.com/?p=2148">QuickBox2D addTimeStepSequence() Preview</a></p>
<pre><code>sim.addTimeStepSequence(
  { time:時間, callback:呼び出す関数, args:[呼び出し時の引数配列] },
  { time:時間, callback:呼び出す関数, args:[呼び出し時の引数配列] },
  { time:時間, callback:呼び出す関数, args:[呼び出し時の引数配列] },
  ...
  { time:時間, callback:呼び出す関数, args:[呼び出し時の引数配列] }
);</code></pre>
<p>addTimeStepSequenceにあらかじめ登録しておくことで、指定した時間ステップが経過すると指定し関数を指定した引数と共に呼び出すことができる。呼び出しのタイミングはFRIM(フレームレートに依存しない)ので、オブジェクトの状態とずれることがない。デモではオブジェクトの動きやタイミングに合わせての視点移動やズームをおこなっている。addTimeStepSequenceには一度にいくらでも登録可能。timeに指定する数値の計算方法を後で確認する。</p>
<p><strong>21. ピタゴラスイッチ的なサンプル</strong> &#8211; <a href="http://actionsnippet.com/?p=2142">QuickBox2D Vaguely Goldberg-esque</a><br />
シーソー機構や、反発係数(restitution)を1以上にすることで打ち返す機構をつかったピタゴラスイッチのようなサンプル。おもしろい。</p>
<p><strong>20. createメソッドによるオブジェクトの生成</strong> &#8211; <a href="http://actionsnippet.com/?p=2123">QuickBox2D create() Method</a></p>
<pre><code>sim.create(生成するオブジェクトの種類, {オプション});</code></pre>
<p>これまでaddCircle、addBox、addPolyなどメソッドそのものを使い分けることで様々なオブジェクトを生成したが、実はcreateメソッドだけで任意のオブジェクトを生成できる。第1引数に&#8221;circle&#8221;、&#8221;box&#8221;、&#8221;poly&#8221;などオブジェクトの種類を文字列で指定すればOK。第2引数はオブジェクトの生成パラメータ。</p>
<p><strong>19. 衝突判定の有無をを動的に切り替える</strong> &#8211; <a href="http://actionsnippet.com/?p=2114">QuickBox2D groupIndex Platforms</a></p>
<pre><code>var object:QuickObject = ...
var filter:b2FilterData = object.shape.GetFilterData();
filter.groupIndex = 1;
object.shape.SetFilterData(filter);</code></pre>
<p>Box2DFlashAS3の衝突判定フィルタであるb2FilterDataのgroupIndexを動的に書き換えることで、上方向からの衝突判定だけを持っているオブジェクトを生成するサンプル。<br />
また、sim.w.GetContactCount() メソッドにより現在衝突が起こっているオブジェクトの数を知ることができる。</p>
<p><strong>18. 人体と一輪車の連動サンプル</strong> &#8211; <a href="http://actionsnippet.com/?p=2014">QuickBox2D Unicycler</a><br />
一輪車でバランスを取りながら前後に移動する人間を模したデモ。一見リアルな動きに、バランスと取るための凄いアルゴリズムが組まれていそうに感じるが、実は転けないように毎フレーム上体の角度をコントロールしている。<br />
バランスを取っているように見せるために腕の動きをフリーにしていること、上体を三角関数で揺らしていること、車輪と足の繋ぎの見せ方が秀逸。上体と車輪の接続部分にどうもテクニックを使ってるっぽいので後で調べないと。あと、QuickBox2DのコンストラクタパラメータとしてrenderJointsを指定するとジョイントを表示するかどうか切り替えられる。</p>
<p><strong>17. 足の動きを作るサンプル</strong> &#8211; <a href="http://actionsnippet.com/?p=2010">QuickBox2D Floating Walker</a><br />
原始的な二足歩行ロボットのスケッチらしい。ジョイントを使って足の動きを作ってる。ジョイント生成用のconnect関数が便利そう。あと、QuickBox2DのコンストラクタパラメータにgravityX、gravityYを指定すれば重力を簡単に設定できる。</p>
<p><strong>16. プリズムジョイント（PrismaticJoint）を作る</strong> &#8211; <a href="http://actionsnippet.com/?p=2004">QuickBox2D Prismatic Joint</a></p>
<pre><code>var object:QuickObject = sim.addJoint({
  type:"prismatic",
  a:オブジェクトAのbody,
  b:オブジェクトBのbody,
  anchor:オブジェクトAとジョイントの接続点(b2Vec2),
  axis:ジョイントの駆動方向を表すベクトル(b2Vec2)
});</code></pre>
<p>DistanceJoint以外のジョイントを作ろう第四弾はプリズムジョイント。このジョイントはピストンの動きを実現する。anchorを軸として、axisの方向に向かってピストン運動をするっぽいな。<br />
ピストンの移動幅はupperTranslationやlowerTranslationで制御できる。こういう、サンプルで使われてないけど指定できるパラメータに関しても後で追記しときます。<br />
あまり関係ないけどオブジェクトのbody.GetWorldCenter()でそのオブジェクトのグローバル座標をb2Vecインスタンスで取得できるのか、なるほど。<br />
QuickBox2Dクラスによく使いそうな文字列は定数化されてるのを発見したのでメモ。</p>
<pre><code>QuickBox2D.STEP      // "step"
QuickBox2D.DISTANCE  // "distance"
QuickBox2D.REVOLUTE  // "revolute"
QuickBox2D.PRISMATIC // "prismatic"
QuickBox2D.GEAR      // "gear"
QuickBox2D.PULLEY    // "pulley"</code></pre>
<p>これでジョイントの指定にスペルミスが減る、よかった。</p>
<p><strong>15. ギアジョイント（GearJoint）を作る</strong> &#8211; <a href="http://actionsnippet.com/?p=1989">QuickBox2D Gear Joint</a></p>
<pre><code>var object:QuickObject = sim.addJoint({
  type:"gear",
  a:接続するオブジェクトAのbody,
  b:接続するオブジェクトBのbody,
  joint1:影響するジョイント1,
  joint2:影響するジョイント2
});</code></pre>
<p>DistanceJoint以外のジョイントを作ろう第三弾はギアジョイント。このジョイントは2つのジョイントの動きの大きさの和を保存するように働く。<br />
デモでは、joint1としてプリズムジョイント（次のサンプルで解説）、joint2として回転ジョイントを指定してる。このとき、joint1の伸びとjoint2の回転角の和はいつも等しくなる。また、joint1とjoint2の接続オブジェクトaはどちらも空間（sim.w.GetGroundBody()）である必要がある。これは使ってみて慣れるしかない。難しいねー。</p>
<p><strong>14. ジョイントを空間中の1点と接続する</strong> &#8211; <a href="http://actionsnippet.com/?p=2001">QuickBox2D Connect to GroundBody</a></p>
<pre><code>var object:QuickObject = sim.addJoint({
  type:"revolute",
  a:接続するオブジェクトのbody,
  b:sim.w.GetGroundBody()
});</code></pre>
<p>QuickObjectインスタンスのwプロパティ（b2World）のGetGroundBodyメソッドで取得したb2bodyを、ジョイントの片方の接続オブジェクトとして設定すると、空間にジョイントを接続することができる。上手くいえないけど空中に固定する感じ。</p>
<p><strong>13. 回転ジョイントに角速度を加える</strong> &#8211; <a href="http://actionsnippet.com/?p=1986">QuickBox2D Revolute Walker</a></p>
<pre><code>var joint:b2RevoluteJoint = revJointA.joint as b2RevoluteJoint
joint.SetMotorSpeed(1.0);</code></pre>
<p>3つのオブジェクトを回転ジョイントで接続し、角速度を与えることでモーターの役割をさせるデモ。QuickObjectからb2RevoluteJointを取り出し、Box2DFlashAS3のSetMotorSpeedメソッドを呼び出して回転させている。</p>
<p><strong>12. 滑車ジョイント（PulleyJoint）を作る</strong> &#8211; <a href="http://actionsnippet.com/?p=1983">QuickBox2D Pulley Joint</a></p>
<pre><code>var object:QuickObject = sim.addJoint({
  type:"pulley",
  a:接続するオブジェクトAのbody,
  b:接続するオブジェクトBのbody,
  groundAnchor1:オブジェクトA側の固定接続点(b2Vec2),
  groundAnchor2:オブジェクトB側の固定接続点(b2Vec2)
});</code></pre>
<p>DistanceJoint以外のジョイントを作ろう第二弾は滑車ジョイント。固定接続点は2次元ベクトル(b2Vec2)で渡すこと。そうするとオブジェクトA-groundAnchor1-groundAnchor2-オブジェクトBという関係で結ばれる。</p>
<p><strong>11. 回転ジョイント（RevoluteJoint）を作る</strong> &#8211; <a href="http://actionsnippet.com/?p=1975">QuickBox2D Revolute Ragdoll</a></p>
<pre><code>var object:QuickObject = sim.addJoint({
  type:"revolute",
  a:接続するオブジェクトAのbody,
  b:接続するオブジェクトAのbody,
  enableLimit:回転角度を制限する場合はtrue、360度ぐるぐる回す場合はfalse,
  lowerAngle:最小の回転角度,
  upperAngle:最大の回転角度
});</code></pre>
<p>DistanceJoint以外のジョイントを作ろう第一弾は回転ジョイント。enableLimitで回転角度を制限する場合はlowerAngle、upperAngleで回転範囲を指定する（ラジアン角）。</p>
<p><strong>10. リンケージされているテクスチャを貼る</strong> &#8211; <a href="http://actionsnippet.com/?p=1634">QuickBox2D Skinning</a></p>
<pre><code>var object:QuickObject = sim.addXXX({
  skin:リンケージクラス名
});</code></pre>
<p>QuickObjectを生成するときにオブジェクトに貼り付けるテクスチャを指定できる。貼り付けるテクスチャはflaファイルのライブラリにリンケージされている必要がある。Bitmapじゃなくても大丈夫。</p>
<p><strong>9. groupIndexによる衝突判定の制御</strong> &#8211; <a href="http://actionsnippet.com/?p=1630">QuickBox2D groupIndex</a></p>
<pre><code>var object:QuickObject = sim.addXXX({
  groupIndex:衝突グループインデックス（符号付き整数）
});</code></pre>
<p>QuickObjectを生成するときにgroupIndexを整数で指定できる（負の値も可）。同じ正の数でグループ付けされたオブジェクトは必ず衝突し、同じ負の数でグループ付けされたオブジェクトは必ず衝突しない。デモがとても楽しいので是非見るべし！QuickBox2Dにおける衝突判定の制御については『<a href="http://blog.alumican.net/2009/07/05_024440">QuickBox2DやBox2DFlashAS3での衝突判定をグループ分け</a>』参照。</p>
<p><strong>8. 外部XMLにASを記述して動的に実行する</strong> &#8211; <a href="http://actionsnippet.com/?p=1611">XML to ActionScript #3 (AsXML)</a><br />
ちょっとこれはよく読んでないのでわかんない。どうやらASを記述した外部XML（AsXML形式？）をswfに読み込んでスクリプトを実行する様子。デモでは、QuickBox2D、Papervision3D、TweenLiteのスクリプトをAsXMLに記述して連携させている。勉強しとこう。</p>
<p><strong>7. フレームレートに依存しないシミュレーション</strong> &#8211; <a href="http://actionsnippet.com/?p=1538">QuickBox2D FRIM</a></p>
<pre><code>var sim:QuickBox2D = new QuickBox2D(this, {
  frim:FRIMを使用する場合はtrue、そうでない場合はfalse
});</code></pre>
<p>QuickBox2D初期化時に、frimプロパティをtrueにするとFRIM(frame rate independent motion)モードとなる。通常フレームレートが低いとモーションは遅く、逆にフレームレートが高いと速くなる。FRIMモードではフレームレートに関わらない時間ベースでのシミュレーションが可能となる。そのかわり、フレームレートが低いとそれだけ粗いモーションとなることに注意。とっても便利な機能。</p>
<p><strong>6. オブジェクトに速度を加える</strong> &#8211; <a href="http://actionsnippet.com/?p=1543">QuickBox2D w/ Key Controls</a></p>
<pre><code>var object:QuickObject = ...
var vec2:b2Vec2 = object.body.GetLinearVelocity();
var scalar:Number = object.body.GetAngularVelocity();
object.body.SetLinearVelocity(vec2);
object.body.SetAngularVelocity(scalar);</code></pre>
<p>キー操作によってオブジェクトに力を加えるデモ。GetLinearVelocityで現在の速度、GetAngularVelocityで現在の角速度をそれぞれ取得できる。また、SetLinearVelocityとSetAngularVelocityで速度、角速度を設定できる。この辺はQuickBox2Dから、直接Box2DFlashAS3のメソッドを呼び出している感じ。</p>
<p><strong>5. addGroupによるテトリスのブロック生成</strong> &#8211; <a href="http://actionsnippet.com/?p=1505">QuickBox2D Tetris Pieces</a><br />
addBoxで生成したたくさんの正方形をaddGroupで結合し、テトリスのブロックを形作るデモ。</p>
<p><strong>4. addGroupによるオブジェクトのグループ化</strong> &#8211; <a href="http://actionsnippet.com/?p=1479">QuickBox2D Groups</a></p>
<pre><code>var object:QuickObject = sim.addGroup({
  objects:[オブジェクトA, オブジェクトB, オブジェクトC, ... , オブジェクトZ]
});</code></pre>
<p>objects配列で渡したオブジェクトをひとまとめにしたQuickObjectを生成する。frequencyHzとdampingRatioを適度に設定したバネっぽいジョイントの動きにも注目。</p>
<p><strong>3. addPolyによる多角形の生成（凹面も可能）</strong> &#8211; <a href="http://actionsnippet.com/?p=1471">QuickBox2D Polys</a></p>
<pre><code>var object:QuickObject = sim.addPoly({
  points:[x1, y1, x2, y2, x3, y3, ... , xn, yn],
  wireframe:全ポリゴンのワイヤーフレームを表示する場合はtrue、輪郭のみを表示する場合はfalse
});</code></pre>
<p>addPolyによる複雑なポリゴン生成のデモ。頂点を格納する順番はどうすればいいのか要確認。</p>
<p><strong>2. addJointによるジョイントの生成</strong> &#8211; <a href="http://actionsnippet.com/?p=1261">QuickBox2D Chain</a></p>
<pre><code>var object:QuickObject = sim.addJoint({
  a:接続するオブジェクトAのbody,
  b:接続するオブジェクトBのbody,
  x1:Aとジョイントの接続点のx座標,
  y1:Aとジョイントの接続点のy座標,
  x2:Bとジョイントの接続点のx座標,
  y2:Bとジョイントの接続点のy座標,
  length:ジョイントの長さ,
  frequencyHz:ジョイントの伸びやすさ,
  dampingRatio:ジョイントの元の長さへの戻りやすさ,
  collideConnected:AとBの間に衝突判定を持たせる場合はtrue、そうでない場合はfalse
});</code></pre>
<p>addJointでオブジェクトAとオブジェクトBをつなぐジョイントを生成できる。このサンプルが投稿されたときはまだDistanceJointしか実装されていなかった。それ以外の、ギアや滑車などのジョイント生成のサンプルは後述。<br />
x1,y1,x2,y2はオブジェクトAやオブジェクトBのローカル座標系でなく、QuickBox2Dのグローバル座標系で指定することに注意。省略するとそれぞれのオブジェクトの基準点が接続点となる。<br />
lengthプロパティはジョイントの長さ。デフォルトではジョイント生成時のオブジェクト同士の距離となるが、別の値を指定する場合は設定する。<br />
frequencyHzはジョイントの柔らかさ。0に近い数値ほどよく伸びるジョイントになり、大きな数値ほど固いジョイントとなる。また、0で完全に剛体となる。<br />
dampingRatioは弾性。0に近い数値ほど伸びた状態から元の長さに戻る力が強まり、大きな数値ほど元の長さへ戻ろうとしなくなる。frequencyHzとdampingRatioでバネのようなジョイントを実現できる。</p>
<p><strong>1. x、y、angleプロパティによるオブジェクトの移動と回転</strong> &#8211; <a href="http://actionsnippet.com/?p=1431">QuickBox2D Play</a></p>
<pre><code>var object:QuickObject = ...
object.x = 10;
object.x = 5;
object.angle = 1;
</code></pre>
<p>addBoxやaddCircleなどで作成できるQuickObjectはx,y,angleプロパティの変更で簡単に移動や回転が可能。『<a href="http://blog.alumican.net/2009/07/06_014321">QuickBox2D オブジェクトの平行移動と回転</a>』参照。<br />
　</p>
<p><strong>他のQuickBox2Dネタ一覧もどうぞ</strong> » <a href="http://blog.alumican.net/tag/quickbox2d">tag : QuickBox2D</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alumican.net/2009/09/30_194751/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
