-
Notifications
You must be signed in to change notification settings - Fork 1
/
Renderable2DGrid.js
135 lines (116 loc) · 5.22 KB
/
Renderable2DGrid.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import Renderable from './Renderable';
import Matrix3 from '../render/WebGL/Matrix3';
import ProgramManager from '../manager/ProgramManager';
import TextureManager from '../manager/TextureManager';
import RenderManager from '../manager/RenderManager';
import Renderable2DMultitex from './Renderable2DMultitex';
/**
* Renderable2DGrid is a renderable component which uses two textures to draw
* tilemaps using the GPU, and just one renderable. Renderable2DGrid will expect one
* texture for sprites, and another containing the data for which tile goes where.
* Additionaly, viewport support is added to make large maps require one time loads into self
* managed data textures.
*/
export default class Renderable2DGrid extends Renderable2DMultitex {
/**
* Constructor for Renderable2D grid. Sets up data and initializes a data texture.
*
* @param {string} mapTilesTextureName Name of sprite sheet texture.
* @param {Array} gridData Array of indexes for each tile on the map.
* @param {number} width Width of the map.
* @param {number} height Height of the map.
* @param {number} tileViewWidth Width of the viewport.
* @param {number} tileViewHeight Height of the viewport.
*/
constructor(mapTilesTextureName, gridData, width, height, tileViewWidth, tileViewHeight) {
super(ProgramManager.getProgram('2DGrid'));
this.className = 'Renderable2DGrid';
/*
[0][0] = 0 = Map data tiles width.
[0][1] = 1 = Map data tiles height.
[0][2] = 2 = Map tiles in the texture width.
[0][3] = 3 = Map tiles in the texture height.
[1][0] = 4 = Map viewport width.
[1][1] = 5 = Map viewport height.
[1][2] = 6 = Map viewport x1.
[1][3] = 7 = Map viewport y1.
[2][0] = 8 = TileSize width normalized.
[2][1] = 9 = TileSize height normalized.
*/
this.shaderTileData = [];
this.mapTilesTexture = TextureManager.getTexture(mapTilesTextureName);
this.addTexture(this.mapTilesTexture);
this.mapTilesDataTextureName = mapTilesTextureName + 'Data';
this.setGridData(gridData, width, height, tileViewWidth, tileViewHeight);
}
/**
* Updates the data texture by quadrant. Quadrant is specified by the x1, y1,
* width, and height parameters.
*
* @param {Array} data Array of values indicating the index of each sprite.
* @param {number} x1 Top left x position to update.
* @param {number} y1 Top left y position to update.
* @param {number} width Width (in tiles) of data to update.
* @param {number} height Height (in tiles) of data to update.
*/
updateGridData(data, x1, y1, width, height) {
let dataArray = new Uint16Array(data);
TextureManager.updateDataTexture(this.mapTilesDataTextureName, dataArray, x1, y1, width, height);
}
setGridData(data, width, height, tileViewWidth, tileViewHeight) {
let dataArray = new Uint16Array(data);
let texture = TextureManager.addDataTexture(this.mapTilesDataTextureName, dataArray, RenderManager.GL.R16UI, RenderManager.GL.RED_INTEGER, RenderManager.GL.UNSIGNED_SHORT, -1, -1, width, height);
this.addTexture(texture);
/*
[0][0] = 0 = Map data tiles width.
[0][1] = 1 = Map data tiles height.
[0][2] = 2 = Map tiles in the texture width.
[0][3] = 3 = Map tiles in the texture height.
[1][0] = 4 = Map viewport width.
[1][1] = 5 = Map viewport height.
[1][2] = 6 = Map viewport x1.
[1][3] = 7 = Map viewport y1.
[2][0] = 8 = TileSize width normalized.
[2][1] = 9 = TileSize height normalized.
*/
this.shaderTileData = [
width, height, this.mapTilesTexture.framesWidth, this.mapTilesTexture.framesHeight,
tileViewWidth, tileViewHeight, 0, 0,
1 / this.mapTilesTexture.framesWidth, 1 / this.mapTilesTexture.framesHeight, 1, 1,
1, 1, 1, 1
];
}
/**
* Sets the viewport of the map grid to x1, y1, width, height (in tiles).
*
* @param {number} viewportX1 Top left x position of the viewport.
* @param {number} viewportY1 Top left y position of the viewport.
* @param {number} viewportWidth Width of the viewport
* @param {number} viewportHeight
*/
buildShaderTileData(viewportX1, viewportY1, viewportWidth, viewportHeight) {
this.shaderTileData[4] = viewportWidth;
this.shaderTileData[5] = viewportHeight;
this.shaderTileData[6] = viewportX1;
this.shaderTileData[7] = viewportY1;
}
/**
* Updates the uniforms of this renderable. Requires a position matrix for
* perspective calculations by the RendererManager.
*
* @param {Matrix3} positionMatrix Position matrix of this renderable.
*/
setUniformData(positionMatrix) {
if (this.textures.length < 2)
return false;
this.program.setUniforms({
'u_color': this.color.color,
'u_matrix': positionMatrix,
'u_depth': this.depth,
'u_tileData': this.shaderTileData,
'u_texture': this.textures[0].id,
'u_mapDataTexture': this.textures[1].id,
});
return true;
}
}