Counters being rendered behind background

I have a problem with my background always rendering in fron of my score display.

Background code mainMenuUI.js:

// Skin
var mainmenuSkin : GUISkin;

// GUI Area Width
var areaWidth : float;

// GUI Area Height
var areaHeight : float;

function OnGUI()
{
GUI.skin = mainmenuSkin;
var ScreenX = ((Screen.width * 0.5) - (areaWidth * 0.5));
var ScreenY = ((Screen.height) - (areaHeight * 0.5)); 
GUILayout.BeginArea (Rect (ScreenX, ScreenY, areaWidth, areaHeight));  
if(GUILayout.Button ("+1 Score"))
{
scores.score += 1;
print (scores.score);
} 
if(GUILayout.Button ("Quit"))
{
  Application.Quit();
} 
GUILayout.EndArea();
}

I have a counter on the same menu screen that displays a static variable called “score” in the script named “scores” attached to an empty game object.

function Update () {

var prefix = "";
guiText.text = prefix + scores.score;

}

and it works fine… BUT the background is rendered in FRONT of the counter so you can’t see it. If I hide the background, there it is, and I’m also printing to the debug log so even when you can’t see the counter, I know it’s still working.

Any ideas.
B

OnGUI always renders on top of everything, including GUIText objects.

–Eric

If I put GUILayer componenets on both the Counter and The Background it seems to render in the right order (regardless of the depth I use on each component).

Seems like a hack. But it’ll do for now. Needa get this things hacked together by tomorrow. One of those furiously short “Make a Game Real Quick” excercises.

B