本日、2016年2月13日をもちまして、F-siteは2002年から続けてきた非営利団体としての主要な活動を停止することになりました。
具体的には、活動の2本柱であった、F-siteセミナーの継続開催と、Webサイト(f-site.org)の更新が終了となります。また、FacebookページとTwitterアカウントについても、Webサイトと同様に更新を終了します。
発足から長年に渡り、のべ約5,000人のご参加をいただいたF-siteセミナーは、数多くのスピーカーとボランティアスタッフのご協力なくしては、続けてくることができませんでした。この場を借りて、厚くお礼申し上げます。
活動停止にいたった理由は数多くあります。中でも大きい理由の1つとして、実際に活動を運営、サポートするためのスタッフが減ってきたことが挙げられます。
参加者、スタッフともにF-siteやFlashに対して求めるものが多様化する中で、新しくスタッフとして手を挙げてくださる方は年々減少していました。また、既存のスタッフも、仕事上の職位が変わる、子供が産まれる、地方に引っ越すなど、仕事・プライベートでのステージの変化によって、活動に割ける時間がだんだんと少なくなっている状況でした。
こうした中、2015年はセミナーを開催することができませんでした。このまま曖昧な形で活動を続けるよりも、はっきりとした形でピリオドを打つことが重要と考え、活動停止を発表することになりました。
これまで運営スタッフや協力パートナーによってWebサイトに投稿されてきた記事は、セミナーレポートも含めてF-siteの大切な資産だと考えています。そのため、F-siteの活動資金(昨年末時点で40万円強)が続く限り、サーバーとドメインを保持し、閲覧できる状態を維持する予定です。
なお、お問い合わせについては、引き続き以下のフォームよりお問い合わせください。
http://f-site.org/contact/
発足当初にボランティアスタッフとして加入した私は、当時学生でした。そこから就職して、独立して、結婚して、子供が産まれて……14年間というのは、それだけ長い年月でした。その間、F-siteでは喜びも苦労も、数多くの人たちと分かち合うことができました。
いまは、F-siteを支えてくださったすべてのみなさんと、1人ずつ握手をして回りたい気持ちです。
どうもありがとうございました。
F-site代表
沖 良矢
Adobe Creative Stationの「Welcome Adobe Animate CC, a new era for Flash Professional」を邦訳した2015年12月1日付の記事が、2016年2月9日付で更新されたものです。名前を改めた理由や、おもな機能が説明されています。
Adobe Creative Stationの「Animate CC is here!」を邦訳した2016年2月9日付の記事です。新機能がかいつまんで紹介されています。
新機能が一覧で示されています。Flash Professional CC 2015から何が変わったのか簡単に確かめるのに便利でしょう。
Adobe Animate ヘルプにおける新機能と機能強化の解説です。新機能についてのドキュメントとしては、もっとも詳しいでしょう。
下記の項目について、それぞれビデオなどを用いて説明しています。ナレーションは英語ですが、日本語字幕が加えられています。
Adobe Animate CCの製品紹介ページです。ビデオによる新機能の説明があります。ナレーションは英語ですが、日本語字幕が加えられています。
INTERNET Watchの2016年2月8日付記事。
マイナビの2016年2月9日付記事。
CodeZineの2016年2月8日付。
ASCII.jpの2016年2月9日付記事。
ICS MEDIAの2016年2月9日付記事。
MUSHIKAGO APPS MEMOの2016年2月9日付記事。
]]>HTML5でダイナミックなコンテンツをつくるには、JavaScriptコードを書かなければなりません。JavaScriptの使い途はきわめて広く、基礎から学ぼうとしても、どこから手をつければよいのか迷ってしまう人も少なくないでしょう。
もっとも、今はさまざまな目的に合わせて、優れたJavaScriptライブラリが公開されています。中でも、jQueryは応用しやすく定評のあるライブラリです。 また、CreateJSはFlashのようなアニメーションやインタラクションが表現できます。これらふたつのライブラリを使いながら、JavaScriptの基礎を学ぶことがこの講座の目的です。
受講の対象はHTMLとCSSの基礎を学んだ方です。JavaScriptは書いたことがなくて構いません。
]]> 開催概要jQueryプラグインとは jQueryと一緒に利用するJavaScriptライブラリーのことです。現在、インターネット上には膨大な数の jQueryプラグインがリリースされています。 jQueryの基礎知識があれば、プラグインで比較的簡単に様々なインターフェイスを作る事が可能です。
本セミナーでは、手軽に様々な効果を付けたい方、手っ取 り早く jQueryを仕事に役立てたい方向けに、制作現場で役立つプラグインを紹介します。
]]>今回のEaselJS 0.8.2のリリースでは、おもに細かなバグの修正とドキュメンテーションの改訂が加えられました。ひとつ大きな変更は、MovieClipクラスがEaselJSライブラリのひとつとして、コンパクト(min)版に含まれたことです(CreateJS CDN参照)。クラスをEaselJSライブラリと別に加えずに済むようになり、MovieClipクラスのコンパクト版はなくなりました。おそらく、Adobe Animate CCでは、ひとつのCreateJSライブラリ(min版)とともにコンテンツが書き出され、最大5つのライブラリをそれぞれ含めることはなくなるでしょう。
最新のライブラリはGitHubに掲げられており、CreateJS CDNから読み込むこともできます。それぞれのライブラリの詳しい改訂内容は、VERSIONS.txtに一覧で書かれています。それぞれのライブラリのバージョンはつぎのとおりです。また、各VERSIONS.txtの内容を解説したノートのリンクも添えます。
バグ報告や機能の要望については、GitHubのissueで受け付けています。また、質問については、現在StackOverflowを利用することが勧められており、Redditも始められました。なお、筆者はFacebookページ「CreateJS」を開いていますので、興味がありましたらご覧ください。
]]>Bootstrapパッケージには、Bowerが依存するJavaScriptやCSSのコンポーネントが含まれています。これらをgrunt-wiredepでHTMLドキュメントに差し込むにはどうするのか、先に確かめておきましょう。なお、GruntとBowerのインストールについては、タチコマ好きなエンジニアのブログ「GruntとBowerを使ってWeb開発用のテンプレートを作成する」をご参照ください。
まず、NPMでブラグインgrunt-wiredepをインストールします(grunt-wiredep「Getting Started」参照)。
npm install --save-dev grunt-wiredep
つぎに、gruntfile.jsにgrunt-wiredepの読み込みとタスクを書き加えます(「Grunt 日本語リファレンス」「Gruntfileについて」参照)。module.exports
に定めるラッパー関数の中で、grunt.loadNpmTasks()
メソッドの引数に文字列"grunt-wiredep"を渡すと、プラグインが読み込まれます。そして、grunt.initConfig()
メソッドに与えるタスク(wiredep)のプロパティtask
の中で、src
に差し込み先HTMLドキュメントのパスを書き加えます。
module.exports = function(grunt) { grunt.initConfig({
wiredep: {
task: {
src: 'builds/development/**/*.html'
}
}});
grunt.loadNpmTasks('grunt-wiredep');
};
そして、差し込み先のHTMLドキュメントに、Bowerが依存するCSSやJavaScriptコンポーネントを加えたい箇所は、つぎのようなコメントのかたちで定めます。
<!-- bower:css --> <!-- endbower -->
<!-- bower:js -->
<!-- endbower -->
そのうえでコマンドラインツールから、Bowerのinstall
コマンドでパッケージをインストールし、Gruntに定めたgrunt-wiredepのタスク(wiredep)を実行します。
bower install --save bootstrap
grunt wiredep
タスクが正しく実行されると、HTMLドキュメントの指定した箇所にCSSやJavaScriptのコンポーネントが書き加えられます。
<!-- bower:css --> <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.css" /> <!-- endbower -->
<!-- bower:js -->
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
本稿執筆時では、Bootstrap 3.3.5のパッケージからgrunt-wiredepでCSSコンポーネントがHTMLドキュメントに差し込まれません。JavaScriptのコンポーネントは正しく書き込まれます。
<!-- bower:css --> <!-- endbower -->
<!-- bower:js -->
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
対応方法のひとつは、Bootstrap 3.3.5のパッケージは除いて、Bootstrap 3.3.4に落とすことでしょう。インストールするバージョンを特定するには、パッケージ名に続けてハッシュマーク(#)と番号を書き加えます。そのうえで改めてGruntのタスクを実行します。
bower uninstall --save bootstrap
bower install --save bootstrap#3.3.4
grunt wiredep
grunt-wiredepはBootstrap 3.3.4のパッケージからであれば、Bowerが依存するCSSコンポーネントを正しくHTMLドキュメントに加えます。
<!-- bower:css --> <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.css" /> <!-- endbower -->
<!-- bower:js -->
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
Bootstrap Blog「Bootstrap 3.3.5 released」は「wiredep and Bower」の項でこの問題について触れ、Bowerの定義ファイルbower.jsonの仕様は曖昧だったためにgrunt-wiredepが処理を誤ったとしています。そのため、Bowerの仕様は改定が進められているそうです。また、Bootstrap 3.3.5でも、ファイルbower.jsonのmainを再定義すれば処理は正せるとしています(前出「Bootstrap 3.3.5 released」参照)。
]]>"overrides": { "bootstrap": { "main": [ "dist/js/bootstrap.js", "dist/css/bootstrap.css", "less/bootstrap.less" ] } }
本年5月に一度Flash Developer募集を投稿させていただいたYourGamesさん(東京)に加え、今回は、あらたに複数のゲーム会社さん(大阪)でもFlash Developer募集がありました。
共通する業務内容は、フロントエンドの開発がFlashとなる、PCまたはモバイルプラウザゲームの開発です。設計、開発、テストに至る全ての開発工程を担当することができます。
志向性に応じて、積極的に企画検討やチームマネジメントの経験をする環境もあります。
アジャイル的な開発体制。企画と開発で意思疎通を図りながらサービスのリリースまで担当いただきます。
環境はPCブラウザゲームの場合はActionScript3.0、モバイルブラウザゲームの場合はActionScript2.0となります。職種は、Flash DeveloperおよびFlasher(Animation Designer)募集となります。その他、UI Designerも募集中です。
今回の募集ポジションでは、アクティブ数万人規模の人気ゲームで、売りとなるフロントエンドの設計・開発・運用に携わることができます。また、状況次第では、近い将来、新規コンテンツの開発に初期メンバーとして携わることが可能です。
こちらからお気軽にお申し込みください(記入:30秒以内)
https://goo.gl/vpHyAV
そのCreators Meetupの中で、隔月で数学ネタの一席を務めるようになり、数も重ねてきました。そこで、ビデオ録画とレジュメやサンプルのリンクを、分野ごとにまとめてみます。
]]> 01 三角関数三角関数のsinとcosは、直角三角形の辺の比率として初めに習います。それをプログラムのアニメーション表現で使うのは、おもに円運動です。「三角」がどうして「円」になるのか、疑問をもったとしても不思議はありません。sinとcosはどう定められ、どういう性質があるのかという基本を中心に、変わったアニメーションの応用表現も紹介します。
サンプル
ベクトルの「外積」は、考え方のわかりにくい計算です。けれど、何に使えるのかを知れば、式そのものは簡単な四則演算です。今回は2次元のベクトルに絞って、3つのインタラクティブなサンプルを例に、外積がどう使われているのかをご紹介します。
サンプル
「ベクトル」というのは、とっつきにくい印象が強いようです。とくに、「内積」とか「外積」とか、何の積なのか。いずれも、式そのものは単なる四則演算です。けれど、そもそもどんなときに使うのかわらないのが、近寄りがたい理由でしょう。
2014年1月の第12回Creators MeetUpでは、「珍味ベクトル外積3種盛り」と題して外積の使い道について一席務めました。今回は、その続編でもあります。内積も加えて、最近小学校の算数教材の制作で実際に使った例をご紹介します。式は前述のとおり四則演算ですので、考え方に重点を置いてご説明します。
行列は、一定の計算規則にしたがう数値の集まりです。その数値の集まりともうひとつの行列を演算すると、もとの数値が変換されます。つまり、数値を変換するパラメータの集まりが行列だと捉えることもできます。
たとえば画像にかけるフィルタは、各ピクセルのRGBカラーという数値の集まりに行列演算してイメージを変換します。とくに行列を意識する意味があるのは、座標変換です。図形の座標を変換すると、かたちが変わります。2次元あるいは3次元空間における座標の伸縮・回転・移動は行列の乗算で表せるのです。
もっとも、これらの変形はそれぞれのプロパティを使ってもできる場合がほとんどです。あえて難しげな行列を使うと何がお得なのか、CreateJSを使ったサンプルコードでご紹介します。
行列の演算は、数値の集まり同士で行いますので、計算量は多くなります。けれど、決まった規則による大量の演算はコンピュータの仕事です。行列の計算そのものでなく、その意味と利点に焦点を当てて解説します。
サンプル
物理的なアニメーションを表現しようとするとき、直接位置を計算しようとするより、速度から導いた方が複雑なアニメーションも簡潔に表せたりします。これは数学的には、微分により物体の運動を捉えていることになります。微分の計算そのものはしなくても、考え方を知るだけで見通しはよくなり、応用の幅も広がます。
サンプル
「ベレの方法」というのは、互いの間に力が働く粒子の動きを表す物理の考え方(方法)です。
物体の運動は、速度から位置を求めるのが普通です(「速度から位置を決めるアニメーション ー 微分により運動を考える」参照)。ところが、ベレの方法では、速度でなく位置と粒子間の位置関係から運動を定めます。すると、つぎのサンプル(オブジェクトはドラッグできます)のような一見複雑そうな動きが、四則演算で表せます。数式やコードより、考え方に重点をおいてご説明します。
サンプル
与えられた座標から軌跡などのパスを描くとき、多くの場合間隔を小さくとれば直線で結んでしまえば差支えありません。けれど、座標の間隔が大きかったり、あるいは向きが激しく変わることもありえます。そのようなとき、滑らかなパスを描くにはどうしたらよいか。ベジエ曲線の描き方と、座標の結び方についてご説明します。
「ネイピア数」eは、自然対数の底として用いられ、多くのプログラミング言語に定数Math.Eとして備わります。けれど、ほとんどの人生にまったく必要のない数で、この定数を使わずに過ごすプログラマが大半でしょう。これほどまでに実用性のとぼしい定数が、数学や自然界のふとした端々に顔を現します。そんな「ネイピア数」の生態を追いました。
マイナス×マイナスはなぜプラスになるのでしょう。小学生に説明しようとしたとき、借金にたとえる人が少なくありません。でも、借金はマイナスでしょうか。虚数単位i×iは-1になります。プラスマイナスの実数軸に虚数軸を組み合わせた複素平面にも少し触れます。
2014年12月12日付のリリースは、つぎのバージョンのライブラリから成立ちます。
Graphics.command
プロパティは、Graphicsオブジェクトに対してつくったり、加えたりした直近のGraphicsコマンドの参照をもちます。これを用いると、Graphicsコマンドのプロパティで後から描画が動的に変えられます。MovieClip.framerate
プロパティを定めると、インスタンスごとにフレームレートが変えられます。また、Ticker.framerate
とTicker.interval
プロパティも備わりました。それらをリファレンスとして解説します。ImageLoader.load()
メソッドを呼出さなければなりません。2015年5月21日付のリリースは、つぎのバージョンのライブラリから成立ちます。
MovieClip.duration
とMovieClip.totalFrames
がそのプロパティで、いずれも再生し終えるまでのミリ秒数またはDisplayObject.tick
イベント数を示します。
2010年9月に設立した、ゲームコンテンツの企画・開発・運営を行う株式会社YourGames。
「開発者が働きやすい会社を」という思いで立ち上げられた同社は、顧客、従業員、そしてユーザーに対しても強い思いで取り組んでいる会社です。
100%自社提案の開発が行える環境が整い、同社は新しいフェーズへ向かっています。
業務内容としては、新規タイトル開発及び現在運営中タイトルの開発です。
設計、開発、テストに至る全ての開発工程を担当することができます。
志向性に応じて、積極的に企画検討やマネジメントの経験をする環境も整っている会社です。
アジャイル的な開発体制。企画と開発で意思疎通を図りながらサービスのリリースまで担当いただきます。
環境はPCブラウザゲームの場合はActionScript3.0、スマホネイティブアプリの場合はUnity、Cocos2d-xとなります。今回は、PCブラウザゲームのFlash Developer募集となります。
■ActionScript3.0に関する知識および業務経験
■PCブラウザゲーム開発経験
今回の募集ポジションでは、アクティブ数万人規模のコンテンツの売りとなるフロントエンドの設計・開発・運用に携わることができます。また、新規コンテンツの開発に初期メンバーとして携わることが可能です。
こちらから。
https://goo.gl/vpHyAV
こちらから。
http://goo.gl/F4yqUW
]]>
]]> 現在進められているTweenJSの改訂が目指しているのはつぎの点です。
TweenJSは、このところあまり手が加えられてきませんでした。そろそろ基本的な改訂をするときでしょう。今のところ、つぎのような新たな機能が加えられようとしています。
今回のアップデートは、おそらく新たな機能には重きが置かれません。むしろ、これから後さらに拡張ができる基盤となるフレームワークを構築することになるでしょう。また、これまでのAPIが動かなくなることは避けます。
]]>ただのテキストでも、フォントを選んでCSS3でアニメーションさせると、表現力は大きく高まります。
「Monoton」フォントを使って、text-shadow
プロパティで光彩を与えました。そして、animation
プロパティにより、イルミネーションの点滅のようなアニメーションを加えています(サンプル001)。
text-shadow
プロパティのつくる影で、文字が浮き上がって見えるようにしました。animation
プロパティが、テキストの影をひと文字ずつ時間差で増減して浮き沈みさせています(サンプル002)。
マウス操作により、サブメニューを開くというインタラクションも、CSS3のアニメーションで表せます。
transition
プロパティでプルダウンメニューのナビゲーションをつくりました。サブメニューは不透明度を上げながら広がり、メニューテキストの色も短い時間で変わっています(サンプル003)。
transition
プロパティでつくったアコーディオンメニューのナビゲーションです。サブメニューの高さと項目の不透明度をアニメーションさせることで開け閉めしています(サンプル004)。
transform
プロパティは要素を2次元あるいは3次元で、伸縮・回転・移動します。それにtransition
プロパティを組合わせると、インタラクティブなアニメーションができます。
transform
プロパティでイメージを、伸縮したり、回転したり、移動できます。それにtransition
プロパティを組合わせてアニメーションさせました(サンプル005)。
transition
プロパティを使って、ふたつの画像をクロスフェードで切替えることができます。さらに、切替えボタンなどのインターフェイスもCSSでつくりました(サンプル006)。
transform
とtransition
プロパティを組み合わせて、3次元のアニメーションができます。イメージやテキストの要素を水平に回したり、手前に押し出したりしてみました(サンプル007)。
transform
とtransition
プロパティを用いて、画像にマウスポインタが重なったとき説明のテキストを表示します(サンプル008)。表現の仕方を3つ試しました。
transform
プロパティは、要素に回転・伸縮・傾斜・移動などの座標変換を加えます。さらに、transform-style
プロパティも合わせて用いれば、要素が3次元空間で変換できます。矢印キーの操作によるインタラクションは、JavaScriptコードで加えました(サンプル009)。
The transformation methods of the Matrix2D class are represented by multiplication of matrices. The new EaselJS 0.8.0 changed their orientation and their results have come to be different from the former versions. This article shows some snippets to get the same results as old versions with version 0.8.0.
]]> Matrix2D.translate()なお、以下の2点にご注意ください。
Matrix2D.rotate()
メソッドの引数に渡す角度は、ラジアン値から度数に変わりました。Matrix2D.skew()
メソッドの結果は、これまでと変わりません(修正する必要はありません)。Note the following two points:
Matrix2D.rotate()
method was changed from radians to degrees.Matrix2D.skew()
are the same. (No change is needed)]]> 新しいCreateJSライブラリのリリース
すべてのCreateJSライブラリのバージョンが0.1上がりました。GitHubまたはCreateJS CDNからお使いになれます。CDNにはコンパクト(min)版とCreateJSライブラリの統合版があります。多くの新しい機能や改善に加え、内部的に大幅な再設計も施されました。
詳しい変更点については、GitHubでそれぞれのライブラリのVERSIONS.txtをご覧ください。なお、新たなCreateJSライブラリはFlash Professional CCのHTML5 Canvas書出しとも互換性があります。つぎのFlash Professional CCのリリースに備わるでしょう。
createjs.comのサイトが一新されました。ライブラリも仕上がってきましたので、それに合わせてサイトのデザインも改められました。
ブログやCDNおよびドキュメントの外観も揃えました。
]]>Graphicsクラスの描画メソッド(Graphics API)の使い方が変わる訳ではありません。これまでと同じようにメソッドは呼出せます。ただ、呼出されたGraphicsクラスのメソッドが、内部的にGraphicsコマンドのオブジェクトをつくって描画するということです。さらに、もし使いたければ、Graphicsコマンドを直に呼出すこともできます。Graphicsコマンドの描画の仕方はCanvasに近いので、より細かな扱いができます。
Graphicsコマンドは、描画の操作ごとにクラスが備わっています(Graphicsコマンドをつくるクラスについては「EaselJS NEXT: Graphics.commandプロパティ」の「説明」参照)。たとえば、塗り(Graphics.beginFill()
メソッド)はGraphics.Fill、円を描く(Graphics.drawCircle()
メソッド)ならGraphics.CircleクラスでGraphicsコマンドオブジェクトをつくります。それらのGraphicsコマンドオブジェクトは、Graphics.append()メソッドの引数に渡して、描画のキューに加えます。
たとえば、EaselJS次期バージョンのGraphics.drawCircle()
メソッドの実装は、実際Graphics.Circleオブジェクトをつくって、Graphics.append()メソッドで描画キューに加えるだけの処理です。
Graphics.prototype.drawCircle = function(x, y, radius) {
return this.append(new Graphics.Circle(x, y, radius));
};
EaselJS 0.7.1のGraphics.drawCircle
メソッドの実装では、内部的にGraphics.arc()
メソッドを呼出して、参照するGraphicsオブジェクトに円を描いていました。
Graphics.prototype.drawCircle = function(x, y, radius) {
this.arc(x, y, radius, 0, Math.PI*2);
return this;
};
EaselJS次期バージョンのGraphicsクラスについて詳しくは、「EaselJS NEXT: Graphicsクラス」をお読みください。
Graphics APIでなく、Graphicsコマンドオブジェクトを使ってGraphicsインスタンスに描画してみます。つぎのサンプル001は、ステージの真ん中に置いたShapeオブジェクトに、Graphicsコマンドオブジェクトで半径50ピクセルの青い円を描きます。さらに、インスタンスをクリックすると、Graphicsコマンドオブジェクトのプロパティにより半径と色が変わります。具体的なコードの中身については、「EaselJS NEXT: Graphicsクラス」の「例」をお読みください。
サンプル001■EaselJS NEXT: Using Graphics command object
Graphics.command
プロパティを用いると、Graphics APIの呼出しからつくられたGraphicsコマンドオブジェクトの参照が得られます。すると、そのGraphicsコマンドオブジェクトのプロパティを後から変えることができます。「EaselJS次期バージョンに備わるGraphics.commandプロパティ」の「例」では、前掲サンプル001と同じ動きを、Graphics.command
プロパティで行っています。
おもな更新については、すでにつぎの記事で紹介されました。
改められた点はきわめて多く、2週間後くらいに重要な項目がまとめられます。今すぐ詳しく知りたい方は、GitHub「CreateJS」で各ライブラリのVERSIONS.txtをご覧ください。また、NEXTバージョンをダウンロードして試すこともできます。
]]>demo1「AIRでコントロールするMotionセンサー群」アイ・エム・ジェイ 糸数昌史氏
demo2「センシングで変わるデジタル体験」ワン・トゥー・テン・デザイン 坪倉輝明氏
demo3「体験のデザイン」STARRYWORKS 木村幸司氏 [demo資料]
demo4「未来のしくみをデザインすること」しくみデザイン 中村俊介氏
当日は100人のご参加をいただきました。ありがとうございました!
追記:2014.12.04 demo3の木村さんのデモ資料をいただけたので、リンクを加えました。
F-site・沖氏、司会進行・SIHO氏(写真右)。
demo1「AIRでコントロールするMotionセンサー群」アイ・エム・ジェイ 糸数昌史氏
アトラクションの設計などAIRの事例を中心にプロトタイプとしてのFlashの使い所など解説していただきました。
demo2「センシングで変わるデジタル体験」ワン・トゥー・テン・デザイン 坪倉輝明氏
Oculus Riftの事例の解説やカメラを使ったセンシング方法のお話などをしていただきました。
demo3「体験のデザイン」STARRYWORKS 木村幸司氏 [demo資料]
Hueと連携したアプリ"いろぴこ"や"PLAYFUL BOOKS"の紹介など「体験」のデザインについてのお話をしていただきました。
demo4「未来のしくみをデザインすること」しくみデザイン 中村俊介氏
「KAGURA for PerC」の実演や過去の事例の紹介など楽しい体験を作るお話や正確さより感覚を大事にするといったお話をしていただきました。
会場脇に設置された体験展示コーナーは休憩時間中に多くの人が集まり大盛況でした。
当日はセンサー系コミュニティTMCN(TokyoMotioncontrol)の皆様にもスマホVRの展示などご協力いただきセミナーを盛り上げていただきました。
ジャンケン大会、そして秋葉原に移動しての二次会も大変盛り上がりました。
写真:桜井
]]>EaselJS次期バージョン(NEXT)に新たにGraphics.command
プロパティが備わりました。その使い方としてサンプルコードをご紹介します。
The upcoming (NEXT) version of EaselJS implements the new Graphics.command property. This article shows an example code.
]]> Graphics.commandプロパティ / Graphics.command propertyGraphicsインスタンスに描画メソッドを呼出すと、内部的にGraphicsコマンドオブジェクトがつくられます。Graphics.command
プロパティは、直近のGraphicsコマンドオブジェクトを参照します。
Each call of drawing method on a Graphics instance generates a Graphics command object. The last command object to be created would be referred via the Graphics.command
property.
fillCommand = myGraphics.beginFill("blue").command;
その参照に対して後からプロパティを変えると、描画に動的に反映されます。
Its reference can be updated later on and will reflect the changes then.
fillCommand.style = "red";
以下のコード001は、ステージの真ん中に置いたインスタンスに、半径50ピクセルの青い円を描きます。そして、インスタンスをクリックすると、円の半径と色がランダムに変わります。jsdo.itにも併せてコードを掲げます。
The Code 001 below draws a blue circle with 50 pixels radius in the center of the stage. Then clicking on the circle changes its color and radius randomly. The code can be tested in jsdo.it as the below.
なお、Graphics.command
プロパティとコードの中身について、詳しくは「EaselJS NEXT: Graphics.commandプロパティ」をお読みください。
コード001■マウスクリックで円の半径と塗りを動的に変える
var stage;
var fillCommand;
var circleCommand;
function initialize() {
var canvas = document.getElementById("myCanvas");
var myShape = new createjs.Shape();
stage = new createjs.Stage(canvas).set({x:canvas.width / 2, y:canvas.height / 2});
stage.addChild(myShape);
myShape.addEventListener("click", changeCircle);
drawCircle(myShape);
stage.update();
}
function drawCircle(myShape) {
var myGraphics = myShape.graphics;
fillCommand = myGraphics.beginFill("blue").command;
circleCommand = myGraphics.drawCircle(0, 0, 50).command;
}
function changeCircle(eventObject) {
var randomColor = Math.floor(Math.random() * 0xFFFFFF);
var randomRadius = Math.random() * 50 + 20;
var color_str = createjs.Graphics.getRGB(randomColor);
fillCommand.style = color_str;
circleCommand.radius = randomRadius;
stage.update();
}
]]>
Bracketsの最近のリリースで、多くの機能が加えられました。マルチカーソルや分割ビュー、テーマサポート、そして多くの修正や強化です。このたびのリリース1.0では、カスタムキーバインドが採入れられ、Bracketsで用いるショートカットキーの組合せが変えられます。たとえば、BracketsのショートカットキーをSublime Textと揃えることもできます(brackets Wiki「User Key Bindings」参照)。
また、このリリースは、クイック編集の結果が折りたためます。すると、LESSやSCSSファイルを使って生成されたCSSファイルなど、書替えたくない結果がファイルから隠せるのです。また、JavaScriptのコードヒントは、フィルタしているとき大文字小文字を区別して、より正確になりました。
Brackets 1.0に加えて、Extract for Bracketsのプレビュー版もリリースされました。Extract for BracketsはCreative Cloudサービスで、PSDの情報やアセットがテキストエディタで直ちに見られます。PSDから色やフォント、計測情報、グラデーションその他を、CSSやHTMLのコンテキストコードヒントのかたちで示します。また、レイヤーは画像として取出し、PSDの情報をプリプロセッサ変数の定義に使って、オブジェクト同士の位置関係も得られます。これらによって、デザインから開発への流れが改善し、ワークフローが速められるでしょう。Extract for Bracketsプレビューは、単独の拡張機能をダウンロードしてBrackets Extension Registryに加えることもできますし、Brackets 1.0をbrackets.ioからダウンロードすればすでに含まれています。
Brackets 1.0の後もリリースは頻繁に行われ、つぎは3ないし4週間後が予定されています。現在、デザインをサポートするコーディングツールを求めるニーズが満たされていません。Adobeはその分野の強みを活かしていくようです。現在、SVG編集をより強化し、さらに視覚的なインラインエディタを加えることなどが計画されています。
]]>そのうえで、コミュニティのより深い関わりが望まれます。開発チームはこれからも努力を惜しみません。けれど、外部からの支援もさらに求められます。そうすれば、開発チームの忙しさに左右されることが少なくなり、より健全なオープンソースプロジェクトになります。
バージョン1.0のビルドへの大きな要望は、お気軽にGitHubの[Issues]に加えてください([Pull requests]ならさらによいです)。新たなビルドに何を備えるのか、もうすぐ決めようとしています。
]]>テーマは「未来の作り方〜コンテンツに使えるデバイス祭り!(利用例付き)〜」です。
]]> 定員に達しましたら締め切りますので、お早めにお申込ください。Away3D TypeScriptで3次元空間に加えた静的なDisplayObjectインスタンスは、View.render()
メソッドを呼出しても表示されないことがあります。
View.render()
method.
以下のコード001は、Away3Dの3次元空間に立方体をつくって、View.render()
で描画します(コードの解説については「Away3D: 立方体を回してみる」参照)。ところが、立方体は表示されません。
The code 001 below create a cube in the 3 dimensional space of the Away3D and render it with the View.render()
method. However the cube is not displayed in the space.
コード001■Away3Dで3次元空間に立方体をつくる
var view;
var mesh;
function initialize() {
var directionalLight = createDirectionalLight(0.25, 0x00FFFF);
view = createView(240, 180, 0x0);
mesh = createCube(400, 400, 400, directionalLight);
view.scene.addChild(mesh);
mesh.rotationX = -30;
mesh.rotationY = 30;
view.render();
// view.render();
}
function createView(width, height, backgroundColor) {
var defaultRenderer = new away.render.DefaultRenderer();
var view = new away.containers.View(defaultRenderer);
view.width = width;
view.height = height;
view.backgroundColor = backgroundColor;
return view;
}
function createCube(width, height, depth, light) {
var defaultTexture = away.materials.DefaultMaterialManager.getDefaultTexture();
var material = new away.materials.TriangleMethodMaterial(defaultTexture);
var mesh = new away.prefabs.PrimitiveCubePrefab(width, height, depth, 1, 1, 1, false).getNewObject();
mesh.material = material;
material.lightPicker = new away.materials.StaticLightPicker([light]);
return mesh;
}
function createDirectionalLight(ambient, color) {
var light = new away.entities.DirectionalLight();
light.direction = new away.geom.Vector3D(0, -1, 1);
light.ambient = ambient;
light.color = color;
return light;
}
そこで、RequestAnimationFrameクラスを用いて、立方体を回してみます。すると、立方体は表示されて、回転するアニメーションになります(サンプル001)。
Then, try to rotate the cube with the RequestAnimationFrame class. Now, the cube will be displayed and will rotate as animation(Example 001).
サンプル001■Away3Dで3次元空間につくった立方体を回す
Example 001•Rotating a cube created in the 3 dimensional space of the Away3D
結果としては、View.render()
メソッドを少なくとも2回呼ばないと、オブジェクトは描画されないようです。前掲コード001にこの修正を加えて、つぎのサンプル002として掲げました。
As the conclusion, the View.render()
method has to be called at least twice to render an object in the space. The revised code 001 is attached as the example 002 below.
サンプル002■Away3D 14/08/18 : Rendering a static cube in the 3D space
Example 002•Away3D 14/08/18 : Rendering a static cube in the 3D space
ベクトルの中でも「外積」は、考え方のわかりにくい計算です。いきなり概念を捉えようとすると難しいので、何に使えるのかを知ることから始めましょう。
2014年1月18日土曜日に催された第12回Creators MeetUpで、2次元のベクトルに絞ったインタラクティブなサンプルを例に、外積がどう使われているのかをご紹介しました。USTREAM録画も公開しています。
サンプル001■立方体をマウスポインタの位置に応じてx軸およびy軸で回す
サンプル002■インスタンスをドラッグする勢いで加速して回す
平面における2直線の交点は、直線の方程式を連立して解くことができます。ただ、その場合は傾きによる場合分けをしなければなりません。ふたつの直線をベクトルとして外積で考えると、一般的に交点が導けます。本稿では、この外積から交点がどのようにして求められるか、そのサンプルコードをご紹介します。
サンプル003■平面上の2直線の交点を外積により求める
物理的な運動は、位置と速度と加速度で扱われます。そして、位置と速度、および速度と加速度の間には微分で導かれるという関係があります。
物理的なアニメーションを表現しようとするとき、直接位置を計算しようとするより、速度から導いた方が複雑なアニメーションも簡潔に表せたりします。これは数学的には、微分により物体の運動を捉えていることになります。微分の計算そのものはしなくても、考え方を知るだけで見通しはよくなり、応用の幅も広がます。なお、このノートの内容をかいつまんでご紹介した15分間のUSTREAM録画もご参考までに添えます。
バネが伸び縮みするアニメーションは、「単振動」と呼ばれて三角関数で表すのが定石です。けれど、バネの端をもって振り回すような動きは、加速度にもとづく式で扱うのが便利です。この式は「オイラー法」という数学の考え方から導かれます。
サンプル004■マウスポインタを追って伸び縮みするアニメーション
等速円運動は、多くの場合三角関数で表します。その場合、運動の式を位置の動きで立てるほかに、速度の変化で扱う考え方もあります。後者は、数学的には「微分」で導かれる関数が使われます。解説では先にJavaScriptコードを示し、数学の考え方は興味ある読者のために後で説明します。
サンプル005■等速円運動を位置と速度それぞれの方程式で表す
2014年7月25日金曜日に催されたAway3D勉強会では、Away3Dを使ってどのようにJavaScriptのコーディングを行うのか。さらに、実際に3次元表現を用いたブラウザコンテンツやその可能性について解説しました。
Away3D TypeScriptで、具体的にどのようなコーディングをするのか。3次元空間に立方体を描き、それを回してみるサンプルでご紹介しました。最新の2014年6月24日付ビルドにもとづく解説です。
[Vol. 1]
Broadcast live streaming video on Ustream
[Vol. 2]
Broadcast live streaming video on Ustream
[Vol. 3]
Broadcast live streaming video on Ustream
IE11をはじめ各種PCブラウザでWebGLが対応したことで、商用案件でもWebGLが利用できる土台が整ってきました。3DライブラリのAway3Dを利用すると、表現の幅が広く品質の高い3Dコンテンツの制作が可能です。Away3Dを利用したブラウザコンテンツの3D表現の可能性やワークフローを説明しました。また類似のThree.jsと比較してのAway3Dの利点も紹介しています。
[Vol. 1]
Broadcast live streaming video on Ustream
[Vol. 2]
Broadcast live streaming video on Ustream
[Vol. 3]
Broadcast live streaming video on Ustream
Away3D TypeScriptを使ったごく簡単なJavaScriptコードで、3次元空間に立方体をつくって回します。Away3Dの3次元表現で用意しなければならないのは3つです。第1に、舞台となる3次元空間をつくります。第2に、その舞台に照明を備えます。そして第3に、役者となる物体を舞台に登場させます。そのうえで、カメラの位置や向きをドラッグで動かしてみます。
サンプル001■Away3D 14/06/24: Panning and tilting the camera in the 3D space
Away3D TypeScriptサイトの「Examples」に掲げられた「Animating particles simulating fire」を参考にして、パーティクルのアニメーションで燃える炎を表現します。サンプルスクリプトは、この作例のソースコードをわかりやすく簡略化し、整理してまとめたものです。また、スクリプトの組立ては前出「Away3D: 立方体を回してみる」のJavaScriptコードと基本的に揃えてあります。
サンプル002■Away3D 14/06/24: Animating particle fires shot by the interactive camera
前項の燃える炎のサンプルの床にテクスチャを与えます。均一な平面のテクスチャに凹凸と反射の違いを加えると、質感が大きく変わります。もっとも、3次元のオブジェクトのかたちそのものに細かな凹凸を加えたら、負荷が上がるばかりです。そこで、テクスチャに与えるマップで、光の反射の仕方を変えてみます。
サンプル003■Away3D 14/06/24: Animating particle fires on a floor with texture finished
]]>未来の作り方〜コンテンツに使えるデバイス祭り!(利用例付き)〜
街中でスマートフォンを持ち歩く人々は、決して珍しいものではなくなりました。Googleが新しく開発を進めているデバイスには、周囲の状況をリアルタイム3Dで計測するためのセンサーが搭載されるという発表もあります。
日々のニュースでは、常識を覆すような技術の発表が溢れています。
これからのデジタルコンテンツでは、あらゆるデバイスによって得られる情報の利用が、加速度的に広がっていくでしょう。
1年後、3年後の未来に「普通」になっているモノを作るのは、われわれ制作者です。では、まず現在のデバイスで何が出来るのか? 従来からあるセンサーや画像解析などと組み合わせることでどんな化学反応を得られるのか?
今の立ち位置を知ることから始めましょう。 
株式会社アイ・エム・ジェイ
テクニカルディレクター/インタラクションデベロッパー
「AIRでコントロールするMotionセンサー群」
沖縄県立芸術大学卒業。主にキッズを対象とした参加型アトラクションを手がける。音声認識によって決まった言葉を唱えることで展開が進む、手を動かすモーションコントロールでシーンが変化する、などの演出、実装を担当。さらに空間ディスプレーを使って目の前に魔法のような空間が現れるなど、夢物語の世界に入り込むようなアトラクション制作を行う。
株式会社ワン・トゥー・テン・デザイン
コミュニケーションテクノロジーグループ
Programmer / MediaArtist / VJ / Dancer
「センシングで変わるデジタル体験」
金沢工業大学メディア情報学科卒業。システム会社での Webプログラマを経て、1-10designへ。独自ソフトウェア によるインタラクティブな映像演出やKinectなどのデバイ スによるフィジカルセンシング等、数種の技術を組み合わ せ、ソフトウェア/ハードウェアの垣根を超えた作品の制 作を行う。仕事では、西部遊園地の体感型アトラクション ゲーム「ミライセンシ」や京都二条城へのプロジェクショ ンマッピング等を手がける。カンヌライオンズ2013 モバイル部門ゴールド、第66回広告電通賞モバイル・コミュニ ケーション部門 最優秀賞受賞。
株式会社STARRYWORKS
代表取締役
「体験のデザイン」
1981年大阪生まれ。2006年に株式会社STARRYWORKSを設立し代表取締役に就任。ソフト/ハードの技術、伝統的なものづくりの技術など手法にとらわれず、新たな“体験”をつくることに重点を置いて、インタラクティブコンテンツや出版、ミュージックビデオ、ライブの映像演出、広告などの制作を手がける。Yahoo! Japan Internet Creative Award 2012グランプリ / 2010ブロンズ、文化庁メディア芸術祭 審査委員会推薦作品。
【最近の実績】
PLAYFUL BOOKS(2014) http://playful-books.com/
ぱぱぱPIANO(2013) https://vimeo.com/90960548:[https://vimeo.com/90960548
DANCE(2013) http://vimeo.com/starryworks/dance
株式会社しくみデザイン
代表取締役
シクミスト
「未来のしくみをデザインすること」
名古屋大学建築学科を卒業後、 九州芸術工科大学大学院(現・九州大学芸術工学研究院) にてメディアアートを制作しながら研究を続け、博士(芸 術工学)を取得。2005年にしくみデザインを設立し、取締 役CTOを務める。2009年に代表取締役に就任。数多くの受 賞作品の中でも注目すべきは、16か国2800作品の中から Intel Perceptual Computing Challenge グランプリを受賞し た「KAGURA for PerC」である。
一口に「デバイスを用いたコンテンツ」と言っても用途によって 言語も演出も全く異なります。今回は、アプリ、インスタレー ション、VJ、展示、それぞれの業界での第一人者をお招きして、 技術的なバックグラウンドが無くても理解できるよう構成します。
]]> 開催概要
日 時:2014/11/08(土) 13:15~17:00
場 所:デジタルハリウッド大学 3F 駿河台ホール地図
住 所:東京都千代田区神田駿河台4-6 御茶ノ水ソラシティ アカデミア 3F
募集人数:250名
参加費用:一般 1,000円、学生 500円(会場使用料など)
※会場となるデジタルハリウッド大学、スクールの学生は無料で聴講可能です(要Web申し込み)
本編終了後、割り勘(4,000~5,000円程度)で二次会(宴会)を実施予定です。二次会のみの参加は受け付けていません。
上記ボタンのconnpassイベントページよりお申し込みください。定員に達し次第、締め切りますのでお早めにお申し込みをお願いします。
12:45 開場:受付開始
13:15 開始のごあいさつ
13:25 demo1
14:05 休憩
14:20 demo2
15:00 休憩
15:15 demo3
15:55 休憩
16:10 demo4
16:50 終わりのごあいさつ、撤収
17:00 閉場
駿河台ホールでのネット環境は講師分のみになります。受講者のネット環境はありません。
電源はありますが、場所によってはコンセントから遠いこともありますのでご注意ください。
F-siteセミナーは「制作を楽しくする」方法の伝播を目的に行っています。継続的かつ定期的な開催のために、参加者のみなさまには下記内容のご理解とご協力をお願いしています。
F-siteセミナーでは、通常の枠と別に「企業デモ枠」を設けています(お申し込みがない回は省略)。新技術、新商品、バージョンアップ情報をはじめ、リサーチなど、Flashユーザーを対象にしたものなら、どのようにお使いいただいても構いません。デモ時間は15分、無料です。1セミナーにつき、2団体まで受け付けています。
詳しくは、お問い合わせフォームからお問い合わせください。
]]>EaselJSライブラリのGraphicsクラスに大幅な変更が加えられます。これまでのコンテンツに問題が生じないかどうか、次期バージョン候補(NEXT)でお確かめください。
]]> Graphicsクラスは処理のキューで成立ちます。キューに納められたオブジェクトはCommand.exec()
メソッドを公開しています。描画はキューから処理を取出しては、順に実行するだけです。
これまで、処理は一般的なオブジェクトで、Function.apply()
メソッドにより実行されました。その実装を改め、すべての処理(たとえばGraphics.LineTo()
メソッド)を専用のCommandオブジェクトで行うこととしました。
これにより、型が判定できたり、Function.apply()
メソッドを使わずに済むようになるなど、パフォーマンスが改善できました。また、Graphics.getInstructions()
メソッドにより、キューの情報が得られます。さらに重要なのは、処理内容が動的に変えられることです。
[例]
// graphics.beginFill()のCommandオブジェクトをつくって保持
var fill = myShape.graphics.beginFill("red").command;
// Graphics.drawRect()について同様
var rect = myShape.graphics.drawRect(0, 0, 100, 100).command;
// キューをつくり直すことなく設定変更
fill.style = "green";
rect.width *= 2;
また、簡単にCommandオブジェクトを独自につくることができ、Graphics.append()
メソッドでキューに加えられます。
myShape.graphics.append({exec:function(ctx2d, shape) {
// context2Dの描画処理
});
開発に際して、キューの処理が多い(Commandオブジェクトが数千の)場合にGraphicsクラスのパフォーマンスに問題が生じました。そこで、大幅な最適化を加えることにより、最悪のケース(Graphicsインスタンスに塗りや線の異なる大量のシェイプを描く場合)の負荷を100倍以上削減しました。また、そうしたケースのメモリとのやり取りも改善しています。
そして、ひとつのGraphicsインスタンス50,000の矩形を異なる塗りと線で描くテストでは、10秒かかった処理が20ミリ秒以下で済みました。
以上の変更は、Grant Skinner氏のすべての基本的なテストをパスしています。しかし、その範囲は広範にわたりますので、NEXTバージョンで実際に試して、何か問題が生じたら、速やかにSkinner氏にお知らせください。
]]>注目していただきたいのは、StageGL Rendererのaway.materialsパッケージです。2014年5月13日付ビルドと比べると、クラスの数が減って整理されました(図002)。とくに、マテリアルをつくる基本的なクラスTextureMaterialがなくなったことは気にかかります。
図002■StageGL Rendererのaway.materialsパッケージ
2014年5月13日付ビルド
2014年6月13日付ビルド
6月13日付ビルドでは、TextureMaterialに替わってTriangleMaterialクラスが備わりました。したがって、これまでのコードのTextureMaterial()
コンストラクタの呼出しは、TriangleMaterial()
に差替えなければなりません。引数は、同じくテクスチャオブジェクトです。
var defaultTexture = away.materials.DefaultMaterialManager.getDefaultTexture();
// var material = new away.materials.TextureMaterial(defaultTexture);
var material = new away.materials.TriangleMaterial(defaultTexture);
筆者がノート「Away3D: 立方体を回してみる」で試したサンプルコードでは、この書替えだけで正しく処理されました。また、公式サイトのサンプルでも、大きな修正はこれらのクラスの差替えのようです。
]]>
前出「Away3D TypeScript最新ビルドの基本的な変更点」でふたつになったとお伝えしたライブラリがさらに3つに増えました(図001)。しかも、それぞれのJavaScript(JS)ファイルの名前まで変わっています。JavaScriptのライブラリJSファイルを名前順で並べたとき、3つが近くに揃わないのは何となく嫌です。
- 2013年12月3日まで
- Away3D.next.min.js
- 2014年5月2日まで
- awayjs.next.min.js
- away3d.next.min.js
- 最新ビルド
- awayjs-core.next.min.js
- stagegl-context.next.min.js
- stagegl-renderer.next.min.js
図001■2014年5月13日付Away3D TypeScriptの3つのライブラリJSファイル
5月より前のビルドでは、幾何情報のジオメトリオブジェクトと素材のマテリアルオブジェクトから物体のMeshオブジェクトができ上がりました。たとえば、jsdo.itのサンプル001「Away3D: Rotating a cube in the 3D space」は、つぎのように立方体のプリミティブをつくっています。
var geometry = new away.primitives.CubeGeometry(width, height, depth, 1, 1, 1, false);
var defaultTexture = away.materials.DefaultMaterialManager.getDefaultTexture();
var material = new away.materials.TextureMaterial(defaultTexture);
var mesh = new away.entities.Mesh(geometry, material);
サンプル001■Away3D: Panning and tilting the camera in the 3D space
5月からのビルドでは、まずひながたとなる「プレハブ」(prefab)のオブジェクトをつくらなければなりません。それらのクラスの名前空間(パッケージ)はaway.prefabsです(図002)。前掲サンプルコードは、以下の「Away3D 14/05/06 : Rotating a cube in the 3D space」のように書替えています。
// var geometry = new away.primitives.CubeGeometry(width, height, depth, 1, 1, 1, false);
var defaultTexture = away.materials.DefaultMaterialManager.getDefaultTexture();
var material = new away.materials.TextureMaterial(defaultTexture);
// var mesh = new away.entities.Mesh(geometry, material);
var mesh = new away.prefabs.PrimitiveCubePrefab(width, height, depth, 1, 1, 1, false).getNewObject();
mesh.material = material;
図002■名前空間away.prefabsのクラス
サンプル002■Away3D 14/05/06 : Rotating a cube in the 3D space
PrimitiveCubePrefab()
コンストラクタには引数に幾何情報を渡します。そのインスタンスにPrefabBase.getNewObject()
メソッドを呼出せばMeshオブジェクトが得られます。素材のマテリアルはオブジェクトのMesh.material
プロパティに与えます。
これは5月より前のビルドでは試していなかったので、5月13日付現在の問題としてご紹介しておきます。AssetLibraryBundle.resourceComplete
は、素材のファイルをロードしたとき、読込みが済んだら起こるイベントです。
ところが、イベントリスナーが素材を取出そうとしても、データは空の場合がありました。そのため、データがあるかどうかを確かめて、なければ改めて読込み直す必要があるようです。具体的なコードの例については、「Away3D: パーティクルのアニメーション」の注[*4]をご参照ください。
以上は、5月6日付ビルドで変わったことです。5月13日付の更新はおもにバグ修正に関わるようで、少なくとも試した基本的なコードは同じように動きました。。
]]>
Kinectの機能をAIRで利用できるようにするANEにはAIRKinectというものがあります。けれども残念なことに開発がとまってしまって、顔の識別点の取得は入っていません。
仕方ないので自分で作ることにしました。
ANEの制作に初挑戦です!
とはいえ、C++でのDLL(Kinectからのデータを取得するWindowsライブラリ)開発も初挑戦でした。
最適化に難儀しまして、最終的にはKinectエバンジェリストである中村薫さんにご協力いただき、やっと完成しました。
SIHOさんのソースコード一式のありか
GitHubのkinectFaceTrakingANE
https://github.com/SIHO/kinectFaceTrakingANE-light
KinectFaceTrakingANEを使った類似度判定アプリ
ANEは単に顔の識別点をもらうだけです。受け取ったあとに、データをどう料理するかが面白さを出すポイントだと思います。
下記の動画は、8人の顔との類似性を数値換算して得点として表示しています。
そのほか、顔の目と口の形状を判断するして、人相占いなんていうのも出来ますね。
ANEってどう使うの?
「ネイティブ拡張(ANE)の使い方 for Flash Professional CS6 | ADC - Adobe Developer Connection 」
http://www.adobe.com/jp/devnet/flash/articles/flashpro_ios_ane.html
そもそものANEの使い方に悩んだら、上記のページを参考にしてください。
demo1「プログラミング インターフェース」T-D 北田荘平氏
demo2「アレを求めて」METAMOS 櫻井優樹氏
demo3「映像を考える」spfdesign 鎌田貴史氏
当日は83人のご参加をいただきました。ありがとうございました!
]]> 写真レポートF-site・野中氏、司会進行・鈴木氏(写真右)。
demo1、T-D 北田荘平氏
デザインのルールとプログラミングのルールを相互にいききして一つのルールを作るといった話をしていただきました。
demo2、METAMOS 櫻井優樹氏
アートディレクター、デザイナーの視点から現在のWeb業界に対する意見や考え方などをご自身の旅の話などを交えながらお話いただきました。
demo3、spfdesign 鎌田貴史氏
デザインが担う指名、課題解決 目的達成などを様々な事例をもとにお話ししていただきました。
ジャンケン大会、そしてセミナー終了後に会場にて懇親会の時間もありました。
会場周辺のお店で二次会も行われました。
写真:小野田
前に「Away3D TypescriptとWebGL」にご紹介したとおり、Away3D TypeScriptはふたつのライブラリで構成されるようになりました。したがって、script要素にJavaScript(JS)ファイルをふたつ読込みます。なお、新しいJSファイル名はすべて小文字です。
<!--
<script src="lib/Away3D.next.min.js"></script>
-->
<script src="lib/awayjs.next.min.js"></script>
<script src="lib/away3d.next.min.js"></script>
3次元空間を定めるクラスは、View3DからViewに変わりました。新たなViewクラスは引数にレンダラのオブジェクトを渡します。デフォルトとして、DefaultRendererクラスが備わっています。そのコンストラクタでオブジェクトをつくればよいでしょう。
// var view = new away.containers.View3D();
var view = new away.containers.View(new away.render.DefaultRenderer());
これらふたつの書替えを行ったのが、以下のjsdo.itのサンプル001です。前掲のノートのサンプル002「Away3D: Rotating a cube in the 3D space」からForkして修正を加えました。3次元空間の立方体がx軸とy軸で回ります(図001)。
図001■3次元空間の立方体が水平および垂直に回る
サンプル001■Away3D: Panning and tilting the camera in the 3D space
上述の2点を書替えるだけで、簡単に最新ビルドが動きました。そこで念のためにと、前掲ノートで立方体を回す前のサンプル001「Away3D: Cube in the 3D space」にも同じ書替えを加えてみました。すると、なんということでしょう!立方体が表れません。
サンプル002と違うのは、RequestAnimationFrame()
コンストラクタに定めたコールバック関数で繰返し描画をしていないことです。試しに、再描画を繰返すと立方体が描かれました。View.render()
メソッドの呼出しを遅らせないといけないのでしょうか。けれども、そのタイミングを確かめるためのイベントやプロパティは見当たりません。
少なくとも2回描画を繰返せば、表示はされました。ただ、つねに2回で足りるのか、確かではありません。ふと思い立って、View.render()
メソッドの呼出しを単純に1行足し、2回にしてみました。結果、みごとに描画されました。これが以下のサンプル002です。
function initialize() {
// ...[中略]...
view.render();
view.render(); // !!
}
サンプル002■Away3D: Cube in the 3D space
こういう仕様とは考えにくいです。おそらくバグだと思われます。Away3D TypeScriptのサイトからダウンロードされるサンプルコードはアニメーションばかりですので、気づかれなかったのかもしれません。
]]>WebサイトでFlashを使用しなくなったことで良かったことや悪かったこと。最近のFlash事情など、クライアントワークのWebサイト制作を行っていく上でのFlashの話も交えつつWebサイト制作の現状、今後のWeb業界の流れについてなどを豪華な3名の講師の方々にお話いただく予定です。
]]> 定員に達しましたら締め切りますので、お早めにお申込ください。]]> EaselJSがWebGLをサポート
2014年1月16日付CreateJS Blogに「WebGL Support in EaselJS」という記事が投稿されました。EaselJSでWebGLレンダラがサポートされ、現在パブリックプレビューが公開されています。blog記事にもとづいて、新しいWebGLレンダラについてご紹介しました。BlogにはWebGLレンダラを用いた3つのサンプルが公開されています(図001はそのうちのひとつ「Bunnymark」)。
図001■Bunnymark
2014年1月28日付CreateJS Blogに「WebGL & EaselJS: a Technical Intro」という記事が投稿されました。EaselJSの次期バージョンがサポートするWebGLレンダラはどう使えばよいか、についての入門的な解説です。本稿はblog記事にもとづいて、新しいWebGLレンダラの使い方をご紹介します。
新たなWebGLレンダラは、パブリックプレビューとしてGitHubに公開されました。そして、フィードバックはCreateJS Supportで受付けています。このWebGLレンダラは、つぎのメジャーリリースに備わる予定です。本稿執筆時のGitHubには「WebGL」フォルダに「WebGL Examples」と題してふたつのサンプルHTMLドキュメントが含まれています(図002)。
図002■WebGL Examples
そのサンプルのひとつTwoStages.htmlは、コンテキスト2DとWebGLのふたつのステージ(Canvas)を重ね合わせて、マウスイベントをシームレスに扱っています(図003)。
図003■EaselJS Two Stages passing mouse events
SpriteStage.autoClear
プロパティをfalse
にするSpriteStage()
コンストラクタの第2引数にtrue
を渡さなければならないDisplayObject.compositeOperation
プロパティが使えない
Facebook Page「CreateJS」に新たな情報を公開していきます。
決まった速さで同じ向きに動き続ける「等速直線運動」なら、つぎのフレームに移るたびにオブジェクトの位置(xy座標)に定数を足します。この定数(xy平面で捉えるならベクトル)が速度です。つぎのフレームにおけるオブジェクトの位置は、今の位置に速度を加えて求めます。
位置 += 速度
時間(t)と位置(x)をそれぞれ横軸と縦軸にした等速直線運動のグラフは、下図001のように一次関数(x = vt + x0)で表されます(「直線の式(方程式)」参照)。一次関数は微分すると、直線の傾きを示す定数になります(x' = v)。そして、この定数値(v)が等速直線運動の速度です。
x = vt + x0
x' = v
図001■等速直線運動の位置は時間の一次関数で表される
等速円運動は、円周上を決まった速さで回ります。ただし、一定なのは時間あたりの回転角(角速度)です。運動の向きは円の接線と一致しますので、時間とともに変わります。その場合、速度も時々刻々と変化することになるのです。
半径1の円周(「単位円」といいます)上でx軸の正方向となす角度がθの点(P)の座標は、三角関数で(cosθ, sinθ)と定められています(図002)。すると、等速円運動の位置(x, y)は、円軌道の半径(r)と時間(t)あたりの角速度(ω)により、つぎの式で示されます。この方程式は、時間(t)から直に位置(x, y)を導いています。
x = r cos(ωt)
y = r sin(ωt)
図002■単位円の円周上の座標は原点と結ぶ線分がx軸となす角をθとするとき(cosθ, sinθ)
位置の変化を微分すれば速度です。上記の方程式を微分すると、等速円運動の速度がつぎのように導けます(「等速円運動を三角関数の微分で表す」参照)。前述01「等速直線運動」と違って、ことさら簡単な式にはなりません。けれど、位置に速度を加えれば、つぎのフレームにおけるオブジェクトの位置が決まるのは同じです。
x' = -rω sin(ωt)
y' = rω cos(ωt)
この速度を位置に加えて円運動させると、円軌道の中心がどこかは気にせずにスクリプティングできます。詳しくは、「等速円運動を三角関数の微分で表す」をお読みください。つぎのサンプル001が、CreateJSを用いた応用例です。
サンプル001■EaselJS 0.7.1: Particles
位置の変化の微分が速度でした。その速度の変化をさらに微分すると加速度が導かれます。アニメーションでもっともよく使われる加速度は重力(「重力加速度」)でしょう。重力は定数として捉えられます。そして、速度にフレームあたりの重力(加速度)を加えると、つぎのフレームの速度が得られます。その速度をさらに位置に加えれば、放物線運動するオブジェクトのつぎのフレームにおける位置が求まります。
速度 += 加速度
位置 += 速度
もっとも、フレームあたりの速度や加速度というのは、値を1フレームにかかる時間の平均(平均速度と平均加速度)で捉えることになります。厳密には、微分は瞬間の値を定める関数です。けれど、1フレームの時間が十分小さければ、平均でも近似値として扱えます。
さて、この考え方にもとづいて、バネの動きを加速度から定めることができます。バネ運動も前述02「等速円運動の位置と速度」と同じく、一般には三角関数で表されます。したがって、速度や加速度を微分で求めても、簡単な式にはなりません。
けれど、バネ運動は釣合った点(均衡点)から離れるほど、もとの位置に戻ろうとする力が強くなります。バネの引戻す力というのは、重力と同じく加速度です。つまり、バネの加速度は均衡点に向けて、均衡点からの距離に比例した大きさになります。
加速度 = (均衡点 - 位置)×比例係数
速度 += 加速度
位置 += 速度
この式を使えば、三角関数どころか、簡単な四則演算だけでバネ運動が表せるのです。詳しくは「バネのような動きを加速度から定める ー オイラー法」をお読みください。つぎのサンプル002が、CreateJSを用いた応用例です。
サンプル002■EaselJS 0.7.1: Smooth Line tuned
ExtensionなのでFlashでの制作の流れから、シームレスにHTML5書き出しができます。
方法も簡単で、Extensionを入れると自動的にメニューに「MAKE5」が追加されるので、そこから書き出しようの設定画面を表示して行います。
Toolkit fot CreateJS並にお手軽な印象です♪
なにより、Flash Professional CS4 以上に対応というのが嬉しいですね!
さらにはAS3.0対応も予定されているとか!!
これは、どーんと期待が高まっちゃいます♪
Extensionのダウンロードも、手持ちのFlashからのHTMLコンバートプレビューも、「無料」なので、試してみる価値はありますね!
MAKE5
http://www.make5.biz/
「非Flash化が進むWebサイト制作の今
WebサイトでFlashを使用しなくなったことで良かったことや悪かったこと。最近のFlash事情など、クライアントワークのWebサイト制作を行っていく上でのFlashの話も交えつつWebサイト制作の現状、今後のWeb業界の流れについてなどを豪華な3名の講師の方々にお話いただく予定です。
「プログラミング インターフェース」
今回F-siteに2回目の登壇となる北田さん。thaの中村勇吾さんの元でWebデザイナー、FlasherとしてKDDIのプロモーションサイトなど様々な案件に携わってこられた北田さん。2011年にthaから独立後、フリーランスとしての活動をスタートし、同年T-Dを設立。2013年には元同僚の深津氏を中心にTHE GUILDの立ち上げに参加。現在は新たな仕事の広がりを探して、ニューヨークでの拠点づくりを始めたところだそうです。
そんな北田さんには非Flash化が進んでいるWeb業界での最近のサイト制作事例や、ニューヨークでの数ヶ月で感じたインターネットのこと、仕事のことなどについてお話いただく予定です。
・T-D
「アレを求めて」
今回F-siteに2回目の登壇となる櫻井さん。櫻井さんはご自分でプログラムなどバックエンドの部分に関わることが基本的になく、アートディレクションやデザインをメインにお仕事をされています。前回登壇されたときはまだFlash全盛期でFlash案件などの実績をご紹介いただきながらデザイナーとしての考え方をお話いただきました。
そんな櫻井さんにはFlasherの視点からではなく、アートディレクター、デザイナーの視点から現在のWeb業界に対する意見や考え方をお話いただく予定です。
・METAMOS
「そうある理由」
Flash全盛期に石川県にある多田屋という旅館のフルFlashサイトを作り、一役脚光を浴びた鎌田さん。それ以外にも数多くのサイトのアートディレクションやデザインをされてきましたが、最近では非Flash化が進み、多田屋のサイトも鎌田さん自身の手でFlashが使われていないサイトにリニューアルされました。
Flash全盛期にFlashのサイトを作り脚光を浴びた鎌田さんから見た、最近の非Flash化が進むWeb業界に対する意見や考え方をWebクリエイターとしての視点からお話していただく予定です。
・spfdesign
3/20 23:30更新 デモの詳細を追加しました。
3/26 21:40更新 受付開始しました。
日 時:2014/04/19(土) 13:15~17:00
場 所:GREE
住 所:港区六本木6-10-1 六本木ヒルズ森タワー 地図
GREEセミナー会場(六本木ヒルズ)の案内図はこちらです。
・一度入場した後は自由に出入りができず、入場後に利用できる自販機や喫煙所の類は無いのでご了承ください(お手洗いはございます)。
・受付時に入館シールをお渡しいたしますので、見えやすい位置にお貼りください(入館シールは出場時に回収いたしますので紛失にはご注意ください)。
参加費用:一般1,000円、学生500円(受付で学生証の提示をお願いします)
#本編終了後、割り勘で二次会(宴会)実施予定です。会場、費用は調整中です。
#二次会のみの参加は受け付けていません。
申し込みは締め切りました。なお、会場のセキュリティ上、お申し込みされていない方は当日参加ができませんので、ご注意ください。
12:45 開場
13:15 開始のごあいさつ
13:25 demo1:T-D 北田荘平氏
14:25 企業demo:リアルサムライ様
14:35 休憩(15分)
14:50 demo2:METAMOS 櫻井優樹氏
15:50 休憩(10分)
16:00 demo3:spfdesign 鎌田貴史氏
17:00 じゃんけん大会など
17:15 セミナー終了、懇親会スタート(無償)
18:15 懇親会終了
18:30 閉場
19:00 会場周辺の居酒屋で二次会(希望者のみ)
PCを置ける机や電源の数には限りがありますので、あらかじめご了承ください。
F-siteセミナーは「制作を楽しくする」方法の伝播を目的に行っています。継続的かつ定期的な開催のために、参加者のみなさまには下記内容のご理解とご協力をお願いしています。
F-siteセミナーでは、通常の枠と別に「企業デモ枠」を設けています(お申し込みがない回は省略)。新技術、新商品、バージョンアップ情報をはじめ、リサーチなど、Flashユーザーを対象にしたものなら、どのようにお使いいただいても構いません。デモ時間は15分、無料です。1セミナーにつき、2団体まで受け付けています。
詳しくは、お問い合わせフォームからお問い合わせください。
]]>アニメーションやインタラクティブなコンテンツで、CreateJSは注目を集めています。けれど、CreateJSそのものには、3次元空間を扱う機能はありません。それでも、2次元平面の変換行列を備えていますので、3次元空間の扱いにも応用できます。
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」では、第20回から3回にわたってつぎのようなサンプルについて解説しています。
サンプル001■EaselJS 0.7.1: Rotating a Cube around the X and Y axes
3次元座標を扱うために、簡単なクラスとはいえ自力でつくらなければなりません。その分、後にご紹介する3次元のライブラリを使うより、どうしても行数は多めです。また、光や陰影の表現まで含めるのは難しいでしょう。
Flashで使われている3DエンジンAway3Dが、「Away3D Typescript」としてJavaScriptへの移行が進められ、現在アルファリリースとして公開されています。正規リリースはこれからとはいえ、期待されるライブラリです。
「Away3D: 立方体を回してみる」では、ごく簡単なJavaScriptコードの作例を詳しく解説しました。40行弱のコードで、3次元空間につぎのように立方体をつくって回しています。また、ICS LABで「簡単なJSで始めるWebGL対応Away3Dチュートリアル」という連載が始まっています。
サンプル002■Away3D: Rotating a cube in the 3D space
これまでのJavaScriptライブラリで、3次元表現によく使われてきたのがthree.jsです。技術情報も比較的多いでしょう。最近HTML5Experts.jpに「初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩>」という記事が公開されました。題名のとおり、わかりやすい解説です。また、これもお約束どおり、立方体が多めに回っています。
サンプル003■forked: 2014-02-06 1st
LoadQueue.loadManifest()
メソッドを使うと、引数のマニフェストオブジェクトに複数のファイルを定めて読込むことができます。そのとき、LoadQueueオブジェクトのLoadQueue.maintainScriptOrder
プロパティにtrue
(デフォルト値)が与えられた場合は、scriptはマニフェストオブジェクトに記述した順で読込まれます。
PreloadJS次期バージョンでは、script以外の項目も読込み順の中に含められるようになります。それには、マニフェストに加える項目のmaintainOrderプロパティをtrue
に定めます。
var queue = new createjs.LoadQueue();
queue.maintainScriptOrder = true;
queue.loadManifest([
"script1.js",
"script2.js",
{src: "image2.png", maintainOrder: true},
"script3.js"
]);
リファレンス解説は「PreloadJS NEXT: LoadQueue.maintainScriptOrderプロパティ」に書きましたので、興味のある方はご参照ください。
]]>4.2の開発でとくに力を注ぐのが、レンダリングとスピードの向上です。拡張しやすいシンプルな内部APIにするための改善も引続き行います。詳しい日程やリリース予定などの計画は、今月末に明らかにします。
]]>Sebastian DeRossi氏のコードは、GitHubに公開されています。このコードにもとづいて、前掲サンプル001ではドラッグの軌跡にしたがった滑らかな曲線を、つぎのような関数(drawCurve())で描きました。引数には描画するGraphicsオブジェクト(myGraphics)とともに、曲線の始点(oldPoint)と終点(newPoint)、およびコントロールポイント(controlPoint)の座標をPointオブジェクトで渡します。
function draw() {
var midPoint = new createjs.Point((lastPoint.x + currentPoint.x) / 2, (lastPoint.y + currentPoint.y) / 2);
drawCurve(myShape.graphics, lastMidPoint, midPoint, lastPoint);}
function drawCurve(myGraphics, oldPoint, newPoint, controlPoint) {
myGraphics.beginStroke("black")
.setStrokeStyle(getLineThickness(oldPoint, newPoint), "round", "round")
.moveTo(oldPoint.x, oldPoint.y)
.quadraticCurveTo(controlPoint.x, controlPoint.y, newPoint.x, newPoint.y);
}
このお題はgihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」第10回「ドラッグの軌跡を滑らかな曲線で描く」で扱いました。「2次ベジエ曲線で滑らかな軌跡を描く」の項で各座標の定め方が解説されています。連続した座標はすべてコントロールポイントにして、座標の中点をアンカーポイントとして結ぶのです(図001)。gihyo.jp連載第10回の解説には、jsdo.itのシミュレーションサンプルも掲げてあります。
図001■軌跡の座標に対する滑らかな曲線の描き方
このサンプルでは、予め決めた数までの多くのインスタンスに、つぎつぎと線を書き加えてステージに置きます。そして、古いオブジェクトから順に表示リストから除くことで、線の消えるアニメーションを表現しています。
このような場合、新たなインスタンスを毎回つくるより、すでにあるオブジェクトはそのまま使った方がお得です。そこで、前掲サンプル001は、gihyo.jp連載第14回「オブジェクトの使い回しとアニメーション素材の変更」にならって、「つくったオブジェクトを使い回す」ことにしました。使い回しの関数は、つぎのふたつです。
function getNewChild() {
var child;
if (children.length) {
child = children.pop();
child.graphics.clear();
} else {
child = new createjs.Shape();
}
return child;
}
function removeOldChild() {
var child = container.getChildAt(0);
container.removeChildAt(0);
children.push(child);
}
使い終えたオブジェクトは変数(children)の配列に入れます。オブジェクトを返す関数(getNewChild())は、配列にエレメントがないときだけ新たにつくります。オブジェクトがあれば、配列から取出して、描画を消したうえで返します。
一番古いオブジェクトを表示リストから除く関数(removeOldChild())は、その後配列エレメントに加えます。これで、つくられたインスタンスは消されることなく、使い回されます。
サンプル001の動きに、不具合といえるところはありません。ただ、曲線の描かれるアニメーションに滑らかさが少し足りないようです。とくに、線の太さが変わるとき、階段状に見えてしまうことがあります。
そこで、ふたつ手を加えました。まず、線の太さはイージングを加えながら変えます。
var currentLineThickness = 1;
function drawCurve(myGraphics, oldPoint, newPoint, controlPoint) {
getLineThickness(oldPoint, newPoint);
myGraphics.beginStroke("black")
// .setStrokeStyle(getLineThickness(oldPoint, newPoint), "round", "round")
.setStrokeStyle(currentLineThickness, "round", "round")
.moveTo(oldPoint.x, oldPoint.y)
.quadraticCurveTo(controlPoint.x, controlPoint.y, newPoint.x, newPoint.y);
}function getLineThickness(oldPoint, newPoint) {
var lineThickness = distance / ratio;
currentLineThickness += (lineThickness - currentLineThickness) * 0.5;
// return lineThickness;
}
つぎに、Ticker.timingMode
プロパティに定数Ticker.RAF
を定めて、requestAnimationFrameのモードにしました。これで描画の効率が上がり、描替えの頻度も高まります。今回のサンプルでは、経過時間を計算に用いていないので、変更も楽です。
function initialize() {
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.addEventListener("tick", draw);
}
これらふたつの調整を加えたのが、つぎのサンプル002です。
サンプル002■EaselJS 0.7.1: Smooth Line tuned
Adobe Communityに「Flash Runtime Announcements」が投稿され、英文の「Release Notes | Flash Player 12 AIR 4」も公開されました。これらの記事にもとづき、Flash Player 12で新たに加わった機能を簡単にご紹介します。
窓の杜による新リリースの紹介記事です。
Flash Player 12をダウンロードして、インストールします。
Adobe Communityに投稿されたFlash Player 12のアナウンスメントです。おもな新機能を紹介しています。
Flash Player 12とAIR 4のリリースノートです。新たに加わった機能や修正されたバグについて説明しています。
]]>EaselJS 0.7.0では、MouseEvent.mousemove
とMouseEvent.mouseup
はライブラリからバッサリ消され、イベントはまったく生じなくなりました。
ところが、EaselJS 0.7.1に差替えると、何事もなかったようにこれらのマウスイベントが起こります。思わず、「宇宙戦艦ヤマト 完結編」の佐渡酒造か!? と、つっこみたくなりました。
もちろん、これから使うことはお勧めできません。おそらく、つぎのバージョンでは改めて除かれるでしょう。
EaselJS 0.6.1では、マウスイベントのリスナーを加えたインスタンスの前面にリスナーのないインスタンスが重なったとき、重なった部分にマウス操作をしても背後のインスタンスがイベントを起こしました。EaselJS 0.7.0では、リスナーをもたなくても、手前のインスタンスがマウスイベントを奪います(図002)。
図002■EaselJS 0.7.0ではリスナーのないインスタンスでもマウスイベントを奪う
EaselJS 0.7.1にすると、改めて後ろのインスタンスがマウスイベントを起こすようになりました。ただし、手前のインスタンスのイベントフローに、マウスイベントのリスナーをもつインスタンスがいない場合にかぎります(EaselJS 0.7.0と0.7.1のマウスドラッグとマウスイベントのバブリング」04「EaselJS 0.7.1のマウスイベントのバブリング」参照)。
]]>図001■2013年12月にリリースされたCreateJSの最新版ライブラリ
なお、EaselJS 0.7.1については来る12月20日金曜日19時よりAdobeにて開かれる「CreateJS勉強会~末~ CreateJS今日この頃」で解説します(参加申し込みはATNDまで)。
GitHubのVERSIONS.txtにもとづく修正項目一覧と解説のリンクは「EaselJS 0.7.1が公開される」をご参照ください。また、前バージョンからのコードの変更はGitHubでご覧になれます(英文)。
いつもと同じく、新しいドキュメントとデモは、CreateJSサイトおよびGitHubに公開されています。また、新バージョンのライブラリはコンパクト(min)版がCDNからも読込めます。さらに、デバッグ用として、全ライブラリの統合(combined)版もご覧になれます。
]]>Container.mouseChildren
プロパティが入れ子のオブジェクトでも動くように修正。Ticker.addEventListener()
メソッドのリスナーが初め返されなかった問題を修正。
DisplayObject.tickEnabled
とContainer.tickChildren
プロパティを追加。gotoAndStop()
メソッドから呼出したときの問題を修正。ColorMatrix.toArray()
とColorMatrix.concat()
、およびColorMatrix.clone()
の各メソッドを修正。
MouseEvent.localX
とMouseEvent.localY
プロパティを追加。
null
の場合の問題を修正。AlphaMapFilterクラスの問題を修正。EventDispatcher.willTrigger()
メソッドを追加。Container.getObjectsUnderPoint()
とContainer.getObjectUnderPoint()
メソッドでヒット領域を調べるようにした。F-site様で以前より連載でご紹介させて頂いておりましたが、弊社で提供しているiOSとAndroidのネイティブスマホアプリを同時に開発できるサービス「Herlock」が、新機能として「画像配置ツール」の追加と「WebDAV」に対応しました。
今回はこの「WebDAV」の機能について紹介させて頂ければと思います。
F-siteをご覧の皆さんなら既にご存知の方も多いかもしれませんが、WebDAVとは、HTTPをベースとしたプロトコルで、Webサーバ上のファイルやフォルダを、ローカルコンピュータ上にあるかのように管理することができる、HTTP/1.1(IETF RFC 2616)の拡張として定義された仕様です。
Herlockの特徴の一つに、Webブラウザ上でコードを書いてiOSとAndroidのネイティブアプリを同時に開発できる点がありますが、プログラマーの方なら自分の使い慣れたエディターというものがあり、それを使いたいと思う方も多いのではないでしょうか。
Windowsユーザーなら、TeraPadやサクラエディタ、MacユーザーならCotEditorやmi、最近ではクロスプラットフォーム対応のSublime Textなど、様々なエディターがあるかと思いますが、HerlockのWebDAVを利用することによってこれらの自分の使い慣れたエディターを使って開発ができるようになる、これが最大の特徴となります。
Webブラウザだとコードを書きづらいと感じる方も、これでより快適に素早い開発が行えるようになるのではないでしょうか。
下記画像は、マイコンピュータ上のネットワーク領域に作成されたWebDAV用のフォルダで、通常のフォルダと同じようにアクセスすることができ、まるでDropboxと同じような感覚で利用することができます。
実際にフォルダにアクセスすると、Web上のHerlockのプロジェクトと同じファイルやフォルダが作成されたことが分かります。
通常のフォルダと同じように画像やjsファイルをドラッグ&ドロップすることで、簡単にWeb上にアップロードすることができます。
同様にサンプルでPC上のmain.jsをSublime Textで開いて、編集して保存すると、Web上のHerlockのプロジェクトにも反映されることが分かります。
かなり便利です♪
それでは、実際にWebDAVを利用するための設定方法を見て行きたいと思います。
HerlockのWebDAVのアクセスURLは、プロジェクトごとに発行されます。
ダッシュボードのプロジェクト一覧上に、下記画像のように「WebDAV: https://dav-****〜」と表示され、そのURLでアクセスすることができます。
(プロジェクトを既に作成済みでWebDAVのURLが表示されていない場合、一度、「IDEを起動」を選択し、 再度、ダッシュボードのプロジェクト一覧をリロードしてください、WebDAVのURLが発行されます。)
今回は、Windowsでの手順となりますが、Macでの手順はHerlockのガイド・ドキュメント内のWebDAVのご利用についてをご参照ください。
エクスプローラーの「コンピューター」上で右クリックをして、「ネットワークの場所を追加する」を選択します。
追加ウィザードが開始されたら、「次へ」をクリックします。
ここでも「次へ」をクリックして、次に進みます。
続いて、インターネットまたはネットワークのアドレス欄に先ほどのWebDAVのアクセスURLを入力して次へ進みます。
続いては、IDとPasswordが聞かれますので、HerlockにアクセスするためのIDとPasswordを入力します。
続いては、ショーカット名を入力します。これは、プロジェクトの保存先フォルダの名前として使用されますので、プロジェクト名を付けておくと分かりやすいかと思います。
以上で設定が完了です。
今回は、ざっとHerlockでのWebDAV機能について紹介しましたが、便利な画像配置ツールや近々登場予定のiOS、Androidの面倒なアプリ内課金を5行で実装する機能も見逃せません。
参照:iOS、Androidの面倒なアプリ内課金を5行でやっつけるHerlockの新機能
クロスプラットフォームでiOSとAndroidをJavaScriptで開発できる「Herlock」は、現在、ベータ版を公開中です。まだ、利用していない方は、ぜひとも登録して利用してみてください。
無料でご利用が可能ですので、少しでも興味を持たれた方はぜひご登録いただき「Herlock」をお試しいただけると幸いです!
また、FacebookやTwitterでも開発状況や新しい情報を配信しておりますのでこちらもチェックしてみてください!
FB:https://www.facebook.com/herlock.do
Twitter:@herlock_do
さらに、Feathersのドキュメントには「Feathers Cookbook」のセクションが設けられました。今のところ項目数は多くありません。今後、フォーラムでよく質問される一般的な実装のやり方について、解説が加えられる予定です。
Feathersのこれまでのリリースからのすべての変更について、詳しくは「Feathers Release Notes」を参照してくださいFeathers 1.2.0は、Starling Framework 1.4.1が必要です。
]]>demo1「Webデザイナーが生き残るためにやるべきこと」harahara 藤原連太郎氏
demo2「ライゾマティクスというチーム」Rhizomatiks 齋藤精一氏
demo3「映像を考える」YellowBrain 丹下紘希氏
当日は83人のご参加をいただきました。ありがとうございました!
セミナーへ参加した方のコメント、トラックバックはこちらの記事にお願いします。
F-site代表・沖氏、司会進行・鈴木氏(写真右)。
demo1、harahara 藤原連太郎氏
案件におけるスケッチやモックアップなどの重要性や、UI/UXデザインついてお話いただきました。
demo2、Rhizomatiks 齋藤精一氏
ライゾマティクスにおけるアート/コマーシャルとの向き合い方や、チームのあり方についてお話いただきました。
demo3、YellowBrain 丹下紘希氏
実際に監督された映像作品を見ながら、クリエイターとは何か?についてお話いただきました。
新宿にて2次会。講師の方、参加者方、同業者同士楽しい交流会になりました。
写真:松本
]]>ColorMatrix.toString()
メソッドが定義されていません。そのため、継承する基本クラスのメソッドの戻り値が返されます。]]>
しかも、EaselJS 0.7.0はArrayクラスを完全に継承できていないため(「EaselJS 0.7.0: ColorMatrix.toArray()メソッドが空の配列を返す 」参照)、空の配列を表現する空文字列が返ります。また、現在のNEXTバージョンでは、戻り値が"[object Object]"になってしまいます。
そこで、NEXTバージョンに、つぎのようなColorMatrix.toString()
メソッドが加えられることになりました。カラー変換行列の25成分が示されるので、演算結果を確かめるのに便利になるでしょう(図001)。
createjs.ColorMatrix.prototype.toString = function() {
return "[ColorMatrix (" + this.toArray() + ")]";
};
]]>
ColorMatrix.toArray()
メソッドが、カラー変換行列の25成分値を取出すことなく、空の配列を返します。
The ColorMatrix.toArray()
method of EaselJS 0.7.0 returns an empty array, which should have contained 25 elements of the ColorMatrix object.
var test = new createjs.ColorMatrix(100);
var _array = test.toArray();
console.log(test); // [1, 0, 0, 0, 255, 0, 1, 0, 0, 255, 0, 0, 1, 0, 255, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]
console.log(_array); // []
ColorMatrix.toArray()
メソッドは、実質的に以下のように実装されています。ColorMatrixクラスのFunction.prototype
プロパティにはArrayオブジェクトが与えられます。けれど、Arrayクラスはこのステートメントだけでは完全には継承されません。
The ColorMatrix.toArray()
method is basically implemented as follows. The Function.prototype
property of the ColorMatrix class is set to an Array object. But the Array class is not completely inherited just by this statement.
function ColorMatrix(brightness, contrast, saturation, hue) {
this.initialize(brightness, contrast, saturation, hue);
}
ColorMatrix.prototype = [];
ColorMatrix.IDENTITY_MATRIX = [
1,0,0,0,0,
0,1,0,0,0,
0,0,1,0,0,
0,0,0,1,0,
0,0,0,0,1
];
ColorMatrix.prototype.initialize = function(brightness,contrast,saturation,hue) {
this.reset();
this.adjustColor(brightness,contrast,saturation,hue);
return this;
};
ColorMatrix.prototype.reset = function() {
return this.copyMatrix(ColorMatrix.IDENTITY_MATRIX);
};
ColorMatrix.prototype.toArray = function() {
return this.slice(0,ColorMatrix.LENGTH);
};
たとえば、Arrayのサブクラスのオブジェクトに、配列アクセス演算子[]
でエレメントを加えることはできます。しかし、そのArray.length
プロパティの値は0になります。
For example, an element can be added to an object of the sub class of the Array with the brackets []
. However, its Array.length
property returns 0.
function ArraySub() {}
ArraySub.prototype = [];
var test = new ArraySub();
test[0] = "element0";
console.log(test); // ["element0"]
console.log(test[0]); // element0
console.log(test.length); // 0
ColorMatrixオブジェクトのArray.length
プロパティの値を正しく25に定めれば、ColorMatrix.toArray()
メソッドが25エレメントの配列を返すようになります。ただし、このプロパティの定めだけでは、まだArrayクラスの継承には十分といえません。
Once the Array.length
property of a ColorMatrix object is set to proper value 25, the ColorMatrix.toArray()
method returns an Array with 25 elements. But this is still not enough to inherit the Array class.
var test = new createjs.ColorMatrix(255);
// var _array = test.toArray();
var _array = toArray(test);
console.log(_array); // [1, 0, 0, 0, 255, 0, 1, 0, 0, 255, 0, 0, 1, 0, 255, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]
function toArray(matrix) {
matrix.length = createjs.ColorMatrix.LENGTH;
return matrix.toArray();
}
EaselJS次期バージョン候補(NEXT)では、Arrayクラスの継承は止めてColorMatrix.toArray()
メソッドを実装することにより、この問題を解決しました。
The EaselJS NEXT version fixes this issue by abandoning inheritance of the Array class as follows:
]]>function ColorMatrix(brightness, contrast, saturation, hue) { this.initialize(brightness, contrast, saturation, hue); } // ColorMatrix.prototype = [];
ColorMatrix.prototype.toArray = function() {
var arr = [];
for (var i = 0, l = ColorMatrix.LENGTH; i < l; i++) {
arr[i] = this[i];
}
return arr;
};
ColorMatrix.clone()
メソッドが、正しくオブジェクトを返しません。
The ColorMatrix.clone()
method of EaselJS 0.7.0 does not properly return a object.
ColorMatrix.clone()
メソッドは、実質的に以下のように実装されています。内部的に呼出しているColorMatrix()
コンストラクタに渡す引数は、オブジェクトでなく数値でなければなりません。
The ColorMatrix.clone()
method is basically implemented as follows. It internally calls the ColorMatrix() constructor, of which arguments should be numbers but not objects.
function ColorMatrix(brightness, contrast, saturation, hue) {
this.initialize(brightness, contrast, saturation, hue);
}
ColorMatrix.IDENTITY_MATRIX = [
1,0,0,0,0,
0,1,0,0,0,
0,0,1,0,0,
0,0,0,1,0,
0,0,0,0,1
];
ColorMatrix.prototype.clone = function() {
return new ColorMatrix(this);
};
ColorMatrix.prototype.initialize = function(brightness,contrast,saturation,hue) {
this.reset();
this.adjustColor(brightness,contrast,saturation,hue);
return this;
};
ColorMatrix.prototype.reset = function() {
return this.copyMatrix(ColorMatrix.IDENTITY_MATRIX);
};
ColorMatrix.prototype.adjustColor = function(brightness,contrast,saturation,hue) {
this.adjustHue(hue);
this.adjustContrast(contrast);
this.adjustBrightness(brightness);
return this.adjustSaturation(saturation);
};
ColorMatrix.prototype.copyMatrix = function(matrix) {
var l = ColorMatrix.LENGTH;
for (var i = 0;i < l;i++) {
this[i] = matrix[i];
}
return this;
};
おそらく、ColorMatrix.clone()
メソッドからは、内部的にColorMatrix.copyMatrix()
メソッドを呼出すのが適切でしょう。[追記: 2013/11/09] EaselJS次期バージョン候補(NEXT)で以下のように修正されます。
The ColorMatrix.clone()
method would have been internally call the ColorMatrix.copyMatrix()
method instead. [P.S.: 2013/11/09] The NEXT version of EaselJS is fixed in the way below.
ColorMatrix.prototype.clone = function() {
// return new ColorMatrix(this);
var clone = new ColorMatrix();
return clone.copyMatrix(this);
};
]]>
With new SoundJS 0.5.0 used, your old code to preload a sound might not work.
]]>Sound.loadComplete
イベントは、SoundJS 0.4.0で用いられました。バージョン0.4.1からはSound.fileload
イベントに置換えられ、Sound.loadComplete
は使わないよう薦められていました。SoundJS 0.5.0では古いイベントがライブラリから完全に除かれましたので、Sound.fileload
イベントを使わなければなりません。
The Sound.loadComplete
event was for SoundJS 0.4.0. New Sound.fileload
event replaced it and the old event was deprecated in SoundJS 0.4.1, while it could still be used. From SoundJS 0.5.0 the old event is completely removed and it has not worked already. In SoundJS 0.5.0 the Sound.fileload
event should be used.
SoundJS 0.5.0 and 0.4.1 API Documentation
SoundJS 0.4.1 API Documentation (only)
「クリエイティブ・ディレクター、アートディレクターのアイデアの出し方。」
デザイン、映像、音楽、文章、etc., あらゆるクリエイティブワークの源泉となるものは「アイデア」です。今回のF-siteではクリエイティブの最前線で活躍されている方々を講師にお招きし、普段制作をされるうえでどのようにしてアイデアを膨らませ、アウトプットへとつなげていくのかをお話いただく予定です。 映像やテクノロジー、デザインなどクリエイティブに携わる方、必見です。
harahara Inc.代表
クリエイティブディレクター / デザイナー
「Webデザイナーが生き残るためにやるべきこと」
ツテ無しコネ無しのないないづくしの中でWebプロダクションHEAD LIGHTを立ち上げる。なんとか生き延び、近年のモバイルデバイス台頭による様々なコンテンツ制作に対応するためharahara Inc.を立ち上げた藤原連太郎氏。そんな藤原氏にはUI/UXデザインを通していかに工夫しこの厳しい時代と逆境をくぐり抜け生き残っていくかをお話いただく予定です。
・株式会社ハラハラ
・欠席カメラ(スマートフォンアプリ)
ライゾマティクス代表取締役
クリエイティヴ&テクニカル・ディレクター
「ライゾマティクスというチーム」
まだ記憶に新しいカンヌ国際広告祭でのPerfumeによるライブパフォーマンスやau ~FULL CONTROL YOUR CITY~をはじめとして、テクノロジーを駆使してクリエイティブシーンを常に牽引し続ける集団、ライゾマティクス。代表の齋藤精一氏をお招きして、これまでの作品を交えながら、その発想法から具体化に至るまでをじっくりとお話していただく予定です。
・Rhizomatiks
映像制作会社イエローブレイン並びにデザイン会社マバタキ製作所代表
映像監督 / アートディレクター / 人間
「映像を考える」
ミュージック・ビデオやTVCMなど数多くの映像作品を監督されてきた丹下紘希氏。そんな丹下氏には、どのような思考で映像を監督しているのか?今に至るまで大切にしてきたものは何か?を実際に監督されてきた映像作品を見ながらお話いただく予定です。
・イエローブレイン
・NOddIN
自社サービスでのFlashディベロッパーの役割
Flashを使うキャンペーンサイトは少なくなりましたが、まだまだ サービスにおいては現役で、ピグも5周年にさしかかろうとしています。 今日のデモでは、ピグの開発体制とFlashディベロッパーの関わりに ついて説明します
・アメーバピグ
10/23 17:45更新 企業デモの詳細を追加しました。
10/15 11:00更新 demo2の概要を追加しました。
10/11 21:46更新 登壇者のプロフィールを掲載しました。
日 時:2013/11/2(土) 13:15~17:00
場 所:国立オリンピック記念青少年総合センター センター棟 3階 310室
住 所:東京都渋谷区代々木神園町3-1(地図)
募集人数:120名
参加費用:1,000円(会場使用料など)
#本編終了後、新宿に移動後割り勘(4,000~5,000円程)で二次会(宴会)実施。
#二次会のみの参加は受け付けていません。
申し込みは締め切りました。なお、残席には余裕がありますので、申し込みをされていない方でも当日その旨を申告いただければご参加いただけます。
ただし、満席で立ち見になる可能性もありますので、あらかじめご了承ください。
12:45 開場:受付開始
13:20 demo1:藤原廉太郎氏(50分)
14:10 質疑応答
14:15 企業demo:サイバーエージェント(15分)
14:30 休憩
14:45 demo2:齋藤精一氏(50分)
15:35 質疑応答
15:40 休憩
15:50 demo3:丹下紘希氏(50分)
16:40 質疑応答
16:45 じゃんけん大会、お知らせなど
17:00 閉場
18:30 会場を移して2次会スタート(参加希望者のみ)
21:00 二次会終了(予定)
今回はパソコン対応室ではありません。ネット環境はありません。また、電源も限られています。
パソコンを持参の際には、十分に充電してこられることをお勧めします。
F-siteセミナーは「制作を楽しくする」方法の伝播を目的に行っています。継続的かつ定期的な開催のために、参加者のみなさまには下記内容のご理解とご協力をお願いしています。
F-siteセミナーでは、通常の枠と別に「企業デモ枠」を設けています(お申し込みがない回は省略)。新技術、新商品、バージョンアップ情報をはじめ、リサーチなど、Flashユーザーを対象にしたものなら、どのようにお使いいただいても構いません。デモ時間は15分、無料です。1セミナーにつき、2団体まで受け付けています。
詳しくは、お問い合わせフォームからお問い合わせください。
]]>DisplayObject.mouseEnabled
プロパティをfalse
に定めると、マウス操作のイベントがそのオブジェクトからは起こらなくなります。ところが、その後マウスポインタを動かすと、DisplayObject.mouseout
イベントが1度だけ生じてしまうのです。
もっとも、DisplayObject.mouseEnabled
プロパティをfalse
にしたとき、オブジェクトの上にあったマウスポインタがもはやインタラクションを失ったオブジェクトから外れたことにする、という仕様でしたら理屈はつきます。実際、Flashではプロパティをfalse
にした瞬間、DisplayObject.mouseout
イベントが起こります。
EaselJSもこの仕様に則りつつ、最適化のためにマウスを動かすまでイベントが送られないようにしたとのことです。仕様と最適化の考慮は、それぞれは納得できます。けれど、ふたつを合わせた現在のふるまいは、意図しない結果に思えます。
もともと、マウスポインタとオブジェクトの重なりを調べることそのものが負荷をかけるため、Stage.enableMouseOver()
メソッドを呼出さないとDisplayObject.mouseout
イベントは送れませんでした。そこで示されたCreateJS Supportからのアイデアは、このメソッドに引数をもうひとつ加えて、マウスを動かさなくてもイベントを起こすようにするというものです。負荷をわかったうえでユーザーが選べるのは、望ましいことではないでしょうか。
]]>myStage.enableMouseOver(frequency, alwaysCheck);
その他のライブラリにも、改善や新たな機能が加えられています。たとえば、SoundJSではオーディオプロパティがトゥイーンできます。問題の修正とともに、新たな機能も加えました。FirefoxベータバージョンのWebAudioのサポートなどです。
ライブラリごとの細かな変更や追加は、GitHubのVERSIONS.txtの中身をお確かめください(EaselJS、SoundJS、TweenJS、PreloadJS)。
Zoëのアニメーション機能の対応も大きく改められました。とくに、[Animation]タグが加わり、スプライトシートのアニメーションをひとつひとつ扱えるようになっています。
図001■Zoëの[Animation]タグ
パワーユーザーのためには、オープンソースのGruntワークフローによる新たなビルド処理が採入れられました。ライブラリの構築が、これまでより簡単に、しかも早くできます。
新CreateJSのバージョンはつぎのとおりです。
これまでと同じく、最新のバージョンはGitHubをご覧ください。コンパクト(min)版はすでにCDNに加えられています。すべてのライブラリファイルが含まれたCreateJSのコンパクト版もあります。Toolkitをお使いのユーザーは、つぎのAdobe Flash Professional CCのアップデートがサポートするバージョンをお確かめください。
]]>The EaselJS NEXT version change its event model (CreateJS Blog "Event Model Updates"). The EventDispatcher class is inherited by the DisplayObject class. And the Event class is newly added as the base class of event objects. This article explains the following two new methods in these classes.
EventDispatcher.on()
メソッドは、EventDispatcher.addEventListener()
メソッドと同じく、オブジェクトにリスナーを加えます。さらに引数が加わり、リスナー関数内のthis
参照や1度だけの呼出し、リスナー関数に渡す第2引数なども与えられます。
The EventDispatcher.on()
method adds a listener to the refered object as well as the EventDispatcher.addEventListener()
does. But the method has more arguments to specify scope, calling the listener once, the second argument to be passed to the listener function, and so on.
object.on(type, listener, scope, once, data, useCapture)
注意しなければならないのは、EventDispatcher.on()
メソッドが引数から新たな関数をつくり、それをリスナーとして加えることです。つまり、メソッドの第2引数に渡した関数は、リスナーではありません。新たな関数はメソッドが返します。ですから、リスナーを除くときは、その戻り値の参照を用いなければなりません。
Note that EventDispatcher.on()
method creates new function for the listener from its arguments. Therefore, the second argument's function of the method is not the listener. The created listener function is returned from the method. Then the returned reference should be used when the listener is removed.
たとえば、以下のコードはインスタンス(instance)をクリックするたびに30度回し、2回目のイベントでリスナーが除かれます。EventDispatcher.on()
メソッドの第3引数にObjectインスタンス(data)を与え、そのプロパティ(count)にカウンタの整数を定めました。また、第5引数にはリスナー関数に渡す数値(30)を加えました。なお、EventDispatcher.off()
メソッドは、内部的にEventDispatcher.removeEventListener()
を参照します。
The example code below rotates the instance (instance) 30 degrees on each click and removes the listener on the second click. The Object instance (data) of which property (count) has counter integer is passed as the third argument of EventDispatcher.on()
method. Its fifth argument (30) is angle to be passed the listener function. The EventDispatcher.off()
method internaly referes the EventDispatcher.removeEventListener()
.
var listener;
var data = {};
listener = instance.on("click", clickHandler, data, false, 30);
data.count = 0;
function clickHandler(eventObject, angle) {
var instance = eventObject.target;
instance.rotation += angle;
if (++this.count > 1) {
instance.off("click", listener);
}
}
Event.remove()
メソッドは、そのイベントから呼出されたリスナー自身を除きます。Eventオブジェクトを参照するだけでよく、イベント名(種類)もリスナー関数の参照も要りません。
The Event.remove()
method removes the called listener from the event. The necessary reference for the method is only the Event object. Its event type nor target object are not needed.
eventObject.remove()
すると、前掲コードのリスナー関数(clickHandler)は、つぎのようにEvent.remove()
を用いて書替えることができます。
Then the listener function (clickHandler) in the example code above can be revised with the Event.remove()
as follows:
function clickHandler(eventObject, angle) {
var instance = eventObject.target;
instance.rotation += angle;
if (++this.count > 1) {
// instance.off("click", listener);
eventObject.remove();
}
}
ただし、注意しなければならないのは、Event.remove()
メソッドを呼出しても、イベントリスナーは直ちには削除されないことです。内部的にはEventオブジェクトにフラグが立てられて、つぎにイベントが配信されるときに除かれます。そのため、Event.remove()
メソッドを呼出したすぐ後にEventDispatcher.hasEventListener()
の戻り値を調べるとtrue
が返されます。
But note that the listener will not be instantly removed when the Event.remove()
method is called. Internally the flag to remove is set to the event object and the listener is deleted when the next event is dispatched. Therefore, just after the Event.remove()
method is called, EventDispatcher.hasEventListener()
returns true
.
筆者は、EventDispatcher.on()
メソッドが新たにつくるリスナー関数の引数として、つぎのようにリスナー関数自身の参照を加えてはどうかと考えます。
My idea to revise the EventDispatcher.on()
is to add the reference of the listener function, which the method creates and returns, as its third argument.
createjs.EventDispatcher.prototype.on = function(type, listener, scope, once, data, useCapture) {
if (listener.handleEvent) {
scope = scope || listener;
listener = listener.handleEvent;
}
scope = scope || this;
var args = [];
var newListener = function(evt) {
args[0] = evt;
listener.apply(scope, args);
once && evt.target.removeEventListener(evt.type, newListener, useCapture);
};
args[1] = data;
args[2] = newListener;
/*
return this.addEventListener(type, function(evt) {
listener.call(scope, evt, data);
once && evt.remove();
}, useCapture);
*/
return this.addEventListener(type, newListener, useCapture);
};
すると、前掲コードのリスナー関数(clickHandler)は、つぎのように関数自身をイベントリスナーから除けます。
Then the listener function (clickHandler) in the example code above can be removed itself from the event as follows:
// var listener;
// function clickHandler(eventObject, angle) {
function clickHandler(eventObject, angle, listener) {
var instance = eventObject.target;
instance.rotation += angle;
if (++this.count > 1) {
// eventObject.remove();
instance.off("click", listener);
}
}
]]>
ダッシュボードはプロジェクトの管理、アカウント管理などを行うことができる画面になります。
新規プロジェクト作成は「新規プロジェクト作成」から作成することができます。プロジェクトのサムネイルはWEB IDEのビルド設定のアイコンに基づいているのでとても分かりやすくなっています。アプリ開発が初めての方は、チュートリアルから始めてみるのもお勧めです。「作ってみる」ボタンをクリックすれば簡単にアプリ開発を始めることができます!
Herlockは下図のようなWeb IDEを使ってアプリ開発をします。
エディタにはJavaScriptのコードアシスト(下図)やコード整形、検索、置換など実際コードを書く上で役に立つ便利な機能が備わっています。
またショートカットも用意していますので、慣れればこちらを使うとより効率的に開発が出来るのではっ!ショートカットはヘルプ>エディタキーボードショットカットより確認することができます。
次にHerlockでのビルド設定についてご紹介します。クローズドβ版でもビルドまでHerlockを使用してクラウド上で行うことができます。ビルドを行うための基本的な設定をメニュー>ビルド設定(下図)から行うことができます。
iOSとAndroidそれぞれのビルド設定をこの画面で行うことができ、この画面で証明書の設定や、キーストアの作成などを行います。
ビルドの設定が終わったらビルドを実行します。ビルドはプロジェクト>ビルドより行うことができます。
Herlockで実行できるビルドは下記となっております。
【iOSビルド種類】
※iOSアプリをビルドするにはiOS Developer Programに参加し、iOS Provisioning Portalから証明書登録などを行う必要がありますのでご了承ください。
【Androidビルド種類】
以上がHerlockクローズドβ版の基本的な機能になります。すべてはご紹介できていないので、ぜひ実際さわっていただければと!
クローズドβ版をリリース致しましたが、Herlockは引き続き開発がすすめられています!現状開発が進んでいるものには下記のようなものがあります。
その他にもどんどん新機能が追加予定です!開発状況はサイトに掲載しております。随時更新しておりますのでぜひチェックしてみてください!
開発状況はコチラから⇒Herlock-開発状況
今回のクローズドβ版は正式リリースの評価版として、機能や性能を評価して頂く目的として公開しております。ビルドまでの一連の機能は実装された状態ではありますが、まだ開発中の機能もございますのであらかじめご了承ください。
バグ見つけた!この機能がほしい!などのご意見は今後の機能向上の参考とさせていただきますのでサポート>フィードバックよりお送りいただけますと幸いです!
そして!Herlockのロゴが変わりました!
「ブレース{}でシンプルなボックスを作り、新しいものを生み出す可能性を表現」したロゴとなります。Herlockを多くの人に使っていただいてぜひたくさんのアイデアを形にしていただければと!
F-site様には公開前からお世話になっておりましたHerlockですが、やっと!クローズドβ版という形ではありますが、リリースとなりました!
Herlockをつかってどんなアプリを皆さんがつくるのか今からとても楽しみです!
まだHerlockサービスサイトからメールアドレスを登録してくださった方はクローズドβ版を利用することが可能ですので、まだ登録してないけど触ってみたいな…と少しでも思っていただけたらぜひお試しください!
それではHerlock、今後とも何卒よろしくお願いいたします。
DisplayObject.getBounds()
メソッドは、オブジェクトのローカルな座標空間における矩形領域をRectangleで返します。オブジェクトの基準点(0, 0)を起点として、座標変換は除かれます。領域が自動計算できるオブジェクトについては、その値が返されます。矩形領域は、BitmapとSpriteオブジェクトについては正確に求められ、Textオブジェクトでは概算値になります。Containerオブジェクトは、DisplayObject.getBounds()
メソッドの戻り値がnull
でないすべての子オブジェクトから集計します。なお、Shapeオブジェクトでは、メソッドの戻り値がデフォルトではnull
になります。
矩形領域を自ら求められないShapeインスタンスなどのオブジェクトについては、DisplayObject.setBounds()
メソッドで値が定められます。
オブジェクト.setBounds(x座標, y座標, 幅, 高さ)
DisplayObject.setBounds()
メソッドで矩形領域を与えれば、親ContainerオブジェクトがDisplayObject.getBounds()
メソッドで求める領域の集計に加えられます。また、DisplayObject.setBounds()
メソッドで定めた矩形領域は、領域の自動計算をオーバーライドします。たとえば、Textオブジェクトにより正確な矩形領域が与えられますし、Containerオブジェクトが領域を集計する負荷も下げられるでしょう。また、インスタンスにDisplayObject.cache()
メソッドを呼出したときも、キャッシュの矩形領域が、自動計算をオーバーライドします。
DisplayObject.getTransformedBounds()
メソッドは、表示リストの親オブジェクトの座標にもとづく、インスタンスの矩形領域を返します。したがって、インスタンスへの座標変換も加わった値になります。
なお、Shapeオブジェクトの矩形領域の扱いについては、他のやり方も考えていくそうです。また、Textオブジェクトに新たなCanvas APIが使えるようになれば、より正確な矩形領域が求められるようになります。ご意見やご要望は、引続き求められています。
]]>Flash Player 3.7とAIR 3.7は、2013年4月にリリースされました。セキュリティと安定性を引続き重視し、ゲーム向けの機能を加えました。おもな機能はつぎのとおりです[*1]。
Flash Player 11.8とAIR 3.8は、現行のリリースです。ゲームの機能を主眼とし、セキュリティと安定性を高めました。おもな機能は、つぎのとおりです[*2]。
Adobeでは、つぎのふたつのリリースをそれぞれ2013年の終わりと2014年の始まりに予定しています。これらのリリースもプレミアムビデオとゲーム、セキュリティ、安定性を重視していきます。おもにつぎのような機能を検討しています。
[*1] 詳しくは、「リリースノート | Flash Player® 11.7、AIR® 3.7」をお読みください。
[*2] つぎの記事が参考になります。akihiro kamijo「Flash Player 11.8 ベータと Adobe AIR 3.8 ベータの公開」、「Flash Player 11.8 & Adobe AIR 3.8 の公開」。
]]>demo1「演出論 映画からゆるアニメまで」青池 良輔氏
demo2「Flash Professional CCで何が変わったのか」世路庵 沖 良矢 氏
demo3「"妥協は死"─デジタル内に残す”手作りの魅力”」神風動画 水崎 淳平氏
demo4「yama_ko式モーショングラフィックスワークフロー」yama_ko(Kotaro Yamazaki)氏
会場のプロジェクターの故障があり、講師のみなさま、参加者のみなさまには大変ご迷惑おかけしまして申し訳ありませんでした。
デモも一部順番を入れ替えて行いました。
セミナーへ参加した方のコメント、トラックバックはこちらの記事にお願いします。
]]> 写真レポートセミナースタート。ならず!
急遽、司会の A.e.Suck 氏とルンパロ・チータ氏によるトークライブ!
ルンパロさん突然ありがとうございました!
異例のじゃんけん大会前倒し。
demo1、青池 良輔氏
テレビ版、劇場版の『紙兎ロペ』をもとに演出についてお話いただきました。
demo2、世路庵 沖 良矢 氏
Flash Professional CC での変更点についてお話いただきました。
demo3、神風動画 水崎 淳平氏
TVアニメ『ジョジョの奇妙な冒険』オープニングアニメーションの事例をもとに制作についてお話いただきました。
demo4、yama_ko(Kotaro Yamazaki)氏
構想から制作までのソフトの使い分けを含めモーショングラフィックスワークフローのお話いただきました。
2次会はおなじみ新宿の「石狩川」。講師の方、参加者方、同業者同士楽しい交流会になりました。
写真:徳久
]]>おそらく皆さんご存知のスプライトシートだと思われますが、一応ご説明をさせていただくと、、
スプライトシートとは、複数の画像を一枚の画像にまとめて、タイル状に配置したビットマップイメージファイルです。
アニメーション画像の管理がしやすい+ファイル容量を抑えるのにも効果的で、ゲームアプリなどのアニメーションが多いアプリ制作にはもってこいです。
FlashはCS6から、アニメーションを「スプライトシート」として書き出す機能が実装されています。
それでは実際にFlashのタイムラインアニメーションから スプライトシートを書き出してみます!
【スプライトシートの書き出し手順】
1.Flash上で任意のムービークリップを選び、右クリックして「スプライトシートを生成」メニューを選択します。
2.データ形式は「JSON-Array」、画像形式は「PNG32bit」を選択して書き出します。
以上で書き出しは完了です!書き出したスプライトシートは下図となります。とっても簡単!CS6万歳!
Herlockではこのスプライトシートを使ってアニメーションを作ることが簡単にできます。
スプライトシートによるアニメーションは下図のようにスプライトシートの画像を順々に表示していきます。アニメーションgif のようなコマアニメの要領ですね!
スプライトシートによるコマアニメはBitmap.setClippingRectによって生成します。
setClippingRectの引数にはRectangleオブジェクトを渡すので、このRectangleを書き出したJSONから生成します。
Flashから書き出された1フレーム分のJSONデータは下記のようになります。
{
"filename": "g0000",
"frame": {"x":0,"y":0,"w":200,"h":143},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":200,"h":143},
"sourceSize": {"w":200,"h":143}
}
JSONを参考に下記の用なイメージで1フレーム分の描画矩形情報を生成します。
new Rectangle(frame.x, frame.y, frame.w, frame.h)
フレーム情報はJSONのframesに配列として格納されているので下記のようなコードで 全フレーム分の情報を抽出することが出来ます。
flashExportが作成したJSONデータです。
var frames = [];
for(var i = 0; i < flashExport.frames.length; i++) {
var frame = flashExport.frames[i].frame;
frames.push(new Rectangle(frame.x, frame.y, frame.w, frame.h));
}
※コード量を減らしたい場合は、事前にJSONを整形してframe情報以外を削除してもOKです。
アニメーションの実行はenterframeでsetClippingRectを呼び、上記で生成したRectangleを渡せばOKです。
それでは実際に動かしてみます!
スプライトシートを使用したアニメーション実装の全コードは下記となります。
//Flashから書き出したJSONを変数に代入します
var flashExport = {"frames": [
{
"filename": "g0000",
"frame": {
"x": 0,
"y": 0,
"w": 200,
"h": 143
},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {
"x": 0,
"y": 0,
"w": 200,
"h": 143
},
"sourceSize": {
"w": 200,
"h": 143
}
},
//書き出したJSONを代入(今回は省略します)
}
};
/**
* コマアニメ用のスプライトシート上の描画領域を
* Rectangleの配列として定義します。
*/
var FRAMES = [];
//FlashのJSONを上記フレーム定義に変換します
for(var i = 0; i < flashExport.frames.length; i++) {
var frame = flashExport.frames[i].frame;
FRAMES.push(new Rectangle(frame.x, frame.y, frame.w, frame.h));
}
//Mixinの実装
var mixin = function( target, imports ) {
for ( var method in imports ) {
target[method] = imports[method];
}
};
//アニメーション生成用のSpriteオブジェクトを生成します
var SpriteAnimationFactory = {
create: function( bmd, frames ) {
//表示コンテナ
var sprite = new Sprite();
//methodsの定義内容をmixin
mixin(sprite, this.methods);
//表示用Bitmap
sprite.bitmap = sprite.addChild( new Bitmap(bmd, false, false, frames[0]) );
//Frame
sprite.frames = frames;
//現在のFrameIndex
sprite.frameIndex = 0;
return sprite;
},
//アニメーションの表示コンテナに実装するメソッド
methods: {
//アニメーションの再生
play: function() {
var self = this;
this.update = function() {
self.renderFrame(self.frameIndex++);
if(self.frameIndex >= self.frames.length) {
self.frameIndex = 0;
}
};
this.addEventListener("enterFrame", this.update);
},
//アニメーションの停止
stop: function() {
this.removeEventListener("enterFrame", this.update);
},
//フレームを表示
renderFrame: function(frameIndex) {
var frame = this.frames[frameIndex];
this.bitmap.setClippingRect(frame);
},
//フレームのリセット
reset: function() {
this.renderFrame(0);
this.frameIndex = 0;
}
}
};
//==============================================
// 実行処理
//==============================================
var stage = new Stage( 320, 480 );
addLayer( new Layer( stage ) );
//背景を敷き詰めます
var bg = stage.addChild( new Bitmap( new BitmapData( 1, 1, true, 0xff00ffff ) ) );
bg.width = stage.stageWidth;
bg.height = stage.stageHeight;
//画像を読み込みます
var image = new Image( "assets/images/sheet.png" );
image.onload = function() {
//アニメーション表示コンテナを生成してstageに追加
var cat = SpriteAnimationFactory.create( new BitmapData( image ), FRAMES);
stage.addChild( cat );
//再生
cat.play();
};
実行結果が下図となります。
ねこ好き弊社のぷにぷに毛玉ねこがびっくりしているアニメーションが表示できました!カワイイ!
このようにとても簡単にFlashのタイムラインアニメーションからアニメーションを作成することができました。Flashでつくったアニメーションがそのまま表示されるのはやっぱり楽しいですね!
さて、今回でF-site様でのHerlockのご紹介も最後となります。
6月末から8回にわたって、Herlockの基本的な概念から、サンプルアプリを使用したアプリ実装のご説明、ライブラリの使い方などいろいろとご紹介させていただきました。すこしでも皆さんに興味を持って頂けたのであれば嬉しいです!
Herlockのクローズドベータ版のリリースは8月中旬を予定しております!
順調にいけばもう少しで実際に触って頂けると思いますので今しばらくお待ちいただければとっ。
もし、まだ事前登録をお済でない方はこの機会にぜひ!事前登録はコチラから簡単にできますのでよろしくお願いします。
まだまだHerlockは機能が盛りだくさんです!すべてご紹介はできませんでしたので、ぜひAPI Documentも公開中ですので、興味を持たれた方は覗いてみてください。こそっと機能がふえていたりするので、そこも要チェックです!
また、FacebookやTwitterでも開発状況や新しい情報を配信しておりますのでこちらもチェックしてみてください!たまに私も現れることがあると思いますので、飽きずにお付き合いくださいw
FB:https://www.facebook.com/herlock.do
Twitter:@herlock_do
最後になりましたが、今回この連載を引き受けてくださったF-site様、ご対応いただいたスタッフの方々にこの場を借りてお礼申し上げます!ありがとうございました!
]]>HerlockではJavaScriptのビルトイン自体がブラウザとは異なります。これによって、一般的なライブラリで使えるモノと使えないモノが存在します。使えるライブラリの条件は、、
「ブラウザ実装では無く純粋にJavaScriptエンジン自体のビルトインのみで動作が可能」
となります。
一部例外で使用可能なモノはありますが、基本はこの条件を満たすものがHerlockで使えるライブラリだと思っていただければよいのではないでしょうか。
【純粋にJavaScriptエンジン自体のビルトイン】
【その他使用可能なブラウザ同等の関数等】
※部分的に差異のあるものもあります。
※その他Image,Audio等DOMと互換性のあるインターフェイスを提供しているAPIもあります。
それでは対応しているライブラリの一部を紹介します。
Box2D
物理演算ライブラリ
使用条件:基本的にはそのまま使用可能です。
TweenJS
CreateJSのTweenライブラリ
使用条件:本来ブラウザ上ではEaselJSのTickerが使用されており、requestAnimationFrameを用いて 描画処理が実行されています。 Herlock上ではrequestAnimationFrameは無いので、enterFrameリスナで createjs.Tween.tickを利用してTweenの処理を進めます。
tween24js
AS3のTweenライブラリ「Tween24」のJavaScriptバージョン
使用条件:基本的にはそのまま使用可能です。
tween.js
Tweenライブラリ
使用条件:基本的にはそのまま使用可能です。enterFrameかtimer処理でTWEEN.updateを叩いて使用します。
Underscore.js
ユーティリティ群
使用条件:基本的にはそのまま使用可能です。
Lo-Dash
ユーティリティ群、Underscoreと互換性があります。
使用条件:基本的にはそのまま使用可能です。
RequireJS
依存関係の解決等
使用条件:本来の実装はscriptタグベースとなるため、そのままは使用出来ません。一部の処理をHerlock用に書き換えての使用となります。改変したモノは下記のリポジトリから取得出来ます。
Herlock_RequireJS
Backbone.js
クライアントサイドMVCフレームワーク
使用条件:Rutor及びView周りは使用できません。上記Underscore.jsとZepto.jsを改変したものを併用して使用することができます。
※今後も対応するライブラリは随時増やしていく予定です。
それではどのようにライブラリが使用されるか実際のサンプルでご紹介します。
今回はRequireJSとTweenJSを使ったアニメーションを実装してみます。
main.js
( function( ) {
"use strict";
//RequireJSを読み込みます
var loader = new Script( "libs/requirejs/require.min.js" );
loader.onload = function() {
//Pathの設定をします
require.config( {
baseUrl: "."
} );
//app/main.jsを読み込んで処理を開始します
require( ["app/main"]);
};
} )();
app/main.js
define( ["lib/TweenJS/tweenjs"], function () {
var stage = new Stage( 640, 640 );
addLayer( new Layer( stage ) );
var image = new Image();
image.src = "assets/images/maru.png"";
image.onload = function ( ) {
var bd = new BitmapData( image );
var bitmap = new Bitmap( bd );
stage.addChild( bitmap );
var tween = createjs.Tween.get( bitmap, {loop: true} )
//(1)
.to({x:400,y:0},500, createjs.Ease.cubicIn)
//(2)
.to({x:400,y:400},500, createjs.Ease.bounceOut)
//(3)
.to({x:0,y:400},500, createjs.Ease.cubicIn)
//(4)
.to({x:0,y:0},500);
stage.addEventListener( "enterFrame", function ( ) {
createjs.Tween.tick( 1000 / 60 );
} );
};
} );
※app/main.jsの処理内容自体は前回と同等ですが、defineを使用してTweenJSの依存性を解決しています。
※TweenJSはRequireJSを前提として書かれているわけでは無いので、読み込んだ時点でCreateJSオブジェクトに展開されます。
上記のとおり、ブラウザベースでの処理とほぼ差異が無くコードが書けることがわかるかと思います。
実行結果が下図となります。
今回ご紹介させていただいたように簡単にライブラリも使用することができます。Herlockにおける主なアニメーションの実装方法は前にご紹介したenterFrameによるプロパティ操作を基本としていますが、動きに変化をつけたい場合はTweenJS等のTweenライブラリを使うのがベターな方法ですので、ぜひ活用してみてください!
さて、次回でとうとうこの連載もファイナルです!次回はスプライトシートによるコマアニメーションについてと、クローズドベータ版リリース情報をご紹介できればと思っています。
「Herlock」はただ今クローズドベータ版の利用事前登録を実施しています。事前登録していただければ優先的にご利用が可能ですのでこの機会にぜひHerlockをお試しください!
また、FacebookやTwitterでも開発状況や新しい情報を配信しておりますのでこちらもチェックしてみてください!
FB:https://www.facebook.com/herlock.do
Twitter:@herlock_do
DisplayObject.onClick
やDisplayObject.onTick
、BitmapAnimation.onAnimationEnd
など。SpriteSheet()
コンストラクタの引数に渡すオブジェクト(data)に定められるプロパティfrequencyがspeedに置換えられるとともに、値の決め方も変わる。
MouseEvent()
コンストラクタに渡す引数からtargetの定めが除かれる。EventDispatcher.dispatchEvent()
メソッドの戻り値が、リスナー関数の戻り値にもとづくブール値から、Event.defaultPrevented
プロパティの値に変わる。
false
。Event.preventDefault()
メソッドの呼出しでtrue
に定められる。MouseEvent.mousemove
とMouseEvent.mouseup
イベント。
DisplayObject.pressmove
およびDisplayObject.pressup
イベントが加えられる。SpriteSheetUtils.flip()
メソッド。SpriteSheetUtils.mergeAlpha()
メソッド。Sprite.framerate
およびSpriteSheet.framerate
プロパティが加えられる。Sprite()
コンストラクタの引数にframeOrAnimationを与えることができる。BitmapAnimation.offset
プロパティはSpriteクラスからは除かれる。Ticker.timingMode
が加えられる替わりに、Ticker.useRAF
は除かれる。
Ticker.timingMode
プロパティに与えられる定数として、Ticker.TIMEOUT
とTicker.RAF
、およびTicker.RAF_SYNCHED
が加わる。Ticker.getMeasuredTickTime()
メソッドが加えられる。Stage.nextStage
プロパティが加わり、インタラクションのイベントを送る。
Graphics.inject()
メソッドが加えられる。Text.getMeasuredHeight()
メソッドが加わる。Container.setChildIndex()
メソッドの引数に、子オブジェクトの総数より小さい整数を与えたとき起こる問題を解決。Graphics.Command
クラスとして公開される。MouseEvent.nativeEvent
がロールオーバーやロールアウトのイベントに含められた。Matrix2D.transformPoint()
メソッドが加えられた。このアップデートで主眼とされているアニメーションに関わる変更について、詳しくは「EaselJSの次期バージョン候補でアニメーションの扱いが変わる」をお読みください。