Question

我正在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。

插孔

Answer 1

使用原点位移，不要重绘瓷砖，因为它太重而且不必要。请参阅tutorial。

基于平铺的侧滚动闪烁

1 个答案: