基于图块的侧面滚动闪烁

问题描述

| 我正在html5 canvas元素中进行一些平台游戏，目前可能还很多。我几乎没有游戏编程经验，因此这是我的第一个游戏，我将尝试围绕“像素明智”移动事物，而不是一次移动所有内容。 我已经做好了一切，直到游戏的横向滚动！ 磁贴正确滚动，但仍一次滚动一个磁贴。 我使用地图位置找到正确的图块： 基于图块的侧面滚动闪烁     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大。 插口     

解决方法

使用原点位移，不要重绘瓷砖，以免其太重和不必要。请参阅教程。