CreateJS, JavaScript

EaselJS 0.7.0での変更点（その1）

土曜にいまクリ勉強会で、以前のサンプルをEaselJS 0.7.0対応に書き換えてみたので、忘れないようにメモ。

・マウスイベントが、イベントオブジェクトからDisplayObjectに変更された。
・mousemove,mouseupが、pressmove,pressupに変更された。
※（変更前）（変更後）>> ドラッグ出来ます。
・各フィルタがeaseljs-0.6.0.min.jsでは同梱された（個別指定が不要）。
・BoxBlurFilter >> BlurFilter に変更された。
※（変更前）（変更後）>> クリックでフィルタがかかります。

その他にもいろいろ変更があるようですが。自分でチェックできてないので、引き続きサンプル修正しながらアップします（予定）。自分で書いてみないと覚えないので。

AIR, AIR for Android, ANE, Flash CC, Flash CS6

xflファイルでライブラリパスに相対パス指定したANEがパッケージに追加されない

Flash CC/CS6で、AIR for Androidの書き出しをしようとして躓いたのでメモ。

・ファイル＞ActionScript設定…＞ライブラリパスで、ANEファイルを選択。
・ファイル＞AIR for 3.8.0.xxx Android設定…を開くと、「一般」の「含めるファイル」に選択されたANEファイルが追加されている。
この状態でパブリッシュして実機確認は問題なし。
ただこのままだとライブラリパスは絶対パスになっているので、ファイルのやり取りをする際に面倒（環境依存）なので、ライブラリパスを相対パスに書き換えることにした。
相対パスに書き換えて、ファイル＞AIR for 3.8.0.xxx Android設定…を開くと、「一般」の「含めるファイル」から選択されたANEファイルが消えてしまいます。当然、パブリッシュしてもANEが含まれてないため、実機で動作せず。
またファイル＞AIR for 3.8.0.xxx Android設定…を開いて、「一般」の「含めるファイル」に該当するを手動で追加した上でパブリッシュしてもダメ。ANEはlibというディレクトリにまとめてあったためか、「含めるファイル」では「lib/xxxxx.ane」と表示されている（絶対パスの際には、lib/ は表示されていなかった）。念のため、xflを含むディレクトリと同階層にそのままaneを置いて追加していたが、表示こそ「xxxxx.ane」となるものの、やはりパブリッシュしても動作せず。
ライブラリパスの相対指定をflaファイルで行うと、「一般」の「含めるファイル」にANEは追加されたままで、パブリッシュしての動作は問題ありませんでした。
どうししてもxflじゃなきゃダメってことでもないけど、釈然としない結果に。基本的にANE使うときは、flaファイルの方がいいようです。
※Flash CC/CS6＋Mac OSX 10.7.5＋MacBookProで確認しました。
AS3.0, Flash CC, Flash CS6

Flash CS6/CCでコードヒントが表示されない

今日仕事の話をしていて、ウチのFlash IDEではコードヒントが出てないことに気づいた。というか、かなり前から出たり出なかったりだったので、ほとんどヒントなしで書いていた。昔はなかったし（笑）。
ただ「ウチだけ？」みたいな状況が気になったのと、カスタムクラスを使う必要があってないと不便だな…というのがあったので、調べてみました。
※CCだとアクションパネルの下部に「コードヒントキャッシュを構築できません」とビックリマークアイコン、CS6だとビックリマークアイコンだけが表示されています。
※どちらもコードヒントのキャッシュを削除では直りませんでした。
【Flash CS6】
‘/Users//Library/Preferences/Flash CS5 Preferences’ をテキストエディタで開いて、
<Editor_Code_Hints>1</Editor_Code_Hints>の値を1 >> 1000 に変更してOK。
【Flash CC】
同じように修正しようと思って、’/Users//Library/Preferences/Adobe/Flash/13.0/Application.xml’ に書いてある…
 
<key>Editor Code Hints</key>
<int type=’signed’ size=’32’>1</int>
の数値をいじっても直らず。再インストールしかないかなあと思ったものの、下記を参考にActionScript3.0設定に追加してあったライブラリパス、ソースパスを全て削除したら、無事表示されました。
結局のところ、ファイル毎（fla,xfl）ではなくて、Flash IDEの方に何でもライブラリパスを通すという昔からの癖が問題だったようです。たぶんCS6もライブラリパスを消せば問題なく動くはず。
意外なところではまりました。参考サイトに感謝。
AIR for iOS, Flash Builder, iPhone

Flash Bulder 4.7 の AIR for iOS 書き出しでいろいろ躓いた

久しぶりにFlash Bulderを使うことになって、4.7でいろいろ環境準備。ひろゆきさんがももクロちゃんのプロジェクトファイルを提供してくれたので、AIR for iOSで書き出しを試してみた。

で、前に使っていたのが4.6だったので、変更点があっていろいろ躓いたのでメモ。
1.appIDでハイフンが通らない。
実行構成ウィンドウのメインタブでターゲットプラットフォームにApple iOSを選択すると、4.6にはなかったAppId欄が（4.6以前はxml上でIDタグに指定するだけだった）。ここにxmlと同じIDを指定するんですが、「ID に使用できるのは英文字、数字および “.” だけです。」と表示されてハイフンがエラーにされてしまう（ボクのIDは、com.c-geru.*）。「えー、何で？」って感じですが、これはAppleのDeveloperサイトでハイフンなしのIDを作成することで回避。
でもXcodeはハイフンでも問題ないので、これはFlash Builder側の不備といっていいんじゃないですかね？ドメインにハイフンとかフツーにあるでしょ？最初は何が問題なのかわからなかったよ…。
2.iOS シミュレータが正しく動かない
IDは通ったので、iOSシミュレータで実行してみます。ビルドは順調、iOSシミュレータも起動してアプリのアイコンも見えます。…が、アプリ自体が起動せず。シミュレータ上のアイコンクリックでも無反応。
試しに実機（iPhone 5）に書き出してみると問題なく起動。回るよ、ももクロちゃん！
で、実行構成ウィンドウの「シミュレータ SDK の場所」を見てみると、古いXcodeのSDKを参照している模様（/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs）。検索しても新しいiOSシミュレータのSDKは見つからず。
とりあえず古いXcodeを全て削除することに。3.2.6とか4.3とか4.5とかいろいろ残ってました。ググったら、単にFimderからだとダメらしいので、下記リンクを参考に最新も含めて全部削除しました。
再び最新版のXcode 4.6.3 をインストール。しかし古いバージョンにあったDeveloperフォルダは作成されず。で、調べてみたらXcode4.3以降はDeveloper フォルダは、Xcode.appの中に作成されるとのこと。
 
で、実行構成ウィンドウの「シミュレータ SDK の場所」のパスを変更しようとしたのですが、参照ボタンで開くFinderからではパッケージ（Xcode.app）の中身を参照出来ず。仕方ないのでFinderでパスを確認しながら手打ちしました。参照先は以下です。
/Applications/Xcode.app/Contents/Developer/
Platforms/iPhoneSimulator.platform/Developer/SDKs/
 
※このブログだと見切れちゃうので改行しましたが、ひと続きです。
この参照もXcodeがきちんとインストール済だったら、Flash Builderをインストールする時にきちんと自動的に見つけてくれたのかしらん。うーん…。
各リンク先の皆さんに感謝。
CreateJS

Toolkit for CreateJSでのパブリッシュされるインスタンス名

Toolkit for CreateJSでFlashからパブリッシュしてみました。で、インスタンス名があるときとないときで同違いがあるのか、書き出されたjsの中身を開いてみたのがこれ（抜粋）。

// stage content:
(lib.tkfc_test03 = function() {
　　this.initialize();

　　// レイヤー 5
　　this.instance = new lib.シンボル1();
　　this.instance.setTransform(218,85);

　　// レイヤー 4
　　this.instance_1 = new lib.walk_mc();
　　this.instance_1.setTransform(401.6,204.9,1,1,0,0,0,-0.1,1.4);

　　// レイヤー 3
　　this.btn_next = new lib.btn_s_next();
　　this.btn_next.setTransform(494.5,373.9);
　　new cjs.ButtonHelper(this.btn_next, 0, 1, 2, false, new 　　　　　lib.btn_s_next(), 3);

　　// レイヤー 2
　　this.instance_2 = new lib.s002();

　　// レイヤー 1
　　this.circle = new lib.circle();
　　this.circle.setTransform(189,201);

　　　　　　　this.addChild(this.circle,this.instance_2,this.btn_next,this.instance_1,this.instance);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,531.7,387.4);

レイヤー毎にステージに配置されたものが書き出されていますが・・・

インスタンス名のあるものは、その名前で（例；this.circle、btn_next）
インスタンス名のないものは、固定名で上位レイヤーからの連番（例：this.instance、this.instance_1、this.instance_2）

になるようです。で、jsで参照するときはこんな感じに。

function btnClickHandler(e){
　　exportRoot.circle.x += 5;
　　exportRoot.instance.rotation += 10;
}
※動作環境：MacOX 10.7.6 + Flash CS6 + Toolkit for CreateJS 1.2
CreateJS, 東京ひよこ

東京ひよこの会 (第5回勉強会)に行ってきた

昨日、東京ひよこの会 (第5回勉強会)に行ってきました。第1回、第2回は幹事だったので、それ以来の参加です。
　途中でえらーさんと会ってやや遅れて到着しましたが、もう既に飲んでました（笑）（今回は飲みながら発表という趣旨）。上のリンクを見てもらえばわかりますが、なかなかに参加者も豪華。最後の方は真っ赤な顔の野中さんとか、酔って呂律の回らない一歩手間の池田さんとか、いろいろ貴重なものも見られました（笑）。
飲みながら徐々に砕けた感じで面白かったですが、ざっとまとめるとこんな感じでしょうか？
【いい点】
  • 飲みながらのざっくばらんな雰囲気。
  • （運営的に）懇親会の開示時間や予約などを気にする必要がない。
【悪い点】
  • 全体が長い。飲みながらのせいかか、ひとつずつの発表も後半につれて長くなっている気が。
  • 自分の発表まで、お酒をセーブするのがツライ（笑）。
何人か懇親会参加で後から見えた方もいたので、発表者以外も全員どっかのタイミングで自己紹介的なものがあるとヨカッタかな、と思います。ほぼみんな顔馴染みなのかなとも思ったけど、知らない人にとっては馴染みにくいかもしれないので。
あと「発表」って構えてしまうところもあるので、質問的なことも発表に含めるとか（例えば、○○をやりたいのでこう書いてみたけど、ここのところがうまくいかない等、丸投げでなく具体的な質問）すると、初めて出てみようかな、と思う人にも参加のハードル下がるかなと思ってみたり。
※ひよこの会は「原則各自発表」で、セミナー形式の勉強会ではないので。
私の発表はこんな感じでしたが、やはり発表するために整理するのは勉強になるなとか、対面でやる勉強会は質問もしやすかったり、セミナーにはない刺激がありました。できるだけこういうものには参加しないとなあ、と。
ともあれ、幹事のひろゆきさん、小橋さん、おつかれさまでした。
【追記】池田さんがToolkit for Dartを大プッシュだったので、みなさん使いましょう（笑）。
AS3.0, Box2D

Box2D 2.0.0のサンプルを2.1aで動かすための注意点

EaselJSのお勉強でBox2DWebを触ったので、その先を進めようとしたら意外とサンプルがない。JS版も基本的にBox2DFlashAS3と同じらしいんで、サンプルを漁ってみたもののどれも古くてそのままでは動かない。なんとか動くようにできたけど、色々変わってる点もがあり、それについて書かれた日本語ページを見つけられなかったので、今後のためにメモ。

※ Box2DFlashAS3 2.0.0 を 2.1a で動かすための変更点です。
まず、古いサンプルだとパブリッシュ設定がFlash Player9 になってる場合が多いけど、これだとこんなエラーが出ます。
行 8711046: 型が見つからないか、コンパイル時定数ではありません : b2Fixture。
これはFlash Player 10以上にすることで解決します（Flash Player11.4+Flash CS6で確認）。
次に Box2D.Dynamics.b2world クラスの b2wolrd メソッドの引き数が変わっています。
（2.0.0）world = new b2World(worldAABB, gravity, true);
（2.1a ）world = new b2World(gravity, true);
それから Box2D.Collision.Shapes 配下のクラスが変わっています。
（2.0.0）b2CircleDef >> （2.1a）b2CircleShape
（2.0.0）b2PolygonDef >> （2.1a）b2PolygonShape
そして Box2D.Dynamics.b2world クラスの bodyを作る為のメソッドが変わっています。
（2.0.0）var floor:b2Body = world.CreateStaticBody(floorBodyDef);
（2.1a ）var floor:b2Body = world.CreateBody(floorBodyDef);
2.0.0では、作るbodyの種類毎に world.CreateStaticBody、world.CreateDynamicBody とメソッドがあったようですが、2.1a では1つになっています。で、staticとかdynamicの指定は、Box2D.Dynamics.b2BodyDef で設定するようになっています。
（2.1a ）
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.type = b2Body.b2_dynamicBody;
また 2.0.0 では Box2D.Collision.Shapes に指定していた密度、摩擦係数、弾性（density,friction,restitution）は、2.1a では Box2D.Dynamics.b2FixtureDef に指定します。
（2.0.0）
var wheelShape:b2CircleDef = new b2CircleDef();
wheelShape.radius = 0.15;
wheelShape.density = 1;

（2.1a ）
var wheelfixtureDef:b2FixtureDef = new b2FixtureDef();
wheelfixtureDef.shape = wheelShape;
wheelfixtureDef.density = 1;
よくサンプルで使われている Box2D.Dynamics.b2DebugDraw もメソッドが大幅に変わっています。「m_…」が「Set…」に変更されています。
（2.0.0）
debugDraw.m_sprite = this;
debugDraw.m_drawScale = DRAW_SCALE;
debugDraw.m_fillAlpha = 0.3;
debugDraw.m_lineThickness = 1;
debugDraw.m_drawFlags = b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit;

（2.1a ）
debugDraw.SetSprite(this);
debugDraw.SetDrawScale(DRAW_SCALE); 
debugDraw.SetFillAlpha(0.3);
debugDraw.SetLineThickness(1)
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit | b2DebugDraw.e_pairBit);
最後に、物理シミュレーションを更新するための world.step() は、引数が2つから3つに変更されています。
（2.0.0）world.Step(1 / 24, 10);
（2.1a ）world.Step(1 / 24, 10, 10);
そして Box2D.Dynamics.b2DebugDraw を使う際は、world.Step() を呼び出したあとに・・・
world.DrawDebugData();
が、必要なようです。
とりあえずココまでの対処で、2.0.0 のサンプルを 2.1a で動かすことができました。まだ理解し切れてるとはいえないので、誤り等ありましたらご指摘下さい。下記サンプルを書き換えて動作確認しました（MaxOSX10.7.6+Flash CS6+Box2DWeb 2.1a）。感謝。
【追記】2013.7.21 東京ひよこの会 第5回で、この内容を発表した際に見つけた誤りを修正しました。
（誤）（2.0.0）b2CircleDef >> （2.1a）b2PolygonShape
（正）（2.0.0）b2PolygonDef >> （2.1a）b2PolygonShape
 
Director

Directorのdxrファイル

Directorで作られた古いCD-ROMから、画像を取り出す必要があって、しかもお約束通りdirファイルはなくて、CD-ROMの中のdxrファイルのみ…。いろいろ探してみたらコレが使えました。
動作環境はWin95になってるけど、XPで動きました。dxrファイルもダメなものもあったけど、今回の用途ではOKでした。試用も10日間できます。
あとMacで不可視ファイルを見る方法。これも役に立ちました。
この先あまり使うこともなさそうだけど、忘れた頃にやってきそうなので一応メモ。
CreateJS, JavaScript

EasleJS+Box2DWebで、床に角度をつける

野中さんのBox2DWeb+EaselJSのサンプルを組んでみた後に、床に角度をつけようとしたらハったのでメモ。要は、Box2Dでの角度＝ラジアン、EaselJSでの角度＝度数、ってことだったんだけど、コード書こうとして混乱してました。
bodyに角度をつける場合は・・・
 	//Box2Dでは、角度はラジアンで指定
  bodyDef.angle = Math.PI /180 *nAngle;
で、Tickerイベントの中でwolrdからbodyを取り出すときは、body.GetAngle()で取得した角度を度数に変換して・・・
  var body = world.GetBodyList();
  while(body){
     var myObject = body.GetUserData();
      if (myObject) {
        var position = body.GetPosition();
        myObject.x = position.x / SCALE;
        myObject.y = position.y / SCALE;

        //EaselJSでは、角度は度数で指定（ラジアン＞度数変換）
        myObject.rotation = body.GetAngle() * (180/Math.PI);

      }	
      //---次の剛体を取りだし
      body = body.GetNext();
  }
とやれば、物理計算と画面表示が正しく一致した角度になりました！実際に書いてみたコードはこちらにあります。

実際に角度つけたサンプルを見れば「ふんふん」となるようなことも、自分で書こうとすると意外にはまってしまうのは、経験の浅さかなと。

※事実誤認などありましたら、ご指摘ください。

AS,Objective-C,Javascript,その他諸々の備忘録