Bookmark and Share

Svårighetsgrad
Svårighetsgrad
Betyg (3 röster)
BetygBetygBetygBetygBetyg
 

Tile editor - Del 2

Inledning

Dags för nästa steg. Vi kommer i denna del att utöka GUI:t och lägga till stöd för att ladda grafik, s.k. "Tile sheets". En anledning till att vi envisas med engelska termer så som "tile" och "tile sheets" är för att du lättare skall hitta mer information på nätet. Testa en gång att googl'a efter "grafik 2d spel" och du hittar inte mycket. Om du istället googl'ar efter "games 2d tiles" eller "game sprite sheets" så får du bättre resultat.

En "tile sheet" är helt enkelt en bild, oftast i formatet bmp eller png, där du har all grafik till banan samlad. Det är utifrån denna bild som banan sedan skall byggas. Ett exempel ser du nedan.

bild

TileSheetPictureBox

Vi börjar med att skapa en ny kontroll på liknande sätt vi gjorde MapPictureBox i del 1. Skapa en ny klass och döp den till TileSheetPictureBox.cs.

Kontrollen liknar i mycket MapPictureBox då vi även här håller koll på muspekarens rörelser i kontrollen. Vid ett "Click" så beräknar vi och uppdaterar vilken "tile" som blev vald.

Egenskaperna TileIndex, SelectedTileIndex och SelectedTileRectangle innehåller beräkningar för att t.ex. räkna ut den valda rutans rektangel i kontrollen och vilket index rutan har. Indexet börjar på 0, vänstra hörnet längst upp i kontrollen, och fortsätter i riktning höger. I bilden som exempel så har sten/grus index 0, gräs index 1 och vägg/mur index 2.

SelectedTileIndex returnerar -1 om ingen ruta är vald.

OnPaint lägger till en markering i uppritningen så att vald ruta visas.

Modifiering av Map

Vi lägger in en TabControl i formuläret Map. Tanken är att en tab skall visa kartan och en tab skall visa vilka "tiles" vi har att välja på. Namnge den första fliken "Map" och den andra "Tiles". Flytta sedan in mapPictureBox i "Map" och lägg till en TileSheetPictureBox i "Tiles som du döper till tileSheetPictureBox. Bilden nedan visar designen:

bild

Ange Dock = Fill på din TabControl så att den tar all plats i fönstret. På varje TabPage (både "Map" och "Tiles") anger du AllowScroll = True.

Vi gör ändringar i koden för Map.cs enligt nedan:

Map behöver en ny Image för grafiken till "tiles". Vi ändrar här mapImage från att ha varit Bitmap till att vara Image vilket är en mer generell klass. Vi skapar också en property, TileSheet, så att vi kan uppdatera tileSheetPictureBox med rätt bredd, höjd och bild.

Vi inför egenskaperna SelectedTileIndex och SelectedTileRectangle som skickar vidare information från tileSheetPictureBox.

DrawTile uppdaterar nu kartan med riktig grafik från vår "tile sheet".

Det som återstår nu är GUI och kod för att ladda en "tile sheet". Vi skall även göra ändringar i MapPictureBox för att byta ut den röda pricken mot grafik från vår "tile sheet".

Ändringar i LevelEditor

Vi behöver en möjlighet att ladda "tile sheets" i programmet. Enklast är att lägga till en ToolStripMenuItem, namngiven som loadTilesheetToolStripMenuItem, i menyn under "File". Vi kan sedan fånga "Click"-eventet, visa en fildialogruta, och försöka läsa in bilden som valts.

bild

Vi passar på att sätta Enabled = False på följande grafiska element:

Anledning till detta är att dessa element skall inte gå att använda om inte vi har en bana (MDI fönster) öppnad och markerad. Hur vet vi då vilket fönster vi eventuellt har? Jo, det finns en property i Form som heter ActiveMdiChild. ActiveMdiChild är antingen null eller så refererar den till det aktiva fönster som då finns. Det finns som tur är en event också som inträffar då det aktiva fönstret ändras eller stängs. Denna event heter MdiChildActive och den skall vi binda till vår LevelEditor.

I LevelEditor_MdiChildActivate aktiverar vi de delar av GUI:t som kräver att det finns ett öppnat fönster.

I loadTilesheetToolStripMenuItem_Click öppnar vi en fildialogruta för BMP och PNG filer. Väljer vi en fil och trycker OK så försöker vi att ladda en bild och sätta den som vår aktuella TileSheet.

Nu skall det gå bra att köra programmet, skapa en ny bana, ladda en valfri "tile sheet" och börja rita en bana. Kvar återstår endast några grafiska förbättringar i MapPictureBox.

Ändringar i MapPictureBox

Vi ändrar den tidigare röda pricken som visade var muspekaren var mot den "tile" som verkligen kommer att ritas ut. Vi använder oss av en ColorMatrix för att ändra alpha och på så sätt få en transparent visning av den "tile" som vi har valt.

Avslutning

Skalet till programmet börjar bli klart. Ännu har vi inte presenterat vilken data som skall sparas och hur den skall sparas. En bana kommer att bestå av "tiles", deras placering och ev. egenskaper samt kartans inställningar (storlek etc.). Nästa artikel kommer att avsluta serien och presentera en strategi för att spara kartan som XML + bilder.

Nedan kan du som vanligt ladda hem projektet i sin helhet.

bild

Kommentarer

3 inlägg