3

Estou tentando construir um sistema de câmera para um jogo que pretendo fazer em javascript puro, porém não consigo produzir o efeito corretamente. Se alguém puder ver e corrigi-lo ou me orientar a ler algum tutorial agradeceria muito!

Imagens usadas:

Código:

var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");

var grass = new Image();
var sand = new Image();
grass.src = "http://i42.tinypic.com/2ljm6w9.png";
sand.src = "http://www.tibiawiki.com.br/images/7/7a/Sand_Tile.gif";

var tsize = 32; //tile size
var mapArray = [[0,0,0,0,0,0,0,0,0,1,0,0,0],
                [0,0,0,0,0,0,0,0,0,1,0,0,0],
                [0,0,0,0,0,0,0,0,0,1,0,0,0],
                [0,0,0,0,0,0,0,0,0,1,0,0,0],
                [0,0,0,0,0,0,0,0,0,1,0,0,0],
                [0,0,0,0,0,0,0,0,0,0,0,0,0],
                [1,1,1,1,1,1,1,1,1,1,1,1,1]];

//Cam configs

var camX = 0;
var camY = 0;
var camWidth = 320;
var camHeight = 160;

//others
var offsetX = 0;
var offsetY = 0;
function draw() {
    requestAnimationFrame(draw);
    var startCol = Math.floor(camX / tsize);
    var endCol = startCol + (camWidth / tsize);
    var startRow = Math.floor(camY / tsize);
    var endRow = startRow + (camHeight /tsize);
    offsetX = -camX + startCol * tsize;
    offsetY = -camY + startRow * tsize;
    console.log(startCol + "," + endCol + "," + startRow + "," + endRow);
    
    for(var r = startRow; r < endRow; r++){
        for(var c = startCol; c < endCol; c++){ 
            var x = (c - startCol) * tsize + offsetX;
            var y = (r - startCol) * tsize + offsetY;
            if(mapArray[r][c] == 0) {
                ctx.drawImage(grass, x, y);
            }
            if(mapArray[r][c] == 1) {
                ctx.drawImage(sand, x, y);
            }
        }
    }
}

document.addEventListener("keydown", function(e){
    if(e.keyCode == 39) {
        camX += 1;
    }
    
    if(e.keyCode == 37) {
        camX -= 1;
    }
    
});

draw();
<html>
    <head>
        <title>Scrolling Tiled Map</title>
    </head>
    
    <body>
        <canvas id="canvas1" width="320" height="160" style = "border: 1px solid black;"></canvas>
        <script src="javascript.js"></script>
    </body>
</html>

Desculpem-me pela falta de organização com OO, sou novo na programação e também estou tentando fazer algo simples e funcional.

Obs: Não fiz o tratamento adequado do movimento com as setas.

1 Resposta 1

6

Dei uma arrumada no seu código e ficou assim:

var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");

var grass = new Image();
var sand = new Image();
grass.src = "https://i.sstatic.net/PTwXZ.png";
sand.src = "https://i.sstatic.net/TtWhX.gif";
var images = [grass, sand];

var tsize = 32; // Tile size.
var mapArray = [[0,0,0,0,0,0,0,0,0,1,0,0,0],
                [0,0,0,0,0,0,0,0,0,1,0,0,0],
                [0,0,0,0,0,0,0,0,0,1,0,0,0],
                [0,0,0,0,0,0,0,0,0,1,0,0,0],
                [0,0,0,0,0,0,0,0,0,1,0,0,0],
                [0,0,0,0,0,0,0,0,0,0,0,0,0],
                [1,1,1,1,1,1,1,1,1,1,1,1,1]];

var fieldWidth = mapArray[0].length;
var fieldHeight = mapArray.length;

// Cam configs.

var camX = 0;
var camY = 0;
var camWidth = 320;
var camHeight = 160;

// Others.
var offsetX = 0;
var offsetY = 0;
function draw() {
    requestAnimationFrame(draw);
    var startCol = Math.floor(camX / tsize);
    var endCol = startCol + (camWidth /tsize);
    var startRow = Math.floor(camY / tsize);
    var endRow = startRow + (camHeight / tsize);
    var offsetX = -camX + startCol * tsize;
    var offsetY = -camY + startRow * tsize;
    console.log(startCol + "," + endCol + "," + startRow + "," + endRow);
    
    ctx.fillStyle = "#0000FF";
    ctx.fillRect(0, 0, camWidth, camHeight);
    for (var r = Math.max(0, startRow); r <= endRow && r < fieldHeight; r++) {
        for (var c = Math.max(0, startCol); c <= endCol && c < fieldWidth; c++) {
            var x = (c - startCol) * tsize + offsetX;
            var y = (r - startRow) * tsize + offsetY;
            ctx.drawImage(images[mapArray[r][c]], x, y);
        }
    }
}

document.addEventListener("keydown", function(e) {

    if (e.keyCode == 40) {
        camY += 1;
        e.preventDefault();
    }

    if (e.keyCode == 39) {
        camX += 1;
        e.preventDefault();
    }

    if (e.keyCode == 38) {
        camY -= 1;
        e.preventDefault();
    }

    if (e.keyCode == 37) {
        camX -= 1;
        e.preventDefault();
    }
});

draw();
<html>
    <head>
        <title>Scrolling Tiled Map</title>
    </head>
    
    <body>
        <canvas id="canvas1" width="320" height="160" style = "border: 1px solid black;"></canvas>
        <script src="javascript.js"></script>
    </body>
</html>

As mudanças que fiz são:

  1. Implementei o scroll para as teclas acima e abaixo. De acordo com a sugestão do Bacco, adicionei um e.preventDefault() em cada tecla para que o scroll da página não ocorra e venha a bagunçar a experiência do jogo.

  2. Coloquei as imagens em um array, assim fica mais fácil acessá-las pelos índices que estiverem no mapArray. Isso elimina a necessidade de usar if(mapArray[r][c] == 0) e também faz com que fique bem fácil de se adicionar novas figuras.

  3. Coloquei um fundo azul padrão. Esse fundo será visível se a sua viewport (camX, camY, camX + camWidth, camY + camHeight) visualizar áreas que possam estar fora da matriz, além das suas bordas. Sem isso, o resultado é que os pixels antigos eram largados para trás, resultando em sujeira e artefatos no desenho para áreas que estiverem fora da matriz.

  4. Aqui você usou startCol ao invés de startRow:

    var y = (r - startCol) * tsize + offsetY;
    
  5. Introduzi as variáveis fieldWidth e fieldHeight para eu poder ter o tamanho da matriz facilmente.

  6. Adicionei a palavra-chave var nas variáveis offsetX e offsetY.

  7. Alterei a inicialização nos laços for para o seguinte:

    var r = Math.max(0, startRow);
    var c = Math.max(0, startCol);
    

    O motivo de fazer isso é para nunca acessar mapArray[r][c] quando r ou c forem negativos (ou seja, ultrapassando os limites esquerdo e/ou superior da matriz).

  8. Alterei a condição de parada dos laços for para o seguinte:

    r <= endRow && r < fieldHeight;
    c <= endCol && c < fieldWidth;
    

    O motivo das expressões após o && é para ele não acessar mapArray[r][c] quando r ou c ultrapassar os limites direito e/ou inferior da matriz.

    Já o motivo pelo qual eu uso <= ao invés de < é que o viewport pode não se alinhar exatamente a grid de tiles. Desta forma, embora a altura do viewport seja igual a de 5 tiles, podem haver 6 linhas de tiles visíveis, sendo 4 linhas completas, metade da primeira linha visível na parte superior e metade da última linha visível na parte inferior. O mesmo princípio se aplica também às colunas.

E se você quiser impedir que o movimento ultrapasse a grid de tiles, o caminho mais fácil é acrescentar isso:

    camX = Math.max(0, Math.min(camX, fieldWidth * tsize - camWidth));
    camY = Math.max(0, Math.min(camY, fieldHeight * tsize - camHeight));

O lugar em que isso será acrescentado depende de como o camX e o camY serão manipulados no jogo, mas os dois lugares mais prováveis são:

  • O final da função addEventListener, especialmente se eles não forem alterados em nenhum outro lugar que não seja esta função.

  • O começo da função draw, se você quiser corrigir estes valores apenas antes do desenho e deixar que eles sejam alterados a vontade do lado de fora dessa função.

E neste caso, ao acrescentar essas duas linhas, você pode remover o desenho do fundo azul, que corresponde a estas outras duas linhas:

    ctx.fillStyle = "#0000FF";
    ctx.fillRect(0, 0, camWidth, camHeight);
3
  • Muito obrigado Victor! Mas agora me ficou outra dúvida, qual seria a forma mais eficiente de impedir que o movimento ultrapasse a grid de tiles? Commented 24/11/2015 às 21:27
  • @MatheusHenrique Resposta editada. :) Commented 24/11/2015 às 21:44
  • Ainda estou preso no código tentando entender tudo hehe. Eu não entendi muito bem porque você trocou o "<" por "<=" dentro do FOR. Commented 27/11/2015 às 3:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .