Merge pull request #21 from fluddokt/omaster

Visual changes:
- Combo Color ordering 
- General Image scaling
- Score fixed size width
- Hard coded Ranking Panel
- Hard coded Scorebar
- Made MenuButtonBG colours darker
- Extends ScoresData bg to clock
- Spinner centering (slick has bad centering)
- Removed minimum time before skip button is shown
- Back and skip animation

src/itdelatrisu/opsu/GameData.java

@@ -97,7 +97,6 @@ public class GameData {
 				return menuImage;
 
 			Image img = getSmallImage();
-			img = img.getScaledCopy((GameImage.MENU_BUTTON_BG.getImage().getHeight() * 0.45f) / img.getHeight());
 			if (!small.hasSkinImage())  // save default image only
 				this.menuImage = img;
 			return img;
@@ -457,6 +456,36 @@ public class GameData {
 			}
 		}
 	}
+	/**
+	 * Draws a string of scoreSymbols.
+	 * @param str the string to draw
+	 * @param x the starting x coordinate
+	 * @param y the y coordinate
+	 * @param scale the scale to apply
+	 * @param fixedsize the width to use for all symbols
+	 * @param rightAlign align right (true) or left (false)
+	 */
+	private void drawFixedSizeSymbolString(String str, int x, int y, float scale, float fixedsize, boolean rightAlign) {
+		char[] c = str.toCharArray();
+		int cx = x;
+		if (rightAlign) {
+			for (int i = c.length - 1; i >= 0; i--) {
+				Image digit = getScoreSymbolImage(c[i]);
+				if (scale != 1.0f)
+					digit = digit.getScaledCopy(scale);
+				cx -= fixedsize;
+				digit.draw(cx + (fixedsize-digit.getWidth())/2, y);
+			}
+		} else {
+			for (int i = 0; i < c.length; i++) {
+				Image digit = getScoreSymbolImage(c[i]);
+				if (scale != 1.0f)
+					digit = digit.getScaledCopy(scale);
+				digit.draw(cx + (fixedsize-digit.getWidth())/2, y);
+				cx += fixedsize;
+			}
+		}
+	}
 
 	/**
 	 * Draws game elements:
@@ -470,28 +499,28 @@ public class GameData {
 		int marginX = (int) (width * 0.008f);
 
 		// score
-		drawSymbolString((scoreDisplay < 100000000) ? String.format("%08d", scoreDisplay) : Long.toString(scoreDisplay),
+		drawFixedSizeSymbolString((scoreDisplay < 100000000) ? String.format("%08d", scoreDisplay) : Long.toString(scoreDisplay),
-				width - marginX, 0, 1.0f, true);
+				width - marginX, 0, 1.0f, getScoreSymbolImage('0').getWidth()-2, true);
 
 		// score percentage
 		int symbolHeight = getScoreSymbolImage('0').getHeight();
 		float scorePercent = getScorePercent();
 		drawSymbolString(
 				String.format((scorePercent < 10f) ? "0%.2f%%" : "%.2f%%", scorePercent),
-				width - marginX, symbolHeight, 0.75f, true
+				width - marginX, symbolHeight, 0.60f, true
 		);
 
 		// map progress circle
 		g.setAntiAlias(true);
 		g.setLineWidth(2f);
 		g.setColor(Color.white);
-		int circleX = width - marginX - (  // max width: "100.00%"
+		float circleDiameter = symbolHeight * 0.60f;
+		int circleX = (int) (width - marginX - (  // max width: "100.00%"
 				getScoreSymbolImage('1').getWidth() +
 				getScoreSymbolImage('0').getWidth() * 4 +
 				getScoreSymbolImage('.').getWidth() +
 				getScoreSymbolImage('%').getWidth()
-		);
+		) * 0.60f - circleDiameter);
-		float circleDiameter = symbolHeight * 0.75f;
 		g.drawOval(circleX, symbolHeight, circleDiameter, circleDiameter);
 
 		OsuFile osu = MusicController.getOsuFile();
@@ -528,19 +557,24 @@ public class GameData {
 
 		if (!breakPeriod) {
 			// scorebar
-			// TODO: these might need to be scaled by cropping the empty (transparent) space around the images...
 			float healthRatio = healthDisplay / 100f;
 			if (firstObject) {  // gradually move ki before map begins
 				if (firstObjectTime >= 1500 && trackPosition < firstObjectTime - 500)
 					healthRatio = (float) trackPosition / (firstObjectTime - 500);
 			}
 			Image scorebar = GameImage.SCOREBAR_BG.getImage();
-			Image colour = (scorebarColour != null) ?
+			Image colour;
-					scorebarColour.getCurrentFrame() :
+			if (scorebarColour != null){
-					GameImage.SCOREBAR_COLOUR.getImage();
+				scorebarColour.updateNoDraw(); //TODO deprecated method
-			float colourX = scorebar.getWidth() * 0.017f, colourY = scorebar.getHeight() * 0.3f;
+				colour = scorebarColour.getCurrentFrame();
+			} else {
+				colour = GameImage.SCOREBAR_COLOUR.getImage();
+			}
+			float colourX = 4 * GameImage.uiscale, colourY = 15 * GameImage.uiscale;
+			Image colourCropped = colour.getSubImage(0, 0, (int) (645 * GameImage.uiscale * healthRatio), colour.getHeight());
+			
+			scorebar.setAlpha(1f);
 			scorebar.draw(0, 0);
-			Image colourCropped = colour.getSubImage(0, 0, (int) (colour.getWidth() * healthRatio), colour.getHeight());
 			colourCropped.draw(colourX, colourY);
 			
 			Image ki = null;
@@ -550,7 +584,7 @@ public class GameData {
 				ki = GameImage.SCOREBAR_KI_DANGER.getImage();
 			else
 				ki = GameImage.SCOREBAR_KI_DANGER2.getImage();
-			ki.drawCentered(colourX + colourCropped.getWidth(), ki.getHeight() / 2f);
+			ki.drawCentered(colourX + colourCropped.getWidth(), colourY);
 
 			// combo burst
 			if (comboBurstIndex != -1 && comboBurstAlpha > 0f) {
@@ -621,46 +655,38 @@ public class GameData {
 	 * @param osu the OsuFile
 	 */
 	public void drawRankingElements(Graphics g, OsuFile osu) {
-		// grade
-		Grade grade = getGrade();
-		if (grade != Grade.NULL)
-			grade.getLargeImage().draw(width * 0.985f - grade.getLargeImage().getWidth(), height * 0.09f);
 		
+		float marginX = width * 0.01f, marginY = height * 0.025f;
 		// header & "Ranking" text
 		Image rankingTitle = GameImage.RANKING_TITLE.getImage();
-		float rankingHeight = (rankingTitle.getHeight() * 0.75f) + 3;
-		g.setColor(Utils.COLOR_BLACK_ALPHA);
-		g.fillRect(0, 0, width, rankingHeight);
-		rankingTitle.draw((width * 0.97f) - rankingTitle.getWidth(), 0);
-		float marginX = width * 0.01f, marginY = height * 0.01f;
-		Utils.FONT_LARGE.drawString(marginX, marginY,
-				String.format("%s - %s [%s]", osu.getArtist(), osu.getTitle(), osu.version), Color.white);
-		Utils.FONT_MEDIUM.drawString(marginX, marginY + Utils.FONT_LARGE.getLineHeight() - 6,
-				String.format("Beatmap by %s", osu.creator), Color.white);
-		Utils.FONT_MEDIUM.drawString(
-				marginX, marginY + Utils.FONT_LARGE.getLineHeight() + Utils.FONT_MEDIUM.getLineHeight() - 10,
-				String.format("Played on %s.", scoreData.getTimeString()), Color.white);
-
 		// ranking panel
 		Image rankingPanel = GameImage.RANKING_PANEL.getImage();
-		int rankingPanelWidth  = rankingPanel.getWidth();
-		int rankingPanelHeight = rankingPanel.getHeight();
-		rankingPanel.draw(0, rankingHeight - (rankingHeight / 10f));
 		
-		float symbolTextScale = (height / 15f) / getScoreSymbolImage('0').getHeight();
+		
-		float rankResultScale = (height * 0.03f) / hitResults[HIT_300].getHeight();
+		//TODO Version 2 skins
+		float rankingHeight = 75;
+
+		rankingPanel.draw(0, (int) (rankingHeight * GameImage.uiscale));
+
+		float scoreTextScale = 1.0f;
+		float symbolTextScale = 1.15f;
+		float rankResultScale = 0.5f;
 
 		// score
-		drawSymbolString((score < 100000000) ? String.format("%08d", score) : Long.toString(score),
+		drawFixedSizeSymbolString(
-				(int) (width * 0.18f), height / 6, symbolTextScale, false);
+				(score < 100000000) ? String.format("%08d", score) : Long.toString(score),
+				(int) (210 * GameImage.uiscale),
+				(int) ((rankingHeight + 50) * GameImage.uiscale),
+				scoreTextScale, 
+				getScoreSymbolImage('0').getWidth() * scoreTextScale - 2, false);
 
 		// result counts
-		float resultInitialX = rankingPanelWidth * 0.20f;
+		float resultInitialX = 130;
-		float resultInitialY = rankingHeight + (rankingPanelHeight * 0.27f) + (rankingHeight / 10f);
+		float resultInitialY = rankingHeight + 140;
-		float resultHitInitialX = rankingPanelWidth * 0.05f;
+		float resultHitInitialX = 65;
-		float resultHitInitialY = resultInitialY + (getScoreSymbolImage('0').getHeight() * symbolTextScale);
+		float resultHitInitialY = rankingHeight + 182 ;
-		float resultOffsetX = rankingPanelWidth / 2f;
+		float resultOffsetX = 320;
-		float resultOffsetY = rankingPanelHeight * 0.2f;
+		float resultOffsetY = 96;
 
 		int[] rankDrawOrder = { HIT_300, HIT_300G, HIT_100, HIT_100K, HIT_50, HIT_MISS };
 		int[] rankResultOrder = {
@@ -670,28 +696,43 @@ public class GameData {
 		};
 
 		for (int i = 0; i < rankDrawOrder.length; i += 2) {
-			hitResults[rankDrawOrder[i]].getScaledCopy(rankResultScale).draw(
+			hitResults[rankDrawOrder[i]].getScaledCopy(rankResultScale).drawCentered(
-					resultHitInitialX, resultHitInitialY - (hitResults[rankDrawOrder[i]].getHeight() * rankResultScale) + (resultOffsetY * (i / 2)));
+					(resultHitInitialX * GameImage.uiscale), 
-			hitResults[rankDrawOrder[i+1]].getScaledCopy(rankResultScale).draw(
+					((resultHitInitialY  + (resultOffsetY * (i / 2))) * GameImage.uiscale)
-					resultHitInitialX + resultOffsetX, resultHitInitialY - (hitResults[rankDrawOrder[i]].getHeight() * rankResultScale) + (resultOffsetY * (i / 2)));
+					);
+			hitResults[rankDrawOrder[i+1]].getScaledCopy(rankResultScale).drawCentered(
+					((resultHitInitialX + resultOffsetX) * GameImage.uiscale),
+					((resultHitInitialY  + (resultOffsetY * (i / 2))) * GameImage.uiscale)
+					);
 			drawSymbolString(String.format("%dx", rankResultOrder[i]),
-					(int) resultInitialX, (int) (resultInitialY + (resultOffsetY * (i / 2))), symbolTextScale, false);
+					(int) (resultInitialX * GameImage.uiscale), 
+					(int) ((resultInitialY + (resultOffsetY * (i / 2))) * GameImage.uiscale), 
+					symbolTextScale, false);
 			drawSymbolString(String.format("%dx", rankResultOrder[i+1]),
-					(int) (resultInitialX + resultOffsetX), (int) (resultInitialY + (resultOffsetY * (i / 2))), symbolTextScale, false);
+					(int) ((resultInitialX + resultOffsetX) * GameImage.uiscale), 
+					(int) ((resultInitialY + (resultOffsetY * (i / 2))) * GameImage.uiscale), 
+					symbolTextScale, false);
 		}
 
 		// combo and accuracy
 		Image rankingMaxCombo = GameImage.RANKING_MAXCOMBO.getImage();
 		Image rankingAccuracy = GameImage.RANKING_ACCURACY.getImage();
-		float textY = rankingHeight + (rankingPanelHeight * 0.87f) - (rankingHeight / 10f);
+		float accuracyX = 295;
-		float numbersX = rankingMaxCombo.getWidth() * .07f;
+		float textY = rankingHeight + 425;
-		float numbersY = textY + rankingMaxCombo.getHeight() * 0.7f;
+		float numbersY = textY + 30;
-		rankingMaxCombo.draw(width * 0.01f, textY);
-		rankingAccuracy.draw(rankingPanelWidth / 2f, textY);
 		drawSymbolString(String.format("%dx", comboMax),
-				(int) (width * 0.01f + numbersX), (int) numbersY, symbolTextScale, false);
+				(int) (25 * GameImage.uiscale),
+				(int) (numbersY * GameImage.uiscale), symbolTextScale, false);
 		drawSymbolString(String.format("%02.2f%%", getScorePercent()),
-				(int) (rankingPanelWidth / 2f + numbersX), (int) numbersY, symbolTextScale, false);
+				(int) ((accuracyX + 20) * GameImage.uiscale),
+				(int) (numbersY * GameImage.uiscale), symbolTextScale, false);
+		rankingMaxCombo.draw(
+				(int) (10 * GameImage.uiscale),
+				(int) (textY * GameImage.uiscale));
+		rankingAccuracy.draw(
+				(int) (accuracyX * GameImage.uiscale),
+				(int) (textY * GameImage.uiscale));
+		
 
 		// full combo
 		if (comboMax == fullObjectCount) {
@@ -700,6 +741,23 @@ public class GameData {
 					(height * 0.99f) - GameImage.RANKING_PERFECT.getImage().getHeight()
 			);
 		}
+		// grade
+		Grade grade = getGrade();
+		if (grade != Grade.NULL)
+			grade.getLargeImage().draw(width-grade.getLargeImage().getWidth(), rankingHeight);
+
+		//Header
+		g.setColor(Utils.COLOR_BLACK_ALPHA);
+		g.fillRect(0, 0, width, 100 * GameImage.uiscale);
+		rankingTitle.draw((width * 0.97f) - rankingTitle.getWidth(), 0);
+		Utils.FONT_LARGE.drawString(marginX, marginY,
+				String.format("%s - %s [%s]", osu.getArtist(), osu.getTitle(), osu.version), Color.white);
+		Utils.FONT_MEDIUM.drawString(marginX, marginY + Utils.FONT_LARGE.getLineHeight() - 6,
+				String.format("Beatmap by %s", osu.creator), Color.white);
+		Utils.FONT_MEDIUM.drawString(
+				marginX, marginY + Utils.FONT_LARGE.getLineHeight() + Utils.FONT_MEDIUM.getLineHeight() - 10,
+				String.format("Played on %s.", scoreData.getTimeString()), Color.white);
+
 		
 		// mod icons
 		int modWidth = GameMod.AUTO.getImage().getWidth();

src/itdelatrisu/opsu/GameImage.java

@@ -18,12 +18,11 @@
 
 package itdelatrisu.opsu;
 
-import itdelatrisu.opsu.states.SongMenu;
-
 import java.io.File;
 import java.util.ArrayList;
 import java.util.List;
 
+import org.newdawn.slick.Animation;
 import org.newdawn.slick.Image;
 import org.newdawn.slick.SlickException;
 
@@ -32,47 +31,17 @@ import org.newdawn.slick.SlickException;
  */
 public enum GameImage {
 	// Cursor
-	CURSOR ("cursor", "png") {
+	CURSOR ("cursor", "png"),
-		@Override
+	CURSOR_MIDDLE ("cursormiddle", "png"),
-		protected Image process_sub(Image img, int w, int h) {
+	CURSOR_TRAIL ("cursortrail", "png"),
-			return img.getScaledCopy(1 + ((h - 600) / 1000f));
+	CURSOR_OLD ("cursor2", "png", false, false),
-		}
+	CURSOR_TRAIL_OLD ("cursortrail2", "png", false, false),
-	},
-	CURSOR_MIDDLE ("cursormiddle", "png") {
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return CURSOR.process_sub(img, w, h);
-		}
-	},
-	CURSOR_TRAIL ("cursortrail", "png") {
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return CURSOR.process_sub(img, w, h);
-		}
-	},
-	CURSOR_OLD ("cursor2", "png", false, false) {
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return CURSOR.process_sub(img, w, h);
-		}
-	},
-	CURSOR_TRAIL_OLD ("cursortrail2", "png", false, false) {
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return CURSOR.process_sub(img, w, h);
-		}
-	},
 
 	// Game
 	SECTION_PASS ("section-pass", "png"),
 	SECTION_FAIL ("section-fail", "png"),
 	WARNINGARROW ("play-warningarrow", "png"),
-	SKIP ("play-skip", "png") {
+	SKIP ("play-skip", "play-skip-%d","png"),
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return img.getScaledCopy((h * 0.1f) / img.getHeight());
-		}
-	},
 	COUNTDOWN_READY ("ready", "png") {
 		@Override
 		protected Image process_sub(Image img, int w, int h) {
@@ -82,25 +51,25 @@ public enum GameImage {
 	COUNTDOWN_3 ("count3", "png") {
 		@Override
 		protected Image process_sub(Image img, int w, int h) {
-			return COUNTDOWN_READY.process_sub(img, w, h);
+			return img.getScaledCopy((h / 3f) / img.getHeight());
 		}
 	},
 	COUNTDOWN_2 ("count2", "png") {
 		@Override
 		protected Image process_sub(Image img, int w, int h) {
-			return COUNTDOWN_READY.process_sub(img, w, h);
+			return img.getScaledCopy((h / 3f) / img.getHeight());
 		}
 	},
 	COUNTDOWN_1 ("count1", "png") {
 		@Override
 		protected Image process_sub(Image img, int w, int h) {
-			return COUNTDOWN_READY.process_sub(img, w, h);
+			return img.getScaledCopy((h / 3f) / img.getHeight());
 		}
 	},
 	COUNTDOWN_GO ("go", "png") {
 		@Override
 		protected Image process_sub(Image img, int w, int h) {
-			return COUNTDOWN_READY.process_sub(img, w, h);
+			return img.getScaledCopy((h / 3f) / img.getHeight());
 		}
 	},
 	HITCIRCLE_SELECT ("hitcircleselect", "png"),
@@ -168,18 +137,9 @@ public enum GameImage {
 
 	// Score Data
 	COMBO_BURST ("comboburst", "comboburst-%d", "png"),
-	SCOREBAR_BG ("scorebar-bg", "png") {
+	SCOREBAR_BG ("scorebar-bg", "png"),
-		@Override
+	SCOREBAR_COLOUR ("scorebar-colour", "scorebar-colour-%d", "png"),
-		protected Image process_sub(Image img, int w, int h) {
+	//TODO scorebar-marker?
-			return img.getScaledCopy((w * 0.565f) / img.getWidth());
-		}
-	},
-	SCOREBAR_COLOUR ("scorebar-colour", "scorebar-colour-%d", "png") {
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return img.getScaledCopy((w * 0.521f) / img.getWidth());
-		}
-	},
 	SCOREBAR_KI ("scorebar-ki", "png"),
 	SCOREBAR_KI_DANGER ("scorebar-kidanger", "png"),
 	SCOREBAR_KI_DANGER2 ("scorebar-kidanger2", "png"),
@@ -192,92 +152,27 @@ public enum GameImage {
 	HIT_300G ("hit300g", "png"),
 	HIT_SLIDER10 ("sliderpoint10", "png"),
 	HIT_SLIDER30 ("sliderpoint30", "png"),
-	RANKING_SS ("ranking-X", "png") {
+	RANKING_SS ("ranking-X", "png"),
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return img.getScaledCopy((h / 2f) / img.getHeight());
-		}
-	},
 	RANKING_SS_SMALL ("ranking-X-small", "png"),
-	RANKING_SSH ("ranking-XH", "png") {
+	RANKING_SSH ("ranking-XH", "png"),
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return RANKING_SS.process_sub(img, w, h);
-		}
-	},
 	RANKING_SSH_SMALL ("ranking-XH-small", "png"),
-	RANKING_S ("ranking-S", "png") {
+	RANKING_S ("ranking-S", "png"),
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return RANKING_SS.process_sub(img, w, h);
-		}
-	},
 	RANKING_S_SMALL ("ranking-S-small", "png"),
-	RANKING_SH ("ranking-SH", "png") {
+	RANKING_SH ("ranking-SH", "png"),
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return RANKING_SS.process_sub(img, w, h);
-		}
-	},
 	RANKING_SH_SMALL ("ranking-SH-small", "png"),
-	RANKING_A ("ranking-A", "png") {
+	RANKING_A ("ranking-A", "png"),
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return RANKING_SS.process_sub(img, w, h);
-		}
-	},
 	RANKING_A_SMALL ("ranking-A-small", "png"),
-	RANKING_B ("ranking-B", "png") {
+	RANKING_B ("ranking-B", "png"),
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return RANKING_SS.process_sub(img, w, h);
-		}
-	},
 	RANKING_B_SMALL ("ranking-B-small", "png"),
-	RANKING_C ("ranking-C", "png") {
+	RANKING_C ("ranking-C", "png"),
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return RANKING_SS.process_sub(img, w, h);
-		}
-	},
 	RANKING_C_SMALL ("ranking-C-small", "png"),
-	RANKING_D ("ranking-D", "png") {
+	RANKING_D ("ranking-D", "png"),
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return RANKING_SS.process_sub(img, w, h);
-		}
-	},
 	RANKING_D_SMALL ("ranking-D-small", "png"),
-	RANKING_PANEL ("ranking-panel", "png") {
+	RANKING_PANEL ("ranking-panel", "png"),
-		@Override
+	RANKING_PERFECT ("ranking-perfect", "png"),
-		protected Image process_sub(Image img, int w, int h) {
+	RANKING_TITLE ("ranking-title", "png"),
-			return img.getScaledCopy((h * 0.63f) / img.getHeight());
+	RANKING_MAXCOMBO ("ranking-maxcombo", "png"),
-		}
+	RANKING_ACCURACY ("ranking-accuracy", "png"),
-	},
-	RANKING_PERFECT ("ranking-perfect", "png") {
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return img.getScaledCopy((h * 0.16f) / img.getHeight());
-		}
-	},
-	RANKING_TITLE ("ranking-title", "png") {
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return img.getScaledCopy((h * 0.15f) / img.getHeight());
-		}
-	},
-	RANKING_MAXCOMBO ("ranking-maxcombo", "png") {
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return img.getScaledCopy((h * 0.05f) / img.getHeight());
-		}
-	},
-	RANKING_ACCURACY ("ranking-accuracy", "png") {
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return img.getScaledCopy((h * 0.05f) / img.getHeight());
-		}
-	},
 	DEFAULT_0 ("default-0", "png"),
 	DEFAULT_1 ("default-1", "png"),
 	DEFAULT_2 ("default-2", "png"),
@@ -436,19 +331,8 @@ public enum GameImage {
 			return img.getScaledCopy((h * 0.3f) / img.getHeight());
 		}
 	},
-	MENU_BACK ("menu-back", "png", false, false) {
+	MENU_BACK ("menu-back", "menu-back-%d","png"), 
-		@Override
+	MENU_BUTTON_BG ("menu-button-background", "png", false, false),
-		protected Image process_sub(Image img, int w, int h) {
-			return img.getScaledCopy((h * 0.1f) / img.getHeight());
-		}
-	},
-	MENU_BUTTON_BG ("menu-button-background", "png", false, false) {
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			// TODO: scale these properly (messy due to non-cropped images)
-			return img.getScaledCopy(w / 2, (int) (h * 0.95f) / SongMenu.MAX_SONG_BUTTONS);
-		}
-	},
 	MENU_TAB ("selection-tab", "png", false, false) {
 		@Override
 		protected Image process_sub(Image img, int w, int h) {
@@ -523,19 +407,8 @@ public enum GameImage {
 			return MUSIC_PLAY.process_sub(img, w, h);
 		}
 	},
-
+	RANKING_RETRY ("ranking-retry", "png", false, false),
-	RANKING_RETRY ("ranking-retry", "png", false, false) {
+	RANKING_EXIT ("ranking-back", "png", false, false),
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return img.getScaledCopy((h * 0.15f) / img.getHeight());
-		}
-	},
-	RANKING_EXIT ("ranking-back", "png", false, false) {
-		@Override
-		protected Image process_sub(Image img, int w, int h) {
-			return img.getScaledCopy((h * 0.15f) / img.getHeight());
-		}
-	},
 	DOWNLOADS ("downloads", "png", false, false) {
 		@Override
 		protected Image process_sub(Image img, int w, int h) {
@@ -607,6 +480,9 @@ public enum GameImage {
 	/** Container dimensions. */
 	private static int containerWidth, containerHeight;
 	
+	/** value ui should be scaled by */
+	public static float uiscale;
+
 	/**
 	 * Initializes the GameImage class with container dimensions.
 	 * @param width the container width
@@ -615,6 +491,7 @@ public enum GameImage {
 	public static void init(int width, int height) {
 		containerWidth = width;
 		containerHeight = height;
+		uiscale = containerHeight / 768f;
 	}
 
 	/**
@@ -713,6 +590,17 @@ public enum GameImage {
 		return (skinImage != null) ? skinImage : defaultImage;
 	}
 	
+	/**
+	 * Returns an Animation based on the image array.
+	 * If no image array exist, returns the single image as an animation.
+	 */
+	public Animation getAnimation(int duration){
+		Image[] images = getImages();
+		if (images == null)
+			images = new Image[]{ getImage() };
+		return new Animation(images, duration);
+	}
+
 	/**
 	 * Returns the image array associated with this resource.
 	 * The skin images takes priority over the default images.
@@ -925,13 +813,14 @@ public enum GameImage {
 	 * Performs individual post-loading actions on the image.
 	 */
 	private void process() {
+		int fakeWid = 768*containerWidth/containerHeight;
 		if (skinImages != null) {
 			for (int i = 0; i < skinImages.length; i++)
-				setImage(process_sub(getImages()[i], containerWidth, containerHeight), i);
+				setImage(process_sub(getImages()[i], fakeWid, 768).getScaledCopy(uiscale), i);
 		} else if (defaultImages != null && skinImage == null) {
 			for (int i = 0; i < defaultImages.length; i++)
-				setImage(process_sub(getImages()[i], containerWidth, containerHeight), i);
+				setImage(process_sub(getImages()[i], fakeWid, 768).getScaledCopy(uiscale), i);
 		} else
-			setImage(process_sub(getImage(), containerWidth, containerHeight));
+			setImage(process_sub(getImage(), fakeWid, 768).getScaledCopy(uiscale));
 	}
 }

src/itdelatrisu/opsu/MenuButton.java

@@ -366,6 +366,7 @@ public class MenuButton {
 	 */
 	private void setHoverRadius() {
 		int xOffset = 0, yOffset = 0;
+		if(img != null){
 			if (dir != Expand.CENTER) {
 				// offset by difference between normal/scaled image dimensions
 				xOffset = (int) ((scale - 1f) * img.getWidth());
@@ -381,5 +382,7 @@ public class MenuButton {
 			}
 			this.xRadius = ((img.getWidth() * scale) + xOffset) / 2f;
 			this.yRadius = ((img.getHeight() * scale) + yOffset) / 2f;
+		
+		}
 	}
 }

src/itdelatrisu/opsu/OsuGroupNode.java

@@ -61,12 +61,13 @@ public class OsuGroupNode {
 	 */
 	public void draw(float x, float y, float headerY, float footerY, Grade grade, boolean focus) {
 		boolean expanded = (osuFileIndex > -1);
+		float xOffset = 0f;
 		OsuFile osu;
 		Image bg = GameImage.MENU_BUTTON_BG.getImage();
+		bg.setAlpha(0.9f);
 		Color bgColor;
 		Color textColor = Color.lightGray;
 		
-		// draw song button background
 		if (expanded) {  // expanded
 			x -= bg.getWidth() / 10f;
 			if (focus) {

src/itdelatrisu/opsu/OsuHitObject.java

@@ -296,4 +296,12 @@ public class OsuHitObject {
 	 * @return true if new combo
 	 */
 	public boolean isNewCombo() { return (type & TYPE_NEWCOMBO) > 0; }
+
+	/**
+	 * Returns the number of extra skips on the combo colours
+	 */
+	public int getComboSkip() {
+		return (type >> 4);
+	}
+
 }

src/itdelatrisu/opsu/OsuParser.java

@@ -544,6 +544,7 @@ public class OsuParser {
 			int comboNumber = 1;  // combo number
 
 			int objectIndex = 0;
+			boolean first = true;
 			while ((line = in.readLine()) != null && objectIndex < osu.objects.length) {
 				line = line.trim();
 				if (!isValidLine(line))
@@ -563,10 +564,16 @@ public class OsuParser {
 					// set combo info
 					// - new combo: get next combo index, reset combo number
 					// - else:      maintain combo index, increase combo number
-					if ((hitObject.isNewCombo() && !hitObject.isSpinner()) || objectIndex == 0) {
+					if (((hitObject.isNewCombo()|| first) && !hitObject.isSpinner()) ) {
+						int skip = 1 + hitObject.getComboSkip();
+						
+						for(int i=0; i < skip; i++){
 							comboIndex = (comboIndex + 1) % osu.combo.length;
 							comboNumber = 1;
 						}
+						first=false;
+					}
+
 					hitObject.setComboIndex(comboIndex);
 					hitObject.setComboNumber(comboNumber++);
 

src/itdelatrisu/opsu/ScoreData.java

@@ -287,6 +287,8 @@ public class ScoreData implements Comparable<ScoreData> {
 		// time since
 		if (getTimeSince() != null) {
 			Image clock = GameImage.HISTORY.getImage();
+			g.setColor((focus) ? BG_FOCUS : BG_NORMAL);
+			g.fillRect(baseX + buttonWidth, y, Utils.FONT_DEFAULT.getWidth("         "),buttonHeight);
 			clock.drawCentered(baseX + buttonWidth * 1.02f + clock.getWidth() / 2f, midY);
 			Utils.FONT_DEFAULT.drawString(
 					baseX + buttonWidth * 1.03f + clock.getWidth(),

src/itdelatrisu/opsu/Utils.java

@@ -70,8 +70,8 @@ public class Utils {
 		COLOR_WHITE_ALPHA     = new Color(255, 255, 255, 0.5f),
 		COLOR_BLUE_DIVIDER    = new Color(49, 94, 237),
 		COLOR_BLUE_BACKGROUND = new Color(74, 130, 255),
-		COLOR_BLUE_BUTTON     = new Color(50, 189, 237),
+		COLOR_BLUE_BUTTON     = new Color(40, 129, 237),
-		COLOR_ORANGE_BUTTON   = new Color(230, 151, 87),
+		COLOR_ORANGE_BUTTON   = new Color(200, 90, 3),
 		COLOR_GREEN_OBJECT    = new Color(26, 207, 26),
 		COLOR_BLUE_OBJECT     = new Color(46, 136, 248),
 		COLOR_RED_OBJECT      = new Color(243, 48, 77),
@@ -87,8 +87,8 @@ public class Utils {
 
 	/** The default map colors, used when a map does not provide custom colors. */
 	public static final Color[] DEFAULT_COMBO = {
-		COLOR_GREEN_OBJECT, COLOR_BLUE_OBJECT,
+		COLOR_ORANGE_OBJECT, COLOR_GREEN_OBJECT, 
-		COLOR_RED_OBJECT, COLOR_ORANGE_OBJECT
+		COLOR_BLUE_OBJECT, COLOR_RED_OBJECT, 
 	};
 
 	/** Game fonts. */
@@ -222,11 +222,21 @@ public class Utils {
 		DownloadNode.init(width, height);
 
 		// back button
-		Image back = GameImage.MENU_BACK.getImage();
+		//TODO: this is annoying perhaps we can just pass in GameImage to MenuButton?
+		if (GameImage.MENU_BACK.getImages() != null){
+			Animation back = GameImage.MENU_BACK.getAnimation(200);
 			backButton = new MenuButton(back,
 					back.getWidth() / 2f,
 					height - (back.getHeight() / 2f));
+		}else{
+			Image back = GameImage.MENU_BACK.getImage();
+			backButton = new MenuButton(GameImage.MENU_BACK.getImage(),
+					back.getWidth() / 2f,
+					height - (back.getHeight() / 2f));
+		}
 		backButton.setHoverExpand(MenuButton.Expand.UP_RIGHT);
+		
+		
 	}
 
 	/**

src/itdelatrisu/opsu/states/Game.java

@@ -45,6 +45,7 @@ import java.util.Stack;
 import java.util.concurrent.TimeUnit;
 
 import org.lwjgl.input.Keyboard;
+import org.newdawn.slick.Animation;
 import org.newdawn.slick.Color;
 import org.newdawn.slick.GameContainer;
 import org.newdawn.slick.Graphics;
@@ -268,7 +269,6 @@ public class Game extends BasicGameState {
 
 		// skip beginning
 		if (objectIndex == 0 &&
-		    firstObjectTime - SKIP_OFFSET > 5000 &&
 		    trackPosition < osu.objects[0].getTime() - SKIP_OFFSET)
 			skipButton.draw();
 
@@ -782,7 +782,6 @@ public class Game extends BasicGameState {
 		int firstObjectTime = osu.objects[0].getTime();
 		int trackPosition = MusicController.getPosition();
 		if (objectIndex == 0 &&
-			firstObjectTime - SKIP_OFFSET > 4000 &&
 			trackPosition < firstObjectTime - SKIP_OFFSET) {
 			if (isLeadIn()) {
 				leadInTime = 0;
@@ -810,10 +809,18 @@ public class Game extends BasicGameState {
 		}
 
 		// skip button
-		Image skip = GameImage.SKIP.getImage();
+		//TODO: this is annoying perhaps we can just pass in GameImage to MenuButton?
-		skipButton = new MenuButton(skip,
+		if (GameImage.SKIP.getImages() != null){
-				width - (skip.getWidth() / 2f),
+			Animation back = GameImage.SKIP.getAnimation(200);
-				height - (skip.getHeight() / 2f));
+			skipButton = new MenuButton(back,
+					width - back.getWidth() / 2f,
+					height - (back.getHeight() / 2f));
+		}else{
+			Image back = GameImage.SKIP.getImage();
+			skipButton = new MenuButton(GameImage.SKIP.getImage(),
+					width - back.getWidth() / 2f,
+					height - (back.getHeight() / 2f));
+		}
 		skipButton.setHoverExpand(MenuButton.Expand.UP_LEFT);
 		
 		// load other images...

src/itdelatrisu/opsu/states/GameRanking.java

@@ -95,8 +95,10 @@ public class GameRanking extends BasicGameState {
 		OsuFile osu = MusicController.getOsuFile();
 
 		// background
-		if (!osu.drawBG(width, height, 0.7f, true))
+		if (!osu.drawBG(width, height, 0.7f, true)) {
-			g.setBackground(Utils.COLOR_BLACK_ALPHA);
+			GameImage.MENU_BG.getImage().draw(0,0);
+			//g.setBackground(Utils.COLOR_BLACK_ALPHA);
+		}
 
 		// ranking screen elements
 		data.drawRankingElements(g, osu);

src/itdelatrisu/opsu/states/OptionsMenu.java

@@ -176,13 +176,13 @@ public class OptionsMenu extends BasicGameState {
 		float tabX = (width / 50) + (tabImage.getWidth() / 2f);
 		float tabY = 15 + Utils.FONT_XLARGE.getLineHeight() + (tabImage.getHeight() / 2f);
 		int tabOffset = Math.min(tabImage.getWidth(),
-				((width - subtextWidth - tabImage.getWidth()) / 2) / OptionTab.SIZE);
+				(width/2) / OptionTab.SIZE);
 		for (OptionTab tab : OptionTab.values())
 			tab.button = new MenuButton(tabImage, tabX + (tab.ordinal() * tabOffset), tabY);
 
 		// game option coordinate modifiers
 		textY = (int) (tabY + tabImage.getHeight());
-		offsetY = (height - textY - GameImage.MENU_BACK.getImage().getHeight()) / maxOptionsScreen;
+		offsetY = (height - textY - GameImage.MENU_BACK.getAnimation(1).getHeight()) / maxOptionsScreen;
 	}
 
 	@Override

src/itdelatrisu/opsu/states/SongMenu.java

@@ -253,7 +253,7 @@ public class SongMenu extends BasicGameState {
 		search.setMaxLength(60);
 
 		// selection buttons
-		float selectX = GameImage.MENU_BACK.getImage().getWidth() * 1.75f;
+		float selectX = GameImage.MENU_BACK.getAnimation(1).getWidth() * 1.75f;
 		float selectY = height - GameImage.SELECTION_MODS.getImage().getHeight() / 2f;
 		float selectOffset = GameImage.SELECTION_MODS.getImage().getWidth() * 1.05f;
 		selectModsButton = new MenuButton(GameImage.SELECTION_MODS_OVERLAY.getImage(),