Need help with UI design/Programming

[Arishok]

So I'm drawing out the layout for my android/iOS game (something I've never done before) and I'm trying to figure out how I would draw out the UI interface when I want it programmed.

For example this is the candy crush leader board

How would I draw the actual picture (the background, the "share" button, the arrows, etc.) if I want the programmer to add the ranking of the player (number), picture of player, and the "Friend beaten at level 10" highlight.

Do I draw the background and border of the images separately or do I draw the background and border together? Hope this question made sense.

 

[Arishok]

Bump, please help

 

[el_oh_el]

This is better asked in higher learning. All these nikkas do is play games
As a budding programmer, I would draw the assets separately and then provide a layout of how you want the assets applied.

 

[Responsible Allen Iverson]

I would draw the background and the individual buttons seperately

 

[Arishok]

Thanks guys! Ever since The Chop Shop went away, I've been struggling on where to ask these kinds of design/programming questions.

 

[Responsible Allen Iverson]

You can try this thread: http://www.thecoli.com/threads/developer-programming-information-and-careers-thread.116488/page-15

I'm gonna make an "Official Game Development" thread soon but I need to gather information to put in the OP first

 

[Arishok]

You can try this thread: http://www.thecoli.com/threads/developer-programming-information-and-careers-thread.116488/page-15

I'm gonna make an "Official Game Development" thread soon but I need to gather information to put in the OP first

Info like what? Maybe I can help.

 

[Responsible Allen Iverson]

Info like what? Maybe I can help.

I'm gonna make a list of game engines, frameworks, books, software, websites, etc. for game developers.

 

[Arishok]

I'm gonna make a list of game engines, frameworks, books, software, websites, etc. for game developers.

Some software I know of are Unity or Unreal Development kit which are both game engines.
Software for 3D modeling and animating are 3Ds max, Maya, ZBrush, or Mudbox.
A great book I had in my Intro to Game Design class was The Art of Game Design by Jesse Schell
Photoshop and Sketchbook Pro are great programs for 2D game art.
Illustrator or InDesign, I've learned, can be used for UI design. (I've looked into for mobile gaming though, I don't wonk how good it is with console gaming.)
And a great website is DigitalTutors.com. It's between 29.99-49.99 a month but it teaches you the basics of almost every program out there especially the Autodesk and Adobe programs and also has great tutorials on Game Design, Game Art, Game Programming, etc. It's not only for Game Development, though but it's still a great website.

Hope this helped somewhat.

 

[Data-Hawk]

So I'm drawing out the layout for my android/iOS game (something I've never done before) and I'm trying to figure out how I would draw out the UI interface when I want it programmed.

For example this is the candy crush leader board

How would I draw the actual picture (the background, the "share" button, the arrows, etc.) if I want the programmer to add the ranking of the player (number), picture of player, and the "Friend beaten at level 10" highlight.

Do I draw the background and border of the images separately or do I draw the background and border together? Hope this question made sense.

Like everybody said, keep all of the objects/items separate , it'll make when your life easier if you need/when to change things.

Here's an example of how everything is broken up:

https://www.assetstore.unity3d.com/en/#!/content/17921


Edit: forgot, since this will be for Mobile, You'll want to look up best practices on what size to create the textures, 32x32 , 64x64 etc. If you are going to be using a cross platform engine, it'll scale them down for you for the device resolution. But it's better to do it from the start.

 

[Arishok]

Like everybody said, keep all of the objects/items separate , it'll make when your life easier if you need/when to change things.

Here's an example of how everything is broken up:

https://www.assetstore.unity3d.com/en/#!/content/17921


Edit: forgot, since this will be for Mobile, You'll want to look up best practices on what size to create the textures, 32x32 , 64x64 etc. If you are going to be using a cross platform engine, it'll scale them down for you for the device resolution. But it's better to do it from the start.

You have anything I can look up so that I can make my icons the right size? By Icons I mean things like the buttons for bonus items or the little picture by the health meter.

 

[Data-Hawk]

You have anything I can look up so that I can make my icons the right size? By Icons I mean things like the buttons for bonus items or the little picture by the health meter.

I wasn't able to find a direct source, alot of it will be trial and error.



Here's an article I found about the power of 2's.
http://www.katsbits.com/tutorials/textures/make-better-textures-correct-size-and-power-of-two.php

http://www.41post.com/3534/programming/unity-how-to-create-a-gui-sprite-sheet-part-1

You'll also want to look into texture atlas's
http://en.wikipedia.org/wiki/Texture_atlas
http://www.codeandweb.com/texturepacker






are you looking to make a 2D or 3D game? If its 3D then you have another world of problems ( texturing + UV unwrapping )

 

[Prodigital]

How would I draw the actual picture (the background, the "share" button, the arrows, etc.) if I want the programmer to add the ranking of the player (number), picture of player, and the "Friend beaten at level 10" highlight.

Do I draw the background and border of the images separately or do I draw the background and border together? Hope this question made sense.

You can draw out pictures by hand, scan them into a document, and import it into illustrator (dat pen tool ). You just need a vector based application that can render high quality images as low resolutions. This will make your graphics POP.

Backgrounds are usually textures, don't go to far in, it'll be distracting.

Spoiler

I actually lead an apps team for a living, not on the 6 figure coli certs level yet but its cool

 

[Data-Hawk]

You can draw out pictures by hand, scan them into a document, and import it into illustrator (dat pen tool ). You just need a vector based application that can render high quality images as low resolutions. This will make your graphics POP.

Backgrounds are usually textures, don't go to far in, it'll be distracting.

Spoiler

I actually lead an apps team for a living, not on the 6 figure coli certs level yet but its cool

Right, I forgot. Vector based images( which alot of Mobile games use ) scale better than raster images.

A free vector program is Inkscape http://www.inkscape.org/en/

http://designwashere.com/design-battle-vector-vs-raster/

 

[Arishok]

You can draw out pictures by hand, scan them into a document, and import it into illustrator (dat pen tool ). You just need a vector based application that can render high quality images as low resolutions. This will make your graphics POP.

Backgrounds are usually textures, don't go to far in, it'll be distracting.

Spoiler

I actually lead an apps team for a living, not on the 6 figure coli certs level yet but its cool

What if I've already drawn most of them in photoshop? Plus I suck at using Illustrator .

Here's an example of one of my icons: