Help with colors for Main Menu and Backgrounds

Discussion in 'Level Design' started by Christoph, Nov 21, 2015.

  1. Christoph

    Christoph Miniboss Boxer

    Joined:
    Oct 4, 2015
    Messages:
    2,807
    Likes Received:
    2,309
    Hey guys,

    I'm still struggling with the colors of my game. The concept is doing well but the execution is failing and I don't know why. On older devices like the iPhone 4s, the colors look very washed out (this happens only with my game, not with other games released by Buildbox users). And on newer devices like the iPhone 6, the greens, the yellows and the oranges are really really strong and saturated. There is also this girly look I can't get rid off, mostly in the Main Menu. Someone wants to give me a hand and help me with the values or some opinions?

    Main Menu:
    2.png


    7 backgrounds for different levels:
    1.png

    As you can see, what I want is the game to be very colorful. It would be probably best to put some of the other colors in the Main Menu too but I can't get it to work. And regarding the background colors I really don't know what to do. On the computer it all looks great. But on device not that much. Is there a special trick with the color profile I don't know of? I'm using RGB with my iMac screen calibration.

    Any help is appreciated.
     
    Wings n Armor likes this.
  2. ajcoryat

    ajcoryat Avid Boxer

    Joined:
    Sep 25, 2015
    Messages:
    241
    Likes Received:
    111
    Rather than have a static BG color, why not create a series of graduated .png files and replace the single BG you have with this series to create an animated background (like Dots did). That way you are not stuck with something too girly or otherwise.
     
    Wings n Armor likes this.
  3. Christoph

    Christoph Miniboss Boxer

    Joined:
    Oct 4, 2015
    Messages:
    2,807
    Likes Received:
    2,309
    Thanks ajcoryat, but I think in my case this will distract too much. I have some geometric shapes on top of the color backgrounds which give a little texture. Not animated though either. It would be a mess since my levels are continuously like in phases.

    Update: I think I misunderstood you. You are talking about the menu, right? The problem would be with the buttons which would have to match all different backgrounds. Difficult task.
     
    Last edited: Nov 21, 2015
    Wings n Armor likes this.
  4. ajcoryat

    ajcoryat Avid Boxer

    Joined:
    Sep 25, 2015
    Messages:
    241
    Likes Received:
    111
    Yes I was talking about just the main menu. If you had the same number of png files for the background and did the same number for the UI buttons in the same order of color, maybe the might remain in sync :p
     
    Christoph likes this.
  5. Christoph

    Christoph Miniboss Boxer

    Joined:
    Oct 4, 2015
    Messages:
    2,807
    Likes Received:
    2,309
    Should I change the colors completely? I tried with something more pastel but it seems even worse. Not sure if I don't like them anymore because I saw them for so long or if they are just not suited for mobile screens. :(
     
  6. Simon Crack

    Simon Crack Avid Boxer

    Joined:
    Sep 25, 2015
    Messages:
    223
    Likes Received:
    340
    I like em :)
     
    Christoph and Wings n Armor like this.
  7. Wings n Armor

    Wings n Armor Avid Boxer

    Joined:
    Oct 1, 2015
    Messages:
    280
    Likes Received:
    125
     
  8. Christoph

    Christoph Miniboss Boxer

    Joined:
    Oct 4, 2015
    Messages:
    2,807
    Likes Received:
    2,309
    What do you guys think of a dark themed Main Menu?

    3.png
     
  9. Christoph

    Christoph Miniboss Boxer

    Joined:
    Oct 4, 2015
    Messages:
    2,807
    Likes Received:
    2,309
    I most probably will go with the dark theme for the menus, just a little lighter than the one posted. The problem seems to be the gradient which gets banding on my computer (and on device I suppose even more). Is there a something I can do against the banding?
     
  10. PeterB

    PeterB Boxer

    Joined:
    Sep 25, 2015
    Messages:
    17
    Likes Received:
    12
    @Christoph banding is usually down to a limited colour palette in the device. Just like for the web, some devices might have only 256 colours and not 16 million, 32 million, etc..

    With a gradient you are asking for a lot of colours at once and you might be starting from a DITHERED colour map point (i.e. the colour doesn't really exist, so it fudges it).

    I'm not sure how buildbox handles the colour palettte!

    Those starting colours are quite feminine anyway IMHO.

    Have a look at Adobe Kuler (google it) as there should be more like a web safe option for the ranges.

    I appreciate you want a softer, more pastel look and you CAN get that.
    But I think your starting and end gradient points need to be non dither type colours.

    I may have used the wrong technical terms there, but that's the concept.

    And yes "personally", I prefer the stronger high contrast menu colours, but it's all personal taste.

    Hope that helps.
    Peter
     
    Christoph likes this.
  11. PeterB

    PeterB Boxer

    Joined:
    Sep 25, 2015
    Messages:
    17
    Likes Received:
    12
    YEAH so I just ran colour picker in adobe on your top purple start and it is indeed coming up with GAMUT WARNINGS for both Print and Web.
    I only checked the one as I am lazy.

    So I presume game devices have a similar limited GAMUT issues to print and web.
    Hopefully more like print, but whatever, lol.

    If you don't have photoshop, googling may come up with something better than this web version
    http://www.colorwidget.com/3d_profile_gamut_viewer

    Hope that helps
    Peter.
     

    Attached Files:

    Christoph likes this.
  12. Christoph

    Christoph Miniboss Boxer

    Joined:
    Oct 4, 2015
    Messages:
    2,807
    Likes Received:
    2,309
    But printing gamut shouldn't be a problem. I'll check the colorwidget to see if something can be done, even though I think I already got rid of the banding issue. I used the last weeks to make some changes in the design and definitely went with the darker UI. Made also some color changes in general to work with some more contrasted images between the character which is pink and the background. Got rid completely of the first background too. Now I'll have to see how it works in Buildbox but I'm pretty sure it will look ok.
     

Share This Page