2011年12月アーカイブ

Starling では、文字を表示するために TextField というクラスが提供されています。フォントの種類、大きさ、色、位置などを指定して、テキストを画面に表示できます。

とはいえ、GPU で直接フォントを扱えるわけではありません。実際には、裏で Flash Player の TextFiled を使って CPU 描画したものを、ビットマップ化して GPU にアップロード、という動作をします。

つまり、Starling の TextField が提供するのは、与えられたテキストとフォントから、動的にテクスチャを生成する機能です。

そのため、カーソルで、表示されたテキスト内の文字を選択する、といった操作はできません。 (ただのビットマップなので)

また、特に動的に生成する理由のないテキストは、TextField を使うより、事前にテクスチャとして準備しておいた方が、実行時の効率は良さそうです。

Flash でアニメーションと言えばやはり MovieClip ですが、Starling にも MovieClip というクラスがあります。もちろんアニメーション用のクラスです。

前回少し触れましたが、Starling で画面に表示できるのは、ビットマップ画像か色を指定した矩形です。そのため、名前は同じ MovieClip でも、Starling の MovieClip は、フレーム毎に割り当てられたビットマップを表示するクラスとなっています。

また、Starling の MovieClip には子オブジェクトを管理したり、フレームにスクリプトを持つ機能がありません。この点も Flash Player の MovieClip とは大きく異なります。

(Starling では、表示リストの管理は Sprite の担当です。一方、MovieClip は Image クラスにタイムライン機能を足した Image のサブクラスです。MovieClip が Sprite のサブクラスである Flash Player とは異なり、両者の役割はほとんど被りません。)

今月の Flex 関連の情報のまとめです。

まず、Flex 3 から Flex 4.5 まで全てのバージョンに影響するセキュリティ問題の件です。
(最新の Flex 4.6 は対応済みです。Flash Builder 4.6 に含まれる Flex 3.6A SDK も対応済みです)

XSS 関連の問題なので、AIR アプリは対象外です。また、Flex 4.x SDK で、RSL を使って Flex フレームワークをリンクしている場合も、ごく一部の例外を除き影響を受けません。

直ぐにこの問題に対応できるよう、AIR ベースのパッチツールが提供されています。 (APSB11_25_Patch_Tool.air: Win と Mac 上で実行可能)

パッチツールを起動してから、SWF ファイルを指定すると、問題のあるバイトコードを置き換えてくれます。また、SWF に脆弱性が含まれているかを確認する目的でも利用できます。

先週末に Android 4.0 をサポートする Flash Player 11.1 と AIR 3.1 が公開されました。

それぞれのバージョンは、

  • Flash Player: 11.1.112.60
  • Adobe AIR: 3.1.0.556
  • AIR SDK (Android): 3.1.0.488

です。

更新は Android Market から入手できます。

既報の通り、デバイス向けの Flash Player に関しては、これが最後のメジャーバージョンになります。つまり、Flash Player 11.2 for Android は登場しません。

脆弱性や主要なバグへの対応は引き続き行われるので、Stage3D が使えないことを除けば、しばらく違いを感じることは (Android 5.0 が出るまで?) 無いかもしれません。個人的には、Android の次の更新までに最新のデバイスを買っておきたい気がしてます。

AIR は、デバイス向けにも引き続き新しいバージョンが提供されます。

 

今回は、ビットマップ (テクスチャ) の表示方法です。Starling では、ビットマップか、前回までのように矩形を使って画面を構成します。

記事の後半では、動的にピットマップを更新する方法もご紹介します。

(注:以下の文章では、"テクスチャ = ビットマップ" と思ってお読みください)

Image と Texture クラス

Starling フレームワークでは、ビットマップを表示するのに Image を使います。Image は Quad のサブクラスです。Quad にビットマップを扱う機能を追加したものが Image という位置づけです。

Flash Player の表示オブジェクトでは Bitmap に BitmapData があるように、Starling では Image に Texture があります。Image が表示オブジェクトとして使われて、データの実体は Texture が持つ、という関係です。

前回は、EnterFrame イベントを使って、アニメーションを実現する方法をご紹介しました。今回は、Tween クラスを使った方法です。

Tween を使った場合の特徴の 1 つは、アニメーションの期間を秒数で指定することです。Tween は指定された時間をかけて、表示オブジェクトの属性値、例えば x 座標を最終的な値へと、だんだんと変化させます。

コードで書くと以下のような感じです。まず Tween のコンストラクタで、対象となるオブジェクトと時間を指定して、次に、animate() メソッドを使って、変化させる属性の名前と最終値を設定します。複数の属性を変化させる場合は animate() を何回も呼ぶことになります。

// myObjectを2秒かけて、横に50px、縦に80px移動させるアニメーションの指定
var myTween:Tween = new Tween(myObject, 2.0);
myTween.animate("x", myObject.x + 50);
myTween.animate("y", myObject.y + 80);

今回は、前回の記事で紹介したコードをベースに、矩形を移動させてみます。利用するのは、EnterFrame イベントです。

Starling の表示オブジェクトは、Flash Player の表示オブジェクトと同じ様に、EnterFrame イベントをサポートしています。そのため、EnterFrame のイベントリスナを追加すれば、新しいフレームの表示ごとにリスナ関数が実行されます。

Starling でのイベントのしくみや、リスナの登録方法も、Flash Player の表示リストとほぼ同様です。ということで、今回紹介する方法は、既存の Flash コンテンツを再利用しやすい方法と言えそうです。

さて、今回のサンプルでは矩形を回転させたいと思います。そうすると、前回のサンプルのまま単色ベタ塗りの矩形が回転しても様子が分かりにくいでしょうから、前準備として、矩形の塗りをグラデーションに変えたいと思います。

都合のよいことに Quad クラスは、Stage3D らしく、頂点ごとに色を指定する機能を持っています。メソッドの名前は setVertexColor() です。

setVertexColor() の最初の引数は頂点の番号です。番号は、0 から順に、左上、右上、左下、右下の頂点を指します。2 つ目の引数は色の指定です。

Starling は Stage3D を利用した高速な 2D 描画の実現を目指したフレームワークです。以前の記事 (Starling (ActionScript 3 の 2D フレームワーク) のご紹介のつづき) で概要と簡単な使い方を紹介しました。

Starlig では、アニメーションに 3 種類の方法が使えます。今回から、何回かに分けて、それぞれの書き方を紹介します。従来の表示リストのアニメーションと比較してみて下さい。

開発環境の準備

Starling の開発環境は、Flash Player 11 と AIR 3 への対応が前提です。現時点では、唯一サポートされた環境である Flash Builer 4.6 の利用をお勧めします。

Flash Professional CS5 もしくは CS5.5 を使う場合は、以下の記事で紹介した機能拡張が便利です。

Edge プレビュー版の 3.1 が Adobe Labs に公開されました。 (Adobe Edge Preview@Labs

これまで公開されていた Edge プレビュー 3 が、今月いっぱいで使用期限が切れるため、来年 1 月に予定されているプレビュー 4 の公開まで使用できるように、期限を延長したバージョンだそうです。その他の新機能は特にありません。

現在 Edge を使用中で、使用を継続したい人は、今月中にプレビュー 3.1 に移行する必要があります。その際、既存のバージョンはアンインストールしてから、プレビュー 3.1 をインストールします。

Mac のアンインストーラは、アプリケーションフォルダ内の Adobe Edge Preview フォルダ内にあります。Windows では、コントロールパネルからアンインストールします。

プレビュー 4 の新機能も一部情報が公開されました。それによると、

基本的な Pixel Bender 3D カーネルの書き方に続いて、Pixel Bender 3D でテクスチャマッピングを行う方法をご紹介します。

テクスチャマッピングは見た目に関する処理なので、関係するのはマテリアルカーネルだけです。

早速、マテリアルカーネルの定義です。まずは、変数の宣言からです。今回新しく登場しているのは input image です。

{
  input vertex float4 UVCoord;
  interpolated float4 interpolatedUVCoord;
  input image4 inputImage;
  output float4 finalColor;           
}

input image の変数宣言の記述は、ちょっと input vertex とは異なります。"input image 型 変数名" ではなくて、"input 型 変数名" です。その際、型として、image1, image2, image3, image4 のどれかを指定するという制限がつきます。

Starling のマイナーアップデートが行われました。

ゆっくりとしたペースながらいちおう開発は行われているようです。パフォーマンスの改善が行われているそうなので、興味のある方はお試しください。

ダウンロードはこちらです。

一方で、ND2D の方は、新機能追加も積極的に行われているようなので、比べるとちょっと寂しい感じもします。

 

前回は、Pixel Bender 3D カーネルの基本構造と変数の定義をカバーしました。今回は、カーネル関数の定義です。

ちょっと復習ですが、カーネルと、カーネルから生成される PB-ASM プログラムの関係は、以下のようになっています。

  • 頂点カーネルから生成
    • 頂点位置プログラム:頂点の位置を操作
  • マテリアルカーネルから生成
    • 頂点マテリアルプログラム:頂点の見た目を操作
    • 断片マテリアルプログラム:断片の見た目を操作

そのため、頂点カーネルには 1 つ、マテリアルカーネルには 2 つの関数を定義します。(必要に応じて補助用の関数も定義できます)

前回の記事で触れたように、Pixel Bender 3D がこのまま製品化される保証はありませんが、現時点で利用可能なシェーダを記述する手段の 1 つとして、引き続きご紹介を続けます。

今回は、実際に Pixel Bender 3D カーネルを記述する方法の概要です。

Pixel Bender 3D カーネルの基本構造

Pixel Bender 3D カーネルは、下に示すような構造をしています。頂点カーネル、マテリアルカーネル共に、基本的な構造は同じです。

<languageVersion: 1.0;>
vertex kernel カーネル名 
<
  カーネル メタデータ
>
{
  カーネル メンバー(変数と関数の定義)
}

最初の行は、記述する言語のバージョンを指定します。現時点では、ここは常に 1.0 です。

2014年1月

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
レンタルサーバー

月別 アーカイブ

Powered by Movable Type 4.261