[Canvas] Seguindo um Ponto

[Hades Angel 0]

Fiquei em dúvida se postava sobre Canvas aqui ou em JS, enfim...

Tenho isso na página principal:

<canvas id="game" width="500" height="500" style="border: 1px solid #000000;">

Mas queria que a janela do canvas fosse maior do que 500x 500y (levando em conta que a janela do canvas é infinita), então gostaria que ela seguisse um ponto, no caso um arquivo .png definido por mim como "centralizado" na tela. Alguém pode me ajudar nesse script?

[JCMais 75]

O que você deseja é uma espécie de câmera? No qual esse arquivo .png seria o personagem, certo?

 

Tópico movido CSS / XML / XHTML / HTML :seta: Javascript

[Hades Angel 0]

Exato

 

@edit

Tenho isso:

var playerReady = false;
var playerImage = new Image();
playerImage.onload = function () {
    playerReady = true;
};
playerImage.src = 'player.png';

var player = {
    speed:300,
    x:100,
    y:100,
    w:100,
    h:100,
    currentImage:null
};

var keysDown = {};
addEventListener('keydown', function (e) {
    keysDown[e.keyCode] = true;
}, false);
addEventListener('keyup', function (e) {
    delete keysDown[e.keyCode];
}, false);

var update = function(modifier){
    if (38 in keysDown) {
        if(player.y >= 100){
            player.y -= player.speed * modifier;           
        }
    }
    if (40 in keysDown) {
        if(player.y <= 800-player.h){
            player.y += player.speed * modifier;           
        }
    }
    if (37 in keysDown) {
        if(player.x >= 100){
            player.x -= player.speed * modifier;           
        }
    }
    if (39 in keysDown) {
        if(player.x <= 800 - player.w){
            player.x += player.speed * modifier;           
        }
    }

 
    framecount++;
}

if (playerReady) {
        ctx.drawImage(playerImage, player.x, player.y);
    }

Agora preciso que o Canvas seja maior do que os 500x 500y e a "câmera" o siga

[Hades Angel 0]

Consegui fazer isso:

ctx.translate(-playerImage.x + 100, -playerImage.y + 100);

Alguém pode me ajudar a implementar em um loop ou framecount?

[JCMais 75]

Não entendi a dúvida quanto ao loop do jogo.

 

Você vai transformar o contexto quando for renderizar, esse 100 aí pode ser o tamanho da tela / 2 (já que vc quer no centro).

[Hades Angel 0]

Fiz isso:

var px = player.x;
var py = player.y;

var canx = function(){
    if (37 in keysDown) {
        this.px--
    }
    if (39 in keysDown) {
        this.px++
    }
};

var cany = function(){
    if (38 in keysDown) {
        this.py++
    }
    if (40 in keysDown) {
        this.py--
    }
};

ctx.translate(canx, cany);

Mas o loop do jogo trava na hora em que uma das teclas é pressionada

 

Script completo:

 

 

var drawingCanvas = document.getElementById('game');
var ctx = drawingCanvas.getContext('2d');

var framecount = 0;

// carrega imagens
// Criando Background e seus objetos
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
    bgReady = true;
};

bgImage.src = 'bg.png';

var playerReady = false;
var playerImage = new Image();
playerImage.onload = function () {
    playerReady = true;
};
playerImage.src = 'player.png';

//objetos do jogo
var player = {
    speed:256,
    x:220,
    y:440,
    w:60,
    h:60,
    currentImage:null
};


//teclado
var keysDown = {};
addEventListener('keydown', function (e) {
    keysDown[e.keyCode] = true;
}, false);
addEventListener('keyup', function (e) {
    delete keysDown[e.keyCode];
}, false);


// frame update
var update = function(modifier){
    if (38 in keysDown) { // Jogador vai para cima
cy++
        //verifica se já está no limite
        if(player.y >= 0){
            player.y -= player.speed * modifier;           
        }
    }
    if (40 in keysDown) { // Jogador vai para baixo
cy--
        if(player.y <= 500-player.h){
            player.y += player.speed * modifier;           
        }
    }
    if (37 in keysDown) { // Jogador vai para esquerda
cx--
        if(player.x >= 0){
            player.x -= player.speed * modifier;           
        }
    }
    if (39 in keysDown) { // Jogador vai para direita
cx++
        if(player.x <= 500 - player.w){
            player.x += player.speed * modifier;           
        }
    }
 
 ctx.translate(canx, cany);
 
 
    framecount++;
}

//render game
var render = function(){
    //clear no canvas
    //ctx.fillStyle = 'rgb(1, 1, 1)';
    //ctx.fillRect(0, 0, 500, 500);
  
    if (bgReady) {
        ctx.drawImage(bgImage, 0, 0, 500, 500);
    }
    if (playerReady) {
        ctx.drawImage(playerImage, player.x, player.y);
    }
    // pinta o framecount
    ctx.fillStyle = 'rgb(250, 250, 250)';
    ctx.font = '10px Verdana';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.fillText('Frame: ' + framecount, 390, 480);

}

var px = player.x;
var py = player.y;

var canx = function(){
    if (37 in keysDown) {
        this.px--
    }
    if (39 in keysDown) {
        this.px++
    }
};

var cany = function(){
    if (38 in keysDown) {
        this.py++
    }
    if (40 in keysDown) {
        this.py--
    }
};

//função que irá controlar o game loop
var main = function () {
    var now = Date.now();
    var delta = now - then;
    update(delta / 1000);
    render();
    then = now;
};

//iniciando o game
var then = Date.now();
setInterval(main, 1);

 

 

[JCMais 75]

Primeiramente, não use [inline]setInterval[/inline], use [inline]requestAnimationFrame[/inline].

 

Segundo: [inline]ctx.translate(canx, cany);[/inline], você está passando funções como parâmetros, e a função translate espera números.

 

E por último:

var px = player.x;
var py = player.y;

var canx = function(){
    if (37 in keysDown) {
        this.px--
    }
    if (39 in keysDown) {
        this.px++
    }
};

var cany = function(){
    if (38 in keysDown) {
        this.py++
    }
    if (40 in keysDown) {
        this.py--
    }
};

[inline]this[/inline] nesse caso, refere-se ao contexto global, que é o objeto window, remova-o.