我正在 html5 画布元素中做一个小平台游戏，就像目前可能有很多其他人一样。我的游戏编程经验很少，因此这是我的第一款游戏，我将尝试“以像素为单位”移动事物，而不是一次移动瓷砖上的所有东西。
我已经把所有东西都准备好了，直到游戏横向滚动！磁贴滚动正确，但仍一次滚动一个磁贴。
我使用地图位置找到正确的图块：基于图块的侧滚动闪烁 loopStartX = mapPosX/tileWidth
我使用另一个计数器相对于屏幕打印它们，这总是从零开始。
tilePosX = counter*tileWidth;
然后我想减去这个：
mapPosX % tileWidth
从 x 位置到平滑滚动，它工作了一点 - 但每次 loopStartX 增加一些东西来回闪烁，无法真正弄清楚。
我知道我做错了什么，但似乎无法弄清楚是什么。
任何帮助表示赞赏！
祝你有美好的一天。
更新 - 代码片段：
最大视点
this.maxViewX = this.map[0].length*this.blockWidth-this.mapWidthPx-1;
播放器速度
//Player moving speed (posX)
this.xVel = 4;
这在玩家对象中的每个游戏循环中运行：
向左移动：
//Now control player movement vs viewpoint
if(this.posX<256 && game.viewPointX>0) {
game.viewPointX -= this.xVel;
if(game.viewPointX<0) game.viewPointX = 0;
} else {
this.posX -= this.xVel;
}
向右移动
//Now control player movement vs viewpoint
if(this.posX>384 && game.viewPointX<game.maxViewX) {
game.viewPointX += this.xVel;
if(game.viewPointX>game.maxViewX) game.viewPointX = game.maxViewX;
} else {
this.posX += this.xVel;
}
这在游戏对象中的每个游戏循环中运行
//Updating viewpoint
//Calculating start values for the for-loops when drawing the tiles from 2d intArray map
//Also used for collision detection
this.viewStartX = Math.round(this.viewPointX/this.blockWidth)-1;
if(this.viewStartX<0) this.viewStartX = 0;
this.viewEndX = this.viewStartX+22;
this.scrollSmoothX = (this.viewPointX%this.blockWidth);
这是我画积木的时候
var posY = posX = 0;
//Looping through Y
for(var i in this.map) {
//Looping X
for(var j=this.viewStartX, xc=0; j<this.viewEndX; j++, xc++) {
if(this.map[i][j]!=0) {
var tile = this.tilesetIndex[this.map[i][j]];
posX = xc*this.blockWidth+tile[4]-this.scrollSmoothX;
posY = (i*this.blockHeight+tile[5]);
game.canvas.ctx.drawImage(this.tileset,
tile[0], //sliceX
tile[1], //sliceY
tile[2], //width ??
tile[3], //height ??
posX, //poxX
posY, //posY
tile[2], //width ??
tile[3]);//height ??
}
}
}
“tile[4]”和“tile[5]”是图像的额外填充 - 用于像块边缘这样没有 this.tileWidth 和 this.tileHeight 大的图像。
- 杰克