ソフトウェア

XNA ３Ｄゲーム制作入門という本を執筆しました

おのでら — Fri, 26 Sep 2008 09:00:00 GMT

　書こうと思ってそのまま忘れてしまっていたのですが(^^;)、大西武さんと私の共著で「XNA ３Ｄゲーム制作入門」という本を執筆しました。

　本書の中も執筆していますが、付属のCDに３Ｄモデルにアニメーションをつけてスキンアニメーション付き X ファイルを出力できる「エルフレイナ Ver 1.2 Light」というツールと、XNA で上記の X ファイルを使ってアニメーションの制御をできるプログラムのライブラリを付けましたので、興味がある方はぜひ買って遊んでみてください。

エミュレータへのリソースの配置

オノデラ — Mon, 14 Jul 2008 22:48:00 GMT

　通常の Windows アプリケーションなどは、実行ファイルのあるフォルダに直接画像ファイルなどのリソースを配置できますが、Windows Mobile のエミュレータではエクスプローラーなどで直接配置することができません。ここでは Visual Studio を使ってファイルを配置する方法を説明します。

　作成した Windows Mobile のプログラムを Visual Studio から配置して実行すると、Windows Mobile のエミュレータの Program Files フォルダに実行ファイルが配置されます。

　しかし、プログラムから特定の画像ファイルを読み込みたい場合、画像ファイルをエミュレータのフォルダに直接置くことができません。

　プログラムのフォルダにファイルを配置したい場合は、ソリューションエクスプローラーに画像ファイルなどのリソースを追加します。プロジェクトを右クリックして追加するか、直接ファイルをドラッグしても追加できます。

　追加したファイルを右クリックして、「プロパティ」を選択します。

　プロパティが表示されたら、「出力ディレクトリにコピー」の項目を「新しい場合はコピーする」に設定します。

　プログラムを実行、または配置すると、エミュレータのブログラムのフォルダにファイルが配置されたことがわかります。

　上記では実行ファイルのあるフォルダにファイルを配置しましたが、フォルダを構成することもできます。

　下図のようにプロジェクトにフォルダを構成し、その中にファイルを配置します。

　エミュレータでもフォルダが作成されていることがわかります。

ユーザーコントロールで既存のコントロールの組み合わせを作成する

オノデラ — Sat, 05 Jul 2008 19:00:00 GMT

　ユーザーコントロールを使用すると、既存のコントロールを組み合わせて新しいコントロールを作成することができます。今回作成するサンプルは TrackBar で色を調節して、イベントによって色を取得するというコントロールを作りたいと思います。

ユーザーコントロールを追加する

　ユーザーコントロールを作るにはプロジェクトにユーザーコントロールを追加する必要があります。

　追加先のプロジェクトを右クリックして、「追加」→「新しい項目」と選択します。

　ダイアログが開いたら、カテゴリから「Windows Forms」を選択し、テンプレートから「ユーザコントロール」を選択します。

　今回は３つのトラックバーで色を指定できるコントロールを作るので、「ColorTrackBar」という名前のコントロールを作ります。ファイル名にコントロール名を入れてください。

　入力が終わったら「追加」ボタンをクリックします。

　するとコントロールが作成され、画面にコントロールのデザイナ画面が表示されます。

ユーザーコントロール内の処理を実装する

　作成するコントロールにもよりますが、今回のコントロールはフォームの背景色と同じにしたいので、UserControlを選択した状態で、プロパティから「BackColor」の項目を選択し、システムカラーの「Window」を選択します。

　UserControl に使用するコントロールを張り付けましょう。TrackBarはそれぞれRGB三つに対応します。Color構造体はRGBそれぞれ0～255の範囲で設定できるので、Maximunを255に設定します。

　現在設定している色を PictureBox に表示できるようにします。BackColor プロパティに設定するので、初期値を Black にしておきます。

　今回はユーザーコントロールの作り方を簡単に説明するので、細かい設定は各自で調整してみてください。

　TrackBar を動かした時に、PictureBox の色を変えられるようにイベントを作成しましょう。TrackBar のイベントから「ValueChanged」イベントを探してダブルクリックします。

　すると、コードに TrackBar の値変更イベントが追加されます。ここに処理を入力していきます。

　その前にほかの２つの TrackBar のイベントも追加しましょう。どれも同じ処理を行うので、最初に作成したイベントをセットしたほうが楽です。

　では、コードを入力しましょう。各トラックバーから値を取得して Color 構造体を作成します。その値を PictureBox の BackColor にセットするだけです。

/// <summary>
/// トラックバーの値が変更されたとき
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void trackBarR_ValueChanged(object sender, EventArgs e)
{
    // 各トラックバーの値から Color を作成
    Color color = Color.FromArgb(this.trackBarR.Value,
                                 this.trackBarG.Value,
                                 this.trackBarB.Value);

    // PictureBox に色をセット
    this.pictureBoxColor.BackColor = color;
}

ユーザーコントロールを配置する

　作成したコントロールは実際に Form に配置して確認しましょう。

　コントロールを作成してビルドを行うと、ツールボックスに作成したコントロールが表示されます。これをフォームに配置します。

　下のようにデザイナに配置できると思います。

　デバッグ実行をして実際にトラックバーを動かしてみると、ピクチャーボックスの色が変化することがわかります。

作成したコントロールにイベントを登録できるようにする

　実際にユーザーコントロールで色は変化しましたが、あくまでコントロール内で色がわかっているだけなのであまり使い道がありません。今度はこのコントロールで色を調整したときに、フォーム上のテキストボックスのテキストの色に反映できるようにしてみましょう。

　まずは、コントロールを使用している Form 等から、設定されている色を取得できるようにしましょう。コントロールのコードに Color プロパティを追加します。

/// <summary>
/// 設定されている色を取得・設定します。
/// </summary>
public Color Color
{
    get
    {
        return Color.FromArgb(this.trackBarR.Value,
                                this.trackBarG.Value,
                                this.trackBarB.Value);
    }
    set
    {
        this.trackBarR.Value = value.R;
        this.trackBarG.Value = value.G;
        this.trackBarB.Value = value.B;
    }
}

　こうすることによって、Form から Color プロパティを介して色情報を取得することができます。

　色情報は取得できるようになりましたが、トラックバーを動かした時点でテキストの色を反映させたいので、作成したコントロールにイベントを追加できるようにします。コントロールのコードに以下のコードを追加します。

/// <summary>
/// 色の値が変化したときにイベントが発生します。
/// </summary>
public event EventHandler ColorChanged = null;

　本来は独自の EventHandler を定義して色情報をイベント引数で渡せるほうがいいのですが、説明の簡略化のために標準の EventHandler を使うことにします。

　さらに、トラックバーの値が変化したときに、登録されているイベントを発生させるようにコードを追加します。

/// <summary>
/// トラックバーの値が変更されたとき
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void trackBarR_ValueChanged(object sender, EventArgs e)
{
    // 各トラックバーの値から Color を作成
    Color color = Color.FromArgb(this.trackBarR.Value,
                                    this.trackBarG.Value,
                                    this.trackBarB.Value);

    // PictureBox に色をセット
    this.pictureBoxColor.BackColor = color;

    if (this.ColorChanged != null)
    {
        // イベントが登録されている場合は処理を行う
        this.ColorChanged(this, new EventArgs());
    }
}

※ColorTrackBar クラスの Color に値を設定した場合、値変更イベントが３回発生してしまうのですが、今回その対処は行いません。（サンプルでも set は使わないので）

イベントを取得する

　では、テスト用にテキストボックスを配置してテキストを入力しておきます。

　ColorTrackBar コントロールイベントを見てみると、先ほど追加したイベントが表示されていると思います。この項目をダブルクリックして Form にイベントを追加します。

※イベントの属性などをまだ設定していないので説明文がなく、カテゴリも「その他」になっています。

　イベントコードが追加されたら、テキストに色が反映されるように設定されるようにします。

/// <summary>
/// 色が変更されたとき
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void colorTrackBar1_ColorChanged(object sender, EventArgs e)
{
    // テキストボックスのテキストに色を設定する
    this.textBox1.ForeColor = this.colorTrackBar1.Color;
}

　では実際に実行してみましょう。色がテキストに反映されていたら成功です。

サンプルプロジェクト

2008-07-06_windows_mobile_createusercontrol.zip

アプリケーションを Windows Mobile にインストールするための CAB ファイルの作成方法

オノデラ — Sun, 29 Jun 2008 23:23:00 GMT

　Visual Studio で作成した Windows Mobile アプリケーションは CAB ファイルにパッケージすることができます。CAB ファイルを作成すれば、Windows Mobile 単独でインストールすることが可能になります。

CAB ファイルの作成

　まずは通常通りに Windows Mobile アプリケーションを作成し、完成させます。

　CAB ファイルを作成するには、専用のプロジェクトを作成する必要があります。

　ソリューションを右クリックして「追加」→「新しいプロジェクト」を選択します。

　プロジェクトの種類から「その他のプロジェクトの種類」から「セットアップの配置」を選択し、テンプレートから「スマートデバイス CAB プロジェクト」を選択します。

　プロジェクト名と場所は任意に設定してください。

　すると、プロジェクトが作成され、「ファイルシステム」というタブが表示されます。

　まずは「アプリケーションフォルダ」を右クリックして「追加」→「プロジェクト出力」を選択します。

　ダイアログが表示されたら、パッケージするアプリケーションのプロジェクトを上のコンボボックスから選択肢、リストから「プライマリ出力」を選択します。その後「OK」ボタンをクリックします。

　すると、アプリケーションフォルダに先ほど選択したプロジェクトが追加されます。

　このプロジェクトを右クリックして、「"プロジェクト名"のプライマリ出力へのショートカットを作成」を選択します。

　アプリケーションを実行するためのショートカットが作成されるので、アプリケーションの名前を入力しておきます。日本語を使用するとビルドエラーになってしまうので英数字のみで名前を付けてください。

　続いて「対象コンピュータ上のファイルシステム」を右クリックして「特別なフォルダの追加」→「プログラムフォルダ」を選択します。

　作成されたプログラムフォルダに、先ほどのショートカットをドラッグで移動させます。

　CAB プロジェクトを右クリックして「プロパティ」を選択します。

　プロパティページが開いたら、出力ファイル名に CAB ファイル名を設定します。これが配布する際の CAB ファイル名称になります。

　Debug と Release 両方に名前を設定してください。

　続いて先ほどのプロパティページとは別の、CAB プロジェクトのプロパティ設定を行います。

　主に設定する箇所は「Manufacture」と「ProductName」です。どちらも日本語を使用するとビルドエラーになってしまうので、英数字のみを使用してください。

　Manufacture には製造元の名前を入力します。

　ProductName にはアプリケーションの名前を入力して下さい。

　以上で設定は終わりです。バッチビルドなどを使用して Release 版のパッケージを作成して下さい。

　作成した CAB ファイルは「プロジェクトフォルダ\Release」にあります。このファイルを配布してください。

CAB ファイルのインストール方法

　CAB ファイルのインストールは別項目なのですが、念のために書いておきます。まず、Windows Mobile 機を PC に接続します。ActiveSync か、Windows Mobile センターで接続できるようにしますが、ここでは Windows Vista で Windows Mobile センターで接続済みを前提として説明します。

　Windows のマイコンピューターから Windows Mobile のフォルダを開き、My Documents 内に CAB ファイルをコピーします。

　あとは、Windows Mobile のほうでその CAB ファイルを選択すると、アプリケーションがインストールされます。プログラムの一覧を見てみるとアプリケーションがインストールされていることがわかります。

Windows Mobile エミュレーターでインターネットに接続するには (修正版)

おのでら — Sun, 29 Jun 2008 21:30:00 GMT

　修正前：Windows Mobile エミュレーターでインターネットに接続するには

　前回 Windows Mobile エミュレーターでインターネットに接続できる方法を書きましたが、どうやらいろいろ設定をいじくった後だったか、環境がセットアップ済みだったこともあり、設定すべき項目が抜けている部分がありました。なので修正版としてもう一度書き直してみたいと思います。

Virtual PC 2007 のインストール

　実は Virtual PC が必要なのではなく、「Virtual Machine Network Driver for Microsoft Device Emulator」が必要なのですが、Virtual PC 2007 をインストールしたほうが何かとてっとり早いのでこれをインストールします。Virtual PC 2007 はこちらからダウンロードできます。ダウンロードしたらインストールしてください。

　ちなみに Virtual PC は起動する必要はありません。

エミュレータの設定

　Visual Studio からプログラムを実行したり、デバイスの接続を行うとエミュレータが表示されます。まずはエミュレータ本体の設定を行う必要があります。

　エミュレータのメニューから「ファイル」→「構成」と選択します。

　エミュレータのプロパティが開くので、「ネットワーク」タブを選択し、「NE2000 PCMCIA ネットワークアダプタを有効にし、次の項目にバインドする」にチェックを入れます。

　下のネットワークカードについては、既存のもので構いませんが、「接続されたネットワークカード」を選択すれば自動的に設定されます。

　設定が終わったら「OK」ボタンをクリックします。

　次にメニューから「ファイル」→「リセット」→「ハード」を選択し、ハードリセットを行います。これを行うとエミュレータ内のいくつかの設定はもとに戻ってしまうので注意してください。

　画面が真っ暗になり、しばらくしてからトップ画面に戻ればリセット完了です。

OSのネットワーク設定

　続いて Windows Mobile の OS の設定を行います。左上にあるスタートボタンをクリックして「設定」メニューを選択します。

　設定画面が開いたら、下のタブから「接続」を選択し、「接続」の項目を選択します。

　設定画面が開いたら「詳細設定」タブを選択し、「ネットワークの選択」ボタンをクリックします。

　「インターネットに自動的に接続するプログラムの接続方法」から「既定の社内ネットワーク設定」を選択して「編集…」ボタンをクリックします。

　タブから「プロキシの設定」を選択し、「このネットワークをインターネットに接続する」にチェックを入れます。あとは「ok」ボタンを押して確定していきます。

　Internet Explorer 等で Web ページが開けるか確認し、接続できれば完了です。

USTREAM でデスクトップの映像を配信しよう(6)

オノデラ — Sun, 29 Jun 2008 16:30:00 GMT

　ManyCam を使えば PC ゲームのプレイ映像を表示させることができます。しかし、PC のゲームには「ウインドウモード」と「フルスクリーンモード」があり、ウインドウモードの場合はそのまま画面をキャプチャできますが、フルスクリーンモードの場合はひと工夫必要です。また、ここでは Windows Vista で試しているので、他の OS ではうまくいくかは保証できません。

ウインドウモードのゲームをキャプチャ

　ウインドウモードの場合は特に設定を必要なしに映像とサウンドを配信することができます。

　しかし、デスクトップ全体を配信してはよく見えないし、面白みに欠けてしまいます。

　ManyCam では特定の領域を配信する機能があるのでそれを使いましょう。

　ManyCam のオプション画面を表示したら、「Sources」タブ、「Desktop」メニューを選択し、「Custom destop」をクリックします。

　すると、画面の左上に半透明のウインドウが表示されます。これが、ManyCam で配信できるエリアになります。

　このウインドウはドラッグできたりサイズを変更できたりするので、ゲームの画面の上に合わせて乗せましょう。

　大体あったら、左上にある「Close」ボタンを押すことによってセットすることができます。

　実際にチャンネルページを見てみるとゲームの映像がきちんと配信されていることがわかると思います。

フルスクリーンモードのゲームをキャプチャ

　映像を配信するのであれば、ウインドウモードで大丈夫なのですが、プレイヤー自身がフルスクリーンでゲームをしたいことも多いですし、そもそもフルスクリーンにしか対応していないゲームもあります。フルスクリーンで動作しているゲームを配信するにはちょっとコツが要ります。

　まずフルスクリーンでゲームが起動すると、画面の解像度が変更されます。一般的には「320x240」「640x480」「800x600」「1024x768」のサイズに変更されます。これはゲームによって変わるので事前に調べておいてください。

　フルスクリーンモードで起動されたゲームも実際はウインドウの一つです。そのウインドウはディスプレイの左上に配置されるので、ゲームを起動する前にあらかじめ ManyCam でその領域だけをキャプチャしておけば配信できるということになります。

　こんな感じでセットしてみてください。領域のサイズが表示されないので、ペイントのソフトなどを起動してサイズを任意に作成し、そこに領域を合わせてから配置するなど、何らかの方法で合わせてください。

　あとは普通にゲームを起動してプレイするだけです。もちろんゲーム中はビデオの調整などはできないので事前に配信のセットアップは行ってください。

USTREAM でデスクトップの映像を配信しよう(5)

オノデラ — Sun, 29 Jun 2008 15:52:00 GMT

　ManyCam によってデスクトップ映像の配信は出来ましたが、そのままでは音声を流すことができません。ここでは Windows Vista を使って説明しており、また、私の環境で動作させた例なので、他の OS や環境では操作が異なったり、うまく動作しないこともあるかもしれません。

　ちなみに特別な機材とかは用意せず、PC の標準機能で音声を流すようにしました。

　通知領域にある「音量」アイコンを右クリックして「録音デバイス」を選択します。

　サウンドダイアログが表示されたら、「録音」タブが選択されているか確認してください。

　中央のリストから項目のない部分を右クリックして「無効なデバイスの表示」を選択します。

　無効なデバイスが一覧に表示されます。

　「ステレオミキサー」を右クリックして、メニューから「有効」を選択します。

　ステレオミキサーが有効になります。

　USTREAM の Broadcast のページを開くと、「Aduio Broadcast」が設定できるようになっています。音量やクオリティーを適度に設定すれば、デスクトップ上で再生している音声も配信できるようになります。

USTREAM でデスクトップの映像を配信しよう(4)

オノデラ — Sun, 29 Jun 2008 15:22:00 GMT

　ManyCam ではエフェクトをかけて映像を配信できるので、その中で使う頻度が多そうなものを紹介していきます。

テキストの表示

　左のメニューから「Text over video」をクリックすると、映像にテキストを表示することができます。

　テキストボックスにテキストを入力すると、映像の下あたりにテキストが表示されます。文字のフォントや背景色は、右の「Text」「Background」の項目で設定することができます。

時計の表示

　メニューの「Time」を選択すると、画面の左上に時計を表示することができます。

　下の時計から好きな色、12h または 24h で選択してください。

手描きの絵を表示する

　メニューから「Drawing over vide」を選択すると、画面に直接ペンやブラシを使って文字や絵を描くことができます。

　下の項目でペンやブラシ、塗りつぶし、消しゴムを選択できます。また、ブラシの太さや、色を選択することもできます。

　使うツールを選択したら、上のビュー上にマウスでドラッグして直接描くことができます。

エフェクトの削除

　各エフェクトを削除するには、右上にある「Selected effects」から各エフェクトの「×」ボタンを押して削除することができます。

USTREAM でデスクトップの映像を配信しよう(3)

オノデラ — Sun, 29 Jun 2008 14:53:00 GMT

　ManyCam を使って実際にデスクトップの映像を配信してみましょう。

　スタートメニューから「ManyCam」を選択して起動します。すでに起動済みの場合はエラーダイアログが表示されますので、OK ボタンをクリックして閉じてください。

　起動直後はウインドウが表示されるわけではなく、通知領域にアイコンが表示されます。

　アイコンをダブルクリックすると、ManyCam のオプション画面が表示されます。

　いろいろ設定できる項目はありますが、とりあえずは配信できるようにしたいので他の項目は別途使ってみてください。

　まずは上のタブの「Sources」をクリックします。

　Sources のタブを選択したら、左のメニューから「Desktop」をクリックします。すると、表示が右側のようになります。

　次に「Full desktop」をクリックしてみてください。ビューにデスクトップの画面が表示されると思います。実はもうこれだけでデスクトップの映像が配信可能状態になっています。（まだ Web 上での設定を行っていないのでまだ配信はされていません）

　画質が少し悪いので、必要であれば「Improved Quality」にチェックを入れてみてください。

　続いて Web ブラウザで USTREAM のページに移動し、ログイン後「My Shows」をクリックします。

　My Shows のページを開いたら、「BROADCAST NOW」のリンクをクリックします。

　新しいウインドウが開き、BROADCAST のページが開きます。Adobe Flash Player がカメラとマイクへのアクセス要求をしてくるので「許可」を選択します。

　アクセスの許可をすると右のような画面になります。デスクトップの画面が表示されているので、すでに配信されているのかと思ってしまいますが、これはあくまでもカメラから取得している映像を表示しているだけなのでまだ配信はされていません。

　まずは画面下の「Video Broadcast」にチェックが付いているか、「Video Source」で「ManyCam Virtua Webcam」が選択されているか確認してください。

　画面中央にある「START BROADCAST」ボタンをクリックすることによって、実際に作成したチャンネルのページに映像が配信されるようになります。

　実際にクリックするとボタンが赤くなり「STOP BROADCAST」という文字に変わります。このボタンを再度押すと配信が停止します。

　配信状態にし、チャンネルページに移動すると映像が配信されていることがわかります(配信してから表示されるまでは少し時間がかかります)。これでだれでも配信した映像を見れるようになります。

USTREAM でデスクトップの映像を配信しよう(2)

オノデラ — Sun, 29 Jun 2008 13:42:00 GMT

　ManyCam は Web カメラからの映像に対してエフェクトをかけたり、デスクトップの映像を配信することができるソフトです。Windows 2000/XP/2003/Vista に導入することができます。

　まずは ManyCam (http://www.manycam.com/) のホームページに移動します。

　「Download ManyCam, It's FREE!」のリンクをクリックします。

　「Download」ボタンをクリックして ManyCam をダウンロードします。

　ダウンロードしたファイルを実行します。Windows Vista の場合は管理者権限で実行してください。

　右のようなウインドウが表示されたら「Next」ボタンをクリックします。

　ライセンスに同意したら「I accept the terms in the License Agreement」にチェックを入れ、「Next」ボタンをクリックします。

　「クイックランチショートカット」「デスクトップアイコン」「OS起動時に ManyCam を起動するか」を任意にチェックし、「Next」ボタンをクリックします。

　常に ManyCam を使うわけではないのであれば。チェックは全部はずしてもかまいません。

　インストール先を指定します。通常はそのままで構いません。指定したら「Next」ボタンをクリックします。

　「Next」ボタンをクリックします。

　uPlayme をインストールするか指定します。今回の配信では使用しないのでいらなければチェックを外してください。

　「Next」ボタンをクリックするとインストールが開始されます。

　インストールすると右のような画面になります。すぐに ManyCam を起動する場合は「Run ManyCam 2.2」にチェックを入れてください。その後「Finish」ボタンをクリックして完了です。