Jak utworzyć obraz ikonki

Question

Próbuję stworzyć bardzo podstawowy obraz ikonki.

Po pierwsze mam istniejący obraz (szerokość = 100 pikseli, wysokość = 100 pikseli).

Będę przeglądał ten obraz od 10 do 100 razy, za każdym razem umieszczając go na ikonce obok poprzedniej.

Sprite jest ograniczone do szerokości 3000 pikseli.

Umieszczanie zdjęć obok siebie jest w porządku, ponieważ mogę po prostu połączyć je z prostą metodą, jednak muszę ograniczyć szerokość połączonych obrazów do 3000px, a następnie zacząć od nowej linii.

Answer 1

Pozwól mi spróbować z jakimś pseudocode

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

zadeklaruj zmienną na 3000, jeśli umieścisz obrazek o szerokości 250 odejmij od zmiennej, kontynuuj to, to także pozwala ci zdecydować, czy jest wystarczająco dużo miejsca na linii do następnego zdjęcia przez zobaczenie, czy pozostała liczba jest większa niż szerokość następnego zdjęcia. za każdym razem, gdy zaczynasz od nowej linii, ustaw zmienną z powrotem na 3k i zacznij od nowa. rozwiązany

Answer 3

Istnieje wiele informacji o 2D sprites w następującym artykule MSDN: Rendering 2D sprites

przykłady te są oparte na Microsoft's XNA, który jest platformą które mogą być używane w Visual Studio do tworzenia gier dla Windows, Windows Phone i Xbox 360.

Na przykład, aby narysować sprite'a, możesz użyć następującego kodu C# (przykład zaczerpnięty z artykułu MSDN, XBOX 360 specyficzny kod usunięte):

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

Trzeba zadzwonić LoadContent() aby go zainicjować, to trzeba zadzwonić GetTitleSafeArea(100) aby uzyskać bezpieczny obszar rysowania (w tym przypadku wich 100 procent), wreszcie można użyć Draw metoda. Przyjmuje parametr zawierający instancję klasy GameTime, która jest migawką stanu taktowania gry, wyrażoną w wartościach, które mogą być używane w grach z krokami zmiennymi (w czasie rzeczywistym) lub stałymi krokami (w czasie gry).

Proszę dać mi znać, jeśli to pomoże.

Answer 4

Podejście, które może działać, polega na umożliwieniu umieszczenia ramek sprite'a w dowolnym miejscu mapy bitowej (w ten sposób można uczynić je bardziej zwartymi) i dołączenia każdej mapy bitowej do pliku (n xml) opisującego lokalizację, rozmiar i pochodzenie każdej klatki I ma listę wszystkich animacji. Coś takiego:

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

ten sposób można ponownie użyć całej klatki animacji (a więc optymalizacja wielkości bitmapy nawet więcej) i dostosować animacje po prostu edytując plik XML.

Wszystko, co musisz zrobić, to przeczytać plik XML, przeczytać mapę bitową i podczas uruchamiania animacji: uruchom zegar, który tyka w regularnych odstępach czasu. Po zaznaczeniu obliczysz poprawną klatkę kluczową w animacji, dodając czas trwania klatek kluczowych po kolei i kończąc, gdy suma jest większa niż czas tykania; należy użyć bieżącej klatki kluczowej.

w pliku XML powyżej dodałem rzeczy, takich jak offset, który pozwala modyfikować pozycję ikonki podczas animacji (można nawet interpolacji go tak płynnie)

Wszystko, co pozostało jest pobieranie poprawna ramka poza bitmapą. Jako optymalizację można wstępnie przetworzyć mapę bitową podczas ładowania pliku xml, chwytając ramki, zachowując je jako małe bitmapy i odrzucając dużą bitmapę. Może to zoptymalizować pamięć, gdy bitmapa jest duża i nie jest w pełni pokryta ramkami.

W innych przypadkach proces wstępny nie jest wykonywany i po prostu blit ramki.

W przypadku większych aplikacji (więcej map bitowych/animacji/ramek), zalecamy utworzenie aplikacji do tworzenia i edycji pliku xml. Inną opcją może być stworzenie wtyczki do twojego ulubionego programu do malowania (jeśli to możliwe).