add design for level select screen

krzysu · Nov 29, 2013 · cbba397 · cbba397
1 parent 8c9041a
commit cbba397
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 40 deletions.
diff --git a/app/data/hud.json b/app/data/hud.json
@@ -62,5 +62,45 @@
  "tilew": 44,
  "tileh": 49,
  "frames": 1
+ },
+ "hud_audio_on_button": {
+ "sx": 0,
+ "sy": 102,
+ "cols": 1,
+ "tilew": 44,
+ "tileh": 49,
+ "frames": 1
+ },
+ "hud_audio_off_button": {
+ "sx": 45,
+ "sy": 102,
+ "cols": 1,
+ "tilew": 44,
+ "tileh": 49,
+ "frames": 1
+ },
+ "ui_level_button": {
+ "sx": 0,
+ "sy": 151,
+ "cols": 1,
+ "tilew": 172,
+ "tileh": 171,
+ "frames": 1
+ },
+ "ui_level_button_locked": {
+ "sx": 0,
+ "sy": 364,
+ "cols": 1,
+ "tilew": 175,
+ "tileh": 184,
+ "frames": 1
+ },
+ "ui_level_progress": {
+ "sx": 0,
+ "sy": 322,
+ "cols": 1,
+ "tilew": 30,
+ "tileh": 30,
+ "frames": 1
  }
 }
diff --git a/app/images/hud.png b/app/images/hud.png
diff --git a/app/scripts/game.js b/app/scripts/game.js
diff --git a/app/scripts/game/init.coffee b/app/scripts/game/init.coffee
@@ -78,7 +78,7 @@ window.Game =
  level6:
  dataAsset: "level6.tmx"
 
-
+ # audio
  @audio =
  zombieMode: "zombie_mode.mp3"
  playerBg: "player_bg.mp3"
@@ -88,6 +88,8 @@ window.Game =
  playerHit: "player_hit.mp3"
  humanCreated: "human_created.mp3"
 
+ Game.isMuted = false
+
  # convert to array for Q.load
  assetsAsArray = []
  @objValueToArray(@assets, assetsAsArray)

diff --git a/app/scripts/game/scenes/level_select.coffee b/app/scripts/game/scenes/level_select.coffee
@@ -3,10 +3,10 @@ Q = Game.Q
 Q.scene "levelSelect", (stage) ->
 
  # layout params
- marginXinP = 10 # %
+ marginXinP = 20 # %
  marginYinP = 20 # %
  gutterXinP = 8 # %
- gutterYinP = 8 # %
+ gutterYinP = 14 # %
  columnsNo = 3
 
  # layout math
@@ -18,7 +18,7 @@ Q.scene "levelSelect", (stage) ->
 
  marginY = Q.height * marginYinP * 0.01
  gutterY = Q.height * gutterYinP * 0.01
- rowHeight = Q.height * 0.20 # 20%
+ rowHeight = Q.height * 0.22 # 22%
 
  # init params
  x = marginX + columnWidth/2
@@ -52,15 +52,16 @@ Q.scene "levelSelect", (stage) ->
  x: Q.width/2
  y: marginY/2
  label: "Everything begins here!"
- size: 30
- color: "#fff"
- family: "Ubuntu"
+ color: "#f2da38"
+ family: "Jolly Lodger"
+ size: 60
 
  # audio
  Q.AudioManager.stopAll()
  Q.AudioManager.clear()
 
  # audio button
- stage.insert new Q.UI.AudioButton
- x: Q.width/2
- y: Q.height - 50
+ audioButton = stage.insert new Q.UI.AudioButton
+ y: marginY/2
+
+ audioButton.p.x = Q.width - marginX - audioButton.p.w/2
diff --git a/app/scripts/game/sprites/ui/audio_button.coffee b/app/scripts/game/sprites/ui/audio_button.coffee
@@ -4,24 +4,24 @@ Q.UI.AudioButton = Q.UI.Button.extend "UI.AudioButton",
  init: (p) ->
  @_super p,
  x: 0
- y: 80
- w: 120
- h: 60
+ y: 0
  type: Q.SPRITE_UI | Q.SPRITE_DEFAULT
- fill: "#CCCCCC"
- label: "Sound on"
+ sheet: "hud_audio_on_button"
  keyActionName: "mute" # button that will trigger click event
 
- Game.isMuted = false
+ if Game.isMuted
+ @p.sheet = "hud_audio_off_button"
+ else
+ @p.sheet = "hud_audio_on_button"
 
  @on 'click', =>
  if !Game.isMuted
  Q.AudioManager.mute()
- @p.label = "Sound off"
+ @p.sheet = "hud_audio_off_button"
  Game.isMuted = true
 
  else
  Q.AudioManager.unmute()
- @p.label = "Sound on"
+ @p.sheet = "hud_audio_on_button"
  Game.isMuted = false
 
diff --git a/app/scripts/game/sprites/ui/level_button.coffee b/app/scripts/game/sprites/ui/level_button.coffee
@@ -4,12 +4,21 @@ Q.UI.LevelButton = Q.UI.Button.extend "UI.LevelButton",
  init: (p) ->
  @_super p,
  type: Q.SPRITE_UI | Q.SPRITE_DEFAULT
- fill: "#EEE"
+ sheet: "ui_level_button"
+ fontColor: "#595f5f"
+ font: "400 70px Jolly Lodger"
 
  @p.label = @p.level
 
+ @p.sheetW = 172
+ @p.sheetH = 130
+
+ @p.cx = @p.sheetW/2
+ @p.cy = @p.sheetH/2
+
  if @p.enabled == false
- @p.fill = "#CCC"
+ @p.sheet = "ui_level_button_locked"
+ @p.label = false
 
  @on 'click', =>
  if @p.enabled