Skip to content

Commit d982003

Browse files
photonstormphotonstorm
committed
Lots more tidying up and adding jsdocs.
1 parent ca6985e commit d982003

3 files changed

Lines changed: 145 additions & 131 deletions

File tree

‎src/pixi/extras/Tilemap.js‎

Lines changed: 108 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,18 @@
66
*/
77

88
/**
9-
* Tilemap - constructor
10-
*
11-
* @param {Array} layer - layer data from the map, arranged in mapheight lists of mapwidth Phaser.Tile objects (2d array)
12-
*
13-
*/
14-
PIXI.Tilemap = function(texture, mapwidth, mapheight, tilewidth, tileheight, layer) {
9+
* A PIXI WebGL Tilemap.
10+
*
11+
* @class PIXI.Tilemap
12+
* @extends {DisplayObjectContainer}
13+
* @param {PIXI.Texture} texture - The tilemap texture.
14+
* @param {integer} mapwidth - The width of the map.
15+
* @param {integer} mapheight - The height of the map.
16+
* @param {integer} tilewidth 0- The width of a single tile.
17+
* @param {integer} tileheight - The height of a single tile.
18+
* @param {Array} layer - Tilemap layer data from the map, arranged in mapheight lists of mapwidth Phaser.Tile objects (2d array).
19+
*/
20+
PIXI.Tilemap = function (texture, mapwidth, mapheight, tilewidth, tileheight, layer) {
1521

1622
PIXI.DisplayObjectContainer.call(this);
1723

@@ -134,115 +140,119 @@ PIXI.Tilemap.prototype._initWebGL = function (renderSession) {
134140

135141
PIXI.Tilemap.prototype._renderBatch = function (renderSession) {
136142

137-
if (this.glBatch)
143+
if (!this.glBatch)
138144
{
139-
var gl = renderSession.gl;
145+
return;
146+
}
140147

141-
// TODO: should probably use destination buffer dimensions (halved)
142-
var screenWide2 = this.game.width * 0.5;
143-
var screenHigh2 = this.game.height * 0.5;
148+
var gl = renderSession.gl;
144149

145-
// size of one pixel in the source texture
146-
var iTextureWide = 1.0 / this.texture.width;
147-
var iTextureHigh = 1.0 / this.texture.height;
150+
// TODO: should probably use destination buffer dimensions (halved)
151+
var screenWide2 = this.game.width * 0.5;
152+
var screenHigh2 = this.game.height * 0.5;
148153

149-
// size of one tile in the source texture
150-
var srcWide = this.tileWide * iTextureWide;
151-
var srcHigh = this.tileHigh * iTextureHigh;
154+
// size of one pixel in the source texture
155+
var iTextureWide = 1.0 / this.texture.width;
156+
var iTextureHigh = 1.0 / this.texture.height;
152157

153-
// pre-calculate inverse half-buffer dimensions
154-
var iWide = 1.0 / screenWide2;
155-
var iHigh = 1.0 / screenHigh2;
158+
// size of one tile in the source texture
159+
var srcWide = this.tileWide * iTextureWide;
160+
var srcHigh = this.tileHigh * iTextureHigh;
156161

157-
var wide = this.tileWide * 0.5 / screenWide2;
158-
var high = this.tileHigh * 0.5 / screenHigh2;
162+
// pre-calculate inverse half-buffer dimensions
163+
var iWide = 1.0 / screenWide2;
164+
var iHigh = 1.0 / screenHigh2;
159165

160-
var buffer = this.buffer;
161-
var oldR, oldT, uvl, uvt;
166+
var wide = this.tileWide * 0.5 / screenWide2;
167+
var high = this.tileHigh * 0.5 / screenHigh2;
162168

163-
// process entire glBatch into a single webGl draw buffer for a TRIANGLE_STRIP blit
164-
var c = 0;
165-
var degenerate = false;
169+
var buffer = this.buffer;
170+
var oldR, oldT, uvl, uvt;
166171

167-
for (var i = 0, l = this.glBatch.length; i < l; i++)
172+
// process entire glBatch into a single webGl draw buffer for a TRIANGLE_STRIP blit
173+
var c = 0;
174+
var degenerate = false;
175+
176+
for (var i = 0, l = this.glBatch.length; i < l; i++)
177+
{
178+
// sx: this.drawCoords[coordIndex],
179+
// sy: this.drawCoords[coordIndex + 1],
180+
// sw: this.tileWidth,
181+
// sh: this.tileHeight,
182+
// dx: x,
183+
// dy: y,
184+
// dw: this.tileWidth,
185+
// dh: this.tileHeight
186+
187+
var t = this.glBatch[i];
188+
189+
if (!t)
168190
{
169-
// sx: this.drawCoords[coordIndex],
170-
// sy: this.drawCoords[coordIndex + 1],
171-
// sw: this.tileWidth,
172-
// sh: this.tileHeight,
173-
// dx: x,
174-
// dy: y,
175-
// dw: this.tileWidth,
176-
// dh: this.tileHeight
177-
178-
var t = this.glBatch[i];
179-
180-
if (!t)
181-
{
182-
// insert a degenerate triangle when null is found in the list of batch objects
183-
degenerate = true;
184-
185-
// skip to end of loop, degenerate will be inserted when no more null objects are found
186-
continue;
187-
}
188-
189-
var x = t.dx * iWide - 1;
190-
var y = 1 - t.dy * iHigh;
191-
192-
var lft = x - wide;
193-
var bot = y + high;
194-
195-
var uvl = t.sx * iTextureWide;
196-
var uvt = t.sy * iTextureHigh;
197-
198-
// insert a degenerate triangle to separate the tiles
199-
if (degenerate)
200-
{
201-
// add a degenerate triangle: repeat the last vertex
202-
buffer[ c ] = oldR;
203-
buffer[ c + 1 ] = oldT;
204-
// then repeat the next vertex
205-
buffer[ c + 4 ] = lft;
206-
buffer[ c + 5 ] = bot;
207-
// pad with texture coordinates (probably not needed)
208-
buffer[ c + 2 ] = buffer[ c + 6 ] = uvl;
209-
buffer[ c + 3 ] = buffer[ c + 7 ] = uvt;
210-
211-
// advance the buffer index for one single degenerate triangle
212-
c += 8;
213-
degenerate = false;
214-
}
215-
216-
// calculate the destination location of the tile in screen units (-1..1)
217-
buffer[ c ] = buffer[ c + 4 ] = lft;
218-
buffer[ c + 1 ] = buffer[ c + 9 ] = bot;
219-
buffer[ c + 8 ] = buffer[ c + 12] = oldR = x + wide;
220-
buffer[ c + 5 ] = buffer[ c + 13] = oldT = y - high;
221-
222-
// calculate the uv coordinates of the tile source image
223-
buffer[ c + 2 ] = buffer[ c + 6 ] = uvl;
224-
buffer[ c + 3 ] = buffer[ c + 11] = uvt;
225-
buffer[ c + 10] = buffer[ c + 14] = uvl + srcWide;
226-
buffer[ c + 7 ] = buffer[ c + 15] = uvt + srcHigh;
227-
228-
// advance the buffer index
229-
c += 16;
191+
// insert a degenerate triangle when null is found in the list of batch objects
192+
degenerate = true;
193+
194+
// skip to end of loop, degenerate will be inserted when no more null objects are found
195+
continue;
230196
}
231197

232-
// if there's anything to draw...
233-
if (c > 0)
198+
var x = t.dx * iWide - 1;
199+
var y = 1 - t.dy * iHigh;
200+
201+
var lft = x - wide;
202+
var bot = y + high;
203+
204+
var uvl = t.sx * iTextureWide;
205+
var uvt = t.sy * iTextureHigh;
206+
207+
// insert a degenerate triangle to separate the tiles
208+
if (degenerate)
234209
{
235-
var shader = renderSession.shaderManager.tilemapShader;
210+
// add a degenerate triangle: repeat the last vertex
211+
buffer[ c ] = oldR;
212+
buffer[ c + 1 ] = oldT;
236213

237-
// upload the VBO
238-
gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW);
214+
// then repeat the next vertex
215+
buffer[ c + 4 ] = lft;
216+
buffer[ c + 5 ] = bot;
239217

240-
// prepare the shader attributes
241-
gl.vertexAttribPointer(shader.aPosition, 4, gl.FLOAT, false, 0, 0);
218+
// pad with texture coordinates (probably not needed)
219+
buffer[ c + 2 ] = buffer[ c + 6 ] = uvl;
220+
buffer[ c + 3 ] = buffer[ c + 7 ] = uvt;
242221

243-
// draw the entire VBO in one call
244-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, Math.floor(c / 4));
222+
// advance the buffer index for one single degenerate triangle
223+
c += 8;
224+
degenerate = false;
245225
}
226+
227+
// calculate the destination location of the tile in screen units (-1..1)
228+
buffer[ c ] = buffer[ c + 4 ] = lft;
229+
buffer[ c + 1 ] = buffer[ c + 9 ] = bot;
230+
buffer[ c + 8 ] = buffer[ c + 12] = oldR = x + wide;
231+
buffer[ c + 5 ] = buffer[ c + 13] = oldT = y - high;
232+
233+
// calculate the uv coordinates of the tile source image
234+
buffer[ c + 2 ] = buffer[ c + 6 ] = uvl;
235+
buffer[ c + 3 ] = buffer[ c + 11] = uvt;
236+
buffer[ c + 10] = buffer[ c + 14] = uvl + srcWide;
237+
buffer[ c + 7 ] = buffer[ c + 15] = uvt + srcHigh;
238+
239+
// advance the buffer index
240+
c += 16;
241+
}
242+
243+
// if there's anything to draw...
244+
if (c > 0)
245+
{
246+
var shader = renderSession.shaderManager.tilemapShader;
247+
248+
// upload the VBO
249+
gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW);
250+
251+
// prepare the shader attributes
252+
gl.vertexAttribPointer(shader.aPosition, 4, gl.FLOAT, false, 0, 0);
253+
254+
// draw the entire VBO in one call
255+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, Math.floor(c / 4));
246256
}
247257

248258
};

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

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -46,27 +46,27 @@ PIXI.TilemapShader = function (gl) {
4646
this.program = null;
4747

4848
this.fragmentSrc = [
49-
" precision lowp float;",
50-
" uniform sampler2D uImageSampler;",
51-
" uniform float uAlpha;",
52-
" varying vec2 vTexCoord;",
53-
" void main(void) {",
54-
" gl_FragColor = texture2D(uImageSampler, vTexCoord) * uAlpha;",
55-
" }"
56-
];
49+
'precision lowp float;',
50+
'uniform sampler2D uImageSampler;',
51+
'uniform float uAlpha;',
52+
'varying vec2 vTexCoord;',
53+
'void main(void) {',
54+
' gl_FragColor = texture2D(uImageSampler, vTexCoord) * uAlpha;',
55+
'}'
56+
];
5757

5858
this.vertexSrc = [
59-
" precision lowp float;",
60-
" uniform vec2 uCentreOffset;",
61-
" uniform vec2 uScale;",
62-
" attribute vec4 aPosition;",
63-
" varying vec2 vTexCoord;",
64-
" void main(void) {",
65-
" gl_Position.zw = vec2(1, 1);",
66-
" gl_Position.xy = (aPosition.xy + uCentreOffset) * uScale - uCentreOffset;",
67-
" vTexCoord = aPosition.zw;",
68-
" }"
69-
];
59+
'precision lowp float;',
60+
'uniform vec2 uCentreOffset;',
61+
'uniform vec2 uScale;',
62+
'attribute vec4 aPosition;',
63+
'varying vec2 vTexCoord;',
64+
'void main(void) {',
65+
' gl_Position.zw = vec2(1, 1);',
66+
' gl_Position.xy = (aPosition.xy + uCentreOffset) * uScale - uCentreOffset;',
67+
' vTexCoord = aPosition.zw;',
68+
'}'
69+
];
7070

7171
/**
7272
* A local texture counter for multi-texture shaders.
@@ -76,6 +76,7 @@ PIXI.TilemapShader = function (gl) {
7676
this.textureCount = 0;
7777

7878
this.init();
79+
7980
};
8081

8182
PIXI.TilemapShader.prototype.constructor = PIXI.TilemapShader;

‎src/tilemap/Tileset.js‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -154,11 +154,11 @@ Phaser.Tileset.prototype = {
154154
},
155155

156156
/**
157-
* Draws a tile from this Tileset at the given coordinates using a WebGl renderer.
157+
* Draws a tile from this Tileset at the given coordinates using a WebGL renderer.
158158
*
159159
* @method Phaser.Tileset#drawGl
160160
* @public
161-
* @param out {Array} glBatch - A list of webgl batch objects to draw later.
161+
* @param {Array} glBatch - A list of WebGL batch objects to draw later.
162162
* @param {number} x - The x coordinate to draw to.
163163
* @param {number} y - The y coordinate to draw to.
164164
* @param {integer} index - The index of the tile within the set to draw.
@@ -171,10 +171,10 @@ Phaser.Tileset.prototype = {
171171

172172
if (coordIndex >= 0 && (coordIndex + 1) < this.drawCoords.length)
173173
{
174-
// add the tile to the webgl batch
174+
// add the tile to the WebGL batch
175175
// source and destination coordinates, in pixel units
176-
// destination is the centre of the tile
177-
glBatch.push( {
176+
// destination is the center of the tile
177+
glBatch.push({
178178
sx: this.drawCoords[coordIndex],
179179
sy: this.drawCoords[coordIndex + 1],
180180
sw: this.tileWidth,
@@ -184,23 +184,26 @@ Phaser.Tileset.prototype = {
184184
dw: this.tileWidth,
185185
dh: this.tileHeight,
186186
alpha: alpha
187-
} );
187+
});
188188
}
189189

190190
},
191191

192192
/**
193-
* adds a marker for the WebGl batch display to insert a degenerate triangle (eg. at the end of each row of tiles)
194-
*
195-
* @param {[type]} glBatch [description]
196-
*/
197-
addDegenerate: function( glBatch )
198-
{
193+
* Adds a marker for the WebGl batch display to insert a degenerate triangle (eg. at the end of each row of tiles)
194+
*
195+
* @method Phaser.Tileset#addDegenerate
196+
* @public
197+
* @param {[type]} glBatch [description]
198+
*/
199+
addDegenerate: function (glBatch) {
200+
199201
// don't insert multiple degenerate markers in a row
200-
if ( glBatch[ glBatch.length - 1] )
202+
if (glBatch[glBatch.length - 1])
201203
{
202-
glBatch.push( null );
204+
glBatch.push(null);
203205
}
206+
204207
},
205208

206209
/**

0 commit comments

Comments
 (0)