Improved appearance of tabs.

- Replaced 'selection-tab.png' with a new image (by @kouyang).
- Simulate osu! color scheme (tab color/font color changes instead of alpha changes for selected tab).
- Added Utils.drawTab() method to avoid code duplication for Option menu tabs.

Signed-off-by: Jeffrey Han <itdelatrisu@gmail.com>
This commit is contained in:
Jeffrey Han 2015-01-10 22:49:23 -05:00
parent 1e59819f3a
commit 6e434e9709
5 changed files with 52 additions and 28 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 633 B

After

Width:  |  Height:  |  Size: 817 B

View File

@ -22,7 +22,6 @@ import java.util.Arrays;
import java.util.Collections; import java.util.Collections;
import java.util.Comparator; import java.util.Comparator;
import org.newdawn.slick.Color;
import org.newdawn.slick.Image; import org.newdawn.slick.Image;
/** /**
@ -63,7 +62,7 @@ public enum SongSort {
/** /**
* Array of SongSort objects in reverse order. * Array of SongSort objects in reverse order.
*/ */
private static final SongSort[] VALUES_REVERSED; public static final SongSort[] VALUES_REVERSED;
static { static {
VALUES_REVERSED = SongSort.values(); VALUES_REVERSED = SongSort.values();
Collections.reverse(Arrays.asList(VALUES_REVERSED)); Collections.reverse(Arrays.asList(VALUES_REVERSED));
@ -86,20 +85,6 @@ public enum SongSort {
*/ */
public static void setSort(SongSort sort) { SongSort.currentSort = sort; } public static void setSort(SongSort sort) { SongSort.currentSort = sort; }
/**
* Draws all sort tabs.
*/
public static void drawAll() {
Image tabImage = currentSort.tab.getImage();
float tabTextY = currentSort.tab.getY() - (tabImage.getHeight() / 2f);
for (SongSort sort : VALUES_REVERSED) {
float tabTextX = sort.tab.getX() - (Utils.FONT_MEDIUM.getWidth(sort.name) / 2);
tabImage.setAlpha((sort == currentSort) ? 1.0f : 0.7f);
sort.tab.draw();
Utils.FONT_MEDIUM.drawString(tabTextX, tabTextY, sort.name, Color.white);
}
}
/** /**
* Compares two OsuGroupNode objects by title. * Compares two OsuGroupNode objects by title.
*/ */
@ -180,10 +165,15 @@ public enum SongSort {
*/ */
public void init(int width, int height) { public void init(int width, int height) {
Image tab = GameImage.MENU_TAB.getImage(); Image tab = GameImage.MENU_TAB.getImage();
float buttonX = width * 0.6f; int tabWidth = tab.getWidth();
float tabOffset = (width - buttonX - tab.getWidth()) / (SIZE - 1); float buttonX = width / 2f;
float tabOffset = (width - buttonX - tabWidth) / (SIZE - 1);
if (tabOffset > tabWidth) { // prevent tabs from being spaced out
tabOffset = tabWidth;
buttonX = (width * 0.99f) - (tabWidth * SIZE);
}
this.tab = new MenuButton(tab, this.tab = new MenuButton(tab,
(buttonX + (tab.getWidth() / 2f)) + (id * tabOffset), (buttonX + (tabWidth / 2f)) + (id * tabOffset),
(height * 0.15f) - (tab.getHeight() / 2f) - 2f (height * 0.15f) - (tab.getHeight() / 2f) - 2f
); );
} }
@ -201,4 +191,12 @@ public enum SongSort {
* @return true if within bounds * @return true if within bounds
*/ */
public boolean contains(float x, float y) { return tab.contains(x, y); } public boolean contains(float x, float y) { return tab.contains(x, y); }
/**
* Draws the sort tab.
* @param selected whether the tab is selected (white) or not (red)
*/
public void draw(boolean selected) {
Utils.drawTab(tab.getX(), tab.getY(), name, selected);
}
} }

View File

@ -211,6 +211,30 @@ public class Utils {
*/ */
public static MenuButton getBackButton() { return backButton; } public static MenuButton getBackButton() { return backButton; }
/**
* Draws a tab image and text centered at a location.
* @param x the center x coordinate
* @param y the center y coordinate
* @param text the text to draw inside the tab
* @param selected whether the tab is selected (white) or not (red)
*/
public static void drawTab(float x, float y, String text, boolean selected) {
Image tabImage = GameImage.MENU_TAB.getImage();
float tabTextX = x - (Utils.FONT_MEDIUM.getWidth(text) / 2);
float tabTextY = y - (tabImage.getHeight() / 2f) +
Math.max((tabImage.getHeight() - Utils.FONT_MEDIUM.getLineHeight()) / 1.5f, 0);
Color filter, textColor;
if (selected) {
filter = Color.white;
textColor = Color.black;
} else {
filter = Color.red;
textColor = Color.white;
}
Utils.drawCentered(tabImage, x, y, filter);
Utils.FONT_MEDIUM.drawString(tabTextX, tabTextY, text, textColor);
}
/** /**
* Draws an image based on its center with a color filter. * Draws an image based on its center with a color filter.
* @param img the image to draw * @param img the image to draw

View File

@ -487,17 +487,14 @@ public class Options extends BasicGameState {
} }
// option tabs // option tabs
g.setColor(Color.white);
Image tab = optionTabs[0].getImage();
float tabTextY = optionTabs[0].getY() - (tab.getHeight() / 2f);
for (int i = optionTabs.length - 1; i >= 0; i--) { for (int i = optionTabs.length - 1; i >= 0; i--) {
tab.setAlpha((i == currentTab) ? 1.0f : 0.7f); if (i != currentTab)
optionTabs[i].draw(); Utils.drawTab(optionTabs[i].getX(), optionTabs[i].getY(), TAB_NAMES[i], false);
float tabTextX = optionTabs[i].getX() - (Utils.FONT_MEDIUM.getWidth(TAB_NAMES[i]) / 2);
Utils.FONT_MEDIUM.drawString(tabTextX, tabTextY, TAB_NAMES[i], Color.white);
} }
Utils.drawTab(optionTabs[currentTab].getX(), optionTabs[currentTab].getY(), TAB_NAMES[currentTab], true);
g.setColor(Color.white);
g.setLineWidth(2f); g.setLineWidth(2f);
float lineY = optionTabs[0].getY() + (tab.getHeight() / 2f); float lineY = optionTabs[0].getY() + (GameImage.MENU_TAB.getImage().getHeight() / 2f);
g.drawLine(0, lineY, width, lineY); g.drawLine(0, lineY, width, lineY);
g.resetLineWidth(); g.resetLineWidth();

View File

@ -254,7 +254,12 @@ public class SongMenu extends BasicGameState {
optionsButton.draw(); optionsButton.draw();
// sorting tabs // sorting tabs
SongSort.drawAll(); SongSort currentSort = SongSort.getSort();
for (SongSort sort : SongSort.VALUES_REVERSED) {
if (sort != currentSort)
sort.draw(false);
}
currentSort.draw(true);
// search // search
Image searchIcon = GameImage.MENU_SEARCH.getImage(); Image searchIcon = GameImage.MENU_SEARCH.getImage();