ทําให้สไปรท์ปรากฏ
สรุป
โหลดพื้นผิว (รูปภาพ) และแสดงบนหน้าจอ
สภาพแวดล้อมในการทํางาน
ข้อกําหนดเบื้องต้น
รุ่น XNA ที่รองรับ |
|
แพลตฟอร์มที่รองรับ |
|
Windows ต้องใช้เวอร์ชัน Vertex Shader | 2.0 |
เวอร์ชัน Pixel Shader ที่จําเป็นของ Windows | 2.0 |
สภาพแวดล้อมในการทํางาน
แท่น |
|
สาร
สไปรท์คืออะไร?
พื้นที่สี่เหลี่ยมผืนผ้าสําหรับวาดภาพบนหน้าจอ คุณลักษณะนี้มักใช้ในเกม 2 มิติ แต่ก็มักใช้ใน 3 มิติเป็นการวาดภาพ 2 มิติหลอก
ใน XNA ทุกอย่างจะต้องวาดเป็นรูปหลายเหลี่ยม 3 มิติ ดังนั้นภาพที่คุณวาดบนหน้าจอจึงเป็นสไปรท์หลอกโดยใช้รูปหลายเหลี่ยม อย่างไรก็ตาม ไม่จําเป็นต้องระวังรูปหลายเหลี่ยม และคุณสามารถวาดได้อย่างง่ายดาย
การเตรียมภาพ
เนื่องจากภาพถูกแสดง จึงต้องเตรียมไฟล์ภาพ ในตัวอย่างจะใช้ภาพด้านล่าง
ฉันใช้ไฟล์ PNG ที่มีขนาด 128×128 แต่สามารถเป็นขนาดใดก็ได้ นอกจากนี้รูปแบบของไฟล์รูปภาพที่สามารถอ่านได้คือไฟล์ต่อไปนี้โดยค่าเริ่มต้น
- .bmp
- .dds
- .ดิบ
- .hdr
- .jpg
- .พีเอฟเอ็ม
- .png
- .ppm
- .ทีจีเอ
เพิ่มรูปภาพลงในโปรเจ็กต์ของคุณ
ในตัวอย่าง ไฟล์รูปภาพจะถูกใส่ในโปรเจ็กต์ "เนื้อหา" โปรดดูหน้าต่อไปนี้สําหรับรายละเอียดเกี่ยวกับวิธีการเพิ่มไฟล์รูปภาพลงในโปรเจ็กต์ของคุณ
สนาม
<summary>
スプライトのバッチ化クラス
</summary>
private SpriteBatch spriteBatch = null;
<summary>
テクスチャー
</summary>
private Texture2D texture = null;
ในการวาดสไปรต์ ให้เตรียม "SpriteBatch" เพื่อแบทช์สไปรต์ที่จะวาด และ "Texture2D" เพื่อจัดเก็บข้อมูลภาพ 2 มิติ
การสร้างและการโหลดทรัพยากร
<summary>
ゲームが始まるときに一回だけ呼ばれ
すべてのゲームコンテンツを読み込みます
</summary>
protected override void LoadContent()
{
// テクスチャーを描画するためのスプライトバッチクラスを作成します
this.spriteBatch = new SpriteBatch(this.GraphicsDevice);
// テクスチャーをコンテンツパイプラインから読み込む
this.texture = this.Content.Load<Texture2D>("Texture");
}
ภายในเมธอด LoadGraphicsContent ให้สร้างคลาส SpriteBatch ส่ง GraphicsDevice เป็นอาร์กิวเมนต์
จากนั้นวิธีการ ContentManager.Load จะถูกใช้เพื่อโหลดและสร้างพื้นผิว ระบุคลาส "Texture2D" สําหรับพารามิเตอร์ type และชื่อเนื้อหาสําหรับอาร์กิวเมนต์
SpriteBatch
ผู้สร้าง
สร้างอินสแตนซ์ของคลาส "SpriteBatch" ที่แบทช์การวาดสไปรต์
กราฟิกอุปกรณ์ | กราฟิกอุปกรณ์ | ระบุ GraphicsDevice ที่จะใช้สําหรับการวาดภาพ |
รูปภาพ
// スプライトの描画準備
this.spriteBatch.Begin();
// スプライトを描画する
this.spriteBatch.Draw(this.texture, Vector2.Zero, Color.White);
// スプライトの一括描画
this.spriteBatch.End();
วาดข้อความในเมธอดวาด
ในการวาดสไปรต์ ให้ใช้เมธอด "SpriteBatch.Draw" แต่คุณต้องเรียกใช้เมธอด "SpriteBatch.Begin" และ "SpriteBatch.End" ตามลําดับ ก่อนและหลังการวาด
อาร์กิวเมนต์แรกของเมธอด SpriteBatch.Draw คือคลาส "Texture2D" ที่คุณสร้างขึ้น วิธีนี้จะช่วยให้คุณดูไฟล์ภาพที่นําเข้าได้
SpriteBatch.Begin
วิธี
เรียกมันก่อนวาดสไปรท์ ภายในเรากําลังทําการตั้งค่าที่จําเป็นสําหรับการวาดสไปรต์
SpriteBatch.Draw
วิธี
เพิ่มสไปรต์ลงในรายการชุดการวาดสไปรท์
เนื้อ | พื้นผิว 2D | ระบุพื้นผิวที่จะแสดงเป็นสไปรท์ |
ฐานะ | เวกเตอร์ 2 | ตําแหน่งที่ควรแสดงสไปรท์ ระบุพิกัดหน้าจอที่สัมพันธ์กับด้านบนซ้ายของหน้าจอ ต้นกําเนิดของสไปรท์จะอยู่ที่ตําแหน่งซ้ายบน |
สี | สี | ระบุสีที่จะคูณสีของสไปรท์ หากคุณระบุ Color.White จะแสดงเป็นสีหลักของสไปรท์ หากระบุ Color.Black สไปรท์จะแสดงเป็นสีดําเต็มรูปแบบโดยไม่คํานึงถึงสีของมัน สูตรคือ "ผลลัพธ์ = สีสไปรท์ * สี" |
SpriteBatch.End
วิธี
วาดสไปรต์เป็นชุดทั้งหมด ลําดับการวาด สถานะการวาด และอื่นๆ ถูกระบุไว้ในเมธอด SpriteBatch.Begin หากจําเป็น สถานะการแสดงผลจะถูกส่งกลับไปยังสถานะก่อนที่วิธีการ SpriteBatch.Begin จะถูกเรียก
ไม่มีปัญหากับจอแสดงผลที่ใช้บนคอมพิวเตอร์ ฯลฯ แต่เมื่อส่งออกจาก Xbox 360 ไปยังทีวีแอนะล็อก คุณอาจไม่เห็นสไปรท์ที่แสดงที่ด้านซ้ายบน ในกรณีนี้ คุณต้องปรับตําแหน่งการแสดงของสไปรท์ แต่จะอธิบายในส่วนอื่น
รหัสทั้งหมด
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
#if WINDOWS_PHONE
using Microsoft.Xna.Framework.Input.Touch;
#endif
namespace DrawSprite
{
<summary>
ゲームメインクラス
</summary>
public class GameMain : Microsoft.Xna.Framework.Game
{
<summary>
グラフィックデバイス管理クラス
</summary>
private GraphicsDeviceManager graphics = null;
<summary>
スプライトのバッチ化クラス
</summary>
private SpriteBatch spriteBatch = null;
<summary>
テクスチャー
</summary>
private Texture2D texture = null;
<summary>
GameMain コンストラクタ
</summary>
public GameMain()
{
// グラフィックデバイス管理クラスの作成
this.graphics = new GraphicsDeviceManager(this);
// ゲームコンテンツのルートディレクトリを設定
this.Content.RootDirectory = "Content";
#if WINDOWS_PHONE
// Windows Phone のデフォルトのフレームレートは 30 FPS
this.TargetElapsedTime = TimeSpan.FromTicks(333333);
// バックバッファサイズの設定
this.graphics.PreferredBackBufferWidth = 480;
this.graphics.PreferredBackBufferHeight = 800;
// フルスクリーン表示
this.graphics.IsFullScreen = true;
#endif
}
<summary>
ゲームが始まる前の初期化処理を行うメソッド
グラフィック以外のデータの読み込み、コンポーネントの初期化を行う
</summary>
protected override void Initialize()
{
// TODO: ここに初期化ロジックを書いてください
// コンポーネントの初期化などを行います
base.Initialize();
}
<summary>
ゲームが始まるときに一回だけ呼ばれ
すべてのゲームコンテンツを読み込みます
</summary>
protected override void LoadContent()
{
// テクスチャーを描画するためのスプライトバッチクラスを作成します
this.spriteBatch = new SpriteBatch(this.GraphicsDevice);
// テクスチャーをコンテンツパイプラインから読み込む
this.texture = this.Content.Load<Texture2D>("Texture");
}
<summary>
ゲームが終了するときに一回だけ呼ばれ
すべてのゲームコンテンツをアンロードします
</summary>
protected override void UnloadContent()
{
// TODO: ContentManager で管理されていないコンテンツを
// ここでアンロードしてください
}
<summary>
描画以外のデータ更新等の処理を行うメソッド
主に入力処理、衝突判定などの物理計算、オーディオの再生など
</summary>
<param name="gameTime">このメソッドが呼ばれたときのゲーム時間</param>
protected override void Update(GameTime gameTime)
{
// Xbox 360 コントローラ、Windows Phone の BACK ボタンを押したときに
// ゲームを終了させます
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
{
this.Exit();
}
// TODO: ここに更新処理を記述してください
// 登録された GameComponent を更新する
base.Update(gameTime);
}
<summary>
描画処理を行うメソッド
</summary>
<param name="gameTime">このメソッドが呼ばれたときのゲーム時間</param>
protected override void Draw(GameTime gameTime)
{
// 画面を指定した色でクリアします
this.GraphicsDevice.Clear(Color.CornflowerBlue);
// スプライトの描画準備
this.spriteBatch.Begin();
// スプライトを描画する
this.spriteBatch.Draw(this.texture, Vector2.Zero, Color.White);
// スプライトの一括描画
this.spriteBatch.End();
// 登録された DrawableGameComponent を描画する
base.Draw(gameTime);
}
}
}