作者:Mike Fleishauer & clayman
本文版权归原作者所有,仅供个人学习使用,请勿转载,勿用于任何商业用途。
由于本人水平有限,难免出错,不清楚的地方请大家以原著为准。欢迎大家和我多多交流。
Blog:http://blog.csdn.net/soilwork
clayman_joe@yahoo.com.cn
special thanks to Mike Fleishauer ^_^
在第一章里,我们介绍了关于
XNA
的一些基础知识。但坦白的说,至今为止,我们还没有编写任何代码,而且只创建了一个单调的蓝色屏幕。
这一章,我们将尝试在屏幕上绘制一些东西,简单的
2D
图形。虽然
2D
游戏的时代已经渐渐远去,但即使你编写一个全
3D
的游戏,也不得不处理处理一些
2D
图形,比如简单的选项菜单、
HUD
(
head up displays
)等等。好了让我们开始把。
打开上一章创建的项目,当然,你也可以创建一个新
XNA
项目。把解决方案改名为“
Chapter2”,把工程和Game1.cs
都重命名为“
Sprite
”,当弹出确认更改文件名的对话框时,点击确认。
接下来,我们将在屏幕上绘制一张
2D
图片。但在这之前,需要介绍一点关于
Sprite
的概念。
什么是
Sprite
?
Sprite
,也称为精灵,是一个直接绘制到屏幕上的
2D
图形。在传统的
2D
游戏中,你所看到的一切几乎都是
sprite
。但在
3D
游戏中,比如
Halo
,
sprite
逐渐演变为了用于增加
3D
图形视觉效果的纹理。在讨论
3D
图形时我们会详细讲解它。现在,简单的把
sprite
认为是
2D
图形就可以了。
继续,我们将把一些外部资源添加到工程中,为了方便管理,统一把资源放到一个单独的文件夹中。在
Solution Explorer
邮件点击
Add->New Floder
,命名为
Graphics
。接下来,邮件点击新创建的文件夹
Add->Existion Item….
在弹出窗口中,导航到安装
MC2
源代码的目录下,在
/Source/Data/Art
中,选择
mcl_splashscreen_planet_2.tga.
文件。(当然,可以选择一张任何你喜欢的图片)。
接下来,编写代码:
namespace
Chapter2
{
partial class Sprites : Microsoft.Xna.Framework.Game
{
private Microsoft.Xna.Framework.Graphics.SpriteBatch _sb;
private Microsoft.Xna.Framework.Graphics.Texture2D _sprite;
public Sprites()
{
InitializeComponent();
_sb = new SpriteBatch(this.graphics.GraphicsDevice);
_sprite = Texture2D.FromFile(this.graphics.GraphicsDevice, "../../Graphics/mcl_splashscreen_planet_2.tga");
}
protected override void Update()
{
float elapsed = (float)ElapsedTime.TotalSeconds;
UpdateComponents();
}
protected override void Draw()
{
if
(!graphics.EnsureDevice())
return;
graphics.GraphicsDevice.Clear(Color.Black);
graphics.GraphicsDevice.BeginScene();
_sb.Begin();
_sb.Draw(_sprite, new Vector2(0.0f, 0.0f), Color.Red);
_sb.End();
DrawComponents();
graphics.GraphicsDevice.EndScene();
graphics.GraphicsDevice.Present();
}
}
}
(加粗部分为我们添加的代码)
这些代码是什么意思呢?
首先,我们为
Sprite
类添加了两个全新的成员:
private
Microsoft.Xna.Framework.Graphics.SpriteBatch _sb;
private
Microsoft.Xna.Framework.Graphics.Texture2D _sprite;
_sb
是一个SpriteBatch对象。SpriteBatch对象代表了一批sprite,并且将在同样的状态设置下,绘制他们。大多数情况下,几乎所有的sprite都在同一个批次中。
_sprite
实际上是一张2D的纹理。它代表了一张将要绘制到屏幕上的图片。我们稍后将讨论不同类型的纹理,现在,只需知道2D纹理储存了在X和Y方向上,每个像素的颜色信息。也可以就把Texture2D认为是一张图片。XNA直接支持jpg,tga,dds,bmp,png格式的文件作为纹理。
_sb = new SpriteBatch(this.graphics.GraphicsDevice);
使用GraphicsDevice对象作为参数,实例化SpriteBatch。这里,参数的含义表示以后将用哪一个(一个程序中可以有多个GraphicsDevice)GraphicsDevice对象绘制_sb。
_sprite = Texture2D.FromFile(this.graphics.GraphicsDevice, "../../Graphics/mcl_splashscreen_planet_2.tga");
这行代码把图片加载到内存中,实例化
Texture2D
对象。同样把当前的
graphics device
和图片的路径作为参数。如果在给定路径没有找到所要的图片,那么这个方法将抛出一个异常。
graphics.GraphicsDevice.Clear(Color.Black);
把屏幕清理为黑色。上一节已经介绍过如何使用这个方法。现在我会告诉你为什么需要调用这个方法。如果把渲染比作绘图,那么显存就是我们的画板,通常把用于绘图的显存称为帧缓冲,如何不清理帧缓冲,那么上次在帧缓冲中绘制的图形仍然会保留在其中,并且这些数据处于一种不确定的状态。假设我们下次只在屏幕的左上角绘制图形,那么显示时,除了进行绘制的区域,其他部分可能会显示一些随机数据,相当于我们在一块绘制了大量图形的旧画板上绘图。因此,需要用
Clear
方法对帧缓冲进行初始化,填充为某个我们希望的背景颜色。
_sb.Begin();
_sb.Draw(_sprite, new Vector2(0.0f, 0.0f), Color.Red);
_sb.End();
和之前提到的
BeginScenne
和
EndScene
一样,
_sb.Begin
和
_sb.End
方法告诉图形设备我们将要绘制
sprite
,所有绘制
sprite
的代码都必须在这两个方法之间。
Draw
方法是真正绘制图形的地方。这里的参数告诉显卡从坐标位置为(
0
,
0
)的地方开始绘制
sprite
。注意,绘制
sprite
的,所使用的是屏幕坐标系,这意味着屏幕中的每个像素对应一个(
x
,
y
)
,
屏幕左上角的坐标总是(
0
,
0
),而右下的坐标则取决于屏幕分辨率,如果分辨率为
1024 x 768
那么右下的坐标就是(
1024
,
768
)。绘制
sprite
的位置应该在这两个坐标之间。
运行程序看看吧:
虽然依旧很单调,但总是有了进步。
这里你可能会有一些问题:为什么原来蓝色的天空,现在“燃烧”了起来。
注意看绘制
sprite
的代码,最后一个参数表示了绘制
sprite
时的色调。如果我们把它改为
Color.White
那么将获得和原图一样的效果。你看,使用
XNA
轻易就能实现一些特效。
再绘制几个
sprite
现在我们有
4
个相同大小的
sprite
了。你已经掌握了
2D
绘图的基础,足够完成一个
2D
游戏的背景渲染。再次提醒,所有的
2D
绘图操作都因该在
Begin()
和
End()
方法之间,而
SpriteBatch
方法调用又必须在
BeginScene()
和
EndScene()
方法之间。简单的说,应该按照以下顺序:
--
开始渲染
3D
图形
l
渲染
3D
场景
l
开始渲染
2D
图形
n
渲染
2D
图片
l
结束
2D
渲染
--
结束
3D
渲染
需要记住,
2D
图形的渲染和绘制他们的顺序有关系。在叠加区域,先渲染的图形总是会被后渲染的图形挡住,和在普通画布上绘图的原理一样。这也带领我们进入下一个话题,透明。
Transparent Blits
首先,如果你要问我
Blits
是什么含意,那么我要告诉你,实际上你不必知道它是什么意思
=.=
。
Blit
的含义来自于
BLT
,表示
Block Transfer
,意思是把一个平面的一部分复制到另一个平面。好了,关键的问题就在于我们如何把图片中,不透明的部分复制到已有图片上。
为了渲染一个带透明效果的
sprite
,先来做一些辅助工作。首先,打开
windows
中的绘图板,任意绘制一个图形:
哈哈,我绘制图形的能力确实很惊人,不是吗
^_^
。接下来,再创建一张同样大小的图片。上一张图片是我们希望显示的部分,而现在这张图片则作为它的透明遮罩:
一般情况下,遮罩里白色部分是不透明的,而黑色部分则表示透明区域。把两张图片分别保存为
uglyStar.jpg
和
uglyStarMask.jpg
。为了方便使用,把他们都添加到
Grahics
文件夹中。
现在打开
DirectX SDK
中的
DxTex.exe
程序(它位于
sdk
安装路径的
Utilities/Bin/x86
件夹下)。选择
File->New Texture…
,在弹出的窗口中,把纹理尺寸设置为
32x32
,把
Surface/Volume
格式设置为
Unsigned 32-bit: A8R8G8B8
,如图所示:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/soilwork/txt1%20copy.jpg)
选择“
Open onto this surface”,
打开我们之前创建的红色星星
uglyStar.jpg
![](https://p-blog.csdn.net/images/p_blog_csdn_net/soilwork/txt2%20copy.jpg)
选择“
Open onto Alpha Channel of this Surface”
,打开
uglyStarMask.jpg
![](https://p-blog.csdn.net/images/p_blog_csdn_net/soilwork/txt3%20copy.jpg)
最后把文件保存为
star.dds
,并添加到
Graphics
文件夹。
好了,现在有了一张带透明通道的图片,如何使用他呢。把它绘制到之前的天空上吧。添加如下代码:
………………….
private
Microsoft.Xna.Framework.Graphics.Texture2D _spriteStar;
…………………
.
public
Sprites()
{
………………………
_spriteStar = Texture2D.FromFile(graphics.GraphicsDevice, "../../Graphics/star.dds");
}
protected
override void Draw()
{
……………
..
graphics.GraphicsDevice.BeginScene();
_sb.Begin(SpriteBlendMode.AlphaBlend);
_sb.Draw(_sprite, new Vector2(0.0f, 0.0f), Color.White);
_sb.Draw(_sprite, new Vector2(_sprite.Width, 0.0f), Color.White);
_sb.Draw(_sprite, new Vector2(_sprite.Width, _sprite.Height), Color.White);
_sb.Draw(_sprite, new Vector2(0.0f, _sprite.Height), Color.White);
_sb.Draw(_spriteStar, new Vector2(50.0f, 50.0f), Color.Yellow);
_sb.End();
……………………………
}
运行程序,你因该可以看到下图所示的结果
:
注意到我们只显示了红色的部分没有?这都是透明遮罩的功劳。简要来说,你使用
DirectX
纹理工具,告诉了图片哪些部分需要渲染,哪些部分是透明的,注意这里使用了
dds
格式的文件,而不是
bmp
格式。
你因该对这行代码比较感兴趣:
_sb.Begin(SpriteBlendMode.AlphaBlend);
使用
AlphaBlend
作为
SpriteBlendMode
参数,会告诉
XNA
将要渲染一些带透明效果的图片。还记得我先前说过“
大多数情况下,几乎所有的sprite都在同一个批次中”吗,好吧,我撒谎了-_-b。Alpha混合通常需要进行额外的计算,因此,应该把需要进行Alpha混合的sprite单独作为一个批次。一个批次用来绘制(静态)背景图片,另一个用来绘制带透明效果的前景物品。作为一条规则,你应该总是把需要alpha混合的sprite作为一个批次:
using
System;
using
System.Collections.Generic;
using
Microsoft.Xna.Framework;
using
Microsoft.Xna.Framework.Audio;
using
Microsoft.Xna.Framework.Components;
using
Microsoft.Xna.Framework.Graphics;
using
Microsoft.Xna.Framework.Input;
using
Microsoft.Xna.Framework.Storage;
namespace
Chapter2
{
partial class Sprites : Microsoft.Xna.Framework.Game
{
private Microsoft.Xna.Framework.Graphics.SpriteBatch _sbBackground;
private Microsoft.Xna.Framework.Graphics.SpriteBatch _sbForeground;
private Microsoft.Xna.Framework.Graphics.Texture2D _sprite;
private Microsoft.Xna.Framework.Graphics.Texture2D _spriteStar;
public Sprites()
{
this.AllowUserResizing = true;
this.IsMouseVisible = true;
InitializeComponent();
_sbBackground = new SpriteBatch(this.graphics.GraphicsDevice);
_sbForeground = new SpriteBatch(this.graphics.GraphicsDevice);
_sprite = Texture2D.FromFile(this.graphics.GraphicsDevice, "../../Graphics/mcl_splashscreen_planet_2.tga");
_spriteStar = Texture2D.FromFile(graphics.GraphicsDevice, "../../Graphics/star.dds");
}
protected override void Update()
{
float elapsed = (float)ElapsedTime.TotalSeconds;
UpdateComponents();
}
protected override void Draw()
{
if (!graphics.EnsureDevice())
return;
graphics.GraphicsDevice.Clear(Color.Black);
graphics.GraphicsDevice.BeginScene();
_sbBackground.Begin();
_sbBackground.Draw(_sprite, new Vector2(0.0f, 0.0f), Color.White);
_sbBackground.Draw(_sprite, new Vector2(_sprite.Width, 0.0f), Color.White);
_sbBackground.Draw(_sprite, new Vector2(_sprite.Width, _sprite.Height), Color.White);
_sbBackground.Draw(_sprite, new Vector2(0.0f, _sprite.Height), Color.White);
_sbBackground.End();
_sbForeground.Begin(SpriteBlendMode.AlphaBlend);
_sbForeground.Draw(_spriteStar, new Vector2(50.0f, 50.0f), Color.White);
_sbForeground.End();
DrawComponents();
graphics.GraphicsDevice.EndScene();
graphics.GraphicsDevice.Present();
}
}
}
好了,第二部分到次结束,下一章,我们将让
sprite
动起来~~。