ビットマップ エフェクトというかピクセル シェーダーっていうか、まぁそういう効果を XAML で楽して書きたいよね♪ #win8dev_jp

このエントリーは、 XAML Advent Calendar 2013 の 9日目です。

オブジェクトの周囲にハロー (halo) を付けたいことがありますよね?
文字や図形の周囲が光ってるような効果のことです。

どうやるかというと、 元のオブジェクトをボカしたものを作り、 その上に元のオブジェクトを載せてやります。

WPF なら、 これは簡単にできます。
こんな↓ XAML を書くだけ。

<!-- WPF の XAML: コントロールの Effect プロパティに BlurEffect を設定するだけ(^^) -->
<TextBlock TextAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap"
           Foreground="#f8ffe0" FontSize="50" FontFamily="Yu Gothic" FontWeight="Bold"
           Text="{Binding Text, ElementName=textAdvent}" >
    <TextBlock.Effect>
        <BlurEffect Radius="20" RenderingBias="Quality" />
    </TextBlock.Effect>
</TextBlock>
<TextBlock x:Name="textAdvent"
           TextAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap"
           Foreground="White" FontSize="50" FontFamily="Yu Gothic" FontWeight="Bold"
           Opacity="0.85"
           >Windows ストア アプリ Advent Calendar 2013</TextBlock>

これだけで、 光輪をまとったテキストが降臨!! (^^)

2倍に拡大した画像も載せておきましょう。

WPF エライっ! (^^)

※ ドロップ シャドウ等、 他の効果の付け方はこちらを参照 ⇒ MSDN: 方法 : 影付きテキストを作成する

さてこれが Windows ストア アプリの世界だと…

できません orz

こういうエフェクトが、 Windows ストア アプリの XAML ではまったくサポートされていないんです。 8.1 で追加されるだろうと期待していたら、 それもサックリ裏切られたようで… (;;

Windows ストア アプリでも、 DirectX をゴリゴリすれば可能です。 実際、 MS 謹製ソリティアとかで、 ガンガン使ってますし。

※ MS のソリティアではハロー効果が使われている (水色と黄色)

DirectX で Windows ストア アプリを作ってるときなら、 ピクセル シェーダーを掛けるくらい何ともないでしょう。
けど、 C# や VB や JavaScript で Windows ストア アプリを書いてる時、 ちょっと効果を付けたいだけなのに DirectX を使え、 ってのはないよね～ f(^^;

そこで、 Windows ストア アプリ用にピクセル シェーダー掛けるためのコントロールを開発してる人が現れました。 このあいだ見つけたのは、 jeremiahmorrill 氏の 「XamlFx Pixel Shaders for Xaml Windows Runtime」 です。

この XamlFx を試してみましょう。

まだα版レベルってことで、 バイナリは公開していないようです。
CodePlex のサイトからソースコードをダウンロードしてきます。

ソースコードには、 C++/CX の XamlFx プロジェクトと、 デモ用に C# で書かれた SeaSharpTestApp が入っています。 Windows ストア アプリ用の VS 2013 Express でビルドできるので、 コンパイルして動かしてみてください。

ん～、 実行すれば動きますけど、 デザイン画面で表示されません。 というか、 デザイン時に例外を吐いてます。 まぁ実害は無いっちゃ無いんですが、 気になる人は修正しといてください。

※ 例外を出してるのは、 GetForCurrentView() を呼び出してるところなので、 デザイン時にはそこを通らないように
if (Windows::ApplicationModel::DesignMode::DesignModeEnabled) return;
とバイパスを突っ込んでやります。 (ShaderContentControl.cpp と Effect.cpp のコンストラクタ 2箇所)

では、 自分なりのサンプルプロジェクトを作って、 XamlFx を使ってみましょう。

まず、 XamlFx プロジェクトもプロジェクトに入れて、 自分のサンプルプロジェクトから参照を掛けます。
で、 XAML の先頭の Page タグに
      xmlns:xamlFx="using:XamlFx"
を追加して。
あとは、 ↓こんな感じの XAML を書きます。

<!-- Windows ストア アプリ の XAML: XamlFx を使ってみた -->

<xamlFx:ShaderContentControl EffectRenderStrategy="Conservative"
                             HorizontalAlignment="Center"
                             HorizontalContentAlignment="Center"
                             VerticalAlignment="Center">
  <xamlFx:ShaderContentControl.Effect>
    <xamlFx:BlurEffect Radius="{Binding Value, ElementName=amountSlider}" />
  </xamlFx:ShaderContentControl.Effect>

  <TextBlock x:Name="blurText"
             TextAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap"
             Foreground="#f8ffe0" FontSize="60" FontFamily="Yu Gothic" FontWeight="Bold"
             Text="Windows ストア アプリ Advent Calendar 2013" />
</xamlFx:ShaderContentControl>

<TextBlock x:Name="textAdvent"
           TextAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap"
           Foreground="White" FontSize="60" FontFamily="Yu Gothic" FontWeight="Bold"
           Opacity="0.85" Text="{Binding Text, ElementName=blurText}" />

<!-- BlurEffect の Radius プロパティが string を受け付けないので…(･･; -->
<Slider Minimum="0" Visibility="Collapsed"
        x:Name="amountSlider"
        Value="5"
        Maximum="80" SmallChange="1.0" LargeChange="1.0" StepFrequency="0.1" />

BlurEffect コントロールの Radius プロパティが 「文字列はイヤだ、 double を寄越せ!」 っていうので、 しかたなく Slider コントロールを見えないように貼り付けて、 バインドして使っています。
このあたりもα版らしいですねw

実行してみましょう。 こんな感じになりました。 (^^)

2倍に拡大↓

よさげですねぇ。
ビューの幅を変えて、 ワードラップさせてみましょうか↓

あ、 残念。 BlurEffect の部分が小さくなって左に動いてしまいました。

まだまだ未成熟ですが、 Windows ストア アプリでも、 WPF と同じくらい簡単に XAML でエフェクトが掛けられる時代がやってきそうです♪

※ Visual Studio Express 2013 for Windows 用のサンプルコード: 「XamlFx20131208sample.zip」をダウンロード