Desenvolvimento de Jogos com JavaScript e HTML - Canvas Básico - Mover a Câmera do Jogo
ฝัง
- เผยแพร่เมื่อ 2 ต.ค. 2024
- Neste vídeo vamos aprender a usar JavaScript e o elemento canvas do HTML5 para controlar a tela do jogo (câmera) de forma a acompanhar o personagem conforme este se move pelo cenário.
Link para baixar os arquivos deste vídeo:
drive.google.c...
Link para o site com exemplos de uso de câmera em jogos:
docs.google.co...
Acho que uma boa alternativa para mapear as teclas seria usar algo como:
const keymap = { };
document.onkeydown = (e)=>{keymap[e.key] = true};
document.onkeyup = (e)=>{keymap[e.key] = false};
assim fica bem mais fácil aplicar um movimento quando duas teclas estão pressionadas ao mesmo tempo pois
sempre que uma tecla estive pressionada ela e registrada como true e vice versa no fina ficaria um objeto assim:
{
"ArrowLeft":false,
"ArrowUp":false
}
para verificar isso e só utilizar
if(keymap["ArrowLeft"]){
//mova pra direita
} else if(keymap["ArrowRight"]){
//mova pra esquerda
}
if(keymap["ArrowUp"]){
//mova pra cima
}
if(keymap["ArrowDown"]){
//mova pra baixo
}
bacana, vou testar
Show de bola
codigo bem limpo, video bem explicativo. Vlw
Eu aqui em 2023 assistindo o/. Aula maravilhosa!
Esperando ele voltar com os vídeos...
Rapaz, muito bacana seu vídeo. Sua didática é ótima.
Muito obrigado e sucesso!!!
Gustavo,fico muito feliz em ter encontrado teu canal,já vinha procurando um material como esse ha algum tempo,mas só entrava conteudo em espanhol,graças ao grupo do face aqui estou.Muito obrigado por compartilhar seus conhecimentos
+Evaldo Pereira
Fico mais do que feliz em poder ajudar.
Não deixe de conferir também o canal do Filipe Alves, que tem um conteúdo muito bom sobre desenvolvimento de jogos com JavaScript e HTML5. Você vai gostar!
Te agradeço pela participação e espero que goste dos outros vídeos do canal.
Se tiver alguma dúvida, crítica ou sugestão, por favor entre em contato.
Muito obrigado e um abraço!
Sensacional! Obrigado por compartilhar amigo.
2021 e eu ainda continuo assistindo, realmente uma aula que vai durar por muito mais tempo ainda, parabéns e obrigado pelos videos.
Como sempre mais uma excelente aula, muito obrigado .
Valeu! :)
Então nós não movemos o player e sim a imagem de fundo?
Exato!
Uma excelente aula!!
Gostei assistir..
Gostaria portanto que disponibilizasses-me a imagem do fundo "Scence"
Olá, muito obrigada pelo vídeo! Mas eu no meu char, quero colocar uma imagem com extensão ".gif" e quando coloco ela fica sempre parada. Pode me ajudar a resolver isso?
Alice, o componente canvas não trabalha com gifs animados. Uma opção simples que eu te recomendo é transformar seu gif em um spritesheet e criar a animação conforme ensinado em outros vídeos aqui do canal.
Uma ferramenta simples para transformar o gif em spritesheet é essa: ezgif.com/gif-to-sprite
E para criar a animação, basta seguir este tutorial: th-cam.com/video/lKZXFYGOe2M/w-d-xo.html
Espero ter ajudado. :)
Muito bom. Obrigado. Continue gravando, por favor!
Muito bom bem explicado e facil de entender agora só praticar ! Obrigado pelo tutorial
Muito bom parabéns, continue com o conteúdo.
Gostei👏👏👏
Quem bom! :)
Obrigado.
Amigo, vc tem alguma lógica dentro do esquema que vc monta, de deltatime? Como obter?
Vê se isso te ajuda:
const cnv = document.querySelector('canvas')
const ctx = cnv.getContext('2d')
const obj = {
x: 0,
y: 50,
width: 50,
height: 50,
draw: function(){
ctx.fillStyle = 'blue'
ctx.fillRect(this.x,this.y,this.width,this.height)
}
}
let last = new Date().getTime()
let delta
function loop(){
const now = new Date().getTime()
delta = Math.max(0,now - last) * .001
last = now
obj.x += 20 * delta
requestAnimationFrame(loop)
ctx.fillStyle = 'black'
ctx.fillRect(0,0,cnv.width,cnv.height)
obj.draw()
}
loop()
Estimado Gustavo: muchísimas gracias por tu nivel de excelencia con el que enseñas. Estoy aprendiendo muchísimo gracias a tus enseñanzas, detalladas y de enorme calidad. Te deseo lo mejor, pues mereces todo el éxito al ser tan generoso compartiendo tus conocimientos. GRACIAS!!!
alguem em 2019?
Eu
muito foda mano. Eu comecei a criar o meu jogo e esta ficando muito bom. Porem, eu gostaria de disponiblizar ele na internet, como faço isso?
Olá, Kaleb! Que bom que você gostou do vídeo. Espero que lhe tenha sido útil.
Para criar uma página, eu recomendo que você use o Github. Dê uma olhada nesse material e pesquise sobre o processo (super simples) de se publicar uma página usando o Github.io.
docs.github.com/pt/pages/getting-started-with-github-pages/creating-a-github-pages-site
Me explica uma coisa na questão do inimigo eles vão se move mais rapido,como ajusta isso!
Não tem porque os inimigos se moverem mais rápido, a não ser que você os programe para isso.
Você diz sobre a possibilidade dos inimigos tomarem a posição da câmera como ponto de referência?
Se for essa a sua preocupação, lembre-se de que a referência de posicionamento, tanto dos inimigos como do personagem do jogador, deve ser o mundo de jogo e nunca a câmera (a não ser que isso faça parte do seu game design).
Olá @Gustavo, tudo bem? Me diga uma coisa, como faço para alterar as imagens do char conforme seu deslocamento como se ele estivesse de fato caminhando?
Olá Thiago, esse vídeo é exatamente sobre isso
th-cam.com/video/lKZXFYGOe2M/w-d-xo.html
muito bom
Muito legal! E para objetos em 3D, eu poderia usar essa mesma lógica?
Aula muito boaa!! Mas não se usa mais VAR hoje em dia, isso faz com que a variável vaze do escopo e dê problemas.
Maravilha cara! Valeu mesmo....
Obrigado pelo vídeo, bem explicado, pois até eu com 65 anos, consegui seguir as sua explicações, DEZZZZZZ!!!
em pleno 2024 e eu adiquirindo esse conhecimento absurdo para um trabalho escolar, obrigado Professor! Continue nesse ramo que vc vai longe!
ME AJUUUDA! :( Tô iniciando, fazendo um jogo daqueles de matar pato. Tô com duas questões: Preciso colocar o Scope da Sniper. (A pessoa clica com o botão direito e aí abre a mira mais perto.) E se o tiro for na cabeça do pato o ponto tem que ser maior. O problema é que mesmo que eu atire perto do pato e não bem no desenho do pato, ele morre porque a imagem é quadrada. (No fim foram 3 perguntas) Se tiver uma direção de onde/o que pesquisar já ajuda.
Muito bom tutorial, didática simples e objetiva.
+Tiago Henrique Muito obrigado! Fico feliz que tenha gostado.
Excelente explicação. Parabéns.
Tem como fazer um exemplo ou dar uma ideia de como fazer com que o caminho percorrido pelo personagem ficasse marcado no mapa e pudesse ser salvo com o algo do tipo "cnv.toDataURL('image/png')" ? Até consegui fazer o percurso com lineTo mas por algum motivo que não estou entendendo a linha não fica "salva" na imagem. Desde já Obrigado.
Programa muito representou os gustavos da vida kkkkkk e amei o rock
Cara você manda muito bem nossa está me ajudando d+ obrigado.
Rapaz ta ocupado e ai tem algo novo para ensinar a gente não. ^^ Dor de cabeça,, ensina a usar um teleporte de mapa ai ^^ A Braços vida longa e prospera!
Show! Muito bem explicado.
muito bom, fera! Que nosso senhor Cthulhu te acompanhe.
Valeu irmão!
Fico feliz que tenha gostado do conteúdo, espero que seja útil.
Fica na paz de Cthulhu. :)
E lembre-se...
“O que repousa pela eternidade não pode jamais perecer,
e nas estranhas sombras da realidade, mesmo a morte pode morrer”.
Conteúdo de ótima qualidade.
Vc deveria criar uns cursos no Udemy. #ficaDica
muito bom, um exelente video aula.
estou estudando isso mas estou iniciando, e não encontrei nada em js explicado de uma maneira tão simples e didática. Obrigado mesmo por compartilhar esse conhecimento aplicado a game dev!!!
muito bom cara, parabens!
Que maravilha de vídeo! Obrigado pela aula!
amei :D muito bom a aula
maravilhoso vídeo
Gostaria de saber se a ordem de posição das funções altera o funcionamento da aplicação??
Da forma que estamos trabalhando, function nomeDaFuncao(){}, a ordem não interfere pois o navegador primeiro cria todas as funções e depois executa o resto do código, então a função pode estar declarada em qualquer lugar que o navegador saberá onde achá-la quando precisar. Se usássemos a forma var nomeDaFuncao = function(){}, então a função só poderia ser referenciada após sua declaração.
loguei so pra me inscrever! ótima explicação!
Opa! Seja bem-vindo ao canal.
Fico feliz que tenha gostado do conteúdo. :)
professor, se possível faz um vídeo explicado como criar um controle pra quem programa no celular, eu estou começando a pouco tempo, ainda não entendi como criar um controle para controlar o personagem no celular.
Esse video foi (e é bem útil), há alguns dias eu fiz uma gambiarra pra mover a câmera, na verdade ele movia todo o cenario, e a posição do personagem ficava a mesma...
Esse video é a salvação!
Valeu cara
Mas uma pergunta se não for incomodar. No background.src eu consigo colocar imagens vindo do banco de dados. Tentarei explicar: cada linha da tabela seria uma casinha que num foreach estariam uma só lado da outra, assim no canvas formando uma única imagem em linha reta onde o chat andaria da frente delas. Assim, dinamicamente eu poderia criar várias casinhas. Coloquei casa como exemplo mas poderia ser partes de rua formando uma pista maior (algumas normais outras com buracos).
Ou inserir um array de imagens neste backgroung.src para elas chegarem uma única imagem. tem como?
@@bsampaiof.1980 tem uma playlist no canal na qual eu mostro como usar uma matriz para criar o cenário, inclusive com colisões entre os elementos do cenário e o personagem do jogador. Vou deixar o link aqui, talvez te ajude.
th-cam.com/play/PLclUTiUoLCbDH_teU2Y78BYIiC5wbOKrc.html
Muito baca! obrigado.
Valeu, eu que agradeço.
fala cara blz! cara tem como colocar uma imagem e ir apagando ela aos poucos para ir aparecendo uma imagem que esteja por baixo dela tipo em layer?
obg
Tem sim, usando a propriedade globalAlpha do contexto de renderização. A propriedade globalAlpha aceita valores entre 0 e 1, sendo 0 totalmente transparente e 1 totalmente opaco. Aí basta usar uma variável para controlar esse valor e usar isso na hora de desenhar a imagem na tela, conforme no exemplo abaixo:
var cnv = document.querySelector('canvas');
var ctx = cnv.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(50,50,100,100);
ctx.fillStyle = '#00f';
ctx.globalAlpha = 0.3; //aqui mudamos a opacidade do desenho
ctx.fillRect(100,100,100,100);
No exemplo vamos desenhar dois quadrados, um vermelho com 100% de opacidade e um azul com 30% de opacidade. Mas no caso de uma animação não se esqueça de restaurar a opacidade no fim da renderização, ou todas as imagens ficarão transparentes.
Espero ter ajudado.
Se ainda ficou alguma dúvida entre em contato.
Esses comandos funcionam no eclipse ?, pq eu queria fazer isso no meu jogo lá
Nunca tentei, mas é provável que funcione sim.
Opa Gustavo eu gostaria de saber quais são os livros que você estuda.
Olá Maicon!
Um livro que gosto muito e recomendo para todos é o "Foundation Game Design With HTML5 And JavaScript", do autor Rex Van Der Spuy. Ele é bem completo e aborda desde os princípios mais fundamentais até recursos bastante avançados.
Há outros muito bons, como o "Professional HTML5 Mobile Game Development", de Pascal Rettig. Ou o "HTML5 Game Development by Example Beginners Guide", de Makzan.
Enfim, há muitos bons livros disponíveis, os que citei são apenas alguns dos meus favoritos, mas posso estar meio desatualizado.
Espero ter ajudado,
Bons estudos! :)
Excelente aula!
Obrigado!
Acha uma boa aprender javascript para criar jogos 2d? Quando pesquiso ou converso com alguém sobre isso, todos dizem para eu estudar C# e uma Unity da vida, mas queria muito aprender web dev e criar jogos 2d, acha que estou viajando?
Olha, Matheus. Eu não trabalho com programação nem desenvolvimento de jogos, então minha opinião não deve valer muita coisa, mas acho que posso falar de mim. Eu gosto de programar. Acho divertido mesmo! E gosto de jogos, e especificamente de programar jogos porquê é um tremendo exercício de criatividade.
Eu já tenho uma certa idade e não creio que seja possível para mim entrar na indústria de jogos a essa altura da vida, mas se fosse jovem e sonhasse com isso acho que eu seguiria os conselhos dos seus amigos e buscaria uma ferramenta mais presente no mercado, como Unity, Unreal ou Godot.
Dito isso, conhecimento não ocupa espaço. Se você estiver gostando de programar em javascript e conseguir dar seus primeiros passos no universo da programação e desenvolvimento de jogos, então seja feliz. :)
E lembre-se de que o mais importante na programação é a lógica. Você pode aplicar conceitos similares em várias linguagens e através de muitas ferramentas, mas a lógica é sempre o principal pilar que te permitirá concretizar seus projetos. E, se você se interessar por desenvolvimento de jogos, estude game design também que vai te ajudar muito.
É isso. Boa sorte em suas escolhas e bons estudos!
@@GustavoSilveiraGameDev Muito obrigado pela resposta! Sucesso pra você!
As imagens não são imptimidas no canvas que foi criado. Por que? Eu fiz do mesmo jeito que você. Até coloquei as mesmas imagens.
Tem como neste mapa o chat colidindo numa porta de uma casa, ativar um link comum por exemplo, indo para outra página?
Você pode usar o método open(URL), mas será tratado pelo navegador como um pop-up.
Crie uma área no mapa, tipo um quadrado invisível, e programe para que quando o personagem colidir com essa área o evento open seja disparado. Só certifique-se de desabilitar o gatilho assim que o evento for disparado, ou a página tentará abrir dezenas de pop-ups de uma vez, já que a identificação da colisão é instantânea e acontece dezenas de vezes por segundo.
Bons estudos!
Gustavo Silveira parabéns cara muito bom, eu estava procurando justamente algo assim para suprir a necessidade do meu projeto, muito legal mesmo, parabéns ai!
Só uma dúvida vc tem algum vídeo que aborda o conteúdo de renderização de cenário dinâmico por exemplo para jogos de corrida infinita? Se tiver eu agradeço se puder me passar o link, valeu e até mais =D
Edi, muito obrigado pelo apoio. Fico feliz por você ter gostado do conteúdo! :)
Cara, eu não tenho nenhum vídeo nesse sentido, mas acho que no canal do Felipe Alves você vai encontrar o que procura. Dá uma olhada no link...
th-cam.com/video/z3r8up9cz3w/w-d-xo.html
Novamente obrigado!
Um abraço.
Como posso aplicar essa lógica com a biblioteca PhaserJs?
No Phaser existe o objeto camera, que resolve isso automaticamente. Supondo que a referência à biblioteca esteja em um objeto chamado game e o personagem em um chamado player, bastaria adicionar uma linha de comando no método create:
game.camera.follow(this.player);
Muito obrigado, Gustavo. Espero uma série de vídeos com o Phaser 3, será se existe alguma possibilidade quando a documentação v3 chegar?
Sim. No segundo semestre farei o que puder para trazer esse material aqui no canal.
Simplesmente Show parabéns, tenho uma duvida que talvez vc possa me dar um norte, a minha duvida é como ter 2 imagens ou mais no contexto do canvas e poder clicar e arrastar estas imagens uma de cada vez para qualquer local do contexto.
Fico grato se puder me dar um norte.
+Ederson Pereira de Brito
Você pode ter quantas imagens quiser no canvas. No exemplo apresentado nesse vídeo eu tenho duas imagens, cada uma como parâmetro de um objeto (gameWorld e char). Para exibir outras imagens basta criá-las (var novaImagem = new Image(); novaImagem.src = "caminho do arquivo";) e inseri-las em seus devidos objetos (var objeto = {img: novaImagem... etc}). Aí você insere o objeto no array de sprites (spreites.push(objeto)).
Todo esse processo está detalhadamente explicado nos vídeos sobre animação th-cam.com/video/lKZXFYGOe2M/w-d-xo.html e no desenvolvimento do jogo "Batalha Espacial" th-cam.com/video/XR1qX6C149U/w-d-xo.html
Sobre clicar e arrastar, acho que é uma boa pedida para um novo vídeo. :)
Mas resumidamente você vai ter um evento que associa o objeto arrastado ao ponteiro do mouse e um evento para dissolver essa associação, e na função update você vai atualizar as coordenadas do objeto em função das coordenadas do ponteiro do mouse. Não dá para entrar em detalhes aqui, senão essa resposta vai ficar monstruosa.
Bom, espero ter ajudado. Se quiser mais informações, pode entrar em contato.
Obrigado pela participação.
Abraço!
+Ederson Pereira de Brito
Fiz um vídeo sobre movimentação de objetos com o mouse, vê se era essa sua dúvida.
th-cam.com/video/pKw2oykJZdM/w-d-xo.html
+Gustavo Silveira Obrigado, ajudo muito.
+Bylltec
Que bom! :)
Muito bom, parabéns e obrigado, Gustavo.
Valeu!
Obrigado pela participação. :)
Você recomenda assistir primeiro a série do game do labirinto ou a série sobre Phaser?
Labirinto.
É que essa série do labirinto aplica o Phaser, não é melhor assistir primeiro a série sobre o framework?
Ah, haha... achei que você estava se referindo à série de labirinto com javascript puro, que eu recomendaria para assistir primeiro, mas se for direto para o phaser assista a introdução ao framework primeiro.
Muito bom o video
+Allonso Macário
Obrigado!
qual e o programa que voce usa?
você se refere ao editor de textos?
eu uso o geany
faz uma vidio aula de como fazer um jogo de mata mosca com javascript
Tipo aqueles que aparecem nos sites governamentais no verão? Pode ser... :D
Vou botar na minha lista de projetos.
Obrigado pela dica! :)
valeuuu :)
Então basicamente, o mapa que é desenhado e redesenhado conforme a câmera se move dando a impressão de movimento da tela?
Perfeitamente!
Só mais uma pergunta. Como que se faz então para que os objetos desenhados no mapa não fiquem desalocados ou perdidos conforme ele se move? (Como inimigos e etc)
Você estabelece um ponto de referência e mapeia as coordenadas dos elementos do jogo em função desse ponto.
Acho que esse processo está melhor explicado na série introdutória a jogos de labirinto. Segue o link goo.gl/ZeLvCS
Muito obrigado!
Então amigo, tudo bem contigo, no video no minuto 1:18 segundo, tens código?
Do joguinho de Labirinto com Zumbis? Claro, segue o link: goo.gl/jr468U
Mas esse jogo foi só um teste. Não finalizei não.
Espero que te ajude de alguma forma.
olá amigo parabéns pelo seu vídeo me ajudou muito, gostaria de saber se posso alterar o plano de fundo do meu canvas por uma imagem gif ? só pra não deixar o fundo morto ou estático.
Gabriel, usar um gif como fundo no canvas não teria o efeito que você deseja pois o que acontece aqui é que as camadas de imagens (fundo e personagens) são desenhados, apagados e desenhados novamente em infinitos ciclos, dezenas de vezes por segundo. Então o gif não ficaria executando sua animação e sim sendo redesenhado do começo várias vezes. O que você pode fazer para animar o cenário é criar uma animação como background usando alguns frames ligeiramente diferentes que serão alternados ao longo da execução do jogo ou inserir pequenas animações ao longo do seu cenário ou ainda não usar canvas e criar um jogo usando o DOM do HTML e, aí sim, usar gifs para animar o cenário.
Tudo depende do seu projeto.
É claro que você pode usar sua criatividade e bolar alguma solução na qual eu não pensei, nesse caso eu espero que você possa compartilhá-la conosco. :)
Gustavo Silveira é realmente vou precisar de mais criatividade para criar meu joguinho de RPG kk.. bom obrigado pela sua explicação ajudou bastante na minha jornada hehe
Javascript so é usado em jogos 2D?
+animaniacos
Não, absolutamente.
Existe uma biblioteca chamada webgl que possibilita o desenvolvimento de aplicações 3D para navegadores e a linguagem usada é; javascript. Além disso, game engines como o Unity 3D e o Cocos podem ser usadas juntamento com javascript para o desenvolvimento de games de alto nível.
Eu só abordo 2D porque é mais simples e meu objetivo é ajudar quem está começando a programar.
Este site tem um monte de jogos desenvolvidos com webgl, dá uma conferida.
www.webglgames.com/
+Gustavo Silveira eu tô querendo aprender pra isso mesmo, usar na unity
+Gustavo Silveira vlw pela informação
+animaniacos
Legal. Eu comecei a estudar javascript justamente para usar no Unity, mas acaba que fui vendo outras coisas e deixei o Unityt de lado. Agora estou estudando Construct 2, mas anida esse ano pretendo voltar a estudar Unity.
+Gustavo Silveira eu pretendo começar, Javascript depois php e depois maysql
Alguém em 2022?
como eu faço para poder mover com o android , Afinal não tem teclado ?
Então, primeiro você precisa criar a aplicação com os ajustes necessários para visualização em dispositivos móveis, o que não é o caso nesse vídeo. Tendo feito esses ajustes, deve-se criar botões virtuais que dispararão os métodos responsáveis pela movimentação do personagem na tela.
Tem uma série de vídeos muito boa que aborda esse tema no canal do Felipe Alves. Segue o link: th-cam.com/play/PL1EkVGo1AQ0Gt1dxKl4e35DY4G9qb5W7_.html
muito bom.
Obrigado!