More work on the loading view.

app/lib/surface/CoordinateDisplay.coffee

@@ -23,7 +23,7 @@ module.exports = class CoordinateDisplay extends createjs.Container
 
   build: ->
     @mouseEnabled = @mouseChildren = false
-    @addChild @label = new createjs.Text("", "20px Arial", "#003300")
+    @addChild @label = new createjs.Text("", "40px Arial", "#003300")
     @label.name = 'position text'
     @label.shadow = new createjs.Shadow("#FFFFFF", 1, 1, 0)
 

app/lib/surface/DebugDisplay.coffee

@@ -25,10 +25,10 @@ module.exports = class DebugDisplay extends createjs.Container
 
   build: ->
     @mouseEnabled = @mouseChildren = false
-    @addChild @frameText = new createjs.Text "...", "20px Arial", "#FFF"
+    @addChild @frameText = new createjs.Text "...", "40px Arial", "#FFF"
     @frameText.name = 'frame text'
-    @frameText.x = @canvasWidth - 50
-    @frameText.y = @canvasHeight - 25
+    @frameText.x = @canvasWidth - 100
+    @frameText.y = @canvasHeight - 50
     @frameText.alpha = 0.5
 
   updateFrame: (currentFrame) ->
@@ -42,4 +42,4 @@ module.exports = class DebugDisplay extends createjs.Container
       @framesRenderedThisSecond = 0
 
     @frameText.text = Math.round(currentFrame) + (if @fps? then " - " + @fps + ' fps' else '')
-    @frameText.x = @canvasWidth - @frameText.getMeasuredWidth() - 10
+    @frameText.x = @canvasWidth - @frameText.getMeasuredWidth() - 20

app/lib/surface/Label.coffee

@@ -59,7 +59,7 @@ module.exports = class Label extends CocoClass
     o.fontWeight = {D: "bold", S: "bold", N: "bold"}[st]
     o.shadow = {D: false, S: true, N: true}[st]
     o.shadowColor = {D: "#FFF", S: "#000", N: "#FFF"}[st]
-    o.fontSize = {D: 25, S: 12, N: 12}[st]
+    o.fontSize = {D: 50, S: 24, N: 24}[st]
     fontFamily = {D: "Arial", S: "Arial", N: "Arial"}[st]
     o.fontDescriptor = "#{o.fontWeight} #{o.fontSize}px #{fontFamily}"
     o.fontColor = {D: "#000", S: "#FFF", N: "#00a"}[st]

app/lib/surface/Mark.coffee

@@ -81,7 +81,7 @@ module.exports = class Mark extends CocoClass
     shape.graphics.endStroke()
     shape.graphics.endFill()
 
-    text = new createjs.Text "" + index, "20px Arial", color.replace('0.5', '1')
+    text = new createjs.Text "" + index, "40px Arial", color.replace('0.5', '1')
     text.regX = text.getMeasuredWidth() / 2
     text.regY = text.getMeasuredHeight() / 2
     text.shadow = new createjs.Shadow("#000000", 1, 1, 0)

app/styles/play/level.sass

@@ -18,8 +18,6 @@
     display: block
     z-index: 1
     
-    
-  //max-width: 1680px   // guideline, but for now let's let it stretch out
   min-width: 1024px
   position: relative
 

app/styles/play/level/loading.sass

@@ -2,10 +2,10 @@
 @import "app/styles/mixins"
 
 @mixin sky-background($url: '', $backgroundPosition: left)
-  $top: #6cab26
-  $mid: #999999
-  $bot: #33AA00
-  $stop: 44%
+  $top: #95D9EF
+  $mid: #FFFFFF
+  $bot: #8EC643
+  $stop: 99.6%
   background: $mid
   background-image: url($url)  // fallback
   background-image: url($url), -webkit-linear-gradient(top, $top, $mid $stop, $bot)
@@ -50,16 +50,16 @@
         transition-duration: 1.2s
 
   .left-wing, .right-wing
-    width: 50%
+    width: 100%
     height: 100%
     position: absolute
 
   .left-wing
     @include sky-background('/images/level/loading_left_wing.png', right)
-    left: 0
-    transition: left $UNVEIL_TIME ease
+    left: -50%
+    transition: all $UNVEIL_TIME ease
 
   .right-wing
     @include sky-background('/images/level/loading_right_wing.png', left)
-    right: 0
-    transition: right $UNVEIL_TIME ease
+    right: -50%
+    transition: all $UNVEIL_TIME ease

app/styles/play/spectate.sass

@@ -1,7 +1,6 @@
 @import "app/styles/bootstrap/mixins"
 @import "app/styles/mixins"
 
-
 #spectate-level-view
   #playback-view
     width: 100%
@@ -24,13 +23,15 @@
       line-height: 15px
       left: 0
 
-
+  max-width: 1920px
   margin: 0 auto
   @include user-select(none)
+  
+  #level-loading-view
+    max-height: 1284px
 
   .level-content
     position: relative
-    max-width: 1920px
     margin: 0px auto
 
   #canvas-wrapper

app/templates/editor/level/modal/world_select.jade

@@ -27,7 +27,7 @@
         div.alert.alert-info 
           strong Enter
           |  to confirm
-      canvas(width=924, height=590)
+      canvas(width=1920, height=1224)
     .modal-footer
       a.btn.btn-primary#done-button Done
   

app/templates/editor/level/thangs_tab.jade

@@ -17,7 +17,7 @@
 .world-container.thangs-column
   h3(data-i18n="editor.level_tab_thangs_conditions") Starting Conditions
   #canvas-wrapper
-    canvas(width=924, height=589)#surface
+    canvas(width=1920, height=1224)#surface
     #canvas-left-gradient.gradient
     #canvas-top-gradient.gradient
 

app/templates/play/level.jade

@@ -9,7 +9,7 @@
     #tome-view
   
   #canvas-wrapper
-    canvas(width=924, height=589)#surface
+    canvas(width=1920, height=1224)#surface
     #canvas-left-gradient.gradient
     #canvas-top-gradient.gradient
   

app/views/play/level/level_loading_view.coffee

@@ -20,15 +20,15 @@ module.exports = class LevelLoadingView extends View
     return
 
   unveil: ->
-    _.delay @reallyUnveil, 250
+    _.delay @reallyUnveil, 1000
 
   reallyUnveil: =>
     return if @destroyed
     loadingDetails = @$el.find('.loading-details')
     duration = parseFloat loadingDetails.css 'transition-duration'
     loadingDetails.css 'top', -loadingDetails.outerHeight(true)
-    @$el.find('.left-wing').css('left', '-50%')
-    @$el.find('.right-wing').css('right', '-50%')
+    @$el.find('.left-wing').css left: '-100%', backgroundPosition: 'right -400px top 0'
+    @$el.find('.right-wing').css right: '-100%', backgroundPosition: 'left -400px top 0'
     _.delay @onUnveilEnded, duration * 1000
 
   onUnveilEnded: =>