Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2025-02-17 14:38:30 +00:00
Code Issues Projects Releases Packages Wiki Activity

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.

Browse source
This commit is contained in:
Pete Baron 2016-07-22 00:00:33 +12:00
parent c36babcc1c
commit 7c2dae0773
3 changed files with 29 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/pixi/extras/Tilemap.js
View file

@ -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

29
src/pixi/renderers/webgl/shaders/TilemapShader.js
View file

@ -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;

3
src/tilemap/TilemapLayerGL.js
View file

@ -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