Add offset parameter to TilemapLayerGL and use it with clipping to draw a view into a map at a specified location and size in the game window.

Author: pjbaron

src/pixi/extras/Tilemap.js

@@ -350,7 +350,9 @@ PIXI.Tilemap.prototype._renderWholeTilemap = function (renderSession) {
     // set the global offset (e.g. screen shake)
     gl.uniform2f(shader.uOffset, renderSession.offset.x / this.game.width * 2, -renderSession.offset.y / this.game.height * 2);
 
-    // set the clippling limits
+    // set the clipping limits
+    gl.uniform2f(shader.uClipOffset, this.offset.x / this.game.width * 2, this.offset.y / this.game.height * 2);
+    gl.uniform2f(shader.uClipLoc, this.offset.x, this.offset.y);
     gl.uniform2f(shader.uClipping, this.displayWidth, this.game.height - this.displayHeight);
 
     // set the offset in screen units to the center of the screen

src/pixi/renderers/webgl/shaders/TilemapShader.js

@@ -50,10 +50,11 @@ PIXI.TilemapShader = function (gl) {
         'precision lowp float;',
         'uniform sampler2D uImageSampler;',
         'uniform float uAlpha;',
-        'uniform vec2 uClipping;',
+        'uniform vec2 uClipLoc;',
+        'uniform vec2 uClipLimit;',
         'varying vec2 vTexCoord;',
         'void main(void) {',
-        '  if ( gl_FragCoord.x < uClipping.x && gl_FragCoord.y > uClipping.y)',
+        '  if ( gl_FragCoord.x >= uClipLoc.x && gl_FragCoord.y >= uClipLoc.y && gl_FragCoord.x < uClipLimit.x && gl_FragCoord.y > uClipLimit.y )',
         '    gl_FragColor = texture2D(uImageSampler, vTexCoord) * uAlpha;',
         '}'
     ];
@@ -63,11 +64,12 @@ PIXI.TilemapShader = function (gl) {
         'uniform vec2 uOffset;',
         'uniform vec2 uCentreOffset;',
         'uniform vec2 uScale;',
+        'uniform vec2 uClipOffset;',
         'attribute vec4 aPosition;',
         'varying vec2 vTexCoord;',
         'void main(void) {',
         '  gl_Position.zw = vec2(1, 1);',
-        '  gl_Position.xy = (aPosition.xy + uOffset + uCentreOffset) * uScale - uCentreOffset;',
+        '  gl_Position.xy = (aPosition.xy + uClipOffset + uOffset + uCentreOffset) * uScale - uCentreOffset;',
         '  vTexCoord = aPosition.zw;',
         '}'
     ];
@@ -100,14 +102,29 @@ PIXI.TilemapShader.prototype.init = function () {
     // get and store the attributes
     this.aPosition = gl.getAttribLocation(program, 'aPosition');
     this.uSampler = gl.getUniformLocation(program, 'uImageSampler');
-    this.uClipping = gl.getUniformLocation(program, 'uClipping');
+
+    // clipping uniforms...
+
+    // clipping start location (pixels)
+    this.uClipLoc = gl.getUniformLocation(program, 'uClipLoc');
+    // clipping width/height (pixels)
+    this.uClipLimit = gl.getUniformLocation(program, 'uClipLimit');
+    // clipping start location in webGl coordinates (-1...+1)
+    this.uClipOffset = gl.getUniformLocation(program, 'uClipOffset');
+
+    // offset for screen shake effect etc
     this.uOffset = gl.getUniformLocation(program, 'uOffset');
+
+    // centre of a tile for offset before scaling (so tiles scale from the centre out)
     this.uCentreOffset = gl.getUniformLocation(program, 'uCentreOffset');
-    this.uAlpha = gl.getUniformLocation(program, 'uAlpha');
+    // scale factor for tiles
     this.uScale = gl.getUniformLocation(program, 'uScale');
 
+    // alpha blending
+    this.uAlpha = gl.getUniformLocation(program, 'uAlpha');
+
     this.attributes = [this.aPosition];
-    this.uniforms = [this.uClipping, this.uOffset, this.uCentreOffset, this.uAlpha, this.uScale, this.uSampler];
+    this.uniforms = [this.uClipOffset, this.uClipLoc, this.uClipLimit, this.uOffset, this.uCentreOffset, this.uAlpha, this.uScale, this.uSampler];
 
     this.program = program;
 

src/tilemap/TilemapLayerGL.js

@@ -28,6 +28,9 @@ Phaser.TilemapLayerGL = function (game, tilemap, index, width, height) {
 
     this.game = game;
 
+
+    this.offset = new Phaser.Point();
+    
     /**
     * The Tilemap to which this layer is bound.
     * @property {Phaser.Tilemap} map