Bakulogスマートフォン用の表示で見るBakulog獏の夢日記的な何か。Calender6日目の記事になります。本記事では自作デスクトップマスコットエンジン「Harriet」でも使っているキャラの外観制御まわりの小技を紹介します。「デスクトップマスコット自作してみたいけど何から手を出せば...?」という方の参考になれば幸いです。ジャンルとしてはWPF/XAML(と一瞬だけC#)です。ターゲットはWindowsになります。最初に完成品のイメージを掲載します。下記のツイートに載せているような動きを作れるところまで紹介します。Calenderはジャンルが広範なので入門から書くことにします。Communityをインストールし、プロ生ちゃんの画像が表示されるところまで作ってみます。Studioをインストールします。インストール時に構成を聞かれますがデフォルト設定で問題ありません。Studioを起動します。Studio」で探してください。初回起動時はMicrosoftアカウントの入力が必要です。初期化が完了したら「新しいプロジェクト...」でプロジェクトを作成。C#→従来のデスクトップ→WPFアプリケーション」を選択し、適当なソリューション名を入れて「OK」。これでプロジェクトが初期化され、ウィンドウの編集画面が出てきます。GUIの編集画面(※右下のは「社畜ちゃんIDE」という自作プラグインです)[/caption]編集画面の下側に書かれているのがXAMLというGUI記述用のマークアップ言語です。本記事の範囲では「XMLでGUIが書かれてる」と思ってもらっても構いません。StudioでのGUI作成が初めてならばこの時点で一度F5キーを押してデバッグ実行を試し、ウィンドウが表示されるのを確認しておくとよいでしょう。ウィンドウを普通に閉じればデバッグ実行は終了します。普段ならこのウィンドウにボタンやテキストボックスをドラッグ&ドロップで配置したり直接XAMLを手書きしたりしてGUIを組む所ですが、今回の目的はデスクトップマスコット作成なので普段のWPFではあまり使わない機能を使っていきます。その前にプロ生ちゃんのイラストを準備しましょう!公式サイトからちびキャラ絵など透過の画像をダウンロードし、png画像として適当なディレクトリに配置します。画像サイズが大きいと実行時に重くなるためリサイズやトリム処理を推奨します。以下では公式サイトの忍者プロ生ちゃんをトリム&リサイズした画像を例として使います。(※再配布っぽくなるとヤなので公式配布版から10倍以上画質を落としてます。画像編集環境が足りてない場合用に掲載しているだけなので、公式サイトからダウンロードしたものや自分で使いたい画像を使ってください。)この画像をプロジェクトに追加します。基本操作はソリューションエクスプローラへのドラッグ&ドロップだけです。プロジェクトアイコンに向かってドロップしてください。ソリューションエクスプローラが表示されてない場合はメニューバーの「表示」から選んで出すかShift+Alt+Lで表示してください。画像ファイルのプロパティで「ビルドアクション」項目が「Resource」になっている事も確認してください。ココの種類が間違っていると実行時に画像が表示されない事があります。画像の準備が済んだら本題に戻ります。さきほどは普通の四角いウィンドウ枠が表示できましたがデスクトップマスコットにとって枠ほどウザいものは無いので、枠を消すため編集画面下側のXAMLエディタにいくつか書き込みます。</Grid></Window>これでウィンドウ枠が消せるので、続けてプロ生ちゃんの画像を表示するためImageコントロールという画像表示用のアイテムを追加します。</Grid></Window>"RenderOptions.BitmapScalingMode"の部分は必須ではありませんが、画像リサイズ処理がキレイになるので書いておいた方が無難です。これで再びF5を押しデバッグ実行すると、プロ生ちゃんが宙に浮いた状態で表示されます。「閉じる」ボタンが無いのでプロ生ちゃんをクリックしてからAlt+F4コマンドでウィンドウを閉じます。StudioをアクティブウィンドウにしてShift+F5を押すとデバッグが中止出来るので、それでも構いません。最後にアニメーション効果の素材となる四角形をウィンドウに追加し、ウィンドウサイズも画像サイズに合わせて書き換えます。</Grid></Window>こうするとウィンドウ全体が明るい緑色の四角で覆われてしまいますが心配はいりません!この四角形を次節でちょちょいと弄ってエフェクトに変身させます。StudioとはXAMLの外観とかをGUIから細かく編集するためのツールです。title="詳細(クリックで展開します)"]VSのウィンドウ編集画面が出た状態でメニューバーから「表示→Blendでデザイン」を選んでBlendを起動します。Studioが同じプロジェクトを同時に開いて編集する状態になりますが特に問題はありません。Studioと見た目が非常に似てますが間違えないでください。Studioは最小化しておくのをオススメします。緑色の四角形にグラデーション効果をかけ、表示範囲を縮めてみます。緑色の四角形を右クリックして「プロパティ」を選び、上の方にある「ブラシ」の中からFillを選択します。"Fill"を選んだらすぐ下で5つ横に並んでるアイコンがあるので、真ん中のグラデーションっぽいアイコンをクリックします。これはLinearGradientBrushといって、いわゆるグラデーション的な色彩を設定するオプションです。この状態ではグラデーションの制御点を動かしたり制御点ごとの色を編集したりできる(上記画像で上矢印みたいなマークが並んでる場所をグリグリいじれる)ので、設定を変えて以下の通りにします。上の画像は編集完了した状態の外観です。title="※グラデーションの方向がおかしい場合(クリックで展開)"]もしグラデーションが「上から下」という流れになっていない場合はブラシの下にある下矢印マークを展開してグラデーションの開始位置(StartPoint)と終了位置(EndPoint)を設定します。下の画像の通りにStartPointとEndPointが設定されていれば問題ありません。ちなみにStartPointもEndPointも設定の意味は同じで、グラデーションの基準位置を相対的なX、Y座標で指定しています。0"は「左右で言うと真ん中、上下で言うと上端」を意味するので真ん中上方からグラデーションが始まります。1"は「左右では真ん中、上下で言うと下端」を表しており今回は上から下へ向かうグラデーションになっています。「左上から右下へ斜め方向のグラデーションがつけたい」と思った場合はStartPointを"0,0"、EndPointは"1,1"に書き換えればOKです。[/expandsub1]お次はBlendの真骨頂であるアニメーションの作成を行い、さっき作った緑色のラインが上から下にスイーッと動くようにします。Blendの画面左下に「オブジェクトとタイムライン」というパネルがあるハズなので、そこで緑色の+ボタンを押してストーリーボードというものを新規作成します。パネルが出てない場合はメニューバーの「表示→その他のウィンドウ→オブジェクトとタイムライン」で表示させます。ストーリーボードの名前は自由に決めて下さい。今回の例では"GreenLight"とします。ストーリーボードとは(クリックで展開)"]こういうGUI作成が初めての方は「ストーリーボードって何?」と首をかしげることと思いますが、ストーリーボードとは平たく言うと「PowerPointのアニメーションの超凄い版」です。時間の経過に合わせて画面内のモノの動きを設定できる機能ですね。日常語で言う「アニメーション」と同じ意味だととらえても構いません(※WPFで「アニメーション」と言った場合、微妙に違う意味になります)。[/expandsub1]作成したストーリーボードの中身を作っていきます。ストーリーボードを生成するとメイン画面が赤い枠に囲われて「記録モード」という状態になります。この状態でUIのパラメータを動かしていくことでアニメーションの動き方を簡単に定義できます。具体的に操作してみましょう。「ストーリーボードが始まってから1.8秒後に、緑色のラインがプロ生ちゃんの足元でスッと消える」という動きを考えてみます。この場合は「オブジェクトとタイムライン」で時間のバーを1.8秒の位置へセットしてから、さきほど用意した3つのグラデーション制御点をすべて右端までグイッと移動します。ストーリーボード作成の基本的な流れはこのような、「時間バーを動かして」「UIの動かしたい部分のパラメータをいじる」の繰り返しです。上の例と同じような操作を繰り返して以下のようなアニメーションを作ります。以上で合計4つの時間を指定したアニメーションが作れました。アニメーションの動きは再生ボタンを押して確認できます。https://twitter.com/baku_dreameater/status/673275374382399488この時点で大体思い通りに動いてますが、動きに緩急がないので少し物足りません。そこで値の動きをよりカスタマイズするEasingFunctionという設定を使ってみます。今からの作業では記録モードはもう必要ないので、誤操作防止のため記録モードを切ります。続いて「オブジェクトとタイムライン」パネルの中で1.5秒時点の箇所にある四角いアイコンをクリックし、プロパティを見てみます。するとイージングという項目があるため"EasingFunction"を選択して色々な関数を選びながらストーリーボードを再生し、良さそうなEasingFunctionを探してみてください。いい感じのEasingFunctionを使うと冒頭で紹介したような自然なスピード感が演出できます。InOut"を実際に使っています。以上でアニメーション関連の作業は終わりました。最後の仕上げとしてストーリーボードを閉じ、デフォルトの状態でちょっと見えてしまっていた四角形が上に隠れるようグラデーションを修正します。Studioに戻ります。Studio側で反映させます。コレでデバッグ実行を行うとプロ生ちゃんが表示された直後に緑色のラインがスイッと動いてくれるようになります。エフェクトの効果範囲を画像ピッタリに合わせる前節までで作ったエフェクトでもそれなりに見栄えがしますが、エフェクトがキャラの画像にピッチリ沿うように修正をかけてみましょう。映像や画像編集で言う「クリッピング」という処理ですね。title="詳細(クリックで展開します)"]実は作業そのものは簡単で、XAMLを少し書き換えるだけです。Blendでの編集前と比べるとアニメーションの実装コードがXAML内にドッサリ増えてますがそちらはノータッチで。</Grid></Window>画像や緑色の四角形のコンテナであるGrid全体にプロ生ちゃんの画像を使ってOpacityMaskをかけています。このOpacityMaskを用いると、画像や図形で指定した形に沿って中身のUIの表示がクリッピングされます。プロ生ちゃんの画像はもとから同じ形なので影響がないですが、もともと四角形として作られていたエフェクト効果の部分についてはプロ生ちゃんの画像の形に切り抜かれます。これで実行するとエフェクトの形が記事冒頭で紹介したものと一致します。動きは最上部に載せてるのと一緒なので再掲はしません。その他の小技さらにデスクトップマスコット感を高めるために三つの特徴を追加します。title="詳細(クリックで展開します)"]まず右クリックメニュー追加から。XAMLの編集部分でGrid要素のすぐ上に右クリックメニューのアイテムを書き足します。...上記の中で"OnMenuItemCloseClick"というのはメニューアイテムがクリックされた時の処理を記述するイベントハンドラ関数を表します。書き足しが完了したら"OnMenuItemCloseClick"の所にキャレットを合わせてF12キーを押してください。するとC#ソースファイルである"MainWindow.xaml.cs"の編集画面に飛ばされ、そちらに"OnMenuItemCloseClick"のひな型が自動生成されます。今回は「終了」ボタンを押した際の処理なので、中身としてはウィンドウを閉じるためのClose関数を呼び出すだけでOKです。}}これで右クリックメニューが表示でき、「終了」を選ぶと実際にウィンドウが閉じるようになりました。次はキャラを掴んで動かす機能です。いま開いている"MainWindow.xaml.cs"に次のように追記します。}}見た目でなんとなく分かって貰えるかと思いますが、ウィンドウ上で左クリックした場合の挙動をカスタマイズしています。"base.OnMouseLeftButtonDown"はデフォルト(基底クラス)で定義された処理を行っているだけなので大した意味はなく、2行目に書いたDragMove関数が「掴んだ状態で動かす」という処理を担当しています。これで掴んで動かせる機能の実装も完了です。最後は「エフェクトを起動直後ではなく左クリックしたときに発生するようにする」です。上で使っているDragMoveメソッドの呼び出し部分の手前にコードを足します。}}書き足した部分ではBlendで作ったアニメーションを名前で指定して拾い、そのまま実行しています。起動直後にエフェクトが走る仕組みは切っておきましょう。今度はMainWindow.xamlの編集画面(ウィンドウが映ってた方の画面)に戻り、XAMLエディタでWindow.Triggers要素を丸ごと削除するかコメントアウトします。...これで起動直後にはエフェクトが出ず、左クリックしたときだけエフェクトが出るようになりました。まとめいかがだったでしょうか。Studioをうまく使えばデスクトップマスコットをささっと作ってちょっとしたビジュアル効果まで与えることが可能です。今回は紹介してませんが、同じような編集でプロ生ちゃんのイラスト自体にも演出を加えればこんな動きも作れます。https://twitter.com/baku_dreameater/status/652099625730510848既存のデスクトップマスコットエンジン(伺かとかアプリコタンとか)上で動くようキャラを実装するのも有効な開発方針ですが、非常に特殊な機能を持ったデスクトップマスコットが欲しいとか、あるいはコードを完全に掌握してデスクトップマスコットを作りたい場合などは本記事でやったように自作でも十分良いものが作れます。ご参考になれば幸いです。はてなブログPro獏の夢日記的な何か。xR、ロボティクス、ゲームエンジン(Unity)、モバイル(AndroidとXamarin.Forms)、C#仕事関係は原則TwitterのDMでお願いします。月別アーカイブはてなブログをはじめよう!baku_dreameaterさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。