Tijden veranderen
Kaart inkleuren
* Blanco kaart
* Kaarten met ingekleurde landen.
Je kunt kaarten bewerken met programma's als:
GIMP: Klik
Inkscape: Klik
Adobe Photoshop: Klik (trial)
Jan DS op 18/06/2010 19:26:08:
Ja, maar ik kan toch niet voorspellen welke gebieden de spelers gaan innemen. Hoe kan ik dan een gekleurde kaard maken?
je moet dan verschillende kaarten maken
- 1 blanco, alle landen gewoon wit
- van elk land een aparte kaart waarbij de achtergrond transparant is(alle andere landen verwijderen) en alleen het betreffende land staat ingekleurd.
Al deze afbeeldingen even groot, bij de kaarten van de landen het land op de juiste plaats. Vervolgens in PHP als eerste de blanco kaart nemen als onder grond en de landen naar keuze er over heen plakken zodat deze op het einde resultaat ingekleurd worden en de rest wit blijft. Dat is de opzet. Eigenlijk zo ongeveer dezelfde techniek gebruiken als bij een watermerk over afbeelding maken. En dat is ook waar je op moet googelen denk ik zo.
Gewijzigd op 19/06/2010 20:18:39 door Piet Verhagen
Een gifje maken waarin alle landen staan, ieder land moet een andere kleur hebben.
Schrijf per land de rgb code op die erbij horen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
$image = imagecreatefromgif( 'landkaart.gif' );
// een array met alle landen met bijbehorende rgb
$landen = array( 'Belgie' => array( 'R' => '0', 'G' => '0', 'B' => '0' ), 'Nederland' => array( 'R' => '255', 'G' => '0', 'B' => '0' ), 'Luxemburg' => array( 'R' => '255', 'G' => '255', 'B' => '0' ) );
// een array met de landen die een user heeft 'veroverd', die zal je waarschijnlijk uit een database gaan halen
$landen_owned = array( 'Nederland' );
foreach( $landen as $land )
{
$index = imagecolorclosest( $image, $land[ 'R' ], $land[ 'G' ], $land[ 'B' ] ); // Let op: R G B vervangen!
if( in_array( $land, $landen_owned )
imagecolorset( $image, $index, R, G, B ); //hier komt de rgb code van de speler
else
imagecolorset( $image, $index, 0, 0, 0 );
}
?>
$image = imagecreatefromgif( 'landkaart.gif' );
// een array met alle landen met bijbehorende rgb
$landen = array( 'Belgie' => array( 'R' => '0', 'G' => '0', 'B' => '0' ), 'Nederland' => array( 'R' => '255', 'G' => '0', 'B' => '0' ), 'Luxemburg' => array( 'R' => '255', 'G' => '255', 'B' => '0' ) );
// een array met de landen die een user heeft 'veroverd', die zal je waarschijnlijk uit een database gaan halen
$landen_owned = array( 'Nederland' );
foreach( $landen as $land )
{
$index = imagecolorclosest( $image, $land[ 'R' ], $land[ 'G' ], $land[ 'B' ] ); // Let op: R G B vervangen!
if( in_array( $land, $landen_owned )
imagecolorset( $image, $index, R, G, B ); //hier komt de rgb code van de speler
else
imagecolorset( $image, $index, 0, 0, 0 );
}
?>
Code is niet getest en zal misschien niet helemaal kloppen!
Gewijzigd op 20/06/2010 01:58:21 door - -
Ik wacht met smart op HTML-5
Wie weet wat Internet Explorer 9 brengt. Het zal allicht beter zijn dan het voorgaande ;) Vooral nu ze verplicht de keuze moeten stellen voor andere browsers, waardoor ze dus gebruikers zullen missen als ze nu niet goed meedoen. Wie weet gaat IE zich aan de standaarden houden!
Ontopic:
Je zou ook PHP alle mogelijke combinaties kunnen laten maken, deze opslaan en dan die gebruiken. Dit kost in het vervolg minder server kracht.
Ook maar on topic:
Kijk een naar http://upload.wikimedia.org/wikipedia/commons/b/b8/Blank_Map_of_Europe_-w_boundaries.svg
Wat je beter kan doen is deze svg gebruiken en hem in php stoppen, en dan met een Content-Type en .htaccess de php-file als svg voordoen, zo hoef je geen enklele afbeelding te genereren.
Dat komt neer op:
Je pakt de xml van de svg (google eens op svg) en past deze met php (PHPDom, google) aan met de kleurtjes. De paden van de lijntjes zijn er al, je hoeft dan alleen de fill te verandren. Dus je doet een XPath (google) en verandert bij elk svg:path item het style attribuut. Alle landen zijn al aangegeven met landcode, moet lukken.
Alsnog een hoop werk, succes!
En trouwens de svg support:
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics#Native_support
Dus geen IE support, en als je zoekt naar omwegen:
http://www.planetsvg.com/content/svg-solutions-internet-explorer
Gewijzigd op 21/06/2010 22:13:08 door Pim -
hokjes van 25px bij 25px
en daar overheen zit een div met de lege plattegrond..