XNA游戏开发之滚动背景

た入场券 2022-05-15 05:17 191阅读 0赞

### 摘要：  ###

在很多游戏开发中角色的运动都是相对游戏背景而言的，也就是说我们通过移动游戏场景来给游戏角色带来一种运动效果，毕竟我们的游戏视窗是有限的，如果无止境的让角色运动肯定是不可行的，下面我们就一块看一下在XNA中如何制作滚动的背景。

### 内容：  ###

在多数游戏开发的时候，特别是对于角色游戏，除了游戏角色本身的运动之外，更多的时候游戏给人的行动感觉是由游戏背景的移动造成的（我们平时看的动画片也是如此），毕竟游戏视窗是有限的，角色不可能超出游戏视窗而运动，它的运动范围也仅仅在整个游戏视窗内。这样一来我们就必须准备好整个游戏的背景，在游戏中动态改变它的位置。可是对于稍微复杂的游戏，其背景长度也是不可估量的（例如超级玛丽），此时我们就不可能一次加载所有的背景，此时我们怎么办呢？事实上对于这个问题我们通常是将整个背景做成可循环的，这有一点类似于我们地板设计，每个地板和另一地板的连接处花纹都是连续的；其次就是我们可以将游戏背景中的物体拆分开来，然后在游戏运行过程中进行动态组合。对于第二种情况我们暂且不管，我们今天主要讨论一下第一种情况。针对第一种情况假设我们有下面一副背景，在X方向它是可以无限循环显示的：

![整幅背景图片][scrollbackground_bg.png_psid_1]

那么下面我们是不是就可以直接让整个图片循环显示就可了呢？答案是否定的。对于重复显示的背景我们直接整张图片加载起来是不切实际的，因为它的体积太大了。我们常用的做法是根据屏幕大小将图片分割成多张。例如上面的背景我们就可以切分成两张图片：

![背景图片1][1]

![背景图片2][2]

为了清楚的看到整个背景滚动形成的动画效果，我们给游戏添加一个角色：![小鸟][scrollbackground_bird.png_psid_1]

下面是我们的完整代码：

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.Input.Touch; using Microsoft.Xna.Framework.Media; namespace ScrollBackground \{ public class MyGame : Microsoft.Xna.Framework.Game \{ GraphicsDeviceManager graphics; SpriteBatch spriteBatch; private Texture2D background1;//第一个背景 private Texture2D background2;//第二个背景 private Vector2 bg1Position1;//第一个背景位置 private Vector2 bg2Position2;//第二个背景位置 private float speed;//滚动速度 private Texture2D bird;//小鸟 private Vector2 birdPosition;//小鸟所在位置 public MyGame() \{ graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; graphics.PreferredBackBufferWidth = 800;//游戏视窗的高度和宽度决定了游戏在模拟器中是横向显示还是纵向显示 graphics.PreferredBackBufferHeight = 480; TargetElapsedTime = TimeSpan.FromTicks(333333); \} protected override void Initialize() \{ bg1Position1 = new Vector2(0, 0); bg2Position2 = new Vector2(graphics.PreferredBackBufferWidth, 0); speed = 2; birdPosition = new Vector2(200, 50); base.Initialize(); \} protected override void LoadContent() \{ spriteBatch = new SpriteBatch(GraphicsDevice); background1 = Content.Load<Texture2D>("bg1"); background2 = Content.Load<Texture2D>("bg2"); bird = Content.Load<Texture2D>("bird"); \} protected override void UnloadContent() \{ \} protected override void Update(GameTime gameTime) \{ if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.Exit(); if (bg1Position1.X < -background1.Width) \{ bg1Position1.X=bg2Position2.X+graphics.PreferredBackBufferWidth; \} if (bg2Position2.X < -background2.Width) \{ bg2Position2.X = bg1Position1.X + graphics.PreferredBackBufferWidth; \} bg1Position1.X -= speed; bg2Position2.X -= speed; base.Update(gameTime); \} protected override void Draw(GameTime gameTime) \{ GraphicsDevice.Clear(Color.CornflowerBlue); spriteBatch.Begin(); spriteBatch.Draw(background1, bg1Position1, Color.White); spriteBatch.Draw(background2, bg2Position2, Color.White); spriteBatch.Draw(bird, birdPosition, Color.White); spriteBatch.End(); base.Draw(gameTime); \} \} \}

其运行后的效果如下：

![游戏截图][scrollBackground_screen.png_psid_1]

![游戏运行动画][scrollBackground_Dynamic.gif_psid_1]

OK，代码比较简单，我也就不再过多解释，附上源程序：

[ ![download][]][_download]

<table> 
 <tbody> 
  <tr style="vertical-align:top;"> 
   <td> <a href="http://creativecommons.org/licenses/by/2.5/cn/" rel="nofollow"><img style="border-width:0;" src="http://i.creativecommons.org/l/by/2.5/cn/88x31.png" alt="知识共享许可协议"></a> </td> 
   <td> 本作品采用<a href="http://creativecommons.org/licenses/by/2.5/cn/" rel="nofollow">知识共享署名 2.5 中国大陆许可协议</a>进行许可，欢迎转载，演绎或用于商业目的。但转载请注明来自<a href="http://blog.csdn.net/jianxin160" rel="nofollow">崔江涛（KenshinCui）</a>，并包含相关链接。 </td> 
  </tr> 
 </tbody> 
</table>

[scrollbackground_bg.png_psid_1]: /images/20220515/188346cdc18e49e1945dad3f40964937.png
[1]: /images/20220515/ee3a7d90abd74810b5a339e479a3cd1e.png
[2]: /images/20220515/f955ec2a73a44925b311f60263814df1.png
[scrollbackground_bird.png_psid_1]: /images/20220515/7dd921f752dc46b594fb78fcf5d7092d.png
[scrollBackground_screen.png_psid_1]: /images/20220515/eb09a8bee9234b8d914419c636703a73.png
[scrollBackground_Dynamic.gif_psid_1]: /images/20220515/96add33240814fbb92b92fa293011b98.png
[download]: /images/20220515/96c2115b560e44ef9ce29f94cf8042af.png
[_download]: http://cid-e7bd5e8882a6a2da.office.live.com/self.aspx/BlogFile/ScrollBackground.zip