オノデラの研究日記 in わんくま

思いついたネタを気ままに書いていくブログ

ホーム 連絡をする 同期する ( RSS 2.0 ) Login
投稿数  209  : 記事  5  : コメント  5961  : トラックバック  40

ニュース

プロフィール

  • ●おのでら
    宮城県在住
    主に業務向けソフトを製作

Twitter

ニュース

主なリンク

XNA 関連リンク

アイテム

ゲーマーカード

その他

記事カテゴリ

書庫

日記カテゴリ

● 今回のサンプル

2Dスプライトの描画

● スプライトとは

 画像をスクリーン上に描画するための矩形領域です。2Dゲームではこの機能がよく使われていますが、3Dでも擬似的に2D画像描画として使用されることが多いです。

 XNA ではすべて3Dポリゴンで描画しないといけないため、スクリーン上に描画する画像は基本的に擬似スプライトになります。といってもポリゴンを作るような感覚は無く、手軽に描画させることできます。


● フィールド

/// <SUMMARY>
/// スプライトバッチ
/// </SUMMARY>
SpriteBatch sprite = null;

/// <SUMMARY>
/// テクスチャー
/// </SUMMARY>
Texture2D texture = null;

 スプライトを描画するには、描画するスプライトをバッチ化する「SpriteBatch」と、2次元画像データを格納する「Texture2D」を用意します。


● 画像の準備

 スプライトの描画には画像が必要なので、今回は下のような画像を用意しました。ファイル名は「Wankuma.bmp」です。(下の画像は JPEG ファイルです。実際のサンプルデータには「SAMPLE」の文字は入っておりません(^^)

 

 このファイルをソリューションにドラッグ&ドロップして追加してください。(メニュー等から追加してもいいです)

 


● グラフィクスコンテンツの作成コード

LoadGraphicsContent メソッドは下のようになります。

/// <SUMMARY>
/// グラフィクスコンテンツの読み込み処理を行う
/// </SUMMARY>
/// <PARAM NAME="LOADALLCONTENT">全コンテンツ読み込みフラグ
protected override void LoadGraphicsContent(bool loadAllContent)
{
    if (loadAllContent)
    {
        // TODO: 自動管理リソースの読み込みをここに書きます

        // スプライトバッチ作成
        this.sprite = new SpriteBatch(this.graphics.GraphicsDevice);

        // スプライト用テクスチャーの読み込み
        this.texture = this.content.Load("Wankuma");
    }

    // TODO: 手動管理リソースの読み込みをここに書きます
}

● SpriteBatch の作成

this.sprite = new SpriteBatch(this.graphics.GraphicsDevice);

 SpriteBatch コンストラクタの第1引数に「GraphicsDevice」を指定します。


● Texture2D の作成

this.texture = this.content.Load("Wankuma");

 ContentManager クラスの「Load」メソッドを使用して画像データを読み込むことにより、ContentManager がそのリソースを管理してくれるようになります。こうすることによって、余分なリソースの作成を防いだり、最後にまとめてリソースを破棄してくれるようになります。

 ジェネリクス引数に「Texture2D」を指定すれば、テクスチャーのリソースを作成してそのインスタンスの参照を返してくれます。もしすでに同じリソースが作成されている場合は、その参照のみを返します。

 ContentManager.Load メソッドの第1引数には読み込むリソースの「アセット名」を指定します。アセット名は、基本的にはファイル名から拡張子を取った名前になっていますが、任意に変更することができます。例えば、プロジェクトから「Wankuma.bmp」を選択してプロパティを開くと、アセット名などが記述されていることが分かります。

コンテンツのプロパティ

 ちなみに XNA では、「コンテント パイプライン」という機能を利用して上記の処理を実現させています。詳しくは下のリンク先をご覧ください。


● 描画コード

/// <SUMMARY>
/// 描画処理を行うメソッド
/// </SUMMARY>
/// <PARAM NAME="GAMETIME">このメソッドが呼ばれた時点でのゲーム時間</PARAM>
protected override void Draw(GameTime gameTime)
{
    // 画面を指定した色でクリアします
    graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

    // TODO: ここに描画処理を記述します。

    // スプライトの描画は「Begin」「End」の間に記述する
    this.sprite.Begin();

    // スプライトの描画
    this.sprite.Draw(this.texture, Vector2.Zero, Color.White);

    this.sprite.End();

    base.Draw(gameTime);
}

 コメントに書いてある通りなのですが、スプライトを描画するときは「SpriteBatch.Begin メソッド」と「SpriteBatch.End メソッド」の間に記述する必要があります。これは、「SpriteBatch.Begin」メソッドで、スプライトの描画準備を行い、「SpriteBatch.Draw」メソッドで、描画するスプライトをバッチ化し、「SpriteBatch.End」メソッドでバッチ化したスプライトの一括描画とスプライトの描画設定を戻すという一連の処理を行っているためです。

 「SpriteBatch.Draw」では描画と書いていますが、実際にはバッチへの追加です。ただよくわからない人は普通に描画と思ってもかまいません。

 第1引数には、作成したテクスチャーを指定します。

 第2引数には、スクリーン座標での描画位置を指定します。スプライトの原点は矩形の左上になります。Windows アプリケーションでの画像描画でもおなじみでしょう。Vector2.Zero は X,Y ともに 0 を指定したことと同じになるので、この場合、スプライトはスクリーンの左上に描画されることになります。

 第3引数には、スプライトの色を指定します。最終的に出力される色は「テクスチャーの画素 × color 値」になるので、Color.White を指定すれば、テクスチャー画像の色をそのまま出力することになります。例えば、Color.Blue を指定すれば、青の要素のみの色を出力することが可能です。


 今回のサンプルプロジェクト一式です。

投稿日時 : 2007年1月20日 2:04

コメント

# cartier tank homme faux 2018/03/17 5:03 dexfvvghonnefsjwoqphu@hotmal.com
I googled it and couldn’t find anything. Have you tried looking in the source code?

Post Feedback

タイトル
名前
Url:
コメント