第三回CreateJS勉強会に参加しました

5/10に開催された第三回CreateJS勉強会に参加しました。
以下メモです。

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

原 広行さん
FlashCS6でまずは簡単なアニメーションを作る。
それをToolkit for CreateJSで書き出し。
シェイプをjsで描画するコードが書き出される。
シェイプなので拡大したり回転させてもビットマップのように汚くならない!
パーティクルエンジンはParticleEmitterJSを使用。
GUIエディタもあるよ。
PCではサクサクだが、モバイル環境ではパーティクルの表示は厳しい(4fps…
発表スライド
発表デモ

Toolkit for CreateJSでの書き出しで各種アセットはすべてビットマップになると勝手に思っていたけどちゃんとシェイプとして書き出されるとはじめて知りました。

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

阿蘇 健一さん
Windowsストアアプリはhtmlとjsで作れる。
スライドショー的なのはWindowsストアアプリ用のJSライブラリ的なもので簡単にできる!
easelJSのカラーマトリックスフィルタを使って画像にエフェクトをかけてみる。
デカい画像(4000pxとか)にエフェクトかけると重くてしぬのでcanvasにスケールアウトして転写してからエフェクトかける。
Windowsストアアプリ用に用意されているjs群は使える。

Windowsストアアプリは結構簡単に作れそうで面白そう・・・だけどwindows8が・・・ないです。

PhoneGapとCreateJSの連携

有川 榮一さん
phonegap.comはjs/htmlで組んだものをios/andoroidその他のアプリに変換するもの。
一番簡単なのはAdobeのPhoneGapBuildで変換してもらう。
でもそれだとできることが限られているのでPhoneGapSDKをダウンロードして手元で開発・ビルドするのが基本。
実機とPC(webブラウザ)をつないだデバッグ方法の実演があったもののどうやってるのかよくわからず・・・。
リフレクトというアプリを使う??

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

奥田 透也さん
ぐりぐりうごく、カッコいいスライド。
canvasでフルレンダリングしてフルFlashサイトみたいなjsサイトつくりたい。
ajaxサイトだとURLに履歴残らないのでpushState使いたい。
pusuStateの機能を使えるjsライブラリ各種。
jQuery.pjax
backbone.js
kazitori.js
kazitori.jsをさらにラップしたMilkpack.jsを作ったよ。
その他jppcorelib.js(コマンド処理とか便利なのいっぱい)も作ったよ。

CreateJSとあんまり関係なくね?と思わなくもなかったけど一番興味深い(面白い)発表でした。
ちょっと試してみたいなと思い、Milkpack.jsのexample覗いたんだけど・・・難しいです。
Coffescriptで書いて変換したjsなのでしょうか。
ライブラリ部分はcoffeでも全然問題ないのですが、exampleは素直なjsで書いたものがあると・・・うれしい。

Toolkit SupporterでSWF/CreateJS同時開発(ライブコーディング)

千歳 慎さん
Toolkit Supporterを使ってどのように開発するのかの実演。
Toolkit Supporter自体はスマホ(CreateJS)/ガラケー(FlashLite)のコンテンツを同時に書き出してくれるすごい作りこまれたツールだけども、いかんせんソシャゲ制作にかなり特化したツールなのでソシャゲ制作にかかわっていない自分にはイマイチ使い道がないです。

CreateJSで作るモバイル向けビジュアル表現 / CreateJS最新情報〜Adobe MAX 2013より〜

池田泰延さん/加賀篤史さん

加賀篤史さんの発表
CreateJSを使ったタブレット向けコンテンツとしてマルチタッチを生かしたゲームを制作。
オープニングのアニメーションがFlashぽい動きでかっこいい。
typescriptで制作した。
まずはCreateJSのタッチ操作を有効化する。
マルチタッチは個別IDをcreateJSでふってくれる。
マルチタッチの動作はデバイス毎に差異があるがそれをCreateJSで吸収してくれる。

実際にタブレット上で動作しているところを見せてもらいましたが・・・それほんとにタブレット・・・?(意地悪
原 広行さんの発表でも使われていたパーティクルエンジンを使用していたがやはりタブレットで使うには重いらしい。

池田泰延さんの発表
AdobeMAX帰り。
FlashからCreateJSへの書き出しは2種類ある。
Flashから「スプライトシート書き出し」でビットマップを作ると高速に動かせる。
しかしスプライトシートで書き出すと容量が肥大化(png)する。
SpriteSheetBuilderクラスを使うと軽量化出来る!
ベクターのままデータとして持ち、再生時にスプライトシートに動的に書き出して両方のいいとこ取りをするクラス。

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

野中 文雄先生
6月にCreateJSの本が出る。
300p越えの分厚い本の予定。
レジュメ

参照リンク:
第三回勉強会フォローアップ | CreateJS.jp