luq techblog

o tworzeniu słów kilka…

Aplikacja webowa – edytor map 3 lipca 2010

Filed under: GameDev,GameMap,JS — Łukasz @ 17:53
Tags: ,

Map editor

Kontynuując mój poprzedni wątek nt. mapy gry webowej, dziś stworzyłem GUI (Graphical User Interface) pod edytor map, który jest niezbędny do dalszej pracy. Nie wyobrażam sobie jakbym miał „z ręki”, w bazie, dodawać kolejne pola do mapy lub nawet skryptowo przez PHP, po prostu do generowania mapy trzeba mieć podgląd na całość, innego wyjścia nie ma.

 

Wyszło mi to, myślę, nieźle. Zresztą screen widać obok.

 

W sumie jest to wersja dość uboga i powinno to wyglądać coś jak Photoshop. Powinno być okienko Navigator przez które możemy się przesuwać po całości, wybierać x,y od którego chcemy mieć podgląd etc. oraz okienko Sprites, oba oczywiście drag&drop. Ale, w końcu „nie od razu Rzym zbudowano”, na razie to co jest wystarczy mi spokojnie :)

 

Już na początek podam linka do edytora, oto on:
Map Editor

Wystarczy kliknąć na jakimś spricie a następnie na polu na mapie gdzie go chcemy wstawić.

 

Jak to jest zrobione?

To od początku, index.html
 
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Map Editor for Game by `luq`</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="./style/style.css" />
	
	<script type="text/javascript" src="../js/game.cfg.js"></script>
	
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="./js/map_editor.js"></script>
  </head>
<body>
	
	<table>
		<tr id="scaleX">
			<th>.</th>
			<th>0</th>
			<th>1</th>
			<th>2</th>
			<th>3</th>
			<th>4</th>
			<th>5</th>
			<th>6</th>
			<th>7</th>
			<th>8</th>
			<th>9</th>
			<th>10</th>
		</tr>
		<tr>
			<th class="scaleY">0</th>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
                (...)
	</table>
	
	<div id="fields">
		Sprites<br/>
		
		<div style="background-position: 0px 0px;" x="0" y="0" rel="1"></div>
		<div style="background-position: -40px 0px;" x="1" y="0" rel="2"></div>
		<div style="background-position: -80px 0px;" x="2" y="0" rel="5"></div>
		<div style="background-position: -120px 0px;" x="3" y="0" rel="7"></div>
		<div style="background-position: 0px -40px;" x="0" y="1" rel="3"></div>
		<div style="background-position: -40px -40px;" x="1" y="1" rel="4"></div>
		<div style="background-position: -80px -40px;" x="2" y="1" rel="6"></div>
	</div>
</body>
</html>

Dołączone zostało oczywiście jQuery, game.cfg.js to jest plik do którego przerzucono stałą CORE_SIZE_FIELD i tylko tyle zawiera (patrz index.html z Canvas & Sprites a dokładniej skrypt dodany inline), map_editor.js to serce mechanizmu i o tym będzie dalej.

 

W tabelce <th /> to liniuszek/miarka czy jak tam kto woli, <td /> natomiast to pola w które możemy „wklejać” sprity, w div[id=fields] zawarte są wszystkie kafelki, oczywiście z wykorzystaniem CSS Sprites. Dodatkowo, dodałem argumenty x i y, które są przyjaźniejszą alternatywą dla mnogości liczby 40 jaki pozycji sprita na głównym obrazku. Odzwierciedla to rysunek już znany z poprzedniego wpisu.

All map sprites

W sumie chyba nie będzie mi to potrzebne ale zawsze warto pewne informacje mieć. Argument rel, natomiast przechowuje mi id tego sprita zgodnie z bazą, ale o niej nie będziemy dziś mówić. Jest mi on niezbędny do wykonania Ajax`owego zapytania generującego SQLowe zapytanie dodające/edytujące kafelkę w podanej pozycji na mapie.

 

Należałoby jeszcze podać plik ze stylami, style.css

body { margin: 0; padding: 0; font-family: verdana; font-size: 10px; font-weight: bold; }
table { border-spacing: 0; }

#scaleX { background-color: #000; color: #fff; height: 15px;  }
#scaleX th{ border-right: 1px dashed #fff; text-align: center;  }

th.scaleY { background-color: #000; color: #fff; width: 15px; border-top: 1px dashed #fff; }

td { cursor: pointer; text-align: center; color: #bbb; font-size: 9px; padding: 0; margin: 0; }

#fields { margin-top: 20px; }
#fields div { float: left; margin-right: 5px; background-image: url(../../gfx/my_map.png); border: 2px solid #fff; cursor: pointer; }

Tutaj jedynie

#fields div { border: 2px solid #fff; }

wymaga szybkiego wytłumaczenia. Po co dawać obramowanie o kolorze takim samym jak tło? Przecież wtedy go nie widać. No właśnie, w wym celu jest taki border zrobiony. Gdy klikamy na jakąś kafelkę dostaje ona czerwonego obramowania, ale gdyby nie było wcześniej żadnego obramowania to szerokość całego box model by się zmieniła, co dawałoby, niezbyt fajny efekt.

 

Teraz przyszła pora na map_editor.js

$(document).ready(function(){
        // liniuszek X
	$('#scaleX th').css( 'width', CORE_SIZE_FIELD + 'px' );
	$('#scaleX th:first').css( 'width', 15 + 'px' );
	
        // liniuszek Y
	$('th.scaleY').css( 'height', CORE_SIZE_FIELD + 'px' );

	   // szachownica
	$('tr td:odd').css( 'background-color', '#EFEFFF' );
	
        // komórka
	$('#fields div').css({
		'width': CORE_SIZE_FIELD + 'px',
		'height': CORE_SIZE_FIELD + 'px',
	});

Czyli ustawiamy szerokości i wysokości w tabelce korzystając ze stałej CORE_SIZE_FIELD. Następnie:

var x, y;
$('td').each(function( index ){
	y = $(this).parent().find('th').html();
	x = index - ( y * 10 ) - y;
	$(this).html(
		x+','+y
	);
});

Wpisujemy w każdą komórkę jej x i y. Ogólnie to ostatecznie będzie generowanie dynamicznie przez PHP bo musi być wczytana już istniejąca siatka mapy, więc to przy okazji zrobi PHP… Napisanie tego w jQuery w końcu nie było trudne, więc to zamieściłem w aktualnej wersji.
Kolejne są 2 zdarzenia, pierwsze z nich:

// event`s
var actualField 	= null;
var actualFieldX 	= null;
var actualFieldY 	= null;
$('#fields div').click(function(){
    // kasuj ramke
    if( actualField ){
        $('#fields div[rel='+actualField+']').css( 'border-color', '#fff' );
    }
		
    actualField  = $(this).attr( 'rel' );
    actualFieldX = $(this).attr( 'x' );
    actualFieldY = $(this).attr( 'y' );
		
    $(this).css( 'border-color', '#f00' );
		
});

Czyli – po kliknięciu na któryś z obrazków spritów, zostaje dodane mu obramowanie, równocześnie z poprzedniego (jeśli było) zostaje „ściągnięte” oraz do zmiennych zostają wczytane argumenty x, y oraz rel tego sprita.
Ostatni wycinek:

$('td').click(function(){
	if( actualField ){
		// set image in HTML table 
		var xSprite, ySprite;
		
		xSprite = actualFieldX * -CORE_SIZE_FIELD;
		ySprite = actualFieldY * -CORE_SIZE_FIELD;

		$(this).css( 'background-image', 'url(../gfx/my_map.png)' );
		$(this).css( 'background-position', xSprite+'px '+ySprite+'px' );
		//$(this).css( 'color', '#444' );
		$(this).text('');
			
		// ajax query
		// not jet...
	}
});

Czyli – po kliknięciu na którąś komórkę siatki mapy, jeśli wybraliśmy jakiś sprit, dodaj go jako obrazek tła tej komórki i wyczyść jej zawartość (bo przysłania to obrazek).
Jak widać komentarz, wskazuje gdzie będzie odbywać się komunikacja asynchroniczna z serwerem, ale o tym już następnym razem. Będzie też o tym jak wyglądać będzie baza danych, zaprojektujemy zapytanie i będzie też trochę PHP.

Reklamy
 

One Response to “Aplikacja webowa – edytor map”

  1. […] ostatnio zakończyliśmy na GUI pod edytor map, dziś dopiszemy trochę kodu aby nasz edytor zapisywać dane […]


Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s