在等距地图上平滑的角色移动

Smooth character movement on an Isometric map

本文关键字：角色 移动 平滑 地图      更新时间：2023-09-26

我有一个等距引擎，我正在建设:

http://jsfiddle.net/neuroflux/09h43kz7/1/

(方向键移动)。

我正在更新Engine.player.x和Engine.player.y来移动角色，但(显然)玩家只是从一个贴图"弹出"到另一个贴图。

我想知道是否有一种方法可以让他从一个瓷砖"滑动"到另一个瓷砖?或者更好的是，自由移动…

我一直在努力。

相关代码如下:

var Engine = {
    // canvas variables
    canvas: null,
    ctx: null,
    // map
    map: [
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
        [2,1,1,1,1,1,1,1,1,1,1,1,1,1,2],
        [2,1,1,0,0,1,1,1,1,0,0,0,1,1,2],
        [2,2,1,0,0,0,0,1,0,0,0,0,1,1,2],
        [2,2,1,1,1,1,0,0,0,0,1,0,0,1,2],
        [2,2,2,2,2,1,0,0,0,1,0,0,0,1,2],
        [2,2,1,1,1,1,0,0,0,0,0,0,0,1,2],
        [2,1,1,0,1,0,0,0,0,1,1,0,0,1,2],
        [2,1,0,0,0,0,0,1,0,0,0,0,0,1,2],
        [2,1,0,0,0,0,0,0,0,0,1,0,0,1,2],
        [2,1,0,0,0,0,1,0,0,0,0,0,0,1,2],
        [2,1,0,1,1,0,0,0,0,1,0,0,0,1,2],
        [2,1,0,0,0,0,0,0,0,0,1,0,1,1,2],
        [2,1,1,1,1,1,1,1,1,1,1,1,1,1,2],
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2]
    ],
    // player info
    player: {
        x:1,
        y:1
    },
    // tile size
    tileH: 31,
    tileW: 63,
    // map position
    mapX: window.innerWidth/2,
    mapY: window.innerHeight/3,
    // tile images
    tileSources: [
        "images/stone.png",
        "images/grass.png",
        "images/water.png",
        "images/ralph.png"
    ],
    // for pre-loading
    tileGraphics: [],
    tilesLoaded: 0,
    // image preloader
    loadImages: function() {
        for (var i = 0; i < Engine.tileSources.length; i++) {
            Engine.tileGraphics[i] = new Image();
            Engine.tileGraphics[i].src = Engine.tileSources[i];
            Engine.tileGraphics[i].onload = function() {
                Engine.tilesLoaded++;
                if (Engine.tilesLoaded === Engine.tileSources.length) {
                    Engine.draw();
                }
            }
        }
    },
    // update logic
    update: function() {
        Engine.draw();
    },
    // draw the scene
    draw: function() {
        Engine.ctx.clearRect(0, 0, Engine.canvas.width, Engine.canvas.height);
        var drawTile;
        for (var i = 0; i < Engine.map.length; i++) {
            for (var j = 0; j < Engine.map[i].length; j++) {
                drawTile = Engine.map[i][j];
                Engine.ctx.drawImage(Engine.tileGraphics[drawTile], (i - j) * Engine.tileH + Engine.mapX, (i + j) * Engine.tileH / 2 + Engine.mapY);
                if (Engine.player.x === i && Engine.player.y === j) {
                    Engine.ctx.drawImage(Engine.tileGraphics[3], (i - j) * Engine.tileH + Engine.mapX, (i + j) * Engine.tileH / 2 + Engine.mapY - Engine.tileH + 10);
                }
            }
        }
        Engine.gameLoop();
    },
    // game loop
    gameLoop: function() {
        Engine.gameTimer = setTimeout(function() {
            requestAnimFrame(Engine.update, Engine.canvas);
        }, 1);
    },
    // start
    init: function() {
        Engine.canvas = document.getElementById("main");
        Engine.canvas.width = window.innerWidth;
        Engine.canvas.height = window.innerHeight;
        Engine.ctx = Engine.canvas.getContext("2d");
        document.addEventListener("keyup", function(e) {
            //console.log(e.keyCode);
            switch(e.keyCode) {
                case 38:
                    if (Engine.map[Engine.player.x-1][Engine.player.y] !== 2) {
                        Engine.player.x--;
                    }
                    break;
                case 40:
                    if (Engine.map[Engine.player.x+1][Engine.player.y] !== 2) {
                        Engine.player.x++;
                    }
                    break;
                case 39:
                    if (Engine.map[Engine.player.x][Engine.player.y-1] !== 2) {
                        Engine.player.y--;
                    }
                    break;
                case 37:
                    if (Engine.map[Engine.player.x][Engine.player.y+1] !== 2) {
                        Engine.player.y++;
                    }
                    break;
            }
        });
        Engine.loadImages();
    }
}

// loaded
window.onload = function() {
    Engine.init();
};

// request animation frame
window.requestAnimFrame = (function(){
  return window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.oRequestAnimationFrame || 
    window.msRequestAnimationFrame || 
    function (callback, element){
    fpsLoop = window.setTimeout(callback, 1000 / 60);
  };
}());

提前感谢!

您正在平铺位置绘制字符。您需要的只是为代表其目的地的字符添加第二组坐标。为了流畅地移动，你可以将角色的位置设置为贴图的部分。如球员。X = 2.5，字符位于贴图2和3的中间。

你还想摆脱等距空间中的混乱。将从2d到等距的转换卸载到绘制函数，而不是每次绘制到运动场时手动执行。

创建绘制函数

// add to the Engine object.
// img is the image to draw. x and y are the tile locations. 
// offsetX and offsetY [optional] are pixel offsets for fine tuning;
drawImageIso:function (img,x,y,offsetX,offsetY){
    offsetX = offsetX === undefined ? 0: offsetX; // so you dont have to 
    offsetY = offsetY === undefined ? 0: offsetY; // add the offset if you 
                                                  // are not using it;
    Engine.ctx.drawImage(  // draw the image
        img,
        (x - y) * Engine.tileH + Engine.mapX + offsetX, 
        (x + y) * Engine.tileH / 2 + Engine.mapY - Engine.tileH+offsetY
    );
},

将播放器对象更改为

player: {
    x:1,
    y:1,
    destX:1,  // the destination tile
    destY:1,   
    playerAtDest:true, // true if the player has arrived     
},

在tile渲染循环之前添加

    var p = Engine.player; // because I am lazy and dont like typing.
    var dx = p.destX;
    var dy = p.destY;
    var maxPlayerSpeed = 0.1;  // max speed in tiles per frame
    var mps = maxPlayerSpeed; // because I am lazy
    // check if the player needs to move
    if( Math.abs(p.x - dx) > mps  || Math.abs(p.y - dy) > mps ){
        p.x += Math.max( -mps , Math.min( mps , dx - p.x )); // move to destination clamping speed;
        p.y += Math.max( -mps , Math.min( mps , dy - p.y ));            
        p.playerAtDest = false;  // flag the player is on the way
    }else{
        // player directly over a till and not moving;
        p.x = dx; // ensure the player positioned correctly;
        p.y = dy;
        p.playerAtDest = true;  // flag the player has arrived
    }

在你用来绘制玩家的地方添加以下内容。使用目标x,y来确定何时绘制或使用Math.round(Engine.player.x)和y来确定何时。

    // now draw the player at its current position
    Engine.drawImageIso( Engine.tileGraphics[3] , p.x , p.y , 0 , 10);

你必须改变界面来移动玩家的目的地，而不是x和y。你也可能想要延迟移动，直到玩家到达当前目的地。

相关文章：