Skip to content

Commit dc035dd

Browse files
bitnenferbitnenfer
committed
Tilemap Rendering
1 parent d19d1f6 commit dc035dd

9 files changed

Lines changed: 175 additions & 23 deletions

File tree

‎v3/src/checksum.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
var CHECKSUM = {
2-
build: '71ee6280-4165-11e7-9e97-1b8919a78c4a'
2+
build: 'd6e1c770-470c-11e7-a023-cd5ccd3d9536'
33
};
44
module.exports = CHECKSUM;

‎v3/src/gameobjects/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ require('./renderpass/RenderPassFactory');
1616
require('./tilesprite/TileSpriteFactory');
1717
require('./mesh/MeshFactory');
1818
require('./quad/QuadFactory');
19+
require('./tilemap/static/StaticTilemapFactory');
1920

2021
// Phaser.GameObjects
2122

@@ -37,6 +38,6 @@ module.exports = {
3738
Zone: require('./zone/Zone'),
3839
EffectLayer: require('./effectlayer/EffectLayer'),
3940
Mesh: require('./mesh/Mesh'),
40-
Quad: require('./quad/Quad')
41-
41+
Quad: require('./quad/Quad'),
42+
StaticTilemap: require('./tilemap/static/StaticTilemap')
4243
};

‎v3/src/gameobjects/tilemap/static/StaticTilemap.js‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11

2-
var Class = require('../../utils/Class');
3-
var GameObject = require('../GameObject');
4-
var Components = require('../../components');
2+
var Class = require('../../../utils/Class');
3+
var GameObject = require('../../GameObject');
4+
var Components = require('../../../components');
55
var StaticTilemapRender = require('./StaticTilemapRender');
6+
var CONST = require('../../../renderer/webgl/renderers/tilemaprenderer/const');
67

7-
var TileSprite = new Class({
8+
var StaticTilemap = new Class({
89

910
Extends: GameObject,
1011

@@ -30,26 +31,29 @@ var TileSprite = new Class({
3031
GameObject.call(this, state, 'StaticTilemap');
3132

3233
this.vbo = null;
34+
this.gl = state.game.renderer.gl ? state.game.renderer.gl : null;
35+
this.tilemapRenderer = state.game.renderer.tilemapRenderer ? state.game.renderer.tilemapRenderer : null;
36+
this.resourceManager = this.gl ? state.game.renderer.resourceManager : null;
3337
this.bufferData = null;
3438
this.mapData = mapData;
3539
this.tileWidth = tileWidth;
3640
this.tileHeight = tileHeight;
3741
this.mapWidth = mapWidth;
3842
this.mapHeight = mapHeight;
3943
this.dirty = true;
44+
this.vertexCount = 0;
4045
this.setTexture(texture, frame);
4146
this.setPosition(x, y);
4247
this.setSizeToFrame();
4348
this.setOrigin();
44-
this.setSize(width, height);
45-
49+
this.setSize(tileWidth * mapWidth, tileHeight * mapHeight);
4650
},
4751

4852
upload: function ()
4953
{
50-
if (this.dirty)
54+
if (this.dirty && this.gl)
5155
{
52-
var gl;
56+
var gl = this.gl;
5357
var vbo = this.vbo;
5458
var mapWidth = this.mapWidth;
5559
var mapHeight = this.mapHeight;
@@ -58,13 +62,15 @@ var TileSprite = new Class({
5862
var bufferData = this.bufferData;
5963
var bufferF32, bufferU32;
6064
var voffset = 0;
65+
var vertexCount = 0;
6166

6267
if (this.vbo === null)
6368
{
64-
vbo = this.vbo = gl.createBuffer();
69+
vbo = this.resourceManager.createBuffer(gl.ARRAY_BUFFER, (4 * 6 * (mapWidth * mapHeight)) * 4, gl.STATIC_DRAW);
70+
vbo.addAttribute(this.tilemapRenderer.shader.getAttribLocation('a_position'), 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 0);
71+
vbo.addAttribute(this.tilemapRenderer.shader.getAttribLocation('a_tex_coord'), 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 8);
6572
bufferData = this.bufferData = new ArrayBuffer((4 * 6 * (mapWidth * mapHeight)) * 4);
66-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
67-
gl.bufferData(gl.ARRAY_BUFFER, bufferData, gl.STATIC_DRAW);
73+
this.vbo = vbo;
6874
}
6975

7076
bufferF32 = new Float32Array(bufferData);
@@ -115,11 +121,12 @@ var TileSprite = new Class({
115121
bufferF32[voffset + 1] = ty3;
116122
bufferF32[voffset + 2] = 1;
117123
bufferF32[voffset + 3] = 0;
124+
125+
vertexCount += 6;
118126
}
119127
}
120-
121-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
122-
gl.bufferSubData(gl.ARRAY_BUFFER, 0, bufferData);
128+
this.vertexCount = vertexCount;
129+
vbo.updateResource(bufferData, 0);
123130

124131
this.dirty = false;
125132
}

‎v3/src/gameobjects/tilemap/static/StaticTilemapFactory.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11

22
var StaticTilemap = require('./StaticTilemap');
3-
var FactoryContainer = require('../../gameobjects/FactoryContainer');
3+
var FactoryContainer = require('../../../gameobjects/FactoryContainer');
44

55
var StaticTilemapFactory = {
66

77
KEY: 'staticTilemap',
88

9-
add: function (mapData, x, y, width, height, key, frame)
9+
add: function (mapData, x, y, tileWidth, tileHeight, mapWidth, mapHeight, texture, frame)
1010
{
11-
return this.children.add(new StaticTilemap(this.state, mapData, x, y, width, height, key, frame));
11+
return this.children.add(new StaticTilemap(this.state, mapData, x, y, tileWidth, tileHeight, mapWidth, mapHeight, texture, frame));
1212
},
1313

14-
make: function (mapData, x, y, width, height, key, frame)
14+
make: function (mapData, x, y, tileWidth, tileHeight, mapWidth, mapHeight, texture, frame)
1515
{
16-
return new StaticTilemap(this.state, mapData, x, y, width, height, key, frame);
16+
return new StaticTilemap(this.state, mapData, x, y, tileWidth, tileHeight, mapWidth, mapHeight, texture, frame);
1717
}
1818

1919
};

‎v3/src/gameobjects/tilemap/static/StaticTilemapRender.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
22

33
renderCanvas: require('./StaticTilemapCanvasRenderer'),
4-
renderWebGL: require('./StaticTilemapTextWebGLRenderer')
4+
renderWebGL: require('./StaticTilemapWebGLRenderer')
55

66
};

‎v3/src/gameobjects/tilemap/static/StaticTilemapWebGLRenderer.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,15 @@ var StaticTilemapWebGLRenderer = function (renderer, src, interpolationPercentag
44
{
55
return;
66
}
7+
8+
var gameObject = src;
9+
var frame = gameObject.frame;
10+
var gl = gameObject.gl;
11+
12+
renderer.setRenderer(gameObject.tilemapRenderer, frame.texture.source[frame.sourceIndex].glTexture, gameObject.renderTarget);
13+
gameObject.upload();
14+
gameObject.vbo.bind();
15+
gl.drawArrays(gl.TRIANGLES, 0, gameObject.vertexCount);
716
};
817

918
module.exports = StaticTilemapWebGLRenderer;

‎v3/src/renderer/webgl/WebGLRenderer.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ var SpriteBatch = require('./renderers/spritebatch/SpriteBatch');
1212
var TileBatch = require('./renderers/tilebatch/TileBatch');
1313
var ShapeBatch = require('./renderers/shapebatch/ShapeBatch');
1414
var EffectRenderer = require('./renderers/effectrenderer/EffectRenderer');
15+
var TilemapRenderer = require('./renderers/tilemaprenderer/TilemapRenderer');
1516
var BlendModes = require('../BlendModes');
1617
var ScaleModes = require('../ScaleModes');
1718
var ResourceManager = require('./ResourceManager');
@@ -115,6 +116,7 @@ WebGLRenderer.prototype = {
115116
this.shapeBatch = this.addRenderer(new ShapeBatch(this.game, gl, this));
116117
this.effectRenderer = this.addRenderer(new EffectRenderer(this.game, gl, this));
117118
this.tileBatch = this.addRenderer(new TileBatch(this.game, gl, this));
119+
this.tilemapRenderer = this.addRenderer(new TilemapRenderer(this.game, gl, this));
118120
this.currentRenderer = this.spriteBatch;
119121
this.setBlendMode(0);
120122
this.resize(this.width, this.height);

‎v3/src/renderer/webgl/renderers/tilemaprenderer/TilemapRenderer.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
var DataBuffer32 = require('../../utils/DataBuffer32');
2+
var DataBuffer16 = require('../../utils/DataBuffer16');
3+
var TilemapShader = require('../../shaders/TilemapShader');
4+
5+
var PHASER_CONST = require('../../../../const');
6+
var CONST = require('./const');
7+
8+
var TilemapRenderer = function (game, gl, manager)
9+
{
10+
this.game = game;
11+
this.type = PHASER_CONST.WEBGL;
12+
this.view = game.canvas;
13+
this.resolution = game.config.resolution;
14+
this.width = game.config.width * game.config.resolution;
15+
this.height = game.config.height * game.config.resolution;
16+
this.glContext = gl;
17+
this.shader = null;
18+
this.viewMatrixLocation = null;
19+
20+
// All of these settings will be able to be controlled via the Game Config
21+
this.config = {
22+
clearBeforeRender: true,
23+
transparent: false,
24+
autoResize: false,
25+
preserveDrawingBuffer: false,
26+
27+
WebGLContextOptions: {
28+
alpha: true,
29+
antialias: true,
30+
premultipliedAlpha: true,
31+
stencil: true,
32+
preserveDrawingBuffer: false
33+
}
34+
};
35+
36+
this.manager = manager;
37+
this.dirty = false;
38+
39+
this.init(this.glContext);
40+
};
41+
42+
TilemapRenderer.prototype.constructor = TilemapRenderer;
43+
44+
TilemapRenderer.prototype = {
45+
46+
init: function (gl)
47+
{
48+
var shader = this.manager.resourceManager.createShader('TilemapShader', TilemapShader);
49+
var viewMatrixLocation = shader.getUniformLocation('u_view_matrix');
50+
var scrollLocation = shader.getUniformLocation('u_scroll');
51+
52+
this.shader = shader;
53+
this.viewMatrixLocation = viewMatrixLocation;
54+
this.scrollLocation = scrollLocation;
55+
56+
this.resize(this.width, this.height, this.game.config.resolution);
57+
},
58+
59+
shouldFlush: function ()
60+
{
61+
return false;
62+
},
63+
64+
isFull: function ()
65+
{
66+
return false;
67+
},
68+
69+
add: function (x, y, width, height, red, green, blue, alpha)
70+
{
71+
72+
},
73+
74+
bind: function (shader)
75+
{
76+
if (shader === undefined)
77+
{
78+
this.shader.bind();
79+
}
80+
else
81+
{
82+
shader.bind();
83+
this.resize(this.width, this.height, this.game.config.resolution, shader);
84+
}
85+
},
86+
87+
flush: function (shader)
88+
{
89+
},
90+
91+
resize: function (width, height, resolution, shader)
92+
{
93+
var gl = this.glContext;
94+
var activeShader = shader !== undefined ? shader : this.shader;
95+
96+
this.width = width * resolution;
97+
this.height = height * resolution;
98+
99+
activeShader.setConstantMatrix4x4(
100+
this.viewMatrixLocation,
101+
new Float32Array([
102+
2 / this.width, 0, 0, 0,
103+
0, -2 / this.height, 0, 0,
104+
0, 0, 1, 1,
105+
-1, 1, 0, 0
106+
])
107+
);
108+
},
109+
110+
destroy: function ()
111+
{
112+
this.manager.resourceManager.deleteShader(this.shader);
113+
114+
this.shader = null;
115+
}
116+
};
117+
118+
module.exports = TilemapRenderer;

‎v3/src/renderer/webgl/renderers/tilemaprenderer/const.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
var CONST = {
2+
3+
// VERTEX_SIZE = sizeof(vec2) + sizeof(vec2)
4+
VERTEX_SIZE: 16,
5+
INDEX_SIZE: 2,
6+
TILEMAP_VERTEX_COUNT: 4,
7+
TILEMAP_INDEX_COUNT: 6,
8+
9+
// How many 32-bit components does the vertex have.
10+
TILEMAP_VERTEX_COMPONENT_COUNT: 4,
11+
MAX_TILEMAP: 2000,
12+
13+
};
14+
15+
module.exports = CONST;

0 commit comments

Comments
 (0)