Kartlegger

En nettleserbasert fliskart-editor for å bygge 2D-spillverdener med sanntidssynkronisering og full angre/gjør om-støtte.

Oversikt

Karteditoren lar deg lage kart med flere lag, male fliser fra dine egne tileset, plassere enheter med egendefinerte egenskaper, tegne kollisjonsformer og merke interessepunkter. Alt synkroniseres i sanntid og støtter full angre/gjør om.

Arbeidet er organisert rundt et prosjekt, som inneholder kartene, tileset-ene og enhetsdefinisjonene dine. Du jobber i et fanebasert grensesnitt - åpne et kart, tileset eller en enhet i sin egen fane og bytt fritt.

Prosjekter

Et prosjekt er toppnivåbeholderen for alt i editoren. Hvert prosjekt inneholder sine egne kart, tileset og enhetsdefinisjoner.

Klikk Nytt prosjekt i prosjektlisten og gi det et navn og en valgfri beskrivelse.
Klikk Åpne på et prosjektkort for å gå inn i editoren.
Eksporter et prosjekt som JSON ved hjelp av nedlastingsikonet på prosjektkortet.
Å slette et prosjekt flytter det til papirkurven. Gjenopprett det fra papirkurvvisningen, eller det blir permanent slettet etter 7 dager.

Kart

Kart er lerretene der du bygger spillnivåene dine. Hvert kart inneholder lag, enhetsinstanser, kollidere og punkter.

Opprette og administrere kart

Åpne kartleseren fra verktøylinjen for å opprette, søke, gi nytt navn eller slette kart. Dobbeltklikk et kart for å åpne det, eller velg det og klikk Åpne. Hvert åpent kart får sin egen fane.

Lag

Hvert kart har en stabel med flislag i venstre sidefelt. Lag tegnes fra bunn til topp, med laget med høyest rekkefølge tegnet øverst.

• Klikk + ved siden av "Lag" for å opprette et nytt lag.
• Dra lag for å sortere. Slå av/på øyeikonet for å vise/skjule.
• Velg et lag for å male på det - høyre panel viser egenskapene.

Lagegenskaper tilgjengelig i høyre panel:

Egenskap	Beskrivelse
Flisstørrelse	Bredde og høyde på hver fliscelle i piksler. Lag kan ha ulike flisstørrelser.
Parallakse	X- og Y-multiplikatorer for parallakse-rulleeffekter.
Forskyvning	Pikselforskyvning for finposisjonering av laget.
Fargetone og gjennomsiktighet	Fargetone og gjennomsiktighet.
Egendefinerte egenskaper	Vilkårlige nøkkel-verdi-metadata som kan leses fra spillmotoren din.

Forgrunn og bakgrunn

Laglisten inkluderer et Enheter-pseudolag som skiller forgrunn fra bakgrunn. Dra flislag over eller under denne raden for å kontrollere om de tegnes foran eller bak enheter.

Flismalingsverktøy

Når et flislag er valgt, bruk disse verktøyene fra kartverktøylinjen:

Verktøy	Tast	Beskrivelse
Blyant	`B`	Mal individuelle fliser eller flerflisvalg på kartet.
Viskelær	`E`	Fjern fliser fra det aktive laget.
Rektangelfylling	`R`	Fyll et rektangulært område med den valgte flisen.
Velg	`V`	Velg og flytt enhetsinstanser eller andre objekter.

Bruk tileset-velgeren og flisvelger-knappene i verktøylinjen for å velge hvilket tileset og flisområde du vil male med. Dra for å velge et flerflisområde fra tileset-et.

Terreng auto-tiling

For tileset med konfigurerte terrenglag, bytt til terrengmodus. Terrengmaling bruker bitmask-basert auto-tiling for å automatisk velge riktig flisvariant basert på nabofliser. Se Tileset-seksjonen for oppsett.

Enheter

Enheter er gjenbrukbare spillobjekter - karakterer, gjenstander, triggere, spawnpunkter eller noe annet du trenger. Definer en enhet én gang, deretter plasser instanser av den på et hvilket som helst kart.

Definere enheter

Åpne enhetsleseren fra verktøylinjen for å opprette og administrere definisjoner. Hver enhet har et navn, en typestreng, og kan inneholde:

• Sprites - visuelle lag fra tileset-ene dine. Hver har posisjon, forskyvning, opprinnelse, skala, rotasjon, gjennomsiktighet, fargetone og z-indeks.
• Kollidere - kollisjonsformer (rektangel, sirkel eller polygon) redigert i en dedikert kolliderredigerer.
• Egenskaper - typede felt (streng, tall, boolsk, enum eller farge) med standardverdier som fungerer som et skjema.

Plassere instanser

Bytt til Enhetsverktøyet (T), velg hvilken enhet du vil plassere, og klikk deretter på kartet. Hver instans har:

• Posisjon - X- og Y-koordinater på kartet.
• Rotasjon - vinkel i grader.
• Skala - uavhengige X- og Y-skalafaktorer.
• Egenskapsoverstyringer - overstyr enhver standardverdi per instans. Tilbakestill til standardverdier individuelt.

Bruk V for å velge og dra instanser. Høyreklikk for en kontekstmeny med slett.

Tileset

Tileset er spriteark-bilder som editoren deler opp i individuelle fliser basert på en konfigurerbar flisstørrelse.

Administrere tileset

• Åpne tileset-leseren fra verktøylinjen for å opprette, søke og slette tileset.
• Åpne en tileset-fane for å se bildet og konfigurere flismetadata.
• Last opp eller erstatt bildet med Erstatt bilde. PNG og GIF støttes (opptil 10 MB).
• Sett flisbredde og flishøyde i sidefeltet for å matche spriteark-rutenettet ditt.

Flisegenskaper

Klikk en flis i tileset-visningen for å velge den. Egenskapspanelet lar deg sette:

• Navn og Type - for å identifisere fliser i spillmotoren din.
• Egendefinerte egenskaper - vilkårlige nøkkel-verdi-par (f.eks. "walkable": "false").
• Kollidere - per-flis kollisjonsformer med en visuell editor.
• Animasjonsrammer - definer rammesekvenser med varighet per ramme for å animere fliser.

Opprett entitet fra flis

Høyreklikk en flis i flissettet og velg "Opprett entitet fra flis" for å opprette en ny entitet med en sprite som peker til den valgte flisen. Entiteten navngis etter metaflisen (eller flissettnavnet) og åpnes i en ny fane.

Terrenglag

Terrenglag muliggjør auto-tiling. I tileset-sidefeltet, klikk + ved siden av "Terrenglag" for å opprette ett. Velg et terrenglag, deretter tilordne fliser til bitmask-posisjoner. Når du maler med terreng, velger editoren automatisk riktig flisvariant basert på naboer.

Kollidere

Kollidere definerer kollisjons- og triggerområder. De vises på tre steder:

• Kartkollidere - tegnet direkte på lerretet for vegger, gulv og triggersoner.
• Enhetskollidere - festet til enhetsdefinisjoner og arvet av hver instans.
• Fliskollidere - festet til individuelle fliser for per-flis kollisjonsformer.

Tegne kartkollidere

Bytt til Kolliderverktøyet (C) og klikk på kartet for å plassere hjørnepunkter. Hvert klikk legger til et punkt til en polygonkollider.

• Høyreklikk et punkt for å slette det, eller et segment for å sette inn et nytt punkt.
• Høyreklikk kroppen for å slette hele kollideren.
• Hver kollider har navn, type og egendefinerte egenskaper i høyre panel.

Punkter

Bruk Punktverktøyet (P) for å plassere navngitte kartpunkter - spawn-steder, veipunkter, kameramål eller en hvilken som helst posisjonsmarkør. Hvert punkt har et navn, type, posisjon og valgfrie egendefinerte egenskaper.

Hurtigtaster

Hurtigtast	Handling
`Cmd/Ctrl+Z`	Angre
`Cmd/Ctrl+Shift+Z`	Gjør om
`V`	Velg-verktøy
`B`	Blyant-verktøy
`E`	Viskelær-verktøy
`R`	Rektangelfylling-verktøy
`T`	Enhetsverktøy
`C`	Kolliderverktøy
`P`	Punktverktøy
`H`	Vis/skjul rutenett
`F`	Vis/skjul fullskjerm
`Delete`	Slett valgt element
`Escape`	Fjern markering / avbryt

Eksportformat

Eksport av et prosjekt produserer en .zip-fil med JSON-ressursfiler og tileset-bilder. Bruk disse filene til å laste nivåene dine i enhver spillmotor.

ZIP-struktur

project.zip ├── project.lostproj # Prosjektmanifest ├── resources/ │ └── tileset.png # Tileset-bilder ├── tilesets/ │ └── forest.lostset # Tileset-definisjoner ├── entities/ │ └── hero.lostentity # Enhetsdefinisjoner └── maps/ └── level1.lostmap # Kartdata

.lostproj (Prosjektmanifest)

Rotfilen som lister alle ressurser i prosjektet.

{ "version": "1.0", "name": "My Project", "hash": "a1b2c3...", "lastModified": "2026-01-25T12:00:00Z", "resources": { "tilesets": ["tilesets/forest.lostset"], "maps": ["maps/level1.lostmap"], "entities": ["entities/hero.lostentity"] } }

.lostset (Tileset)

Definerer et tileset-bilde, dets flisrutenett, per-flis metadata og terrenglag.

{ "version": "1.0", "id": "uuid", "name": "Forest", "order": 1, "imagePath": "resources/forest.png", "tileWidth": 32, "tileHeight": 32, "tiles": [ { "x": 0, "y": 0, "width": 32, "height": 32, "name": "grass", "type": "ground", "colliders": [ { "id": "uuid", "name": "floor", "type": "solid", "position": { "x": 16, "y": 16 }, "points": [{ "x": -16, "y": -16 }, ...], "properties": {} } ], "properties": { "walkable": "true" } } ], "terrainLayers": [ { "id": "uuid", "name": "Ground", "tiles": [{ "tileId": 5, "bitmask": 255 }] } ] }

Felt	Beskrivelse
order	1-indeksert alfabetisk posisjon blant prosjektets tileset. Brukes i fliskoding.
tiles[].x / y	Flisrutenett-koordinater (kolonne og rad i tileset-bildet).
colliders[].position	Sentroid av kolliderformen.
colliders[].points	Hjørnepunkter relativt til sentroiden.

.lostentity (Enhet)

En gjenbrukbar enhetsdefinisjon med sprites, kollidere og et egenskapsskjema.

{ "id": "uuid", "name": "Hero", "type": "character", "sprites": [ { "id": "uuid", "name": "body", "type": "", "tilesetId": "tileset-uuid", "rect": { "x": 0, "y": 0, "width": 32, "height": 32 }, "offset": { "x": 0, "y": 0 }, "origin": { "x": 0.0, "y": 0.0 }, "scale": { "x": 1.0, "y": 1.0 }, "rotation": 0, "zIndex": 0, "tint": { "r": 255, "g": 255, "b": 255, "a": 255 } } ], "offset": { "x": 0, "y": 0 }, "rotation": 0, "colliders": [ { "id": "uuid", "name": "hitbox", "type": "solid", "position": { "x": 0, "y": 0 }, "points": [ { "x": -16, "y": -16 }, { "x": 16, "y": -16 }, { "x": 16, "y": 16 }, { "x": -16, "y": 16 } ], "properties": {} } ], "properties": [ { "name": "health", "type": "number", "default": "100", "options": [] } ] }

Felt	Beskrivelse
sprites[].rect	Kilderektangel i tileset-bildet i piksler (x, y, bredde, høyde).
sprites[].tint	{r, g, b, a}-verdier 0-255.
properties	En matrise med definisjoner (skjema), ikke instansverdier. Hver oppføring har name, type, default og options.
colliders	Rektangel = 4 hjørnepunkter, sirkel = 16-punkts tilnærming, polygon = rå hjørnepunkter.

.lostmap (Kart)

Inneholder lag, enhetsinstanser, kartkollidere og punkter.

{ "version": "5.0", "id": "uuid", "name": "Level 1", "layers": [ { "id": "uuid", "name": "Ground", "visible": true, "foreground": false, "order": 0, "tileWidth": 32, "tileHeight": 32, "chunkWidth": 8, "chunkHeight": 8, "parallaxX": 1.0, "parallaxY": 1.0, "offsetX": 0.0, "offsetY": 0.0, "tint": { "r": 255, "g": 255, "b": 255, "a": 255 }, "properties": {}, "chunks": { "0,0": [4294967328, 0, ...], // 64 encoded tile values "-1,0": [...] } } ], "entities": [ { "id": "uuid", "x": 128, "y": 256, "entityDefId": "entity-uuid", "rotation": 0, "scale": { "x": 1.0, "y": 1.0 }, "properties": { "health": "50" } } ], "points": [ { "id": "uuid", "x": 100, "y": 200, "name": "spawn", "type": "player_start", "properties": {} } ], "colliders": [ { "id": "uuid", "name": "wall", "type": "solid", "position": { "x": 64, "y": 96 }, "points": [...], "properties": {} } ] }

Fliskoding

Hver verdi i en chunk-matrise er enten 0 (tom) eller et enkelt heltall som koder tileset-et og pikselposisjonen til flisen i tileset-bildet.

Eksportøren konverterer flisrutenett-koordinater til pikselkoordinater før koding: pixel_x = tile_x x tileWidth, pixel_y = tile_y x tileHeight. Disse pikselverdiene pakkes deretter inn i et 48-bit heltall:

Koding

tile_id = (tileset_order << 32) | (pixel_y << 16) | pixel_x

Dekoding

tileset_order = tile_id >> 32 pixel_y = (tile_id >> 16) & 0xFFFF pixel_x = tile_id & 0xFFFF tile_col = pixel_x / tileWidth tile_row = pixel_y / tileHeight

0 = tom flis
tileset_order = 1-indeksert alfabetisk tileset-posisjon (samsvarer med order i .lostset)
pixel_x / pixel_y = pikselkoordinater for øvre venstre hjørne av flisen i tileset-bildet
Del med tileset-ets tileWidth / tileHeight for å få rutenettkolonne og -rad
48-bit heltall - krever BigInt eller en 64-bit heltallstype i de fleste motorer

Chunks

Chunk-nøkler er "chunk_x,chunk_y"-strenger (negative verdier støttes). Hver chunk-verdi er en flat matrise med 64 kodede flis-heltall som representerer et 8x8 flisrutenett i rad-major rekkefølge (venstre-til-høyre, topp-til-bunn).

Enhetsinstanser (i kart)

Felt	Beskrivelse
entityDefId	Lenker til id-feltet i en .lostentity-fil.
properties	Flatt {"name": "value"}-kart - inneholder kun overstyrte verdier. Slå sammen med enhetsdefinisjonens standardverdier.
x / y	Pikselposisjon på kartlerretet.
scale	Uavhengige X- og Y-skalafaktorer.

Dokumentasjon