1

私はhtml5キャンバス要素で小さなプラットフォームゲームをやっています。おそらく今のところ他の多くの人と同じです。私はゲームプログラミングの経験がほとんどないので、一度にすべてをタイル上で移動するのではなく、「ピクセル単位」で物事を移動しようとする最初のゲームです。

ゲームの横スクロールまで、すべてを停止しました。タイルは正しくスクロールしていますが、一度に1つのタイルをスクロールしています。

マップの位置を使用して、正しいタイルを見つけます。タイルベースの横スクロールのちらつき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ほど大きくないブロックエッジのような画像に使用されます。

  • ジャック
4

1 に答える 1

1

原点変位を使用し、タイルを再描画しないでください。重すぎて不要になります。チュートリアルを参照してください。

于 2011-05-26T12:23:30.140 に答える