如何创建精灵图像

我正在尝试创建一个非常基本的精灵图像。

首先,我有一个现有的图像(宽度= 100像素,高度= 100像素)。

我将在此图像之间循环10到100次,每次将它放在前一个旁边的精灵上。

精灵限制在3000px宽。

将图像放在一起是很好的,因为我可以用简单的方法将它们组合在一起,但是,我需要将组合图像的宽度限制为3000px,然后从一个新行开始。

让我尝试一些伪代码

Bitmap originalImage; // that is your image of 100x100 pixels Bitmap bigImage; // this is your 3000x3000 canvas int xPut = 0; int xPut = 0; int maxHeight = 0; while (someExitCondition) { Bitmap imagePiece = GetImagePieceAccordingToSomeParameters(originalImage); if (xPut + imagePiece.Width > 3000) { xPut = 0; yPut += maxHeight; maxHeight = 0; } DrawPieceToCanvas(bigImage, xPut, yPut, imagePiece); xPut += imagePiece.Width; if (imagePiece.Height > maxHeight) maxHeight = imagePiece.Height; // iterate until done } 

以下MSDN文章中有很多关于2D精灵的信息: 渲染2D精灵

这些示例基于Microsoft的XNA ,这是一个可以在Visual Studio中用于开发Windows,Windows Phone和XBOX 360游戏的平台。

例如,要绘制精灵,您可以使用以下C#代码(示例取自MSDN文章,删除XBOX 360特定代码):

 private Texture2D SpriteTexture; private Rectangle TitleSafe; protected override void LoadContent() { // Create a new SpriteBatch, which can be used to draw textures. spriteBatch = new SpriteBatch(GraphicsDevice); SpriteTexture = Content.Load("ship"); TitleSafe = GetTitleSafeArea(.8f); } protected Rectangle GetTitleSafeArea(float percent) { Rectangle retval = new Rectangle( graphics.GraphicsDevice.Viewport.X, graphics.GraphicsDevice.Viewport.Y, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); return retval; } protected override void Draw(GameTime gameTime) { graphics.GraphicsDevice.Clear(Color.CornflowerBlue); spriteBatch.Begin(); Vector2 pos = new Vector2(TitleSafe.Left, TitleSafe.Top); spriteBatch.Draw(SpriteTexture, pos, Color.White); spriteBatch.End(); base.Draw(gameTime); } 

你需要调用LoadContent()来初始化它,然后你需要调用GetTitleSafeArea(100)来获得安全绘制区域(在这种情况下是100%),最后你可以使用Draw方法。 它接受包含GameTime类实例的参数,该实例是游戏时间状态的快照,以可由变步(实时)或固定步(游戏时间)游戏使用的值表示。

如果有帮助,请告诉我。

将变量声明为3000,如果你输入宽度为250的图片,请远离变量,继续这样做,这也可以让你通过查看数字来确定下一张图片上是否有足够的空间留在下一张图片上left大于下一张图片的宽度。 每次开始新行时,将变量设置回3k并重新开始。 解决了

一种可以工作的方法是允许将精灵的帧放在位图中的任何位置(这样可以使它们更紧凑)并使用描述每个帧的位置,大小和原点的(n xml)文件伴随每个位图。列出了所有动画。 像这样的东西:

                           

这样,您可以在动画中重复使用帧(以及更多地优化位图大小),并通过简单地编辑xml文件来自定义动画。

您所要做的就是读取XML文件,读取位图并在开始动画时:启动定时滴答的计时器。 勾选时,您可以通过逐个添加关键帧的持续时间来计算动画中的正确关键帧,并在总和超过滴答时间时停止; 应该使用当前的关键帧。

在上面的xml文件中,我添加了诸如偏移之类的东西,允许你在动画期间修改精灵的位置(你甚至可以插入它以使其顺利移动)

剩下的就是从位图中抓取正确的帧。 作为优化,您可以在加载xml文件时通过抓取帧来预处理位图,将这些位置保持为微小的位图并丢弃大位图。 当位图很大而帧中没有完全覆盖时,这可能会优化内存。

在其他情况下,您不需要预处理,只需将框架blit。

对于较大的应用程序(更多位图/动画/帧),我建议创建一个应用程序来创建和编辑xml文件。 另一种选择可能是为您喜欢的油漆程序创建一个插件(如果可能的话)