Fixes Viewport scrolling for levels smaller than the viewport.

diff --git a/data/types/levels.yaml b/data/types/levels.yaml
index 8fda80c..df4be67 100644 (file)
--- a/data/types/levels.yaml
+++ b/data/types/levels.yaml
@@ -13,6 +13,69 @@ types:
     test:
         name: Da Test
         desc: A test level.
+        levelSize: 2000 500
+        bounds:
+          - [-50,-50, 2100,50]
+          - [-50,0, 50,500]
+          - [2001,0, 50,500]
+          - [-50,501, 2100,50]
+        walls:
+          - type: wall
+            args: [300,50, 50,200] # [x,y, w,h]
+          - type: wall
+            args: [300,350, 50,100]
+          - type: wall
+            args: [100,100, 50,50]
+         
+          - type: fence
+            args: [360,210, 30,30]
+          - type: rock
+            args: [400,200, 25,25]
+          - type: rock
+            args: [425,225, 25,25]
+          - type: fence
+            args: [460,210, 30,30]
+         
+          - type: fence
+            args: [10,210, 30,30]
+          - type: fence
+            args: [110,210, 30,30]
+          - type: fence
+            args: [210,210, 30,30]
+         
+          - type: rock
+            args: [50,350, 50,50]
+          - type: rock
+            args: [100,350, 50,50]
+          - type: rock
+            args: [50,400, 50,50]
+          - type: rock
+            args: [100,400, 50,50]
+          - type: rock
+            args: [150,300, 50,50]
+        
+        units:
+          - type: player
+            align: 1
+            loc: [375,475]
+          - type: green
+            align: 2
+            loc: [75,25]
+          - type: green
+            align: 2
+            loc: [175,25]
+          # - type: green
+          #   align: 2
+          #   loc: [425,125]
+        items:
+          # - type: rockets
+          #   loc: [325,275]
+          - type: nitro
+            loc: [325,25]
+    
+    small_test:
+        name: Da Small Test
+        desc: A test level.
         levelSize: 500 500
         bounds:
           - [-50,-50, 600,50]

diff --git a/src/tanks/game.cjs b/src/tanks/game.cjs
index da01c55..72ec8b9 100644 (file)
--- a/src/tanks/game.cjs
+++ b/src/tanks/game.cjs
@@ -82,7 +82,7 @@ evt.subclass('Game', {
         this.on('tick',     this.tick);
         
         this.level.setup(tanks.data);
-        this.viewport.centerOn();
+        this.viewport.centerOn( this.player.loc );
         
         this.emit('ready', this);
     },
@@ -128,6 +128,7 @@ evt.subclass('Game', {
         this.animations = this.animations.filter(this.tickAnimations, this);
         
         this.draw();
+        this.viewport.centerOn( this.player.loc );
         
         if ( this.gameover )
             return;

diff --git a/src/tanks/ui/viewport.cjs b/src/tanks/ui/viewport.cjs
index e582d55..0399eff 100644 (file)
--- a/src/tanks/ui/viewport.cjs
+++ b/src/tanks/ui/viewport.cjs
@@ -2,9 +2,11 @@ var Y = require('Y').Y
 ,   Vec       = require('ezl/math/vec').Vec
 ,   HtmlLayer = require('ezl/layer/html').HtmlLayer
 
-,   PAD_X = 1024, PAD_Y = 690
+,   clamp = require('ezl/math').clamp
 ,   min = Y(Math.min).limit(2)
 ,   max = Y(Math.max).limit(2)
+
+,   PAD_X = 1024, PAD_Y = 690
 ,
 
 Viewport =
@@ -13,7 +15,8 @@ HtmlLayer.subclass('Viewport', {
     _layerId : 'viewport',
     
     spacer : null, // inner layer to induce scrolling so we can arbitrarily center the elements
-    
+    maxBleedX : 10, // Maximum amount of empty space to show to the left/right of content. (Tip: set to Infinity to disable)
+    maxBleedY : 10, // Maximum amount of empty space to show to the top/bottom of content. (Tip: set to Infinity to disable)
     
     
     init : function initViewport(props, attrs, html){
@@ -35,14 +38,26 @@ HtmlLayer.subclass('Viewport', {
      * @return {Vec} Current scroll position (left, top).
      */
     scroll : function scroll(x,y){
-        var el = this.layer;
+        var el = this.layer
+        ,   bx = this.maxBleedX,    by = this.maxBleedY
+        ,   cw = this.contentWidth, ch = this.contentHeight
+        ,   w = el.width(), h = el.height()
+        ,   minX =  -bx, minY =  -by
+        ,   maxX = w+bx, maxY = h+by
+        ;
         if (arguments.length === 0)
             return new Vec(el.scrollLeft()-PAD_X, el.scrollTop()-PAD_Y);
         
         if (x instanceof Array) { y=x[1]; x=x[0]; }
         
-        if (x !== undefined) el.scrollLeft( x + PAD_X );
-        if (y !== undefined) el.scrollTop(  y + PAD_Y );
+        if (x !== undefined) {
+            var v = (cw < w  ? (cw-w)/2 : clamp(x, minX, maxX));
+            el.scrollLeft( PAD_X + v );
+        }
+        if (y !== undefined) {
+            var v = (ch < h ? (ch-h)/2 : clamp(y, minY, maxY));
+            el.scrollTop(  PAD_Y + v );
+        }
         
         return this;
     },
@@ -56,6 +71,7 @@ HtmlLayer.subclass('Viewport', {
      * @return {this}
      */
     centerOn : function centerOn(x,y){
+        if (x instanceof Array) { y=x[1]; x=x[0]; }
         if (x === undefined) x = this.contentWidth/2;
         if (y === undefined) y = this.contentHeight/2;
         var el = this.layer