Come creare un'immagine sprite

Question

Sto cercando di creare un'immagine sprite di base.

Prima di tutto ho un'immagine esistente (Larghezza = 100px, Altezza = 100px).

Effettuerò il looping di questa immagine tra 10 e 100 volte, ogni volta posizionandola sullo sprite accanto alla precedente.

Lo sprite è limitato a 3000 px di larghezza.

Posizionare le immagini una accanto all'altra va bene, perché posso semplicemente combinarle con un metodo semplice, tuttavia, ho bisogno di limitare la larghezza delle immagini combinate a 3000px, quindi iniziare su una nuova riga.

Answer 1

mi permetta di provare con alcuni pseudocodice

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

dichiarare una variabile a 3000, se si inserisce un'immagine di larghezza 250 togliere quella dalla variabile, continuare a farlo, questo permette anche di decidere se c'è spazio sufficiente su quella linea per la prossima immagine da vedendo se il numero rimasto è più grande della larghezza dell'immagine successiva. ogni volta che inizi una nuova riga, imposta nuovamente la variabile su 3k e ricomincia. Risolto

Answer 3

C'è un sacco di informazioni su 2D-sprite nel seguente articolo di MSDN: Rendering 2D sprites

Questi esempi si basano su Microsoft's XNA, che è una piattaforma che può essere utilizzato all'interno di Visual Studio per sviluppare giochi per Windows, Windows Phone e XBOX 360.

Ad esempio, per disegnare uno sprite, è possibile utilizzare il seguente codice C# (esempio tratto dall'articolo MSDN, XBOX 360 codice specifico rimosso):

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); 
    } 

È necessario chiamare LoadContent() per inizializzare, quindi è necessario chiamare GetTitleSafeArea(100) per ottenere l'area pareggio di sicurezza (in questo caso wich 100 per cento), infine, è possibile utilizzare il Draw metodo. Accetta un parametro contenente un'istanza della classe GameTime, che è un'istantanea dello stato di sincronizzazione del gioco espressa in valori che possono essere utilizzati dai giochi a passo variabile (tempo reale) o a tempo fisso (tempo di gioco).

Per favore fatemi sapere se questo vi aiuta.

Answer 4

Un approccio che può funzionare è consentire di posizionare i frame dello sprite in qualsiasi punto della bitmap (in questo modo è possibile renderli più compatti) e accompagnare ogni bitmap con un file (n xml) che descrive la posizione, le dimensioni e l'origine di ogni frame E ha un elenco di tutte le animazioni. Qualcosa di simile a questo:

<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> 

questo modo è possibile riutilizzare telai attraverso animazioni (e quindi ottimizzando il bitmap dimensioni anche di più) e personalizzare le animazioni semplicemente modificando il file xml.

Tutto ciò che dovete fare è leggere il file XML, leggere la bitmap e quando si avvia un'animazione: avviare un timer che zecche a intervalli regolari. Quando fa il segno di spunta, calcola il fotogramma chiave corretto nell'animazione aggiungendo le durate dei fotogrammi chiave uno alla volta e fermandoti quando la somma è maggiore del tempo di spunta; il keyframe corrente dovrebbe essere usato

Nel file XML qui sopra ho aggiunto cose come ad esempio un offset che permette di modificare la posizione dello sprite durante l'animazione (si potrebbe anche interpolare così si muove senza intoppi)

Tutto ciò che rimane è afferrando la cornice corretta fuori dalla bitmap. Come ottimizzazione, è possibile pre-elaborare la bitmap quando si carica il file xml afferrando i fotogrammi, mantenendo quelli come piccoli bitmap e scartando la bitmap grande. Ciò potrebbe ottimizzare la memoria quando la bitmap è grande e non completamente coperta dai frame.

In altri casi non si pre-processa e si blocca semplicemente il frame.

Per applicazioni più grandi (più bitmap/animazioni/fotogrammi) Consiglio di creare un'app per creare e modificare il file xml. Un'altra opzione potrebbe essere quella di creare un plugin per il tuo programma di pittura preferito (se possibile)