1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Resolutions

Discussion in 'Developers Corner' started by wmcbrine, Feb 24, 2008.

  1. s2kdave

    s2kdave New Member

    515
    0
    Jan 27, 2005
    BTW, the spot where you do this in the MainMenuList would be better done another way. Basically the font and color resources are better stored in the skin. Also you can override the color for a single list by calling setColor/setFont on the BListPlus itself. You don't need to override createRow at all. As a matter of fact you don't even need the MainMenuList class at all, just create a BListPlus directly.

    Code:
    protected void createRow(BView parent, int index)
            {   
    
                BText text = new BText( parent, 0, 0, parent.getWidth(), parent.getHeight() );
                text.setShadow(false);
                text.setFlags(RSRC_HALIGN_LEFT);
                text.setFont( ( (BPlusTest)getBApp() ).getBodyFont() );
                text.setColor( ( (BPlusTest)getBApp() ).NTSC_WHITE );
                text.setValue(get(index).toString());
            }
    
    To override font/color for all lists and buttons, override initSkin() in BApplicationPlus (call super), then override those particular values. Take into consideration the getCurrentResolution() of course for the font size. You can see the SkinUtils class where it inits everything.

    This will override for all future created lists
    Code:
            new BSkinPlus.Element(skin, IBananasPlus.H_BAR_FONT, 0, 0, getBodyFont());
            new BSkinPlus.Element(skin, IBananasPlus.H_BAR_TEXT_COLOR, 0, 0, NTSC_WHITE);
    
    This will override for a single list:
    Code:
    mainMenuList = new BListPlus(	this.getNormal(), 									// Put list on "normal" level
    											safeTitleH , 										// x coord. of list origin
    											(int)(screenHeight * 0.25), 						// y coord. of list origin
    											(screenWidth - (2 * safeTitleH)), 					// width of list (full screen)
    											((int)(((0.75 * screenHeight) - safeTitleV)/8))*8,	// height of list (full screen). Defined in terms of row height to ensure that height is an even multiple or rowheight.
    											(int)(((0.75 * screenHeight) - safeTitleV)/8)		// row height for 8 rows
    											);
    		
    		// Add menu items
    		mainMenuList.add("This is a test");
    		mainMenuList.add("Only a test");
    		mainMenuList.add("Do not panic");
    		mainMenuList.add("It will all be over soon");
    		mainMenuList.setColor(Color.red);
    		mainMenuList.setFont("default-24.font");
    		mainMenuList.setBarAndArrows(BAR_HANG, BAR_DEFAULT, null, "push");
    
     
  2. perrce

    perrce New Member

    79
    0
    Feb 7, 2007
    Thanks for the help. I'll download the new bplus code and try it out. And thanks for the tips. This is my first time writing an HME app and I feel like I'm still wandering around in the dark. But, hey -- the only way to learn is to try! :)
     
  3. s2kdave

    s2kdave New Member

    515
    0
    Jan 27, 2005
    The way you were doing it IS the way you're supposed to in regular bananas, but those are part of the flaws I was aiming to fix with bananas-plus. It's not a real good design to hardcode the UI aspects especially now that there can be more resolutions than 640x480.
     
  4. perrce

    perrce New Member

    79
    0
    Feb 7, 2007
    Can you give me the nickel tour on how you intended skins to work in Bananas-plus? How do I get/set title fonts? colors? etc? Do I need to init something first, or is that all taken care of in the BApplicationsPlus init? I'm getting a little lost in the code and can't figure out what the intended entry point was. Thanks.
     
  5. s2kdave

    s2kdave New Member

    515
    0
    Jan 27, 2005
    There are certain predefined colors and fonts such as H_BAR_FONT and H_BAR_COLOR for the font/color of the text on bars. You can find the names in IBananasPlus.

    The way you would make your own custom ones would be like this:

    in your extended BApplicationPlus class:
    Code:
    public void initSkin() {
        super.initSkin();
    
        Resolution resolution = getCurrentResolution();
        String fontBaseOnResolution = ...;
        new BSkinPlus.Element(skin, "myCustomFont", 0, 0, fontBasedOnResolution);
    }
    
    Then in your own custom UI element or screen where you need the font:
    Code:
    Element e = getSkin().get("myCustomFont");
    btext.setFont(e.getResource());
    
    The idea is that you loosely couple your views and screens to the resolution and it will render appropriately based on the resolution without you having to do anything outside your BApplicationPlus class. And for images it's the same thing.
    Code:
    Element e = getSkin().get("myCustomImage");
    icon = new BViewPlus(getNormal(), 0, 0, e.getWidth, e.getHeight());
    icon.setResource(e.getResource());
    

    Now I've made a couple extra tools that help in calculating the sizes based on the resolution by doing scaling. The idea is you make your images to a specific resolution, in this case 720p. Then you scale that image/font to all other resolutions. Here's the example of the initSkin() method:
    Code:
    public void initSkin() {
        super.initSkin();
    
        Scale s = new Scale(720, getCurrentResolution().getHeight());
    
        //24 is the size of the font at 720p resolution
        new Element(skin, "myCustomFont", 0, 0, "default-" + s.dx(24) + "-bold.font");
    
       //use an image scale utility to save a scaled copy to disk when needed
       //40x40 is the size of the image at 720p resolution
       SkinUtils.createImage(skin, s, "myCustomIcon", 40, 40, "resources/myIcon.png");
    }
    
    I've also found that scaling down the font size a little lighter than 1:1 makes for better results. So I create a separate Scale instance just for fonts
    Code:
            Scale f;
            if (res.getHeight() < 720) {
                //do a lighter scale for fonts when it's a smaller resolution
                f = new Scale(720, res.getHeight()*9/8);
            } else {
                f = s;
            }
    
     
  6. s2kdave

    s2kdave New Member

    515
    0
    Jan 27, 2005
    Oh, and to override the title font/color globally, just create a new Element in initSkin() with one or more of these:

    IBananasPlus.H_TITLE_FONT
    IBananasPlus.H_TITLE_TEXT_COLOR
    IBananasPlus.H_TITLE_SHADOW_COLOR
     

Share This Page