XNA之RPG游戏开发教程之八

在前一节中，我们创建了一个新的控件LeftRightSelector，主要是用来对角色进行选取，但是该控件并没有发挥其作用。本节中将添加PictureBox控件，在筛选角色信息同时，角色图片也相应改变，并且根据选取的角色来在GamePlayScreen页面上呈现;

首先在CharacterGeneratorScreen类中添加PictureBox控件和TextTure数组对象，并响应LeftRightSelector的SelctionChanged事件，实现代码如下

PictureBox characterImage;//添加的类级变量,PictureBox对象，用来呈现图片对象
Texture2D[,] characterImages;//图片对象数组
protected override void LoadContent()
{
 base.LoadContent();
 LoadImages();//加载图片信息
 CreateControls();
}
private void CreateControls()
{
 Texture2D leftTexture = Game.Content.Load<Texture2D>(@"GUI\leftarrowUp");
 Texture2D rightTexture = Game.Content.Load<Texture2D>(@"GUI\rightarrowUp");
 Texture2D stopTexture = Game.Content.Load<Texture2D>(@"GUI\StopBar");
 backgroundImage = new PictureBox(
 Game.Content.Load<Texture2D>(@"Backgrounds\titlescreen"),
 GameRef.ScreenRectangle);
 ControlManager.Add(backgroundImage);
 Label label1 = new Label();
 label1.Text = "Who will search for the Eyes of the Dragon?";
 label1.Size = label1.SpriteFont.MeasureString(label1.Text);
 label1.Position = new Vector2((GameRef.Window.ClientBounds.Width - label1.Size.X) / 2, 150);
 ControlManager.Add(label1);
 genderSelector = new LeftRightSelector(leftTexture, rightTexture, stopTexture);
 genderSelector.SetItems(genderItems, 125);
 genderSelector.Position = new Vector2(label1.Position.X, 200);
 genderSelector.SelectionChanged += new EventHandler(selectionChanged);
 ControlManager.Add(genderSelector);
 classSelector = new LeftRightSelector(leftTexture, rightTexture, stopTexture);
 classSelector.SetItems(classItems, 125);
 classSelector.Position = new Vector2(label1.Position.X, 250);
 classSelector.SelectionChanged += selectionChanged;
 ControlManager.Add(classSelector);
 LinkLabel linkLabel1 = new LinkLabel();
 linkLabel1.Text = "Accept this character.";
 linkLabel1.Position = new Vector2(label1.Position.X, 300);
 linkLabel1.Selected += new EventHandler(linkLabel1_Selected);
 ControlManager.Add(linkLabel1);
//以下是添加的代码
 characterImage = new PictureBox(
 characterImages[0, 0], 
 new Rectangle(500, 200, 96, 96), 
 new Rectangle(0, 0, 32, 32));
 ControlManager.Add(characterImage);//初始化角色图片框并加入到管理类中
 ControlManager.NextControl();
}
private void LoadImages()
{
 characterImages = new Texture2D[genderItems.Length, classItems.Length];//角色信息分为性别和类型，根据这两个因素将图片存储为一个图片组
for (int i = 0; i < genderItems.Length; i++)
 {
for (int j = 0; j < classItems.Length; j++)
 {
 characterImages[i, j] = Game.Content.Load<Texture2D>(@"PlayerSprites\" +
 genderItems[i] + classItems[j]);//根据选择来加载图片
 }
 }
}
//selectionChanged事件的响应函数
void selectionChanged(object sender, EventArgs e)
{
 characterImage.Image = characterImages[genderSelector.SelectedIndex,
 classSelector.SelectedIndex];
}

接下来就是将玩家选择的角色呈现在GamePlayScreen游戏页面上,这就需要CharacterGeneratorScreen类中提供角色选择信息的接口,代码如下

public string SelectedGender//返回角色的性别信息
{
get { return genderSelector.SelectedItem; }
}
public string SelectedClass//返回角色的类型信息
{
get { return classSelector.SelectedItem; }
}

在GamePlayScreen类中根据获得的角色信息来加载相应的角色到游戏界面,其LoadContent方法如下

protected override void LoadContent()
{
Texture2D spriteSheet = Game.Content.Load<Texture2D>(
@"PlayerSprites\" + 
 GameRef.CharacterGeneratorScreen.SelectedGender + 
 GameRef.CharacterGeneratorScreen.SelectedClass);//根据角色加载相应的图片
 Dictionary<AnimationKey, Animation> animations = new Dictionary<AnimationKey, Animation>();
 Animation animation = new Animation(3, 32, 32, 0, 0);
 animations.Add(AnimationKey.Down, animation);
 animation = new Animation(3, 32, 32, 0, 32);
 animations.Add(AnimationKey.Left, animation);
 animation = new Animation(3, 32, 32, 0, 64);
 animations.Add(AnimationKey.Right, animation);
 animation = new Animation(3, 32, 32, 0, 96);
 animations.Add(AnimationKey.Up, animation);//根据角色的运动状态加载相应的动画
 sprite = new AnimatedSprite(spriteSheet, animations);//初始化动态精灵对象
//以上为更新的代码
base.LoadContent();
Texture2D tilesetTexture = Game.Content.Load<Texture2D>(@"Tilesets\tileset1");
Tileset tileset1 = new Tileset(tilesetTexture, 8, 8, 32, 32);
 tilesetTexture = Game.Content.Load<Texture2D>(@"Tilesets\tileset2");
Tileset tileset2 = new Tileset(tilesetTexture, 8, 8, 32, 32);
List<Tileset> tilesets = new List<Tileset>();
 tilesets.Add(tileset1);
 tilesets.Add(tileset2);
MapLayer layer = new MapLayer(40, 40);
for (int y = 0; y < layer.Height; y++)
 {
for (int x = 0; x < layer.Width; x++)
 {
Tile tile = new Tile(0, 0);
 layer.SetTile(x, y, tile);
 }
 }
MapLayer splatter = new MapLayer(40, 40);
Random random = new Random();
for (int i = 0; i < 80; i++)
 {
int x = random.Next(0, 40);
int y = random.Next(0, 40);
int index = random.Next(2, 14);
Tile tile = new Tile(index, 0);
 splatter.SetTile(x, y, tile);
 }
 splatter.SetTile(1, 0, new Tile(0, 1));
 splatter.SetTile(2, 0, new Tile(2, 1));
 splatter.SetTile(3, 0, new Tile(0, 1));
List<MapLayer> mapLayers = new List<MapLayer>();
 mapLayers.Add(layer);
 mapLayers.Add(splatter);
 map = new TileMap(tilesets, mapLayers);
}

所以现在的游戏页面跳转逻辑是：startMenuScreen到characterGneratorScreen,根据选择的角色再在GamePlayScreen上绘制相应的角色图片。

下一步我们想实现Camera类的Zoom in 和Zoom out方法，实现对地图的放大和缩小,打开Camera类，更改update方法如下

public void Update(GameTime gameTime)
{
if (InputHandler.KeyReleased(Keys.PageUp) || 
InputHandler.ButtonReleased(Buttons.LeftShoulder, PlayerIndex.One))
 ZoomIn();//地图缩小
else if (InputHandler.KeyReleased(Keys.PageDown) || 
InputHandler.ButtonReleased(Buttons.RightShoulder, PlayerIndex.One))
 ZoomOut();//地图放大
//以上是更新代码
if (mode == CameraMode.Follow)
return;
Vector2 motion = Vector2.Zero;
if (InputHandler.KeyDown(Keys.Left) ||
InputHandler.ButtonDown(Buttons.RightThumbstickLeft, PlayerIndex.One))
 motion.X = -speed;
else if (InputHandler.KeyDown(Keys.Right) ||
InputHandler.ButtonDown(Buttons.RightThumbstickRight, PlayerIndex.One))
 motion.X = speed;
if (InputHandler.KeyDown(Keys.Up) ||
InputHandler.ButtonDown(Buttons.RightThumbstickUp, PlayerIndex.One))
 motion.Y = -speed;
else if (InputHandler.KeyDown(Keys.Down) ||
InputHandler.ButtonDown(Buttons.RightThumbstickDown, PlayerIndex.One))
 motion.Y = speed;
if (motion != Vector2.Zero)
 {
 motion.Normalize();
 position += motion * speed;
 LockCamera();
 }
}
private void ZoomIn()
{
 zoom += .25f;
if (zoom > 2.5f)
 zoom = 2.5f;
}
private void ZoomOut()
{
 zoom -= .25f;
if (zoom < .5f)
 zoom = .5f;
}

到目前为止我们只是在Camera类中加入了控制放大缩小的代码以及放大缩小梯度的设置，真正实现地图的放大和缩小是在GameplayScreen类中

可以将整个地图看做是一个像素矩阵，要对该矩阵做放大，缩小变化，要按照一定的矩阵变化顺序执行：等比-》按比例放大，缩小-》旋转-》平移。这些操作Matrix类都给我们提供了现成的方法，代码如下

public Matrix Transformation//转移矩阵
{
get { return Matrix.CreateScale(zoom) * 
Matrix.CreateTranslation(new Vector3(-Position, 0f)); }//先按照倍数放大矩阵，再朝Camera的负方向平移
}
public Rectangle ViewportRectangle//给出Camera视场矩阵的接口
{
get { return new Rectangle(
 viewportRectangle.X,
 viewportRectangle.Y, 
 viewportRectangle.Width, 
 viewportRectangle.Height); }
}

上述代码是Camera类给出的对外接口，向调用它进行放大缩小的对象提供变换矩阵transformation和变化对象矩阵ViewportRectangle。回到GameplayScreen类中，将其Draw方法中的spritebatch.begin()中参数重新设置，以便实现地图的放缩

public override void Draw(GameTime gameTime)
{
 GameRef.SpriteBatch.Begin(
SpriteSortMode.Deferred,
BlendState.AlphaBlend,
SamplerState.PointClamp,
null,
null,
null,
 player.Camera.Transformation);//Begin方法的7个参数重载，其中最关键的是最后一个参数Matrix，主要用于对Begin和End方法之间的所有绘制对象进行放缩变化的矩阵
 map.Draw(GameRef.SpriteBatch, player.Camera);
 sprite.Draw(gameTime, GameRef.SpriteBatch, player.Camera);
base.Draw(gameTime);
 GameRef.SpriteBatch.End();
}

已经设置好了放缩矩阵，那么现在就要对Begin和end方法之间要绘制的对象的Draw方法进行重写，实现其的放缩变化

先重写Tilemap类的Draw方法如下

public void Draw(SpriteBatch spriteBatch, Camera camera)
{
Rectangle destination = new Rectangle(0, 0, Engine.TileWidth, Engine.TileHeight);
Tile tile;
foreach (MapLayer layer in mapLayers)
 {
for (int y = 0; y < layer.Height; y++)
 {
 destination.Y = y * Engine.TileHeight;//改变的地方，实际上就是将以前画图时减去Camera对象的坐标给删除了，为什么呢？因为在我们转移矩阵中已经减过了...
for (int x = 0; x < layer.Width; x++)
 {
 tile = layer.GetTile(x, y);
if (tile.TileIndex == -1 || tile.Tileset == -1)
continue;
 destination.X = x * Engine.TileWidth;//
 spriteBatch.Draw(
 tilesets[tile.Tileset].Texture,
 destination,
 tilesets[tile.Tileset].SourceRectangles[tile.TileIndex],
Color.White);
 }
 }
 }
}

同样在AnimatedSprtie类的Draw方法中

public void Draw(GameTime gameTime, SpriteBatch spriteBatch, Camera camera)
{
 spriteBatch.Draw(
 texture,
 position,
 animations[currentAnimation].CurrentFrameRect,
Color.White);
}

现在我们就可以对地图进行放大和缩小了，但是会有一个现象发生，当zoom缩小到一定值后地图边缘会被蓝色屏幕覆盖，这就需要我们对Camera位置进行重新锁定，使得地图的大小面积根据zoom的值进行变化，这样就不会出现地图不能覆盖整个窗体的现象,Camera类中修改代码如下

private void LockCamera()//对Camera锁定区域的修改
{
 position.X = MathHelper.Clamp(position.X,
 0,
 TileMap.WidthInPixels * zoom - viewportRectangle.Width);
 position.Y = MathHelper.Clamp(position.Y, 0,
 TileMap.HeightInPixels * zoom - viewportRectangle.Height);
}

public void LockToSprite(AnimatedSprite sprite)//对Follow状态下Camera区域的修改
{
 position.X = (sprite.Position.X + sprite.Width / 2) * zoom 
 - (viewportRectangle.Width / 2);
 position.Y = (sprite.Position.Y + sprite.Height / 2) * zoom
 - (viewportRectangle.Height / 2);
 LockCamera();
}

接着就是要将Camera和地图进行对齐

public void ZoomIn()
{
 zoom += .25f;
if (zoom > 2.5f)
 zoom = 2.5f;
Vector2 newPosition = Position * zoom;
 SnapToPosition(newPosition);
}
public void ZoomOut()
{
 zoom -= .25f;
if (zoom < .5f)
 zoom = .5f;
Vector2 newPosition = Position * zoom;
 SnapToPosition(newPosition);
}
private void SnapToPosition(Vector2 newPosition)
{
 position.X = newPosition.X - viewportRectangle.Width / 2;
 position.Y = newPosition.Y - viewportRectangle.Height / 2;
 LockCamera();
}

最后就是在PlayGameScreen类中修改Update方法，实现图像的放缩

public override void Update(GameTime gameTime)
{
 player.Update(gameTime);
 sprite.Update(gameTime);
//代码修改区域
//按pageup键，地图缩小
if (InputHandler.KeyReleased(Keys.PageUp) ||
InputHandler.ButtonReleased(Buttons.LeftShoulder, PlayerIndex.One))
 {
 player.Camera.ZoomIn();
if (player.Camera.CameraMode == CameraMode.Follow)
 player.Camera.LockToSprite(sprite);
 }
else if (InputHandler.KeyReleased(Keys.PageDown) ||
InputHandler.ButtonReleased(Buttons.RightShoulder, PlayerIndex.One))
 {
 player.Camera.ZoomOut();
if (player.Camera.CameraMode == CameraMode.Follow)
 player.Camera.LockToSprite(sprite);
 }
//代码修改区域
Vector2 motion = new Vector2();
if (InputHandler.KeyDown(Keys.W) ||
InputHandler.ButtonDown(Buttons.LeftThumbstickUp, PlayerIndex.One))
 {
 sprite.CurrentAnimation = AnimationKey.Up;
 motion.Y = -1;
 }
else if (InputHandler.KeyDown(Keys.S) ||
InputHandler.ButtonDown(Buttons.LeftThumbstickDown, PlayerIndex.One))
 {
 sprite.CurrentAnimation = AnimationKey.Down;
 motion.Y = 1;
 }
if (InputHandler.KeyDown(Keys.A) ||
InputHandler.ButtonDown(Buttons.LeftThumbstickLeft, PlayerIndex.One)) {
 sprite.CurrentAnimation = AnimationKey.Left;
 motion.X = -1;
 }
else if (InputHandler.KeyDown(Keys.D) ||
InputHandler.ButtonDown(Buttons.LeftThumbstickRight, PlayerIndex.One))
 {
 sprite.CurrentAnimation = AnimationKey.Right;
 motion.X = 1;
 }
if (motion != Vector2.Zero)
 {
 sprite.IsAnimating = true;
 motion.Normalize();
 sprite.Position += motion * sprite.Speed;
 sprite.LockToMap();
if (player.Camera.CameraMode == CameraMode.Follow)
 player.Camera.LockToSprite(sprite);
 }
else
 {
 sprite.IsAnimating = false;
 }
if (InputHandler.KeyReleased(Keys.F) ||
InputHandler.ButtonReleased(Buttons.RightStick, PlayerIndex.One))
 {
 player.Camera.ToggleCameraMode();
if (player.Camera.CameraMode == CameraMode.Follow)
 player.Camera.LockToSprite(sprite);
 }
if (player.Camera.CameraMode != CameraMode.Follow)
 {
if (InputHandler.KeyReleased(Keys.C) ||
InputHandler.ButtonReleased(Buttons.LeftStick, PlayerIndex.One))
 {
 player.Camera.LockToSprite(sprite);
 }
 }
base.Update(gameTime);
}

Ok,现在地图就可以放大缩小了。