MonoGame 游戏开发框架日记 -05

第四章：封装纹理类，以及Sprite类

这篇文章会有许多代码需要理解，这节课的部分代码是可以部分复制的，我推荐大家还是按顺序敲一次增加印象，当然了现在所有的代码都是为了之后开发那个史莱姆游戏做准备，此章的主要内容是：把纹理类封装起来实现一些其他功能，包括切割等，OK不多说我们正式开始此篇文章的内容

---

图集，以及2D游戏的精灵：

图集：在游戏开发中通常会遇到以下几种情况：美术为了节约存储，优化结构通常会通过将所有素材都集中地放在一张图片上，那么我们该怎么处理这个图片呢，在知名游戏引擎Unity中他的精灵类素材可以通过切割，分割得到，这个时候我们就需要封装一个图集类，通过配置文件切割出重要的内容了。

2D精灵 ：首先精灵就是渲染在窗口上地结果，我们通常通过切割得到的图片来充当精灵，但是我们为了更加方便渲染都会在Sprite类中封装许多功能，包括Unity中里面封装的功能都是很完善很强大的功能，毕竟是称霸一方的超级游戏引擎

OK，介绍完两个东西我们试一下将两个东西全部实现出来，分别是图集类，和精灵类

图集类创建完整流程：

第一步：创建TextureRegion类

为什么创建这个类呢？很简单因为原先MonoGame封装的Texture2D的类功能不能满足我们的需求，我们需要写出一些重载的方法增加渲染的方式,以及得到图集类切割得到的材质，OK我们正式开始
分为以下三个大步、

• 创建文件夹：在项目根目录中创建Graphics文件夹
• 创建cs文件：在Graphics文件夹中创建TextureRegion.cs类
• 编写TextureRegion类

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

namespace SlimeGame.Graphics;


public class TextureRegion 
{
   
   

}

以上声明了纹理渲染类以及包含了必要的库，接下来书写必要的TextureRegion属性

	/// <summary>
    /// 取得所需的纹理文件
    /// </summary>
    public Texture2D texture {
   
    get; set; }

    /// <summary>
    /// 取得切割的长方形
    /// </summary>
    public Rectangle SourceRectangle {
   
    get; set; }

    /// <summary>
    /// 切割宽度
    /// </summary>
    public int Width => SourceRectangle.Width;

    /// <summary>
    /// 切割高度
    /// </summary>
    public int Height => SourceRectangle.Height;

    /// <summary>
    /// 获取该纹理区域的顶部标准化坐标.
    /// </summary>
    public float TopTextureCoordinate => SourceRectangle.Top / (float)texture.Height;

    /// <summary>
    /// 获取该纹理区域的底部标准化坐标.
    /// </summary>
    public float BottomTextureCoordinate => SourceRectangle.Bottom / (float)texture.Height;

    /// <summary>
    /// 获取该纹理区域的左侧标准化坐标.
    /// </summary>
    public float LeftTextureCoordinate => SourceRectangle.Left / (float)texture.Width;

    /// <summary>
    /// 获取该纹理区域的右侧标准化坐标.
    /// </summary>
    public float RightTextureCoordinate => SourceRectangle.Right / (float)texture.Width;

接下来书写构造函数

	/// <summary>
    /// 无参构造
    /// </summary>
    public TextureRegion() {
   
    }


    /// <summary>
    /// 有参构造
    /// </summary>
    /// <param name="texture">所需纹理</param>
    /// <param name="x">矩形位置的X轴坐标</param>
    /// <param name="y">矩形位置的Y轴坐标</param>
    /// <param name="width">矩形切割的宽度</param>
    /// <param name="height">矩形切割的高度</param>
    public TextureRegion(Texture2D texture, int x, int y, int width, int height)
    {
   
   
        this.texture = texture;
        SourceRectangle = new Rectangle(x, y, width, height);
    }

接下来写出，渲染函数的重载方法，能够实现切割后的图片的渲染从简到繁都有重载

	/// <summary>
    /// 绘制函数重写，极简版本
    /// </summary>
    /// <param name="spriteBatch">绘制组件</param>
    /// <param name="position">位置</param>
    /// <param name="color">颜色</param>
    public void Draw(SpriteBatch spriteBatch, Vector2 position, Color color)
    {
   
   
        Draw(spriteBatch, position, color, 0.0f, Vector2.Zero, Vector2.One, SpriteEffects.None, 0.0f);
    }


    /// <summary>
    /// 绘制函数的重写简单版本
    /// </summary>
    /// <param name="spriteBatch">绘制函数所需组件</param>
    /// <param name="position">位置</param>
    /// <param name="color">眼色</param>
    /// <param name="rotation">旋转角度</param>
    /// <param name="origin">中心偏移量</param>
    /// <param name="scale">缩放比例</param>
    /// <param name="effects">翻转效果</param>
    /// <param name="layerDepth">深度效果</param>
    public void Draw(SpriteBatch spriteBatch, Vector2 position, Color color, float rotation, Vector2 origin, float scale, SpriteEffects effects, float layerDepth)
    {
   
   
        Draw(
            spriteBatch,
            position,
            color,
            rotation,
            origin,
            new Vector2(scale, scale),
            effects,
            layerDepth
        );
    }


    /// <summary>
    /// 绘制函数：所有详细参数
    /// </summary>
    /// <param name="spriteBatch">所需绘制精灵组件</param>
    /// <param name="position">绘制位置</param>
    /// <param name="color">颜色</param>
    /// <param name="rotation">旋转角度</param>
    /// <param name="origin">精灵中心偏移量</param>
    /// <param name="scale">缩放比例</param>
    /// <param name="effects">翻转效果</param>
    /// <param name="layerDepth">图层深度</param>
    public void Draw(SpriteBatch spriteBatch, Vector2 position, Color color, float rotation, Vector2 origin, Vector2 scale, SpriteEffects effects, float layerDepth)
    {
   
   
        spriteBatch.Draw(
            texture,
            position,
            SourceRectangle,
            color,
            rotation,
            origin,
            scale,
            effects,
            layerDepth
        );
    }

自此所有的Texture2D的代码就全部写完了
我们下面给出完整的代码：
完整代码：

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

namespace SlimeGame.Graphics;

/// <summary>
/// 表示纹理中的矩形区域.
/// </summary>
public class TextureRegion
{
   
   
    /// <summary>
    /// 取得所需的纹理文件
    /// </summary>
    public Texture2D texture {
   
    get; set; }

    /// <summary>
    /// 取得切割的长方形
    /// </summary>
    public Rectangle SourceRectangle {
   
    get; set; }

    /// <summary>
    /// 切割宽度
    /// </summary>
    public int Width => SourceRectangle.Width;

    /// <summary>
    /// 切割高度
    /// </summary>
    public int Height => SourceRectangle.Height;

    /// <summary>
    /// 获取该纹理区域的顶部标准化坐标.
    /// </summary>
    public float TopTextureCoordinate => SourceRectangle.Top / (float)texture.Height;

    /// <summary>
    /// 获取该纹理区域的底部标准化坐标.
    /// </summary>
    public float BottomTextureCoordinate => SourceRectangle.Bottom / (float)texture.Height;

    /// <summary>
    /// 获取该纹理区域的左侧标准化坐标.
    /// </summary>
    public float LeftTextureCoordinate => SourceRectangle.Left / (float)texture.Width;

    /// <summary>
    /// 获取该纹理区域的右侧标准化坐标.
    /// </summary>