Animatør

En sprite-animasjonseditor for å lage bilde-for-bilde-animasjoner, tween-basert bevegelse og hendelsespor.

Oversikt

Animatøren lar deg bygge sprite-animasjoner for spillkarakterer, objekter og effekter. Editoren er organisert i fire områder:

Venstre sidefelt

Animasjoner og spriteark-liste

Forhåndsvisning

Live forhåndsvisning av valgt animasjon

Tidslinje

Spor og keyframes på en tidslinjal

Egenskaper

Rediger valgt animasjon, spor eller keyframe

Alle endringer lagres automatisk med full angre/gjør om-støtte (Cmd/Ctrl+Z / Cmd/Ctrl+Shift+Z).

Animasjoner

En animasjon er en navngitt sekvens som inneholder ett eller flere spor. Hver har sin egen varighet, loop-innstilling og tidslinje.

Opprett en ved å klikke + øverst i animasjonslisten. Velg en animasjon for å se den i forhåndsvisningen og sporene i tidslinjen.

Innstilling	Beskrivelse
Navn	Gi nytt navn i egenskapspanelet.
Varighet	Total lengde i sekunder, satt via verktøylinjen.
Loop	Slå av/på gjentakelse med loop-knappen i verktøylinjen.
Fest til rutenett	Juster keyframes til et regelmessig intervall.
Rutenettstørrelse	Festintervall i sekunder (synlig når fest er på).

Dupliser en animasjon med kopiikonet. Slett med Delete.

Spor

Spor er lag innenfor en animasjon. Hvert inneholder keyframes av en bestemt type. Det finnes tre sportyper:

Sprite

Viser et sprite-bilde fra et spriteark ved hvert keyframe. Bruk for bilde-for-bilde-animasjon.

Tween

Interpolerer mellom keyframes over en varighet med en easing-funksjon. Bruk for jevn bevegelse, fading eller skalering.

Hendelse

Utløser en navngitt hendelse på et bestemt tidspunkt. Bruk til å utløse lyder, effekter eller spilllogikk.

Legg til et spor med + Track i tidslinjeverktøylinjen og velg typen. Spor kan gis nytt navn i egenskaper, sorteres ved å dra, og slettes med Delete.

Keyframes

Keyframes definerer hva som skjer på et bestemt tidspunkt på et spor. Dobbeltklikk et sporområde for å legge til en, eller bruk Neste bilde for å legge til ved neste rutenettsteg med en økt bildeindeks.

Klikk for å velge, Shift+klikk for flervalg, Cmd+A for å velge alle. Dra for å flytte. Endre størrelsen på tween-keyframes ved å dra kanten.

Sprite keyframe-egenskaper

Egenskap	Beskrivelse
Tid	Posisjon i sekunder.
Sprite	Klikk for å åpne bildevelgeren og velge et bilde fra et spriteark.
Bilde X / Y	Kolonne og rad for det valgte bildet i spriteark-rutenettet.
Forskyvning X / Y	Pikselforskyvning for å finjustere posisjon.
Speilvend	Speilvend horisontalt, vertikalt eller begge.

Tween keyframe-egenskaper

Egenskap	Beskrivelse
Tid	Posisjon i sekunder.
Varighet	Lengde i sekunder.
Easing	Interpolasjonskurve: Linear, Step, Ease In/Out/In-Out, Bounce In/Out/In-Out, Exponential In/Out/In-Out, Parabolic.

Spriteark

Et spriteark er et bilde med flere animasjonsbilder i et rutenett. Last opp spriteark og referer til individuelle bilder fra sprite-spor-keyframes.

Bytt til spriteark-fanen i venstre sidefelt og klikk + for å laste opp. Klikk et navn for å åpne editoren der du kan:

•Sett flisbredde og flishøyde for å definere bilderutenettet
•Se bildedimensjoner, rutenettstørrelse og bildeantall
•Erstatt bildet eller slett spriteark-et

Bildevelger

Når du redigerer et sprite-keyframe, klikk Sprite i egenskaper for å åpne bildevelgeren. Den viser spriteark til venstre og et klikkbart bilderutenett til høyre. Klikk et bilde for å tilordne det. Med flere keyframes valgt, lar velgeren deg endre spriteark-et for alle samtidig.

Forhåndsvisning og avspilling

Forhåndsvisningspanelet viser en live gjengivelse av den valgte animasjonen ved gjeldende avspillingsposisjon.

Kontroll	Beskrivelse
Spill av / Pause	Start eller pause. Også Space.
Stopp	Stopp og tilbakestill til begynnelsen.
Steg fremover/bakover	Flytt med ett rutenettsteg (eller 0,01s hvis fest er av).
Hopp til start	Hopp til tid null.

Med loop aktivert starter avspillingen på nytt på slutten. Med loop av stopper den automatisk.

Hurtigtaster

Hurtigtast	Handling
`Space`	Spill av / pause
`Delete`	Slett valgt keyframe, spor eller animasjon
`Escape`	Fjern markering eller lukk modal
`Cmd/Ctrl+Z`	Angre
`Cmd/Ctrl+Shift+Z`	Gjør om
`Cmd/Ctrl+A`	Velg alle keyframes

Eksportformat

Eksport av et prosjekt produserer en .zip-fil med JSON-animasjonsfiler og spriteark-bilder. Bruk disse filene til å spille av animasjoner i enhver spillmotor.

ZIP-struktur

project.zip ├── index.json # Manifest ├── animations/ │ └── Walk.lostanim # Per-fil animasjonsdata └── resources/ └── hero_sheet.png # Spriteark-bilder

index.json (Manifest)

Rotfilen som lister alle animasjonsfiler og spriteark-ressurser.

{ "name": "My Animations", "hash": "a1b2c3...", "animationFiles": [ { "name": "Hero", "path": "animations/Hero.lostanim" } ], "resources": [ { "id": "uuid", "name": "hero_sheet", "path": "resources/hero_sheet.png", "tileWidth": 32, "tileHeight": 32, "imageWidth": 256, "imageHeight": 256 } ] }

.lostanim (Animasjonsfil)

Hver fil inneholder én eller flere animasjoner med sine spor og keyframes.

{ "name": "Hero", "animations": [ { "id": "uuid", "name": "Walk", "duration": 0.8, "loop": true, "snapToGrid": true, "gridSize": 100, "tracks": [...] } ] }

Felt	Beskrivelse
duration	Total lengde i sekunder (desimaltall).
gridSize	Festintervall i millisekunder.
tracks[].type	"sprite", "tween" eller "event".

Sprite keyframe

{ "id": "uuid", "time": 0.0, "frame": { "x": 0, "y": 0 }, "offset": { "x": 0.0, "y": 0.0 }, "flipX": false, "flipY": false, "spritesheetId": "uuid", "anchors": { "hand": { "x": 10.5, "y": 20.3 } } }

Felt	Beskrivelse
frame.x / y	Flisrutenett-koordinater (kolonne og rad i spriteark-et).
spritesheetId	Refererer til en ressurs-id fra index.json. Utelatt når null.
anchors	Navngitte ankerpunkter med {x, y}-posisjoner.

Tween keyframe

{ "id": "uuid", "time": 0.2, "duration": 0.3, "easing": "EaseInOut", "anchors": { "hand": { "x": 15.0, "y": 25.0 } } }

Gyldige easing-verdier:

•Linear, Step, Parabolic
•EaseIn, EaseOut, EaseInOut
•BounceIn, BounceOut, BounceInOut
•ExponentialIn, ExponentialOut, ExponentialInOut

Hendelse-keyframe

{ "id": "uuid", "time": 0.5, "anchors": {} }

Hendelse-keyframes markerer et tidspunkt. Spornavnet fungerer som hendelsesidentifikator i spillmotoren din.

Dokumentasjon