ClockMaker Blog

Links for 20120521 [はてなブックマーク]

2012-05-22T00:00:00-07:00

Flash+AIRで高速アプリが作れる！「Stage3D」を使ったAndroidゲーム開発のポイント

Flash+AIRで高速アプリが作れる！「Stage3D」を使ったAndroidゲーム開発のポイント
ゲーム向けの機能が強化された「Adobe AIR 3.2（以下、AIR 3.2）」が3月に正式リリースされました。今までのAIRと比べて何が変わったのか、当社が開発したFlash AIRのゲーム「Cマークタッチ」の導入事例をもとに「AIR 3.2」を使ったアプリ開発のポイントをまとめてみました。（この記事の前編にあたる「Flashはオワコンじゃなかった！Flash＋AIRを使ったAndroid...

yasu-log ［B!］Flash+AIRで高速アプリが作れる！「Stage3D」を使ったAndroidゲーム開発のポイント
?p=3337

?p=3337
I’m sitting in my hotel room in Brussels putting together some demos for my presentation tomorrow. Below you can check out my example of creating a custom right-click menu in Flash Player 11.2. You ca...

yasu-log ［B!］Flash Player 11.2の右クリック機能
Flash Daily: DRY ZERO Golf Stage3D / Flash 11 / iOS / Android ...

Flash Daily: DRY ZERO Golf Stage3D / Flash 11 / iOS / Android ...

yasu-log ［B!］DRY ZERO Golf Stage3D / 日本製のFlash Stage3D事例？

Links for 20120520 [はてなブックマーク]

2012-05-21T00:00:00-07:00

Android向けFirefoxのベータ版が公開 - UIを最適化しFlashに対応 | エンタープライズ | マイナビニュース

Android向けFirefoxのベータ版が公開 - UIを最適化しFlashに対応 | エンタープライズ | マイナビニュース
Firefox web browser - Faster, more secure & customizable Mozillaは15日(米国時間)、Andorid版Firefoxのベータ版を公開した。Mozillaでは昨年より、Android向けにFirefox Syncやアドオン、タブブラウジングなどの機能をもつFirefoxを提供している。今回リリースされたAndroid向けFirefox...

yasu-log ［B!］Android向けFirefoxのベータ版が公開、Adobe Flashプラグインへ対応
leebrimelow.com » Quick Tip: Targeting new AIR SDK in Flash CS6

leebrimelow.com » Quick Tip: Targeting new AIR SDK in Flash CS6
The overlaying of the SDK is great and seems to work up until I try to work with some of the new features baked into the 3.3 beta. When using the new native png encoder (worked great in CS5.5 after ma...

yasu-log ［B!］Flash CS6の機能の一つ、「AIR SDKの管理」の紹介

Links for 20120519 [はてなブックマーク]

2012-05-20T00:00:00-07:00

qlog » Blog Archive » 私は広告賞を取りたかった

qlog » Blog Archive » 私は広告賞を取りたかった
今年入ってからずっと自閉気味で、ブログとか書ける感じではありませんでした。あけましておめでとうございます。書きます。アルファブロガー目指します。 ========================== 先日、社員に、私がこの業界（どこからが業界なのかわからないし、今はインタラクティブ以外のことも結構やってるけど、たぶんインタラクティブ広告業界のこと）にちゃんと入った時期のことを話したら、それなりに...

yasu-log ［B!］私は広告賞を取りたかった - qlog

Links for 20120518 [はてなブックマーク]

2012-05-19T00:00:00-07:00

Flex SDK の新しい Wiki とダウンロードについて（Open@Adobe） - akihiro kamijo

Flex SDK の新しい Wiki とダウンロードについて（Open@Adobe） - akihiro kamijo
Flex SDK のアドビから Apache への移管に伴い、SDK のホスト先もアドビドメインから、SourceForge に変更されています。新しい Flex の Wiki は、Flex SDK@SourceForge です。ページ内から最新版の SDK のダウンロードも選択できます。特定のバージョンの SDK のダウンロードは、Flex SDK Downloads@SourceForge ...

yasu-log ［B!］Flex SDK の新しい Wiki とダウンロードについて（Open@Adobe） - akihiro kamijo

Links for 20120516 [はてなブックマーク]

2012-05-17T00:00:00-07:00

Apple、Leopardでも古いFlashを無効に　Flashback削除ツールも提供 - ITmedia ニュース

Apple、Leopardでも古いFlashを無効に　Flashback削除ツールも提供 - ITmedia ニュース
AppleがMicrosoftに比べて早期にOSのサポートを打ち切ってしまうことについては批判の声も出ていた。米Appleは5月14日、Mac OS X 10.5（Leopard）向けの「セキュリティアップデート2012-003」と、マルウェア「Flashback」の削除ツールをリリースした。 Leopardは既に通常のセキュリティアップデートの対象から外されていて、今回のアップデートでも脆弱性...

yasu-log ［B!］AppleがMicrosoftに比べて早期にOSのサポートを打ち切ってしまうことについては批判の声も出ていた
jQueryを使わなくてもDom readyで処理したい « イナヅマtvログ

jQueryを使わなくてもDom readyで処理したい « イナヅマtvログ
今やWeb制作で「刺身に醤油でしょ」とも言わんばかりにかならずくっついてくるJavaScript、どうやって開発してますか？やっぱりライブラリを使いますよねぇ、楽ですから。 jQueryは便利です、大活躍しています。 Dojo ToolkitやMochiKit, Ext JS, prototype.jsも同じように便利です。 JavaScript開発でめんどうなのはEventの処理だと思ってます...

yasu-log ［B!］ライブラリを使わないと、JSでは膨大なコードを書かなければならない
FN1205002 - PreloadJSで外部画像ファイルの読込みを待つ - HTML5 : テクニカルノート

FN1205002 - PreloadJSで外部画像ファイルの読込みを待つ - HTML5 : テクニカルノート
PreloadJSは、画像のほか、サウンドやJavaScriptなどの外部データを読込んで、その経過や完了を捉えて処理するためのライブラリです。本稿では、画像ファイルの読込みを待って、その画像にもとづく処理を加えてみます。なお、読込み待ちのない外部画像ファイルの扱いについては、「EaselJSで外部ビットマップファイルを読込んで回す」をご参照ください。 01 外部画像ファイルを読込んでCanva...

yasu-log ［B!］PreloadJSの解説
Adobe Proto for iPad on the iTunes App Store

Adobe Proto for iPad on the iTunes App Store
Description Adobe® Proto lets you create wireframes of websites and apps right on your tablet. Design interactive wireframes and prototypes for websites and mobile apps with the convenience of simple ...

yasu-log ［B!］iPad対応版のAdobe Protoが公開されました！
toolkit for CreateJSで書き出した絵を表示 - jsdo.it - Share JavaScript, HTML5 and CSS

toolkit for CreateJSで書き出した絵を表示 - jsdo.it - Share JavaScript, HTML5 and CSS
function init() { var canvas = document.getElementById("canvas"); var stage = new Stage(canvas); //toolkit for CreateJSで書き出したシンボルを作成 var burebure = new lib.Burebure(); burebure.x = 160; burebure.y = 3...

yasu-log ［B!］Toolkit for CreateJSで書き出した絵を表示 / ベジェデータのなので拡大してもキレイに表示できる
Flash Daily: GPUI - Stage3D based UI

Flash Daily: GPUI - Stage3D based UI

yasu-log ［B!］Stage3Dで作られたGPU向けのUI 「GPUI」
海外と日本｜僕らのWeb制作戦争のお話*ホームページを作る人のネタ帳

海外と日本｜僕らのWeb制作戦争のお話*ホームページを作る人のネタ帳
オーストラリアに行っていた中学時代の友人が、現地のWeb制作会社で働いて、この度現地の差別的な扱いに嫌気がさして帰って参りました。同時に、「じゃぁ一緒に語り明かそうぜ会」を開いたところ、8人のむさくるしい男と3名の天使が集い、決して合コンではない同窓会を開いたわけです。そこでは製造業をする人もいれば銀行の受付をする人など、様々な業種の人が集まったわけですけど、まぁ私としてはオーストラリアのWeb...

yasu-log ［B!］仕事を請け負うBOSSも、確実に定時で上がりますし、まして残業をするなど、プライベートな時間を削るというのは罪という考え方

Links for 20120515 [はてなブックマーク]

2012-05-16T00:00:00-07:00

Nullとは【ヌル】 - 意味/解説/説明/定義： IT用語辞典

Nullとは【ヌル】 - 意味/解説/説明/定義： IT用語辞典
プログラミング言語やデータベースのデータ表現の一種で、何のデータも含まれない状態、あるいは長さ0の空文字列のこと。「""」「’’」などといった空の文字列を表す表記や「null」などの特殊なリテラルで表される。処理系によってはNull値は数値や文字列などと比較や演算ができない場合があり、Null値を取る可能性がある変数を比較したり操作したりする際には注意が必要である。ちなみに、英語本来の発音から考え...

yasu-log ［B!］「null」は英語本来の発音から考えると「ヌル」ではなく「ナル」と表記・発音するのが正しい
CREATEJSで遊んでみる｜ Classmethod.dev()

CREATEJSで遊んでみる｜ Classmethod.dev()
今回はEASELJSとTWEENJSで遊んでみようと思います。 EASELJSはCANVASを使っての描画周りを助けてくれるライブラリ、TWEENJSはトゥイーン作成を簡単にしてくれるライブラリで、どちらもCREATEJS SUITEの一部です。CREATEJS SUITEには他にはSOUNDJS、PRELOADJSというライブラリがあります。今回は、画像をくるくる回転させながら表示させてその後...

yasu-log ［B!］CREATEJSで遊んでみる｜ Classmethod.dev()
Adobe MAX 開催日の変更 - akihiro kamijo

Adobe MAX 開催日の変更 - akihiro kamijo
例年 10 月に、アメリカで開催されていた Adobe MAX が、今後は 5 月に開催されるという発表がありました。（MAX Moves to Spring）おそらく、CS 製品の更新と、タイミングを合わせるのが目的ではないかと思われます。ということで、残念ながら、MAX 2012 は開催されないことになります。 MAX 2013 は、来年の 5 月 4 日から 8 日まで　Los Ange...

yasu-log ［B!］Adobe MAX 開催日の変更 / 今年のAdobe MAX 2012が行われなくなるのはとても寂しい！
What’s New in Flash Player 11.2 and Adobe AIR 3.2 | In Flagrante Delicto!

What’s New in Flash Player 11.2 and Adobe AIR 3.2 | In Flagrante Delicto!
Here you can find the slides and recording for my talk “What’s New in Flash Player 11.2 and Adobe AIR 3.2″ – given on May 10th 2012 for the Hawaii Flash User Group. FLASH LIVES! The release of Flash P...

yasu-log ［B!］最近のFlash Platformについて、とてもわかりやすくまとまっている良スライド

Links for 20120514 [はてなブックマーク]

2012-05-15T00:00:00-07:00

Adobe & Creators Festival 2012.5.18-20 ＠六本木ヒルズアリーナ :CINRA.NET

Adobe & Creators Festival 2012.5.18-20 ＠六本木ヒルズアリーナ :CINRA.NET
デザイナーでなくとも、編集者やディレクターでなくとも、誰もがクリエイターになれる。それがデジタルアトラクション「Font Me」。カメラに向かって体を動かすだけで、自分だけのオリジナルフォントでメッセージをつくることができます。さらに、そのメッセージはその場でステッカーにプリントされ、もれなく体験者にプレゼント。ちなみにこの「Font Me」、デジタルクリエイションを志す人なら誰もが知る、WE...

yasu-log ［B!］Adobe & Creators Festival 2012.5.18-20 ＠六本木ヒルズ
OpenKinect（Processing 版）と Flash でソケット通信 | LLC DigiFie

OpenKinect（Processing 版）と Flash でソケット通信 | LLC DigiFie
OpenKinect の Processing 版であるこれを試してみました。しかしただ試すだけでは面白くもなんともないので、Processing でソケットサーバを作って Flash と通信させて何かやってみることにして… なんとなく出来たのが、これです。で、上のヤツをちょっとだけ発展させてみたのがこれです。使っているのは深度情報を利用したハンドトラッキングだけなので、Processing...

yasu-log ［B!］OpenKinect（Processing 版）と Flash でソケット通信
umey/animjs · GitHub

umey/animjs · GitHub
Dismiss Octotip: You've activated the file finder by pressing t Start typing to filter the file list. Use ↑ and ↓ to navigate, enter to view files.

yasu-log ［B!］CreateJSでパス付のモーショントゥイーン、シェイプトゥイーンを行うための補助ライブラリ
これは必見のWEBデザインの近未来。HTML5で構築されたサイト45:phpspot開発日誌

これは必見のWEBデザインの近未来。HTML5で構築されたサイト45:phpspot開発日誌
45 Examples Of Websites Designed With HTML5 | Free and Useful Online Resources for Designers and Developers これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 CSS3なんかも取り入れてデザインは去ることながら、動きもいい感じに実装されています。 WEB業界に身を置く方なら...

yasu-log HTML5で作られているからどれも重たい…
case:MobileDesign! – モバイルサイトのトレンド紹介・制作TIPS - » Google Swiffyを使うときに役立つTIPS集

case:MobileDesign! – モバイルサイトのトレンド紹介・制作TIPS - » Google Swiffyを使うときに役立つTIPS集
<a href="Google Swiffyとは、ActionScript2で書かれたSWFをHTML5形式に変換してくれる無料のツールです。 Swiffyを使うときに役立ちそうなTIPSをまとめてみました。 ※Swiffyのバージョンが4.1.1の場合です。 Swiffyは頻繁にアップデートが行われているので、将来的にご紹介した方法が使えなくなる可能性が十分あります。目次 (1)生成後のデータ...

yasu-log ［B!］Google Swiffyを使うときに役立つTIPS集
Canvas始めました – ボタンを作る - イナヅマtvログ

Canvas始めました – ボタンを作る - イナヅマtvログ
Canvasでインタラクティブなことをするためにボタンを作るの巻。できたことはできたけど、完成にはかなり遠いところにしかたどり着けませんでした。 ActionScriptのSimpleButtonのような汎用性を目指しましたが途中で挫折しました。作るにあたって懸念していたmouseoverの処理にやはり悩まされました。 Canvas Click Demo Vol.2 ボタンを作った画面左上の...

yasu-log ［B!］Canvas始めました – ボタンを作る - イナヅマtvログ / 「CanvasのローレベルAPIを使って自力で実装していくのは裸足で富士山に登っているように思えててしまいます。」
Spring_max.html « Blog « Adobe MAX

Spring_max.html « Blog « Adobe MAX
A note from Kevin Lynch, Adobe CTO One of my favorite things to do at Adobe is work on MAX, our annual designer and developer conference. It has continuously evolved and adapted over time, driven by ...

yasu-log ［B!］次回 Adobe MAX の開催予定日が来年の 5 月に変更することのこと (！)
アニメgifをFlashで生成(AS3GIF) | 水玉製作所

アニメgifをFlashで生成(AS3GIF) | 水玉製作所
先日の続きで、今度はFlashからアニメGIFの生成をする。ここでは、アニメgifをFlashで利用するライブラリ、AS3 GIF Player Class 0.6を試してみた。またもやライブラリの作例を改変。作例がFlashIDE+FlashPlayer9向けなので、FlashDevelop+FlashPlayer10向けに書き換えてみた。要はflaファイルを不要にしたのと、ファイルの保存...

yasu-log ［B!］アニメgifをFlashで生成(AS3GIF) | 水玉製作所

「Stage3Dプログラミング」という解説書を執筆しました

2012-05-09T10:10:01Z

来月上旬発売の「Stage3Dプログラミング〜GPUを使ったFlash 3Dコンテンツ制作〜」というStage3D の書籍を私と酒井さんと高輪さんの3人で執筆しました。Stage3DとはGPUを活用することで高いグラフィックのパフォーマンスが得られるFlashの最新機能です。

ページ数：416ページ
出版社： ワークスコーポレーション
発売日： 2012/6/4　(amazon)
執筆：池田泰延 (ClockMaker), 酒井直一 (丸林商店), 高輪知明 (nutsu)

この書籍は、Staeg3Dの入門からAS3ライブラリの実用的機能までを網羅し、最新情報をがっつりとまとめた一冊となっています。AS3ライブラリは将来性・生産性の点で有望なAway3DとAlternativa3Dの両方を取り上げ、またネイティブなところから理解できるようにもStage3D APIやAGALの解説の章も用意しています。

サンプルの紹介

ほんの一部ですが、書籍で扱っているサンプルを紹介します。本書を学習すれば、こういったことができるようになるという参考としてご覧くださいませ。

▼ビルボードオブジェクトの表現 (画像をクリックでサンプルを再生)

▼アイソメトリックな3D表現 (画像をクリックでサンプルを再生)

▼影の表現

▼スポットライト効果

▼モデリングデータの表示 (画像をクリックでサンプルを再生)

▼AGALを使ったバンプマッピング (画像をクリックでサンプルを再生)

▼AGALを使ったパーティクル表現 (画像をクリックでサンプルを再生)

▼Stage3D版、カバーフロー (画像をクリックでサンプルを再生、少し読み込みに時間がかかります)

▼Android/iOSでも動くカバーフローアプリ

また本書の特徴として、サンプルのソースコードをできる限り短くしています。3D だと制御が複雑になり学習が大変だと思われるかもしれませんが、特に初級者の方にとってスムーズに学習できるように工夫しました。

なお、サンプルファイルは Flash Professional CS5/CS5.5/CS6, Flex Builder 4.5, FlashDevelop 4 対応です。

購入はAmazonや書店で

発売は6/4ですが、すでにAmazonで予約を開始していますので、ぜひともご予約くださいませ。

Stage3Dプログラミング

リッチなHTML5コンテンツのためのフレームワーク「CreateJS」が公式サイトを公開

2012-04-17T02:32:42Z

Flashのエンジニアとして著名なGrant Skinner氏が開発している、「CreateJS」の公式サイトがオープンしました。

http://www.createjs.com/

CreateJSはHTML5を介してリッチなインタラクティブコンテンツの制作をサポートする、JavaScriptライブラリとツールのスイートです。CreateJS SuiteにはEaselJS、TweenJS、SoundJS、PreloadJS、とZoeのツールがあります。

私のブログでもEaselJS、TweenJSを使ったインタラクティブコンテンツのデモを幾つか制作して紹介してきましたが、Flashで培われた技術がそのまま利用できる点で非常に使い勝手のいいツール群だと思っています。

今回は公式サイトで明らかになったCreateJSの各ツールの紹介を日本語訳してお伝えします。

EaselJS

EaselJSは、豊富なグラフィックスとHTML5のCanvasとの制作を扱うためのソリューションを提供します。これは、Flash開発者に馴染みのあるAPIを提供していますが、JavaScriptの感性を取り入れています。それは容易にキャンバスを扱うようにする、完全な階層的な表示リストは、コアの相互作用モデル、およびヘルパークラスで構成されています。

主な機能は次の通りです。

リッチなHTML5コンテンツの制作
Canvasを使った表示オブジェクト
表示オブジェクトのネスト(親子構造化)が可能
マウスインタラクション
開発者にわかりやすいAPI

サンプルではFlashで実装されていたようなコンテンツがいくつか掲載されています。

▼公式サイトではさまざまなデモが紹介されています。

▼スプライトシートを利用したアニメーションサンプル

TweenJS

TweenJSはJavascriptで使用するためのシンプルなトゥイーンライブラリです。それはEaselJSライブラリとうまく統合するために開発されましたが、それに固有のものではありません。それは数値オブジェクトのプロパティとCSSスタイルプロパティの両方のトゥイーンをサポートしています。 APIは、チェーンメソッドで複雑なトゥイーンを作成することが容易になり、シンプルでありながら非常に強力です。

主な機能は次の通りです。

イージングと遅延が可能
数値または数値以外の指定(pxとか単位をつけての指定)が可能
複数のトゥイーンのシーケンス化
CSSプロパティのサポート
シンプルで強力なAPI

▼デモ

SoundJS

オーディオの一貫したクロスブラウザのサポートは現在、HTML5では混沌とした状態です。SoundJSは、抽象化の問題に取り組んで、あなたのゲームや豊富な経験をはるかに簡単にサウンドを追加することができるようにしました。特定のデバイスまたはブラウザ用に活用しているものを優先順位付けし、HTML5のAudioタグとプラグインのどちらを利用するか機能を問い合わせることができます。

主な機能は次の通りです。

互換性の解消
フォールバックの優先順位付け
Reduce Guess Work
Support Edge Cases
テストのための機能

▼クロスブラウザなサウンドプレイヤーのサンプル

PreloadJS

PreloadJSは素材（画像、音声、JS、データ）をプリロードすることを容易にします。それは使用可能なときはXHR2 (XMLHttpRequest バージョン2)を利用して読み込み状況を確認することができるようになります。XHR2を利用できないときはtagのローディング(imgタグ等の読み込み)にフォールバックします。複数のキュー、複数の接続、一時キュー、およびもっとたくさんの機能を提供しています。

主な機能は次の通りです。

データや素材のプリロード
XHR2を利用したプログレスイベントの管理
Tag Loadingへのフォールバック
複数のキューの管理
キューの一時停止と再開

▼複数の画像ファイルを読み込むローディングサンプル

なお、旧式のブラウザではimgタグを使って画像ファイルを読み込みますが、imgタグは単機能なので読み込み完了やエラー発生のイベントを取得することができましたが、プログレスイベント(読み込み進行中のパーセンテージ取得)ができないという物足りない仕様でした。最新のXHR2(XMLHttpRequestの後継)を使えばそれが可能になるのですが、PreloadJSがそれをサポートしています。

Zoë

Zoëは、スプライトシートをSWFアニメーションに変換するAIRアプリケーションです。単にアプリケーションの上にSWFをドラッグして、Zoëが自動的にスプライトシート内の画像の必要な寸法を検出し、あなたのSWFに存在する任意のフレームラベル（再生を制御するための）を維持し、スプライトシートをエクスポートします。その他の高度な機能も含まれています。

主な機能は次の通りです。

SWFからスプライトシートへの変換
フレームラベルの維持
ネストされたグラフィックスのサポート

まとめ

もともとEaselJSが先行して公開され様々なメディアからも注目されていましたが、その他のツール群が公開されたことでさらにHTML5のリッチコンテンツ制作がしやすくなったと思います。

これらのJSライブラリは、組み合わせて使うことも、単独で使うこともできるので、Canvas以外のHTML5コンテンツでも利用することが多くなりそうです。

今後も当ブログではCreateJSを取り上げていこうとおもいますので、ぜひともチェックをよろしくお願いします。私のTwitterアカウントでも、CreateJSの最新情報をアップデートしていきますのでそちらもチェックくださいませ。

Flash Stage3D対応のAlternativa3D 8がオープンソースに！

2012-03-29T09:52:57Z

相変わらず忙しい日々が続いており、久しぶりのブログの更新になってしまいました。

さて、Flash Player 11 (Stage3D)向けの3Dフレームワーク「Alternativa3D」が本日(2012年3月29日)ついにオープンソースになりました！

Alternativa3D 8 is out in Open Source!

記事をざっくり意訳すると次のような内容です。

=====

2012年3月29日はAlternativaPlatform社やあなた方にとって重要なイベントとなりました。6年間、クローズドで開発されてきたFlashの3Dエンジン Alternativa3D8はオープンソースとなりました。ソースコードはGitHubで公開されています。Alternativa3Dのオープンソースの歴史はこれから始まります。私たちは、コミュニティーの支援や様々な言語での様々な著者によって、教育と分析材料が成長して、コンテンツがより速く開発でき、もっと理解しやすくなり、より情報にアクセス可能になるだろうことを願っています。ところで、当社のナレッジベースでナレッジを公開することができます。私たちはエンジンの開発やサポートはこれからも続けていきます。アイデアや提案は歓迎しますので、フォーラムにぜひお寄せください。

アップデートされたライセンスによると、組織または個人が自分に有利なように技術を自由に使用できます。それはAlternativa3Dの開発者としてAlternativaPlatformにロゴや参照リンクなどを設置する必要はありません。上記の場合にもかかわらず、我々は感謝しています。

=====

Alternativa3Dは凄そうだけれどクローズドだしなかなか手を出せない、という方も多かったと思います。今回のオープンソース化によってコンテンツ制作でさらに選択しやすくなったのではないでしょうか。

Stage3D対応のAway3D 4.0 – ライン描画

2012-03-02T07:59:02Z

ここのところHTML5ネタばかり投稿していましたが、私がメインにしているのはFlashなので久しぶりにFlash 3Dネタを投稿してみます。Stage3D対応のAway3D 4.0ですが、ラインの描画のパフォーマンスが良かったのでどのくらい表示できるのかデモを作成してみました。

demo (require Flash Player 11.1)
source (needs Away3D 4.0 beta)

シンプルな描画しか使っていないのですが、余裕で10万△ぐらい処理できています。従来のFlash Playerではパフォーマンス的には到達できない表現だと思いますが、とりあえずライン描画だとAway3Dはやたら強いことがわかりました。

Flash Stage3D vs WebGL

ついでですが、WebGL対応のThree.jsでもライン描画の機能があるので、どちらのほうが高速なのかAway3DとThree.jsを比較してみました。

WebGL版 (Three.js r47を使用)
Flash Stage3D版 (Away3D 4.0 betaを使用・ソース)

結果としてはWebGL版が40fps前後、Stage3Dが60fps前後でしたが、マシンによっては差があったりなかったりなので、両者ともパフォーマンスは同じぐらいとみてもよいでしょう。MSはIEにWebGLを搭載しないことを明言していますし(参考)、WebGLが実用的かはわかりませんが一応検証してみた次第です。

▲WebGL版

▲Flash Stage3D版

※検証環境 MacBook Air / Windows 7 /Corei7 1.8GHz / メモリ4GB / Google Chrome 17/ Flash Player 11.1 / 1440×900サイズで検証

「まにまにフェスティバル」出演のお知らせ

2012-02-24T04:53:14Z

まにまにフェスティバルという大阪でのWebのイベントで登壇することになりましたのでお知らせします。私はHTML5とFlashに関して制作の現場からみた現状について紹介する予定です。セッションは有料となりますが、他にも各ブラウザベンダーのセッションなど面白そうな企画がありますので、都合があえばぜひお越しくださいませ。申し込みはこちらから。

日程：2012年4月14日(土)
大阪：大阪産業創造館
参加費：4F各セッション2,000円、3Fブース展示は入場無料
定員：4F各セッション230名（先着順）
公式サイト：http://m2.cap-ut.co.jp/fes/

HTML5はFlashの3倍重かった! 描画パフォーマンスの比較

2012-02-26T07:38:04Z

最近のHTML5の盛り上がりには勢いがありますが、実際の所HTML5はどうなのか気になったので描画パフォーマンスを測定してみました。上記のグラフが結果ですが、HTML5で一番よい実装よりもFlashのほうが3倍弱高速という結果がでました。ブラウザによってはFlashのほうがHTML5より18倍も高速という結果もでています。

さらに言えば、HTML5の描画パフォーマンスが最も良かったのはSafariですが、ブラウザによってはそれの15%ぐらいのパフォーマンスしかでないブラウザもあり処理速度にばらつきが大きいのが特徴でした。ですが、Flashはどのブラウザでもスコアの振れ幅が小さくブラウザ間の処理速度は安定しているように思います(プラグインなので当然といえば当然の結果ですが)。

検証デモ

HTML5やFlashと言っても様々な実装方法があるので、よく使われる方法を幾つか用意して検証しています。次のリンクからそれぞれの比較検証デモを試せるので、パフォーマンスをチェックしてみてください。

HTML5(DOM + CSS2) - 矩形をそれぞれ独立したimgタグとして表示。CSSでposition:absoluteにしたうえで、JavaScriptでleftとtopの値を書き換えて動きを実装。
HTML5 (DOM + webkitTransform) – 矩形をそれぞれ独立したimgタグとして表示。JavaScriptでtransform (transrate3d)を使い動きを実装。(今回はChrome/Safari用のwebkitTransformを利用)
HTML5 (Canvas) – JavaScriptでCanvas.drawImage()を用いて実装。。
Flash (DisplayObject) – 矩形をそれぞれ独立したDisplayObject (Bitmap)として表示。ソースはこちら。
Flash (BitmapData) – BitmapData.copyPixels()を用いた方法。ソースはこちら。

大雑把に言ってしまえば、実装のイメージ的には HTML の DOM (1や2) は Flash の Bitmap (4)、HTML5 の Canvas (3) は Flash の BitmapData (5)に近い機能です。

詳細な結果

詳細な結果は次の通りです。スコアの測定ですが、60fpsを保つことのできる矩形の数をスコアにしています。検証マシンのスペックや検証デモのサイズについては下記に記しています。

※Flash Playerの検証にはSafari 5.1.2を利用しています。

※検証デモのサイズは720×480pxです。

※WebGLは普及率やブラウザ採用状況の現状を見るかぎり、実用できるか懐疑的なので検証項目から外しています。FlashのStage3Dを使えば、WebGL同様にGPUも利用できるので気になる方はどなたか比較ください。

考察

HTML5に期待している方が多いと思いますが、描画パフォーマンスに関しては上記の結果となりました。実は私はこれまでたくさんのHTML5のデモや商用案件をやってきましたが、そのほとんどはオリジナルやPollyfill用のFlashのほうがパフォーマンスが良かったので結果はわかっていたのですが、改めて数値にすることで指標になったかと思います。

パフォーマンスはユーザー体験に影響する重要な部分です。こういったシンプルなデモでも、どちらを選択するほうがユーザーにとって良いのかを考えるきっかけになれば幸いです。

※もちろんHTML5は描画のためだけの仕様ではないので、この記事はたくさんある分野のうちの一つの検証に過ぎません。私がいつも主張しているように、流行やテック系ブログの記事に影響されて選択するのではなく、作りたいものやユーザーに届けたいものに適した技術を検証して最適な選択をすることを作り手に望みます。

追記

Adobe AIRを使えばFlashはスマートフォン(iOS, Android, BlackBerry)でも利用できるので、いずれスマートフォン上でもHTML5とFlashのパフォーマンス比較をしてみたいと思います。以前、Android版Flash PlayerとHTML5 Canvasを比較したときはFlashのほうが遙かに高速な結果が得られました(参考記事)。最近のスマートフォンだとブラウザとデバイスのスペックが向上しているはずなので、結果が気になる所です。

HTML5周辺技術のWebGLとJavaScriptでジニーエフェクト

2012-02-17T10:20:52Z

JavaScriptでMac定番のジニーエフェクトを作ってみました。今回利用したのはHTML5周辺技術のWebGLというもので、プラウザネイティブでGPUを利用できる機能です。

デモを見る (要：Chrome/WebGLを有効にしたSafari)

WebGLとCanvasの違い

今回はWebGLを使っているため再生可能な環境が限られています。本当は再生できる環境を増やすためにWebGLではなくCanvasタグを利用したかったのですが、Canvasタグだとアンチエイリアスの限界で「ヒビ割れ」が発生して完成させることができませんでした。

失敗作A (自前で作成したバージョン)
失敗作B (Three.jsのCanvasレンダラーを利用したバージョン)

対策としてトライアングルを外側に広げるなど色々試したのですが効果がなく、逆に演出が破綻したりもします。

さらに言えばCanvasタグを使うと処理負荷が増大するので、ヒビ割れが解決したとしても実際は利用が難しいという印象です。そもそもCanvasタグでこういう画像変形の際に用いる「トライアングル」の表現が難しく(※Canvas上でメッシュに分解、その後イメージをメッシュ毎に台形変形してクリップする方法で実装)、表示精度も速度も厳しいという感じでした。

最終的にWebGL版を採用しましたが、WebGLであればGPU側で「トライアングル」が処理されるので、表示制度も速度も十分なクオリティーを得ることができます。ただ、WebGLは利用できる環境が少ないのが現状です(ChromeとFirefox、WebGLをオプションで有効にしたSafariのみ)。

なお、WebGLはThree.jsというMr.doob先生の3D用のJSライブラリを通して利用しています。3D制御しているのは明らかにオーバースペックですが、メッシュ制御できるライブラリで思いついたのがこれぐらいだったもので。もし2Dでメッシュ制御ができるJSライブラリがあれば、教えて頂けると幸いです。ちなみにFirefoxはWebGLをサポートしているらしいですが、Three.jsの互換性からかメッシュの変形を適用させることはできませんでした。

Flash版とCanvas版の比較

同じものを以前Flashで実装したことがありますが（wonderflに投稿したBetweenAS3な作例3本）、Flashであれば境界に隙間が発生することがないし、処理負荷もそれほど大きくありませんでした。Canvas版だと10×10セグメントで限界でしたが、Flash Playerであれば非GPUでも20×20セグメントでもまだ余裕がある感じです。

WebGLでできることはFlashのStage3Dでできるし、WebGLは対象ブラウザが限られるので(IE搭載の可能性も望み薄か)、WebGLに力をいれるメリットが全く見えてこないというのが正直なところです…。

CanvasタグとJavaScriptで3Dのデモを作ってみました

HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」

2012-02-14T03:21:59Z

HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。

デモの違いとは

前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。

▼前者のデモ

▼後者のデモ

後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。

HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。FlashだとActionScriptで画像読み込み管理をおこなって、こういう見栄えには気を使いますよね？

また以前、案件でアニメーションコンテンツを作ったときに、プリローディングを行なっていないとアニメーションの途中で、画像がインターレース式に読み込まれて演出が台無しということがありました。そういうこともあり、HTML5でもプリローディングの制御が必要ではないかと考えるようになりました。

読み込み管理ができるJSライブラリ「LoadManager.js」

前置きが長くなりましたが、そこで複数の画像読み込みが管理できるJSライブラリ「LoadManager.js」を作成し公開しました。複数の画像素材をまとめて読み込み、柔軟に処理ができるというライブラリです。Flash(ActionScript 3.0)で言うとBulkLoaderというライブラリの役割に近いでしょうか。「HTML5演出に最適」と本記事のタイトルにしていますが、HTML4でもXHTMLでも動作します。

ライセンスは商用でも個人でも扱いやすいように、MITライセンスとしました。無料で断りなく使って頂いて大丈夫です。

LoadManager.jsの使い方

まずはLoadManager.jsをHTMLに読み込みます。ライブラリの依存関係はないので、単体で読み込んで大丈夫です。

<script src="LoadManager.js"></script>

利用する場合は、次のようにスクリプトを記述します。

// インスタンスを作成
var manager = new LoadManager();

// 読み込みたい画像を登録
manager.add("imgs/hoge.jpg");
manager.add("imgs/piyo.jpg");
manager.add("imgs/moja.jpg");

// 読み込み進行中
manager.onProgress = function (event) {
	// パーセンテージが取得できる
	console.log(manager.getPercent());
};

// 読み込み完了
manager.onComplete = function(event){
	alert("読み込み完了")
}

manager.start();

その他の機能はドキュメントとして公開していますので、そちらを参考ください。

デモの紹介

これ以外にもデモが用意されていますので、そちらも確認ください。

シンプルな実装例
(実装のためのコードが最小のデモ)
エラー管理のサンプル
(わざと画像読み込みエラーが起きるようになっているが、読み込まれなかった部分に「ERROR」という表示を出している)
同時接続数を最小にしたサンプル
(直列読み込みとして挙動させることも可能です。読み込み時間が延びますが)

▼同時接続数を低くした場合、読み込み時間はかかるが先頭から順番に表示させるという演出ができる

▼同時接続数がデフォルト(6接続)の場合、トータルでの読み込み時間を短縮できる

テクニックだけではなく、Flashデベロッパーが育んできた美意識みたいなものは、HTML5にも活かしたいですよね。

HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」

2012-02-08T12:57:59Z

Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。

demo (HTMLエレメント版)

demo (Canvas版)

Canvas版のほうはHTML5対応ブラウザ(ChromeやSafari、Firefox)限定となりますが、HTMLエレメント版のほうはブラウザの対応範囲が広くIE6でも動作します。ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。

ShuffleText.js (HTMLエレメント版)
ShuffleEaselText.js (Canvas版)

それでは以下で使い方を紹介していきます。

使い方 (HTMLエレメント版)

上記のリンクから「ShuffleText.js」をダウンロードして、次のようにファイルを配置します。プレーンなJavaScriptで作成しているので、ライブラリの依存関係はありません。

ShuffleText.jsの使い方は至ってシンプルで、エレメントの中のテキストに対してエフェクトを適用します。

HTMLの適用したい要素に対して、document.getElementById()メソッドなどで参照をとり、ShuffleElementTextクラス(ShuffleElementText.jsの中身)のコンストラクタの引数として渡します。エフェクトを開始したいタイミングでstart()メソッドを呼び出します。

<!DOCTYPE html>
<html>
<head>
	<title>ShuffleElementText.js Example</title>
	<script src="ShuffleText.js"></script>
</head>
<body>
	<h1 id="myText">This is a ShuffleText.js Examle</h1>
	<script>
		var text = new ShuffleText(document.getElementById("myText"));
		text.start();
	</script>
</body>
</html>

実行結果

使い方 (Canvas版)

上記のリンクから「ShuffleEaselText.js」をダウンロードして、次のようにファイルを配置します。Canvas版は当ブログでゴリ押し中のHTML5 CanvasをFlashライクに扱えるフレームワーク「EaselJS」上で動作するようにしています。そのため、使用する際はeasel.jsも準備ください。

easel.jsにはテキストの表示オブジェクトとなるTextクラスが存在します(FlashのTextFiledクラスのようなもの)。ShuffleEaselTextクラス(ShuffleEaselText.jsの中身)はTextクラスのサブクラスとなります。つまり表示オブジェクトとしてStageにaddChild()して利用します。エフェクトを開始したいタイミングでstart()メソッドを呼び出します。

コードで示すと次の通りです。

<!DOCTYPE html>
<html>
<head>
	<title>ShuffleEaselText.js Example</title>
	<script src="easel.js"></script>
	<script src="ShuffleEaselText.js"></script>
</head>
<body>
	<canvas id="myCanvas" width="465" height="200"></canvas>
	<script>
		var canvas = document.getElementById("myCanvas");
		var stage = new Stage(canvas);

		var text = new ShuffleEaselText("Hello World", "24px Arial", "#000");
		text.y = 50;
		text.start();

		stage.addChild(text);

		Ticker.setFPS(60);
		Ticker.addListener(stage);
	</script>
</body>
</html>

実行結果

HTMLエレメント版のほうがシンプルに記述できますが、Canvas版のほうは他のグラフィック要素と組み合わせることで柔軟に表現を作ることができるのがメリットだと思います。

カスタマイズ方法

ShuffleTextクラスもShuffleEaselTextクラスも両方とも共通のプロパティーをもっているので、次のプロパティーを弄ってカスタマイズすることができます。

var text = new ShuffleText(document.getElementById("hoge"));
//var text = new ShuffleEaselText("Hello", "", "#F00");

// エフェクトの継続時間
text.duration = 500;

// ランダムテキストに用いる文字列 (日本語も可)
text.sourceRandomCharacter = "あいうえおかきくけこさしすせそ、。";

// 空白に用いる文字列
text.emptyCharacter = " ";

text.start();

実行結果

最後に

ちなみにActionScript 3.0版もMIT Lisenceで公開しています。HTML5に限らず利用したい方は次のURLからダウンロードくださいませ。

ShuffleText Effect in AS3 – wonderfl build flash online

感触としては、HTML5でWebフォントを扱うよりもFlashのほうが埋め込みフォントの自由度が高い(種類や埋め込みのカスタマイズが容易)のでデザインを重視するならFlashのほうが向いていると思いました。

それではまた近いうちにHTML5のネタを投稿します。次回もよろしくお願いします。

HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門

2012-02-08T13:01:55Z

HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」で流体パーティクルのデモを作ってみました。

demo
source

EaselJSを使えばFlashのようにHTML5 Canvasを使うことができるので、ActionScriptから概念だけではなくコードの再利用性が高まります。今回は流体パーティクルの表現を通して、EaselJSとCanvasのテクニックを紹介していきます。

デモの作り方

冒頭のデモですが、私が以前作成したFlashの作品「Flashの高速化を試す、BitmapDataを配列に格納することで2〜3倍の高速化」から移植したものです。

さて、このデモをHTML5 Canvasに展開するにあたり、特に抑えておきたいのは次の点だと思いました。

フォースマップの作成
パーティクル情報を付与した表示クラスの作成
フォースマップの適用と計算

フォースマップの作成

フォースマップというのは流体パーティクルを実装する際によく使われる手法で、雲模様の画像からパーティクルの移動方法を決定するのに使うものです。今回は次のフォースマップの画像ファイルを利用しました。

▲フォースマップの画像ファイル。フォースマップはPhotoshopのフィルターの雲模様を使って作成可能。

画像には赤・緑・青の3チャンネルの情報が含まれています。3つのチャンネルはそれぞれ微妙に雲模様の形状が違うことに注目ください。このカラー情報を速度に変換するのですが、X方向は赤のチャンネルを、Y座標には緑のチャンネルを、という感じで使うことになります。それぞれのチャンネルで模様が違うので、X方向とY座標でバラバラの動きをすることになります。

▲赤のチャンネル

▲緑のチャンネル

▲青のチャンネル

カラー情報をパーティクルの速度に変換する方法は後ほど解説しますので、まずはこのフォースマップをJavaScriptに展開する方法を紹介します。

JavaScirptのImageクラス(imgタグのJavaScript用クラス)を使ってフォースマップの画像ファイルを読み込みます。

forceMapImage = new Image();
forceMapImage.onload = initForceMap;
forceMapImage.src = "http://clockmaker.jp/labs/120201_easeljs_forcemap/forcemap.png";

function initForceMap() {
 // 読み込み完了
}

onloadイベント使って、画像読み込み終了時のイベントを使います。次にこのフォースマップの画像から、色情報を取得するために、Canvas要素に転写します。ActionScriptではBitmapDataクラスを使って画像の色情報を解析することができました。JavaScriptではCanvas要素にそれに相当する機能があります。前回も紹介したとおり、Canvas要素はbodyタグに追加 (appendChild)しなくても機能するので、スクリプト上でダミーのCanvasのインスタンス（下記のスクリプトのforceMapCanvasインスタンスが該当）を作成しておきます。

function initForceMap() {
    var forceMapElement = document.createElement("canvas");
    forceMapElement.setAttribute("width", forceMapImage.width);
    forceMapElement.setAttribute("height", forceMapImage.height);

    forceMapCanvas = forceMapElement.getContext("2d");
    forceMapCanvas.drawImage(forceMapImage, 0, 0);
}

なお余談ですが、フォースマップはActionScriptだとBitmapDataクラスのperlinNoise()メソッドを使ってスクリプト内で生成することが可能です。Canvasでも頑張ればコードによってperlinNoise()を自前で作ることができますが、APIの豊富さでもActionScriptのほうが一日の長があると思いました。

パーティクル情報を付与した表示クラスの作成

次に矢印のグラフィックを表示するための表示クラスを作成します。EaselJSにはBitmapクラスがあり、それを使えば画像のXY座標や回転を扱うことができます。今回のデモの場合は、それらのプロパティーに加えて加速度や速度のプロパティーを扱いたいのでBitmapクラスを継承したArrowクラスを作成しました。

JavaScriptのクラスの作成方法は今回は割愛しますが（後日、別の記事で紹介します）、次のようなスクリプトとして記述します。コンストラクタで記述しているvxとvyは速度用のプロパティー、axとayは加速度用のプロパティーです。

(function (window) {
    function Arrow(imageOrUri, x, y) {
        this.x = x;
        this.y = y;
        this.vx = 0;
        this.vy = 0;
        this.ax = 0;
        this.ay = 0;
        this.initialize(imageOrUri);
        this.regX = 10;
        this.regY = 10;
    }

    // EaselJSのBitmapクラスを継承
    var p = Arrow.prototype = new Bitmap();

    p.step = function (colorA, colorB) {
        // 省略
    };
    window.Arrow = Arrow;
}(window));

regXとregYは画像の基準点を設定するBitmapクラスのプロパティーです。今回利用する画像が20px四方の矢印画像で回転時の基準点を(X, Y) = (10px, 10px)に設定します。

フォースマップの適用と計算

次にフォースマップから速度に変換する方法を紹介します。Canvas要素(Context2Dオブジェクト)のgetImageData()メソッドを呼び出すことで、指定したピクセル位置からのカラー情報を取得することができます。今回は指定したピクセルのデータだけが欲しいので、1px四方で情報を取得します。

var arrow = particleList[i];
var imageData = forceMapCanvas.getImageData(
    arrow.x >> 1,
    arrow.y >> 1,
    1,
    1);

▲例えば、(200px, 150px)の箇所の座標の1px四方で測定すると[200, 128, 102, 255]というカラー情報の配列が取得できる。

取得したImageDataオブジェクトには１次元配列として、赤・緑・青・透明度の順番でピクセル分繰り返してカラー情報(0〜255の数値)が入っています。今回は1pxごとの赤・緑・青の情報だけを使うのですが、赤と緑のチャンネルだけ情報を使う場合は次のように0と1を指定して、Arrowインスタンスのメソッドを呼び出します。

var colorR = imageData.data[0];
var colorG = imageData.data[1];
arrow.step(colorR, colorG);

Arrowクラスのstep()メソッドでは、このカラー情報→加速度→速度→座標/回転へと変換します。カラー情報は1チャンネルあたり0〜255の数値になるので、128を減算して-128〜128までの数値を扱うようにします。X方向に対して適用する場合は、負の値であれば左方向に移動し、正の値であれば右方向に移動することになります。

p.step = function (colorA, colorB) {
    this.ax += ( colorA - 128 ) * .0005;
    this.ay += ( colorB - 128 ) * .0005;
    this.vx += this.ax;
    this.vy += this.ay;
    this.x += this.vx;
    this.y += this.vy;

    this.rotation = Math.atan2(this.vy, this.vx) * 180 / Math.PI;

    this.ax *= .96;
    this.ay *= .96;
    this.vx *= .92;
    this.vy *= .92;

    ( this.x > 465 ) ? this.x = 0 : ( this.x < 0 ) ? this.x = 465 : 0;
    ( this.y > 465 ) ? this.y = 0 : ( this.y < 0 ) ? this.y = 465 : 0;
};

▲例えば、(200px, 150px)の箇所の座標のカラー情報の赤色成分を調べると200という値が取得できます。この値は100分率で示すと80%なので、X方向に向かって+30% (50+30=80%)の加速量となる。

▲例えば、(100px, 350px)の箇所の座標のカラー情報の赤色成分を調べると25という値が取得できます。この値は100分率で示すと10%なので、X方向に向かって-40% (50-10=40%)の加速量となる。

エンターフレームイベントに相当するtick()関数では、パーティクルの個数分だけfor文を回して上記の処理を行い、Canvasをレンダリングして処理は終了となります。

最後に

今回はEaselJSというよりは、Canvas要素のカラー情報の扱いの方法の解説でした。前回も紹介したとおり、Canvas要素はFlashでいうところのBitmapとBitmapDataとGraphicsをごちゃまぜにしたようなHTML5の新要素ですが、EaselJSをはじめとしたフレームワークでは移植できていないAPIも多々あります。そのためEaselJSを学習するのに加えてCanvas要素の各機能を学習することで表現可能なことが増えると思います。

ちなみにFlashだと同じような実装で1000個の表示が可能でしたが、Canvas(+EaselJS)だと200個ぐらいが限度でした。

ClockMaker Blog

Links for 20120521 [はてなブックマーク]

Links for 20120520 [はてなブックマーク]

Links for 20120519 [はてなブックマーク]

Links for 20120518 [はてなブックマーク]

Links for 20120516 [はてなブックマーク]

Links for 20120515 [はてなブックマーク]

Links for 20120514 [はてなブックマーク]

「Stage3Dプログラミング」という解説書を執筆しました

サンプルの紹介

購入はAmazonや書店で

リッチなHTML5コンテンツのためのフレームワーク「CreateJS」が公式サイトを公開

EaselJS

TweenJS

SoundJS

PreloadJS

Zoë

まとめ

Flash Stage3D対応のAlternativa3D 8がオープンソースに！

Stage3D対応のAway3D 4.0 – ライン描画

Flash Stage3D vs WebGL

「まにまにフェスティバル」出演のお知らせ

HTML5はFlashの3倍重かった! 描画パフォーマンスの比較

検証デモ

詳細な結果

考察

追記

関連記事

HTML5周辺技術のWebGLとJavaScriptでジニーエフェクト

WebGLとCanvasの違い

Flash版とCanvas版の比較

関連記事

HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」

デモの違いとは

読み込み管理ができるJSライブラリ「LoadManager.js」

LoadManager.jsの使い方

デモの紹介

関連記事

HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」

使い方 (HTMLエレメント版)

使い方 (Canvas版)

カスタマイズ方法

最後に

関連記事

HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門

デモの作り方

フォースマップの作成

パーティクル情報を付与した表示クラスの作成

フォースマップの適用と計算

最後に

関連記事