akiyoko blog

akiyoko の IT技術系ブログです

「CreateJS勉強会(第3回)」に参加してきました

昨日、js系の勉強会に参加してきました。

「CreateJS勉強会(第3回)」(2013.5.10)

会場は品川のMicrosoft本社。前にも行ったことがあるところでした。
CreateJSは触ったことがなかったのですが、ActionScript3はお仕事でやったことがあったので理解はしやすかったです。


勉強会の発表資料や動画はこちらにアップされてます。
http://createjs.jp/?p=169

で、いつものようにメモをアップ。

はじめてのCreateJS+パーティクル

原 広行氏 @ProjectNya

  • Flash CS6 で「Toolkit for CreatJS」というのがある
    • Publishすると、HTMLが吐き出される
    • ShapeのJSも吐いてくれる。あとは吐き出したライブラリを読み込んで new Piyo() すればOK
  • スターリン?で作ったような)パーティクルを発生させることもできる (PerticleEmitterJS)
    • 炎の表現など
    • モバイルで見ると重い。4〜14fps程度しか出ないらしい
    • モバイルだと使い勝手が無いかも。試してみる程度なのかな?

WindowsストアアプリでCreateJSをこう使う

阿蘇 健一氏

モバイルアプリだけじゃなくて、こういう使い方もできるよという紹介。

  • WindowsアプリはHTML5JavaScriptで作る
    • 敷居が低いよ
  • CreateJSだと、updateとかcacheとか一手間必要
  • FlipViewはお手軽にスライドが作れるのでオススメ

PhoneGapとCreateJSの連携

有川 榮一氏

モバイルにラッピングするのには、PhoneGapが一番?

  • コマンドラインからPhoneGapプロジェクトを作成
  • ./bin/create xxx xx.xx.xx Xxxx
    • プロジェクトの名前だけ大文字?
  • OSSのブランケットをAdobeが完了したのが「Edge Code」
  • デバッグは、Safariを立ち上げて、開発メニュー -> XXのiPhone -> index.html をクリックすると連携される
  • パフォーマンス
    • オブジェクトが少なければヌルヌル動く(60fpsに近い)

pushStateを使ったフルCreateJSサイトの作り方

奥田 透也 @alumican_net

あとでスライドをアップする。

  • AS3のProgression的なアレ
  • ブラウザのURLをpushStateから発行
  • 代表的なライブラリ jQuery.pjax
  • Backbone.jsはちょこっとやるには厳しい(ちゃんとMVCしないと)
  • 自作Milkpack.jsだと、ダイレクトアクセスしたときに処理を分けて書ける
  • すべてをcanvasで描画するんじゃなくて、createjs.DOMElementを使ってWebサイト作るとSEO的に?もいいよ

Toolkit SupporterでSWF/CreateJS同時開発

千歳 慎氏

Adobe Flash上でSWFとCreateJSのライブコーディング。

  • Flash Lite2.0を使ってる。CreateJSと相性が良い?
  • ASで書くときから、this参照をしっかりしておいた方がよい

CreateJSで作るモバイル向けビジュアル表現

池田 泰延氏・加賀 篤史氏

(加賀)

  • 趣味で「Tween24」作ってる
  • 全国花粉飛散マップ
  • タッチでバイス向けのデモ「color create」
    • すげー!!凝ってる
  • 開発は、CreateJSとTypeScript
  • CreateJSのタッチ操作を有効化(デフォルトは無効になってる)
if (createjs.Touch.isSupported()) {
  createjs.Touch.enable(stage);
}
  • Canvasだと、マルチタッチのときのイベントや座標の配列がややこしい
    • CreateJSだとブラウザの差を吸収してくれる。便利
  • コンテナを使って、擬似的な?リキッドレイアウトを表現。モバイルでもデスクトップでもOK
    • 位置情報のリサイズ(補正)を忘れずに
  • CreateJSの拡張ライブラリ「ParticleEmitterJS」を使ってパーティクルを使っている
    • パーティクルはビジュアルエディタで作成

(池田)

  • Adobe MAXのCreateJSセッションの内容を紹介 togetter/li/499513
  • デモが https://github.com/createjs/sandbox
  • createJSを使ってバナーを作ることもできる
  • 重要セッション? Vector vs Bitmap(重いけど高速!)
    • Bitmapではスプライトシートを使用すると超速い。でも、容量が重過ぎ。。
    • いいとこ取りなのが「SpriteSheetBuilder」。この機能が備わっているフレームワークはCreateJSだけ

EaseUSでBox2Dを使った物理シミュレーションを試す

野中 文雄氏

FumioNonaka.com
「WebクリエイターのためのCreateJSスタイルブック」という本が出るよ。6月下旬予定。
レジュメも来週出すよ。