2D RTS: Sterrenhemel

Door Gamebuster op zondag 22 december 2013 13:40 - Reacties (7)
Categorie: Hobby RTS, Views: 5.231

Als hobby maak ik een simpele 2D RTS in een "space-setting" in C+SDL+OpenGL+OpenCL. In deze blogposts omschrijf ik het ontwikkel proces en waar ik allemaal tegenaan loop. Zie ook de 1e blogpost (veel tekst)

Sinds mijn laatste blogpost ben ik vrij druk geweest met allerlei andere zaken, niet gerelateerd aan mijn RTS, dus ik ben nog niet veel verder gekomen. Als tussendoortje begon ik te denken over hoe ik exact de achterliggende sterrenhemel wilde implementeren.

Ik begon met het openen van photoshop om te kijken of ik een idee uitgewerkt kon krijgen, maar dit liep niet uit tot een bevredigend resultaat, simpelweg omdat ik totaal geen photoshop persoon ben.

Toch had ik wel een idee in mijn hoofd. Ik beeldde me sterrenhemel in met als basis stipjes die sterren voorstellen. De kleuren van deze stippen zouden variabel tussen oranje/rood, wit en lichtblauw zijn. Ik had die kleuren om voor mij nog onbekende rede in mijn hoofd: Waarom had ik in mijn hoofd dat mijn "stippen" moeten variëren tussen die kleuren?

Ik ben gaan duckduckgoën en al gauw kwam ik op het princiepe van kleur-temperatuur. Dit ben ik wel eens vaker tegengekomen, zoals bij de aanschaf van lampen en bij het instellen van F.Lux. Het is me nooit echt doorgedrongen wat het precies inhield e.d.

Na wat naïve logica in mijn hoofd zocht ik een formule op om RGB kleuren te genereren o.b.v. een kleurtemperatuur. Ik kwam een resultaat tegen met een pseudo-code formule en wat plaatjes van de resultaten:

http://i.imgur.com/4uvKcu8.png
Resulterende kleuren van de code met 1500K tot 15.000K als input. bron

Vlugjes maakte ik een paar HTML, CSS en JS bestandjes aan om in HTML5 canvas het algoritme uit te proberen. Een HTML5 canvas in een webpagina krijgen heb ik vele keren gedaan, dus dat kon ik direct uit mijn hoofd uittikken. Ik vulde de canvas met zwart en had mijn schildersdoek klaar liggen om een zooi stippen op te tekenen.

http://i.imgur.com/b9nEsPb.jpg

Ik werkte de formule uit en breidde de formule uit met wat functies om een random kleurtemperatuur te genereren.


JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function color_cap(c) {
  return Math.min(255, Math.max(0, c));
}

// Calculate RGB color for color temp. in Kelvin. Only supports range 1000 ~ 40'000.
function color_temperature_to_color_string(k) {
  var temperature = k / 100;
  var r = temperature <= 66 ? 255 : color_cap(329.698727446 * Math.pow(temperature - 60, - 0.1332047592));
  var g = color_cap(temperature <= 66 ? (99.4708025861 * Math.log(temperature) - 161.1195681661) : (288.1221695283 * Math.pow(temperature - 60, -0.0755148492)));
  var b = temperature >= 66 ? 255 : color_cap(138.5177312231 * Math.log(temperature - 10) - 305.0447927307);
  return "rgb("+r.toFixed()+","+g.toFixed()+","+b.toFixed()+")";
}

function random_color_temperature() {
  // 2000 ~ 2000*8
  return Math.pow(8, Math.random()) * 2000;
}

function random_star_color() {
  return color_temperature_to_color_string(random_color_temperature());
}



http://i.imgur.com/f6NjnKy.png

Dit gaf een klein beetje wat ik in gedachten had. Ik had mijn random kleurtjes en was wel aardig tevreden met de kleuren. De locatie van de sterren zelf vond ik echter erg saai. De "randomness" had geen leuke variatie erin zitten. Ik heb geen idee hoe sterren in het echt zich in de ruimte bevinden ten opzichte van elkaar en of een simpele Math.random()*width enigszins vergelijkbaar is met de realiteit. M.a.w., ik weet niet of sterren gewoon maar "ergens zitten" of dat ze voornamelijk in groepjes zijn.

De realiteit vind ik echter niet zo interessant, ik wilde gewoon meer variatie. Ik besloot daarom te kijken of ik de sterren wat meer naar elkaar toe kon trekken. Ik herschreef de code verantwoordelijk voor de coordinaten van de sterren en had daarbij besloten om te proberen in plaats van n sterren te genereren, om n/a groepen met sterren te genereren en in iedere groep a sterren te genereren met een random afstand vanaf het "centrum" van die groep.

Hier de code:

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// The number of "star groups" to generate.
var number_of_groups = 300;

// The radius of the group of stars
var group_radius = 100;
var group_gravity = 2;

// The number of stars per group.
var stars_per_group = 20;

function render_star(x, y) {
  c2d.fillStyle = random_star_color();
  c2d.fillRect(x, y, 1, 1);
}

function render_group(x, y) {
  for(var i=0; i<stars_per_group; i++) {
    var distance = Math.pow(Math.random(), group_gravity) * group_radius;
    var angle = Math.random() * Math.PI * 2;
    var star_x = x - Math.sin(angle) * distance;
    var star_y = y + Math.cos(angle) * distance;

    // round here to prevent "blurred" stars
    render_star(Math.round(star_x), Math.round(star_y));
  }
}

function render_stars() {
  for(var i=0; i<number_of_groups; i++) {
    var x = Math.random() * width;
    var y = Math.random() * height;
    render_group(x, y);
  }
}



http://i.imgur.com/k6MPjbS.png

Hier kan ik mee leven. De coordinaten van de sterren spreken mij nu wel aardig aan. Ik vond het echter nog wel erg kaal rondom de sterren. Ik wilde een soort "lichtvlek" om iedere ster hebben, alsof je naar een lamp in de mist kijkt. Nogmaals, ik weet niet of het realistisch is, het leek mij gewoon een leuk visueel effect geven.

Ik was niet van plan om dat soort effecten in Javascript te gaan implementeren; dat zou me voor nu iets teveel gedoe zijn om alleen te kijken of het leuk zou staan. Ik maakte daarom een PNG dump van mijn canvas en opende deze in Photoshop.

Ik kopieerde mijn sterrenhemel als meerdere lagen en met wat spelen met Gaussian Blur, blending settings en opacity kwam ik met een resultaat die weer een stapje dichterbij komt met het beeld dat ik voor ogen heb.

http://i.imgur.com/7izEvgE.png

Tot slot wilde ik nog de achtergrond minder "zwart" maken. Dit deed ik door dezelfde sterrenhemel nog 3 keer te genereren en op dezelfde manier te bewerken. Vervolgens plakte ik de 3 afbeeldingen met 20%, 40% en 60% opacity over de bestaande sterrenhemel heen.

Het resultaat (te zien onder deze alinea) is verre van perfect, maar gezien ik het in een avondje heb kunnen maken ben ik wel tevreden ermee. Ik weet nu in ieder geval hoe ik in de toekomst de sterrenhemel in de achtergrond zou kunnen implementeren voor de RTS. In de daadwerkelijke code kan ik misschien nog heel subtiel parallelex scrolling toepassen om het een wat meer dynamisch gevoel te geven.

http://i.imgur.com/WExIK7L.png

Volgende: Wie laat zich niet koeioneren? 01-'14 Wie laat zich niet koeioneren?
Volgende: Hobby: simpele 2D RTS game maken in C 12-'13 Hobby: simpele 2D RTS game maken in C

Reacties


Door Tweakers user lennart111, zondag 22 december 2013 14:18

hoewel het misschien niet direct op een echte sterren hemel lijkt, komt het toch best in de buurt.
Vind ik dit wel een mooie achtergrond voor een space-RTS. je moet alleen zorgen dat de achtergrond niet te druk wordt zodat je je eigen units niet meer kan vinden.
als je wilt weten hoe het er in het echt uitziet kan je het besten de nightsky functie van google earth gebruiken.

Door Tweakers user Gamebuster, zondag 22 december 2013 14:27

Google Nightsky ziet er wel erg vreemd uit. Er zitten soms dingen tussen waarvan ik niet weet of het een glitch is of een ster. Wel leuk om naar te kijken

Door Tweakers user Infant, zondag 22 december 2013 17:56

Nice!

Ik ben een tijdje geleden ook bezig geweest met iets wat er volgens mij superveel op lijkt:
link
Ik weet niet of deze versie meteen bij jouw draait. Het gebruikt Direct2D en is in C/C++ geschreven, met al voornaamste doel dat ik DirectX wou leren.
Met Numpad -/+ kun je in en uitzoomen. Met Numpad 1 maak je astroids... en met de spatie sloop je ze.

Ik heb hem later naar openGL over gezet, en die wil ik weer eens op pakken.

Het blurren kan je veel eenvoudiger (okee, fotoshop is makkelijker) direct in OpenGL doen, door anti-aliasing te gebruiken, en een stapel van transparante sterretjes.

[Reactie gewijzigd op zondag 22 december 2013 18:01]


Door Tweakers user n-i-x, zondag 22 december 2013 17:57

Als ik een suggestie mag maken over de kleur en helderheid van de getekende sterren:
De formule die je gebruikt voor de kleurtemperatuur lijkt op zich wel realistische kleuren te geven, maar de helderheden die eruit komen kloppen niet echt...
De gebruikte formule geeft de hoogste helderheid bij een kleurtemperatuur van 6600K, terwijl in werkelijkheid de sterren met een hogere temperatuur helderder zijn.
Ik zal hier niet beginnen over de precieze formule om dit goed door te rekenen, maar als je in de functie 'color_temperature_to_color_string(k)' ervoor kan zorgen dat de rgb waarden iets verlaagd worden bij een lagere temperatuur dan zou het nog iets mooier / realistischer moeten worden.

[Reactie gewijzigd op zondag 22 december 2013 17:58]


Door Tweakers user Gamebuster, zondag 22 december 2013 20:45

n-i-x schreef op zondag 22 december 2013 @ 17:57:
Als ik een suggestie mag maken over de kleur en helderheid van de getekende sterren:
De formule die je gebruikt voor de kleurtemperatuur lijkt op zich wel realistische kleuren te geven, maar de helderheden die eruit komen kloppen niet echt...
De gebruikte formule geeft de hoogste helderheid bij een kleurtemperatuur van 6600K, terwijl in werkelijkheid de sterren met een hogere temperatuur helderder zijn.
Ik zal hier niet beginnen over de precieze formule om dit goed door te rekenen, maar als je in de functie 'color_temperature_to_color_string(k)' ervoor kan zorgen dat de rgb waarden iets verlaagd worden bij een lagere temperatuur dan zou het nog iets mooier / realistischer moeten worden.
Bedankt voor de tip! Daar zal ik zeker wat mee doen

Door Tweakers user link0007, dinsdag 24 december 2013 17:50

Dit is de relatie tussen helderheid en kleurtemperatuur voor sterren:

http://www.sir-ray.com/HRDiagram.png

Verder is het ook handig om te weten hoe vaak iedere kleur voorkomt:

http://articles.adsabs.ha...GH&send=GET&filetype=.pdf

Door Tweakers user Gamebuster, woensdag 25 december 2013 20:09

link0007 schreef op dinsdag 24 december 2013 @ 17:50:
Dit is de relatie tussen helderheid en kleurtemperatuur voor sterren:

http://www.sir-ray.com/HRDiagram.png

Verder is het ook handig om te weten hoe vaak iedere kleur voorkomt:

http://articles.adsabs.ha...GH&send=GET&filetype=.pdf
Valt me op dat er veel geel tussen zit. Bedankt voor de pics + pdf, ik zal de info meenemen in de volgende implementatie.

Reageren is niet meer mogelijk