无限tilemap实现基于ccc
源码版本是2.09r5
我这边 主要是实际需要 实现 先 cok一样的无限大地图, 方法很简单
comp.testArray – (这个是我自己项目需要的一个列表 里面 放了 我需要显示的tile节点)
关键在于边界的处理 比如你的地图是 30x30 那么 超过 30或者 低于 0 怎么显示 很简单,比如 (0,31)就是把(0,0)移动到0,31的位置就行了,所以我们地图设计 师需要 收尾可以无缝结合的, comp.testArray 这个列表的选择可以比屏幕大一些,具体需要什么 自己结合游戏逻辑
if(comp.testArray){
for (const key in comp.testArray) {
let col = key%10000;
let row = Math.floor(key/10000);
let index = row*cols + col;
//let index = colOffset + col;
let flippedX = false, flippedY = false;
let tiledTile = tiledTiles[index];
if (tiledTile) {
gid = tiledTile.gid;
}
else {
gid = comp._tiles[index];
}
grid = grids[(gid & FLIPPED_MASK) >>> 0];
let isok = true;
if (!grid) {
isok = false;
return;
}
if(isok){
switch (layerOrientation) {
case Orientation.ORTHO:
left = col * maptw;
bottom = (rows - row - 1) * mapth;
break;
case Orientation.ISO:
let tcol = col;
let trow = row;
// 这里是我的一个设定 row存放的时候 *10000其实 你用字符串就行了
if(comp.testArray){
let pos = comp.testArray[col + row * 10000];
//这里就是实际的tile位置 你们 可以对比下源码 改动很小
if(pos){
tcol = pos.x;
trow = pos.y;
}
}
left = maptw / 2 * ( cols + tcol - trow - 1);
bottom = mapth / 2 * ( rows * 2 - tcol - trow - 2);
break;
case Orientation.HEX:
let diffX2 = (axis === StaggerAxis.STAGGERAXIS_Y && row % 2 === 1) ? (maptw / 2 * odd_even) : 0;
left = col * (maptw - diffX1) + diffX2 + tileOffset.x;
let diffY2 = (axis === StaggerAxis.STAGGERAXIS_X && col % 2 === 1) ? (mapth/2 * -odd_even) : 0;
bottom = (rows - row - 1) * (mapth -diffY1) + diffY2 - tileOffset.y;
break;
}
if (tiledTile) {
let tiledNode = tiledTile.node;
// use tiled tile properties
// color
color2 = color;
let newOpacity = (tiledNode.opacity * opacity) / 255;
color = tiledNode.color.setA(newOpacity)._val;
// transform
a2 = a; b2 = b; c2 = c; d2 = d; tx2 = tx; ty2 = ty;
tiledNode._updateLocalMatrix();
mat4.copy(_mat4_temp, tiledNode._matrix);
vec3.set(_vec3_temp, -left, -bottom, 0);
mat4.translate(_mat4_temp, _mat4_temp, _vec3_temp);
mat4.multiply(_mat4_temp, node._worldMatrix, _mat4_temp);
a = _mat4_temp.m00; b = _mat4_temp.m01; c = _mat4_temp.m04; d = _mat4_temp.m05;
tx = _mat4_temp.m12; ty = _mat4_temp.m13;
}
right = left + tilew;
top = bottom + tileh;
// TMX_ORIENTATION_ISO trim
//这段是 源代码 对 剪裁的优化 因为我已经自己剪裁了 所以就不需要了
/*
if (enabledCulling && layerOrientation === Orientation.ISO) {
gb = cullingMapy + bottom*cullingD;
if (gb > winh+cullingH) {
col += Math.floor((gb-winh)*2/cullingH) - 1;
isok = false;
return;
}
gr = cullingMapx + right*cullingA;
if (gr < -cullingW) {
col += Math.floor((-gr)*2/cullingW) - 1;
isok = false;
return;
}
gl = cullingMapx + left*cullingA;
gt = cullingMapy + top*cullingD;
if (gl > winw || gt < 0) {
col = maxCol;
isok = false;
return;
}
}
*/
if(isok){
// Rotation and Flip
if (gid > TileFlag.DIAGONAL) {
flippedX = (gid & TileFlag.HORIZONTAL) >>> 0;
flippedY = (gid & TileFlag.VERTICAL) >>> 0;
}
renderData.vertexCount += 4;
renderData.indiceCount += 6;
renderData.dataLength = renderData.vertexCount;
// tl
data[dataOffset].x = left * a + top * c + tx;
data[dataOffset].y = left * b + top * d + ty;
data[dataOffset].u = flippedX ? grid.r : grid.l;
data[dataOffset].v = flippedY ? grid.b : grid.t;
data[dataOffset].color = color;
dataOffset++;
// bl
data[dataOffset].x = left * a + bottom * c + tx;
data[dataOffset].y = left * b + bottom * d + ty;
data[dataOffset].u = flippedX ? grid.r : grid.l;
data[dataOffset].v = flippedY ? grid.t : grid.b;
data[dataOffset].color = color;
dataOffset++;
// tr
data[dataOffset].x = right * a + top * c + tx;
data[dataOffset].y = right * b + top * d + ty;
data[dataOffset].u = flippedX ? grid.l : grid.r;
data[dataOffset].v = flippedY ? grid.b : grid.t;
data[dataOffset].color = color;
dataOffset++;
// br
data[dataOffset].x = right * a + bottom * c + tx;
data[dataOffset].y = right * b + bottom * d + ty;
data[dataOffset].u = flippedX ? grid.l : grid.r;
data[dataOffset].v = flippedY ? grid.t : grid.b;
data[dataOffset].color = color;
dataOffset++;
if (tiledTile) {
color = color2;
a = a2; b = b2; c = c2; d = d2; tx = tx2; ty = ty2;
}
}
}
}
}
这个是实现的源码 位置在 tmx-layer-assembler.js这个文件
http://www.mikework.cn:8080/tilemap/
实际效果