Skapa en sprite-mall eller texturkarta och exportera dina animeringar för mobilappar och spelplattformar. Importera en texturkarta i Unity eller någon annan spelplattform med plugin-programmet.

Översikt

Med Animate CC kan du skapa animeringar med en sprite-mall eller texturkarta och exportera dem till mobilappar och spelplattformar. 

Sprite-mall

En sprite-mall är en bitmappsbildfil, som innehåller flera mindre bilder ordnade i ett rutnät. Om du samlar flera bilder i en och samma fil behöver Animate och andra program bara läsa in en enda fil för att använda alla bilder. Den här förbättrade inläsningen är särskilt praktisk inom spelutveckling, där prestanda är mycket viktiga.

Sprite-mall
En sprite-mall som innehåller alla sprites i en bildruta-för-bildruta-animering.

Du kan skapa en sprite-mall av valfria filmklipp, knappsymboler, grafiksymboler och bitmappar. Du kan välja objekt på bibliotekspanelen eller på scenen, men inte bådadera. Alla bitmappar och bildrutor för de valda symbolerna visas som separata bilder i sprite-mallen. Om du exporterar från scenen bevaras alla omformningar (som skalningar och skevningar) som du har använt på symbolinstansen i bildutdata.

Texturkarta

Texturkartan är en samling texturer i enda stor bild. Du kan optimera dina spel genom att skapa en texturkarta och använda den i din spelapp. 

I Animate kan du skapa en texturkarta av symboler, till exempel filmklipp, bilder eller knappar. Du kan välja objekt på bibliotekspanelen eller på scenen, men inte bådadera. Alla vektorer och nyckelbildrutor för de valda symbolerna visas som separata bitmappar i texturkartan. Om du exporterar från scenen bevaras alla omformningar (som skalningar och skevningar) som du har använt på symbolinstansen i bildutdata.

Skillnaden mellan en sprite-mall och en texturkarta

Beroende på dina behov kan du antingen använda en sprite-mall eller texturkarta i dina mobilappar. Några av de viktigaste skillnaderna mellan Sprite-mallar och texturkartor visas i följande tabell. 

Funktion Sprite-mall Texturkarta
Prestanda i mobilappar Låg Hög
Effektiv inläsning av app Hög, dvs. ingen beräkning Låg, dvs. JSON-filberäkning
Storlek Tar upp mer utrymme Tar upp mindre utrymme
Animeringens kvalitet Medel Hög
Antal filer som skapas Två filer: en bitmappsfil och en json-fil Tre filer: en bitmappsfil och två json-fil Filer
Antal skapade bitmappar Beroende på antalet bildrutor som används i sprite-mallen kan antalet bitmappsfiler också öka, vilket resulterar i att sprite-mallens storlek ökar Endast unika bitmappsfiler genereras i sprite-mallen, vilket minskar totalstorleken.

Skapa en Sprite-mall

Utför följande steg när du vill skapa en sprite-mall:

  1. Markera en eller flera symboler i biblioteket eller symbolinstanser på scenen. Du kan också inkludera bitmappar.

  2. Högerklicka på markeringen och välj Skapa Sprite-mall.

    generate-spritesheet
  3. I dialogrutan Skapa sprite-mall väljer du alternativ och klickar på Exportera.

    Alternativ för Exportera Beskrivning
    Bildstorlek Sprite-mallens totala storlek i pixlar. Standardinställningen är Automatisk storlek, vilket anpassar storleken så att alla sprites du inkluderar får plats.
    Bildformat Den exporterade sprite-mallens filformat. 8-bitars PNG och 32-bitars PNG har stöd för genomskinlig bakgrund (alfakanal). 24-bitars PNG och JPG har inte stöd för genomskinlig bakgrund. Den visuella skillnaden mellan 8-bitars PNG och 32-bitars PNG är i allmänhet mycket liten. 32-bitars PNG-filer är fyra gånger större än 8-bitars PNG-filer.
    Kantutfyllnad Utfyllnaden runt sprite-mallens kanter i pixlar.
    Formutfyllnad Utfyllnaden mellan varje bild i sprite-mallen i pixlar.
    Algoritm

    Den teknik som används för att paketera bilderna i sprite-mallen. Det finns två alternativ:

    • Grundläggande (standard)
    • MaxRects
    Dataformat Det interna format som används för bilddata. Välj det format som bäst passar det tänkta arbetsflödet för sprite-mallen efter exporten.
    Rotera Roterar sprites 90°. Det här alternativet är bara tillgängligt för vissa dataformat.
    Reducera Det här alternativet sparar utrymme i sprite-mallen genom att trimma bort oanvända pixlar från varje symbolbildruta som läggs till i mallen.
    Stapla bildrutor Om du markerar det här alternativet förhindrar du att dubblerade bildrutor i de markerade symbolerna dubbleras i den sprite-mall som skapas.

Exportera animeringar med sprite-mallar för mobilappar

Exportera animeringar med sprite-mallar för mobilappar
Train Simple - Matthew Pizzi

Skapa en texturkarta

Spelutvecklare kan använda Animate för att skapa animeringar och exportera dem som texturkartor till Unity och andra populära spelplattformar. 

Processen för att skapa en texturkarta i Animate och importera den till Unity visas i följande diagram: 

flow-diagram-Texture-Atlas
En bild som visar arbetsflödet för att skapa en texturkarta och importera den till Unity.

Utför följande steg när du vill skapa en texturkarta för din animering: 

  1. I Animate kan du skapa en texturkarta för en vald symbol från biblioteket eller en symbolinstans på scenen. 

  2. Högerklicka på symbolen och välj Generate Texture Atlas på menyn. Fönstret Skapa texturkarta visas. 

    generate-texture-atlas (2)
    Generera texturkarta
  3. Välj önskade exportalternativ för texturkartan. 

    Alternativ för Exportera Beskrivning
    Bildstorlek Texturkartans totala storlek i pixlar. Standardinställningen är Automatisk storlek, vilket anpassar storleken så att alla bilder du inkluderar får plats.
    Bildformat Den exporterade sprite-mallens filformat. 8-bitars PNG och 32-bitars PNG har stöd för genomskinlig bakgrund (alfakanal). Den visuella skillnaden mellan 8-bitars PNG och 32-bitars PNG är i allmänhet mycket liten. 32-bitars PNG-filer är fyra gånger större än 8-bitars PNG-filer.
    Kantutfyllnad Utfyllnaden runt texturkartans kanter i pixlar
    Formutfyllnad Utfyllnaden mellan varje bild i texturkartan i pixlar.
    Algoritm

    Den teknik som används för att paketera bilderna i texturkartan. Det finns två alternativ:

    • Grundläggande (standard)
    • MaxRects
    Dataformat Det interna format som används för bilddata. JSON-formatet är standard.
    Rotera Roterar bilderna 90 grader. Det här alternativet är bara tillgängligt för vissa dataformat.
    Förenkla skeva objekt till bitmapp Välj det här alternativet om du vill använda omformningar med skevning för dina objekt. Animate konverterar dessa objekt till bitmappsbilder eftersom vissa spelplattformar inte tolkar omformningar med skevning korrekt. 
  4. Om du vill förhandsgranska texturkartan klickar du på fliken Förhandsgranska

    texture-atlas-preview
    Förhandsgranska texturkartan efter att du har skapat den
  5. Klicka på Bläddra och välj målsökvägen för utdatafilen på din dator, eller ange sökvägen i textområdet och klicka på Exportera.

Den genererade utdatamappen för texturkartan innehåller följande filer:

Animation.json

Den här filen innehåller information om animeringen. 

spritemap.json

Den här filen innehåller information om filen spritesheet.png.

spritemap.png

För den exporterade symbolen innehåller den här filen bitmappsrepresentationen av de unika texturer som minst krävs för att rekonstruera animeringen.

Du kan använda den genererade texturkartan i alla spelplattformar, till exempel Unity, med lämpligt plugin-program för import.

Importera texturkartan till Unity

Du kan importera de texturkartefiler Animate skapar till dina favoritspelplattformar. Om du vill importera texturkartefilerna kan du skapa plugin-program för önskade spelplattformar. Det ingår ett exempel-plugin-program för import för Unity-verktyget. 

Importera texturkartan till Unity så här:

  1. Skapa ett projekt på önskad plats i Unity. På den här platsen skapas en mapp med undermappen Assets

  2. Skapa två undermappar under Assets som Resources och Editor

  3. Klicka här för att ladda ned exempelplugin-programmet för Unity. Välj Unity Plugin på fliken Downloads och välj den version du ska ladda ned. 

    Unity-plugin.zip består av filerna Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs och Effect.shader.

    När du laddar ned exempelfilen innebär det att du godkänner våra Användarvillkor och vår Integritetspolicy online. 

  4. Flytta texturkartefiler som Animation.json, spritemap.json, spritemap.png och Unity-filer som Plugin.cs och Effect.shader till Assets > Resources.

  5. Flytta filerna AnimateEditor.cs och Wrapperplugin.cs till mappen Assets.

  6. I Unity klickar du på filen AnimateEditor.cs och drar den till Main Camera.

  7. Uppspelning. När du spelar upp ditt projekt delas spritemap upp i olika sprites.

  8. Flytta AnimateEditor.cs till Editor.

  9. I Unity klickar du på filen Wrapperplugin.cs och drar den till Main Camera. Avmarkera också, eller ta bort, AnimateEditor.cs från Main Camera.

  10. Spela upp eller publicera dina utdata som du vill. 

Du kan till och med anpassa plugin-programmet genom att ändra filen Wrapperplugin.cs efter dina behov.

Unity-plugin-programmet har stöd för effekter för texturkartefiler som genererats i Animate. Plugin-programmet har även stöd för maskering via lager. Maskeringsfunktionen gäller endast för Unity 2017 och senare versioner. 

Texturpublicering

Nu kan du som animatör fortsätta att utveckla innehåll i vektorformat och exportera det i vektor- eller rasterformat för HTML 5-plattformar. Ett alternativ för att exportera animeringar som texturkartor har lagts till i publiceringsinställningarna för att förhöja animeringarnas prestanda.

Klicka på Arkiv > Publiceringsinställningar. Om Exportera dokument som textur är aktiverat på fliken Grundläggande, visar fliken Bildinställningar publiceringsalternativ för textur Som standard inkluderas alla symboler i texturpubliceringen. Klicka på inställningsikonen i närheten när du selektivt vill välja symboler för texturer. 

Prestandan förbättras, men alternativet kan även öka storleken på materialet. Du kan också öka upplösningen till 2 eller 3 gånger bildernas originalupplösning för HiDPI-skärmar. Klicka på verktygssymbolen bredvid alternativet Exportera dokument som textur som på skärmbilden nedan när du vill ändra upplösningsinställningarna. Dra i numren i närheten av Upplösning när du vill öka den 2 eller 3 gånger.

Som standard är upplösningen för texturpublicering inställd på 2X. Upplösningsintervallet kan också ändras från 0,3 till 3X.

Obs!

Texturpublicering tillämpas endast på HTML5 Canvas-dokumenttypen. 

Exportera dokument som textur
Exportera dokument som textur

Att välja en raster- eller vektorfil liknar att välja mellan filstorlekar och prestanda. HTML5-plattformar är optimerade för rasterinnehåll. Så för en del komplexa former är det bättre att konvertera vektorbilder till raster i förväg. För en del av det grundläggande innehållet kan du fortfarande använda vektorinnehåll. Animate ger dig detta alternativ i form av en dialogruta där du delvis kan välja symboler. Att du delvis kan välja symboler innebär att du kan välja symboler som ska konverteras till raster medan de kvarvarande förblir vektorer.

Om du vill öppna dialogrutan för att delvis välja symboler klickar du på Ändra i dialogrutan Publiceringsinställningar och väljer en symbol i listan. Som standard är alla symboler valda.

Ändra delvist val av symboler
Ändra delvist val av symboler

Välj symbolerna du vill ha i listan. 

Delvist val av symboler
Delvist val av symboler

En självstudiekurs om texturpublicering

En självstudiekurs om texturpublicering
Lär dig skapa resurser med hjälp av vektorer för att få flexibilitet och originaltrohet och publicera dem till bitmappstexturer.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy