Canvasに画像を複数枚重ねて描画するにはCanvasに画像を複数枚重ねて描画するには

HTML5のCanvasには画像を組み込むことができます。Canvas上に複数枚の画像(透過PNG)をレイヤー状に順番に重ねたり、重ねた後の画像を取得する方法を解説します。 画像のプリロード  画像を複数枚重ねる場合、単に描画のループを回してしまうと読み込みが完了されたものから表示れ、重ねる順番が保障されない為、描画の前に順にImageオブジェクトを先読みしておきます。 var fileArry = [‘imgName1’,’imgName2’…]; // 読み込みたい画像のパスの配列 var

AIR for Androidでゲームコントローラを作ってみたAIR for Androidでゲームコントローラを作ってみた

ちょっとした思いつきでAndroidスマートフォンでゲームのコントローラを作ってみたかった…ので、作ってみました。それがこちらです↓ 意匠が今は無きP○P goのよう?Nexus Sだとそれだけでゲーム端末っぽくなりますね。自分はもうこれだけで満足なのですが、これだけではその名の通りのコントローラであることを証明出来ない…ので、不本意ながら簡単なマルチユーザーゲームも作りました。それがコチラ。やっつけで作ったのでゲームとしてツッコミどころ一杯なのですが、、、 ■遊び方 ゲームとして浅いので遊び方は至ってシンプルです。 先ずTwitterのIDでログインします。 スタートボタンを押すと(正確にはタッチすると…)ゲーム開始。

Flex Hero のモバイルアプリ開発でハマった点Flex Hero のモバイルアプリ開発でハマった点

「Flex Hero のモバイルアプリ開発の基本」では、ホントの基本のみのご紹介でした。今回は、実際に使ってみてハマった点をいくつかご紹介したいと思います。*なお、この記事は公開されているFlash Builder Buritto Preview版 を対象としています。 画面回転時のレイアウト

Flex Hero のモバイルアプリ開発の基本Flex Hero のモバイルアプリ開発の基本

“Hero”は、モバイル向けに最適化されたsparkコンポーネントを追加した、次期FlexSDKのコードネームです。Flash Builder Burrito (Preview) をインストールすると、”Hero”が入ってます。今回は、Burrito を使った Android アプリ開発の基本的な内容をまとめました。

社内HTML5勉強会を行いました社内HTML5勉強会を行いました

先日、社内でHTML5勉強会を行いました。今回は「基礎編~HTML5の基礎とiPhone最適化~」と題して、HTML5でiPhone最適化を行う際の基礎知識とHTML5利用の目的共有を行いました。そこで、今回の勉強会の資料を一部公開します! HTML5といっても、新しく追加されたタグやAPI,CSS3など範囲が広く、その上主要ブラウザでも実装状況が違ったり、仕様の廃止があったりするのが現状です。しかし、スマートフォン(今回はiPhoneのみ)に限定してしまえば、ブラウザを限定することがほぼ可能なので、HTML5の機能を生かした最適化を行うことができます。機能面、操作性ではネイティブアプリに劣りますが、Webアプリであればデバイスに依存することなく開発でき、安価で導入しやすいという利点があります。  【資料の内容】●開発環境の整備●HTML5の基本セット●iPhone向けWebアプリケーションの開発-Viewport-付加機能●HTML5で追加されたタグ-audio-video-canvas-form属性●API-クライアントサイドのストレージ-geolovcation-オフラインアプリケーションキャッシュ●アニメーション  【資料はコチラ】 [file]/2010/12/HTML5_iPhone.pdf[/file]

秀英体100展に写心機 ver.2を出展します秀英体100展に写心機 ver.2を出展します

お正月明けのギンザ・グラフィック・ギャラリーで開催される企画展「秀英体100」にて、ふたたび「株式会社ワンパク」とともにデジタルインスタレーション、「写心機」のver.2を出展致します。 2011/1/21 追記:ビデオを載せました! 2009年11月に行われた、Make:Tokyo Meeting 04で好評を得たver.1「写心機 Prototype」から2年、全く異なる構成で、新たに今回の企画展「秀英体100」にて「写心機 {Font}

FxUG12月勉強会の資料をアップしましたFxUG12月勉強会の資料をアップしました

ご参加頂いた皆様、お疲れ様でした。PureMVCの発表で使用した、資料とサンプルをアップしました。 [airbadge] PureMVC_FxUG, https://www.riaxdnp.jp/wp-content/uploads/2010/12/PureMVC_FxUG.air, v1,https://www.riaxdnp.jp/wp-content/uploads/2010/12/airbadge.png[/airbadge] コチラをインストールしてから、右クリック「ソースの表示」で中身が見れます。 サンプルの解説はコチラ: [file]/2010/12/PureMVC_FxUG解説.pdf[/file]

HTML5を使うべき10の理由HTML5を使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。続いてHTML5の判断材料です。同じく10項目挙げてみました。また文章ばかりです。 ○スマートフォン向けである(特にiOSも対象) iOSではPlug-inが排除されているのですから、何の余地もありません。またターゲットをAndroid等のスマートフォンに特化できるなら、HTML5が良いかと思います。Flash PlayerはAndroid OS2.2から対応していますが、パフォーマンスを出すには繊細にチューニングした開発が必要です。ただし、注意が必要なのは、HTML5で画面を作ったからといって、PCでもスマートフォンでもOK!という訳にはいきません。タッチやジェスチャに対応した画面作りが必要で、AppleのUIデザインガイドラインに従わないと違和感のある画面となります。

Flash/Silverlightを使うべき10の理由Flash/Silverlightを使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。FlashやSilverlightの「適材適所」について。文章しかなくてすいません。。。 ○UIコンポーネントを利用する ツリーやデータグリッド(Excelのようなセル)のようなHTML formに無いUIコンポーネントが必要であったり、チャートやマップ等のデータビジュアリゼーションを行ったり…このようなUIコンポーネントが既に用意されています。また、サードベンダーから多くの外部コンポーネントが利用できるのもの強みです。FlexではIBMのILOG、SilverlightであればInfragisticsのNetAdvantage等があり、かなり高機能なコンポーネント群です。これらのUIコンポーネントをJavaScriptでクロスプラットフォームでゼロから開発するのはかなり難しいです。HTML5対応ブラウザが普及していけばHTML5向けのUIコンポーネントも充実していくと思うので、これから期待しています。 ○デバイスI/Oと連携する

Flex4でアイコン付きのカスタムボタンを作るFlex4でアイコン付きのカスタムボタンを作る

みなさん、Flex4(spark)は使ってますか?今回の記事では、よく使うアイコン付きButtonコンポーネントをFlex4で作ってみたいと思います。 Flex3ではiconプロパティに、画像パスをセットしてあげればアイコンが表示できましたが、Flex4のButtonにはiconプロパティがありませんので、カスタムButtonSkinを作成して、アイコンを実装します。 完成図はこんな感じです。表示するLabelも複数行にしました。 ■ButtonSkinクラスの構成カスタムButtonSkinの作成は、新規MXMLスキンでホストコンポーネントを(spark)Buttonにセットして生成できます。すると、デフォルトのButtonSkinクラスがコピーされるので、ここにiconを表示するパーツを追加します。MXMLで編集できるので、デザインビューで確認しながらスキンをカスタマイズできます。追加する前に、デフォルトのButtonSkinの構成をまとめてみます。 1:ホストコンポーネント <!– host component