如何创建一个精灵图像

Question

我想创建一个非常基本的精灵图像。

首先我有一个现有的图像（宽= 100px，高= 100px）。

我将在10到100倍之间循环播放此图像，每次将它放在旁边的精灵上。

精灵被限制在3000px宽。

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

Answer 1

让我尝试用一​​些伪

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 
} 

Answer 2

在3000处声明一个变量，如果您放入宽度为250的图片，将其从变量中取出，继续这样做，这还允许您决定在下一张图片上是否留有足够的空间看看剩下的数字是否大于下一张图片的宽度。每当你开始一条新线时，将变量设置回3k并重新开始。解决

Answer 3

有很多关于下面的MSDN文章中的2D-精灵信息：Rendering 2D sprites

这些例子都是基于Microsoft's 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<Texture2D>("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类的实例的参数，该参数是以变量步（实时）或固定步（游戏时间）游戏可以使用的值表示的游戏时间状态的快照。

请让我知道，如果这可以帮助你。

Answer 4

一种可以工作的方法是允许将精灵的帧放置在位图的任何位置（这样可以使它们更加紧凑），并伴随每个位图与描述位置，大小和来源的（n xml）文件并且每个帧都有一个动画列表。事情是这样的：

<SpriteSheet> 
    <Frames> 
     <Frame id="0" location="20,40" size="64,64" origin="32,32" /> 
     <Frame id="1" location="100,40" size="64,64" origin="32,32" /> 
     <Frame id="2" location="164,40" size="64,64" origin="0,0" /> 
     <Frame id="3" location="20,120" size="64,64" origin="32,32" /> 
    </Frames> 
    <Animations> 
     <Animation name="walk left" > 
      <Keyframes> 
       <Keyframe frameId="0" duration="0:0:0.5" offset="-5,0" /> 
       <Keyframe frameId="1" duration="0:0:0.5" offset="-5,0" /> 
       <Keyframe frameId="2" duration="0:0:0.4" offset="-2,0" /> 
       <Keyframe frameId="1" duration="0:0:0.5" offset="-5,0" /> 
      </Keyframes> 
     </Animation> 
     <Animation name="walk right" > 
      <Keyframes> 
       <Keyframe frameId="5" duration="0:0:0.5" offset="5,0" /> 
       <Keyframe frameId="6" duration="0:0:0.5" offset="5,0" /> 
       <Keyframe frameId="2" duration="0:0:0.4" offset="2,0" /> 
       <Keyframe frameId="6" duration="0:0:0.5" offset="5,0" /> 
      </Keyframes> 
     </Animation> 
    </Animations> 
</SpriteSheet> 

这样你就可以重复使用跨帧动画（等优化位大小甚至更多），并通过简单的编辑XML文件自定义动画。

您只需读取XML文件，读取位图并在开始动画时启动一个定时器，该定时器会定期打勾。当它打勾时，您可以通过逐个添加关键帧的持续时间来计算动画中的正确关键帧，并在总和大于节拍时间时停止;应该使用当前的关键帧。

在XML文件上面我说的东西，如偏移，允许你修改动画中的精灵的位置（所以它运行顺畅，你甚至可以插值吧）

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

在其他情况下，您不需要预处理并仅对框架进行blit处理。

对于较大的应用程序（更多位图/动画/帧），我建议创建一个应用程序来创建和编辑xml文件。另一个选择可能是为你喜欢的绘画程序创建一个插件（如果可能的话）