FN1405003 | Flash Professional CCのHTML5 Canvasドキュメントで子インスタンスに定めた関数を呼出す
Flash Professional CC 13.1から加わったドキュメント形式の[HTML5 Canvas]を用いれば、入れ子にしたタイムラインのインスタンスがCreateJSで親子の階層としてActionScript 3.0のように扱えます(新たなドキュメント形式については、「Flash Professional CC 13.1のHTML5 CanvasドキュメントとCreateJS」をご参照ください)。ただし、子インスタンスに定めた関数を呼出そうとすると、かなり勝手が違ってきます。 01 子インスタンスを参照しただけではその中に定めた関数が呼出せない メインタイムラインに置いたインスタンスに、つぎのような簡単なアニメーションの関数(rotate())を定めたとします(図001)。たとえば、インスタンスをクリックしたとき呼出したいのであれば、さらにこの[アクション]パネルにJavaSc
FN1402002 | Away3D TypescriptとWebGL | HTML5 : テクニカルノート
2014年2月5日付でAway3Dの公式ブログに「Away Foundation roadmap 2014」と題する記事が公開され、2014年のロードマップが示されました。Away3Dエンジンの利用を拡げる新たなプラットフォームに向けた開発が進められます。その中からAway3D TypescriptとWebGLについて、ブログ記事にもとづいてご紹介します(ActionScript 3.0用のAway3Dについては「Flash用Away3D 4.2」をご覧ください)。 昨年末に、Away3D Typescriptのアルファリリースにともなって、WebGLの世界の初期調査を行いました。コミュニティの反応はとても好意的でした。それは、デモの作成や、記事の執筆、あるいは開発の支援にこれまで携わった人たちのおかげです。MozfestとDevgammに参加したことがきっかけとなり、開発者からさらに多く
FN1401003 | EaselJS次期バージョンでWebGLを使う | HTML5 : テクニカルノート
2014年1月28日付CreateJS Blogに「WebGL & EaselJS: a Technical Intro」という記事が投稿されました。EaselJSの次期バージョンがサポートするでWebGLレンダラをどのように使うかの入門的な解説です。現在、EaselJS次期バージョンはパブリックプレビューがGitHubに公開されています。本稿はblog記事にもとづいて、新しいWebGLレンダラについてご紹介します。なお、次期バージョンに備わる機能については、「EaselJSがWebGLをサポート」をお読みください。 01 はじめに これまで試されたかぎりでは、一般的に使うWebGLレンダラをEaselJS向けに開発する意味はないと考えられていました。最近のCanvasの実装は、すでにさまざまな2DコンテンツをGPUで適切に描くことができます。それも、ネイティブコードにより、重い仕事をこな
珍味ベクトル外積3種盛り | Creators MeetUp vol. 12
お品書き 01 ベクトルの外積とは 02 面の向きが表か裏かを調べる 03 ふたつの直線の交点を求める 04 回す力のかかりやすさを決める 本稿は、2014年1月18日土曜日に催された第12回「Creators MeetUp」で務めた一席「新しいCreateJSのマウスイベント」のまとめとして書いた。サンプルコードはjsdo.itに掲げている。また、当日の映像はUSTREAM録画として公開された。 ベクトルの中でも「外積」は、考え方のわかりにくい計算といえる。だが、いきなり概念を捉えようとするのでなく、何に使えるのかを知れば、計算式そのものは簡単な四則演算だ。今回は2次元のベクトルに絞って、3つのインタラクティブなサンプルを例に、外積がどう使われているのかをご紹介する。 01 ベクトルの外積とは 3次元空間におけるベクトルAとBの外積はA×Bで表され、つぎのようなベクトルとして定められる。
FN1401002 | EaselJSがWebGLをサポート | HTML5 : テクニカルノート
2014年1月16日付CreateJS Blogに「WebGL Support in EaselJS」という記事が投稿されました。EaselJSでWebGLレンダラがサポートされるということです。現在、パブリックプレビューが公開されています。本稿はblog記事にもとづいて、新しいWebGLレンダラについてご紹介します。 01 WebGLレンダラが目指すこと WebGLは多くのブラウザでサポートされるようになってきました。Mozillaの協力により、EaselJSのWebGLが初期ベータとして公開されました。研究開発と最適化が重ねられたレンダラは2Dコンテンツを、Canvasの2Dコンテクストと比べて6～50倍の速さで描きます。これはWebGLレンダラだからできたことです。 目指していることはつぎの3つです。 スプライトとビットマップをきわめて高速に描く 今のEaselJSのAPIと整合性を
FN1312001 | Flash Professional CC 13.1のHTML5 CanvasドキュメントとCreateJS | HTML5 : テクニカルノート
Flash Professional CC 13.1から、新たなドキュメント形式として[HTML5 Canvas]が加わりました。これまでの[Toolkit for CreateJS]パネルによる[パブリッシュ]に替えて、ドキュメントからHTML5とCanvasに対応させようというものです。本稿では、FlashドキュメントをHTML5 Canvas形式に変換し、CreateJSで手を加えるまでの流れを簡単にご紹介します。 01 HTML5 Canvasドキュメント Flash Professional CCを13.1にアップデートして起ち上げると、[スタートアップスクリーン]の[新規作成]の初めに[HTML5 Canvas]が表れます(図001)。FlashなのにFlash Playerを使わない形式が先頭に来なくてもよさそうな気はしなくもありません。 図001■[スタートアップスクリーン
FN1309003 - Starlingフレームワーク1.4の新しい機能 - Flash : テクニカルノート
2013年9月23日にStarlingフレームワーク1.4が公開されました。パフォーマンスの向上のほか。そのおもな内容を9月24日づけのblog記事「Starling 1.4」にもとづいてご紹介します。 01 概要 Starlingはこのリリース1.4でさらに磨きがかかりました。さまざまな手が加えられて、ゲームなどの処理はより速く、安定的になります。しかも、コードは何ひとつ書替えずに済みます。また、新しいAIRの機能もすべて対応しています。たとえば、テクスチャの4096×4096ピクセルのサポートやRectangleTextureクラス、16ビットテクスチャといった新しいオプション、あるいはAIR 3.9から可能になるiOSのバックグラウンドの実行などです。 02 パフォーマンスの向上 Starlingフレームワークすべてにわたって最適化を施しました。たとえば、つぎのような項目です。これま
FN1308004 | EaselJS次期バージョンのイベントモデル改訂 | HTML5 : テクニカルノート
EaselJS次期バージョン候補(NEXT)でイベントモデルが大きく変わります。本稿はCreateJS Blogの記事「Event Model Updates」にもとづいて、その中身をご紹介します。イベントモデルは、CreateJSの他のライブラリにも用いられます。イベントがより扱いやすくなり、一貫した仕組みになります。 01 onイベントハンドラ これまでのCreateJSでは、DisplayObject.onClickなどonで始まるイベントハンドラは使わず、EventDispatcher.addEventListener()メソッドによるリスナーを用いることが勧められていました。それでも残されてはいたonハンドラが、次期バージョンからはすべて除かれます。開発においてイベントモデルがひとつに絞られることで、後述のバブリングなど新たな機能が加えやすくなります。 02 EventDispa
CreateJSを使ったアニメーションとマウスインタラクション - 『WebクリエイターのためのCreateJSスタイルブック』出版記念特別セミナー
CreateJS Suite は、HTML5 の Canvas要素を使って、ダイナミックで インタラクティブな表現ができるJavaScriptの統合ライブラリだ。CreateJSのライブラリはどのように使うのか、そしてどうい う表現ができるのかを説明しよう。[追記: 2013年7月29日] YouTubeに録画ビデオが公開されたので以下にリンクした。 01 EaselJSはじめの一歩 01-01 EaselJSのJavaScriptファイルとCanvasをHTMLドキュメントに加える EaselJS はCanvasを用いてオブジェクトを描く。canvas要素をbody要素の中に書くと、透明な矩形領域がつくられ、JavaScriptで描画できる。canvas要素の属性widthとheightで幅と高さを定める。また、JavaScriptでcanvas要素を扱うためにはid属性を加える。 <c
EaselJSでBox2Dを使った物理シミュレーションを試す - CreateJS Workshop
【coming soon】 WebクリエイターのためのCreateJSスタイルブック 著者：野中文雄 定価：本体価格2,980円＋税 ISBN978-4-8399-4517-6 仕様：B5変型、344ページ（予定） 刊行：2013年6月下旬予定 *画像はイメージです。 お品書き 01 物理空間と剛体を定める 02 剛体を落下させる － 物理演算シミュレーションの実行 03 静的な剛体を加える － 衝突のシミュレーション 04 物理シミュレーションにフィクスチャを加える Appendix おまけ 先に、インストールについて簡単に紹介する。Box2dWebのサイトに「Downloads」のリンクがある(図001)。 図001■Box2dWebのサイト ダウンロードしたZip圧縮ファイル(Box2dWeb-2.1a.3.zip)を展開すると、ふたつのJavaScript(JS)ファィルが入ってい
FN1304001 - Starlingフレームワークで物理演算エンジンNapeを使う - Flash : テクニカルノート
Starlingフレームワークで、物理演算エンジンを使ってみましょう。CPUの負荷が上がりやすい物理演算は、Stage3Dを試したい処理のひとつです。本稿は、使いやすさで注目されている「Nape」を採上げます[*1]。なお、Starlingフレームワークの基本的な使い方については「Starlingフレームワークを使う」をお読みください。 サンプルファイル: スクリプト004(CS6形式/Zip圧縮/約29KB) StarlingフレームワークとNapeのインストールおよび設定が必要です。 01 Napeをインストールする Napeはオープンソースの物理エンジンです。ダウンロードページから、SWCファイルが手に入ります(図001)。Starlingフレームワークには「AS3」のSWCを選びます。release版とdebug版とは、本稿のスクリプトを試すには、どちらでも構いません。 図001■
外部ファイルの読込みとサウンドの再生～新しいPreloadJSとSoundJS～ - CreateJS Workshop
CreateJS Workshop 外部ファイルの読込みとサウンドの再生 ～新しいPreloadJSとSoundJS～ お品書き 01 画像イメージを読込んでCanvasに置く 01-01 前回までのあらすじ ー CanvasにStageオブジェクトをつくる 01-02 Stageオブジェクトに外部画像ファイルの含まれたBitmapインスタンスを置く 02 PreloadJSで外部画像ファイルの読込みを待つ 02-01 LoadQueueクラスで外部ファイルを読込む 02-02 読込んだ画像イメージにもとづいてBitmapインスタンスの基準点を定める 03 SoundJSでサウンドを操作する 03-01 LoadQueueクラスにより読込んだサウンドファイルをSoundクラスで再生する 03-02 サウンドの一時停止と再開 03-03 サウンドの再生終了のイベントと再生 03-04 Sou
FN1301004 - StarlingフレームワークのJuggler.tween()メソッド - Flash : テクニカルノート
target:Object － トゥイーンさせるオブジェクト。 time:Number － トゥイーンにかける秒数。 properties:Object － トゥイーンの内容をプロパティで定めたObjectインスタンス。Tweenインスタンスのプロパティおよびトゥイーンするオブジェクトのプロパティが指定できる。 説明 StarlingフレームワークのTweenクラスでオブジェクトをトゥイーンするには、まずTweenインスタンスをつくり、つぎにトゥイーンの中身を定め、そのうえでインスタンスをJugglerオブジェクトに加えます(「StarlingフレームワークのTweenクラスを使ったアニメーション」参照)。Juggler.tween()メソッドを使えば、これら3つの手順がまとめて行えます。 Jugglerオブジェクト.tween(対象オブジェクト, 秒数, 設定オブジェクト) 初めのふたつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FN1402004 | Away3D: 立方体を回してみる | HTML5 : テクニカルノート
FN1401001 - Flash Player 12の新たな機能 - Flash : テクニカルノート
CreateJS今日この頃: EaselJS 0.7.0および0.7.1で何が変わったのか - CreateJS勉強会～末～
FN1309004 | EaselJS 0.7.0の改訂 | HTML5 : テクニカルノート
FN1307004 - EaselJSの次期バージョンにおけるオブジェクトの幅と高さの取得 - HTML5 : テクニカルノート
FN1301006 - Starlingフレームワークでカラーマトリクスフィルタを使う - Flash : テクニカルノート
FN1211002 - EaselJSでマウスのロールオーバーとロールアウトを捉える - HTML5 : テクニカルノート
