Need help building a UI

[KCdehImposter]

Hey guys.

 

I am trying to figure out what would be the best way to building a UI in Phaser.  By UI I mean like the background behind where my buttons, text, and game info are going to go.  I have come up with a few different ways, but don't know which one is best.

 

1. Using a static panel image and just scaling to fit the size I need

Pro: Easy, one image, change size in code

Con: Blurs, doesn't come out looking nice

 

2. Building the custom sized panel for each menu I am making

Pro: Gets the size I needed and comes out like expected

Con: Have to make images for each menu icon (will take a long time), and will have to update images when changes come to the UI

 

3. Building a template UI panel (top left corner, side left, top right corner, center piece, etc) then building the image in code

Pro: Scales well, allows for changes, easily done once set up

Con: I don't have a clue on how to do something like this properly.

 

I really want to go with 3, but if I was going to do it I would feel like I am using a bunch of useless objects that are slowing my game down.  I know that I could add these different images to a group to keep them together, but I don't know if the way I am doing it is efficient.  If someone could please give me some advice on what to I would appreciate it.

[KCdehImposter]

Encase anyone is wondering, here is my solution that I made.  I didn't run any stress tests or tried to optimize, but this does run smooth, and looks fine.  It takes in the game object, where you want the UI to be, and handles the rest by making it into a group. 

function Panel(game, startX, startY, endX, endY, asset_size, asset_file, color, scale, fixed){  this.game = game;  panel = game.add.group();  if (scale === undefined)  {    scale = 1;  }  if (color === undefined)  {    color = 0xFFF;  }  if (fixed === undefined)  {    fixed = false;  }  for (var x = startX; x < endX; x += asset_size)  {    for (var y = startY; y < endY; y += asset_size)    {      if (x === startX && y === startY)      {        temp = game.add.sprite(x, y, asset_file + '_corner_top_left');      }      else if (x === endX - asset_size && y === startY)      {        temp = game.add.sprite(x, y, asset_file + '_corner_top_right');      }      else if (x === startX && y === endY-asset_size)      {        temp = game.add.sprite(x, y, asset_file + '_corner_bottom_left');      }      else if (x === endX - asset_size && y === endY - asset_size)      {        temp = game.add.sprite(x, y, asset_file + '_corner_bottom_right');      }      else if (x === startX)      {        temp = game.add.sprite(x, y, asset_file + '_side_left');      }      else if (x === endX - asset_size)      {        temp = game.add.sprite(x, y, asset_file + '_side_right');      }      else if (y === startY)      {        temp = game.add.sprite(x, y, asset_file + '_side_top');      }      else if (y === endY - asset_size)      {        temp = game.add.sprite(x, y, asset_file + '_side_bottom');      }      else      {        temp = game.add.sprite(x, y, asset_file + '_center');      }      temp.scale.x = scale;      temp.scale.y = scale;      temp.fixedToCamera = fixed;      temp.tint = color;      panel.add(temp);    }  }}

How I use it:

var menu_bg = new Panel(game, WIDTH / 4, HEIGHT / 4, 3 * (WIDTH / 4) - 32, 3 * (HEIGHT / 4), 32, 'panel', '0xA9C6CC', 2, true);

I'll probably just implement more to this function so I can remove the different corners, but I just wanted to show encase anyone was curious with what I went with.