如何創建一個精靈圖像

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文件。另一個選擇可能是爲你喜歡的繪畫程序創建一個插件（如果可能的話）