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]
秀英体１００展に写心機 ver.2を出展します秀英体１００展に写心機 ver.2を出展します
お正月明けのギンザ・グラフィック・ギャラリーで開催される企画展「秀英体１００」にて、ふたたび「株式会社ワンパク」とともにデジタルインスタレーション、「写心機」のver.2を出展致します。 2011/1/21 追記：ビデオを載せました！ 2009年11月に行われた、Make:Tokyo Meeting 04で好評を得たver.1「写心機 Prototype」から２年、全く異なる構成で、新たに今回の企画展「秀英体１００」にて「写心機 {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でアイコン付きのカスタムボタンを作る
みなさん、Flex４(spark)は使ってますか？今回の記事では、よく使うアイコン付きButtonコンポーネントをFlex４で作ってみたいと思います。 Flex３ではiconプロパティに、画像パスをセットしてあげればアイコンが表示できましたが、Flex４のButtonにはiconプロパティがありませんので、カスタムButtonSkinを作成して、アイコンを実装します。 完成図はこんな感じです。表示するLabelも複数行にしました。 ■ButtonSkinクラスの構成カスタムButtonSkinの作成は、新規MXMLスキンでホストコンポーネントを(spark)Buttonにセットして生成できます。すると、デフォルトのButtonSkinクラスがコピーされるので、ここにiconを表示するパーツを追加します。MXMLで編集できるので、デザインビューで確認しながらスキンをカスタマイズできます。追加する前に、デフォルトのButtonSkinの構成をまとめてみます。 1:ホストコンポーネント ＜!– host component