基于图块的侧面滚动闪烁
|
我正在html5 canvas元素中进行一些平台游戏，目前可能还很多。我几乎没有游戏编程经验，因此这是我的第一个游戏，我将尝试围绕“像素明智”移动事物，而不是一次移动所有内容。
我已经做好了一切，直到游戏的横向滚动！
磁贴正确滚动，但仍一次滚动一个磁贴。
我使用地图位置找到正确的图块：
基于图块的侧面滚动闪烁
loopStartX = mapPosX / tileWidth
我使用另一个计数器来相对于屏幕打印它们，这始终从零开始。
tilePosX = counter*tileWidth;
mapPosX % tileWidth
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 ??
}
}
}
没有找到相关结果
已邀请:
1 个回复
课刊灭似