Spore-like Galaxy Graphics

Truthfully I wasn’t sure of where to post this. I am looking for a bit of help and/or advice on a matter.

I am trying to replicate (graphically speaking) the galaxy in the computer game Spore. For those who have played Spore, if you study the galaxy’s graphics, you will see what I mean.

For the moment, I’ve broken the scene down into three pieces:

  • Galactic plane
  • Gas clouds (fog)
  • Stars/Objects

I am creating my own artwork for this, and I have already created the galactic plane (just a plane with an image of a galaxy I created in Photoshop.)

However, I am somewhat confounded on how to go about creating the gas clouds and how to make them blend together nicely so that it looks like the fog is contiguous, and not individual billboards or something? Truthfully I am not sure what method they used to create the effect.

If anyone understands this better, please let me know how they did this, otherwise for now if someone could explain how to create static billboards through scripting or direct me to a website that explains this, I would appreciate it.

Maybe you could post some screenshots. Been awhile since I played Spor.

I do know that multiple rotating billboards is a common technique to fake volumetric clouds cheaply. They’re just arranged in a random fashion and given a random rotation. EveOnline uses this for their gas clouds.

As far as doing it at runtime, a billboard is just a plane with a texture with a script that makes it always face the camera. Nothing fancy there and easily scriptable.

I spent a lot of time studying that galaxy and trying to figure out how they do it. I think Quietus is right about the billboards, but I think Spore also did some trickery with fading the billboards depending upon the camera angle. That way you don’t get the odd spinning effect billboards tend to do when you pass over their Y axis. Similar to the way Eve’s engine flare changes as you rotate away from it. Maybe they’re using a constraint on how far the billboard will turn to point at the camera. I built the same kind of galaxy plane then got side tracked when i realized I could animate multiple zoom-ins with cameras: http://www.stuffycorporatedesign.com/open/gallaxyZoom.html

EDIT: the zoom-in thing was a first try at what I think Eve might be doing when you warp around the system, using separate cameras for local and solar space.

cool that volumetric cloud fake system can be used as a means to do fog in a isometric game. Thanks, this will help me out to !

Thanks for the replies. Here’s some screenshots.

This “fake” volumetric fog sounds interesting, combined with a fading trick of some sort? Might as well start experimenting, but since I am new to Unity I need to learn some API and look up some math on creating billboards. Would it be best to treat the planes of fog as billboards, or leave them static but simply fade them in and out as the camera rotates?

Very nice scene paulygon.

Very nice looking scene.

https://www.youtube.com/watch?v=GA3cSnoh-nk

I think Eve for their new and improved ‘warp’ is nothing more than an animated texture on a tube surrounding the ship not a billboard, but yeah likely a second camera. There’s camera shake on the primary camera only.

In terms of Y axis billboards, try flying over some flames in Wow out by Zul Garub. It’s immediately apparent they’re a billboard and not a particle effect. Hey that’s a plane with an animated texture!

Billboards are a jack of all trades in games.

What is the best way to implement this fade trick? In a script or shader?

I attacked this again for a few hours. I started out trying to work off of angles. I failed with that approach. I just found Quaternion.eulerAngles so I’ll give it another round.

Here’s what did work, just to create the mechanics of the fade. This is on the object that needs to fade.

function Update () {
	//test the "height" of the camera (as it looks down on the galactic disc)
	theY = Camera.main.transform.position.y;
	if(theY < 2  theY > -2){
		var theFade = ((theY*2)/5)*.7;
		if(theFade < 0){theFade = theFade * -1;}
		
		var newColor = Color(.5,.5,.5,theFade-.1);
		renderer.material.SetColor("_TintColor", newColor);
	}
}

var theFade = ((theY2)/5).7;
I had to tweak this line to get things within the correct range/scale for my scene.

Nice, that works well for zooming in on the galactic plane part.

And here is my work in progress!
http://dl.dropbox.com/u/16617558/WebPlayer/WebPlayer.html