domingo, 29 de maio de 2016

Curso de Jogo Javascript de RPG

A Alfamídia acaba de disponibilizar uma opção gratuita com as primeiras aulas do curso que apresenta a construção de um jogo de RPG.

Inscrições no curso podem ser feitas diretamente em Curso Gratuito de Desenvolvimento de Jogo de RPG.

sexta-feira, 27 de maio de 2016

Novo Jogo em Javascript

Estamos disponibilizando um novo jogo em javascript, desenvolvido para fins didáticos, desta vez um jogo relativamente mais sofisticado.

Em http://www.alfamidiaonline.com.br/curso-jogos-javascript/explorer/ você pode conferir este jogo, em que você controla um personagem que percorre um cenário infinito gerado por funções matemáticas.

Este é mais um jogos disponibilizado com seu código-fonte e com uso gratuito, profissional ou não.

Alguns recursos utilizados serão apresentados neste blog, e a descrição completa do código-fonte faz parte do curso Criando Jogos Javascript da Alfamídia.

Links:

terça-feira, 24 de maio de 2016

Movimentando Personagens com Javascript

Neste artigo mostraremos como controlar o movimento de um personagem por javascript utilizando as teclas do computador.

Para isso utilizaremos algumas das imagens fornecidas pelo site http://untamed.wild-refuge.net/rpgxp.php. Outros sites com imagens gratuitas são listados em nosso portal alfamídia, em http://www.alfamidia.com.br/imagens-gratis-para-jogos/.

O código utilizado é um segmento do código utilizado no curso alfamídia de criação de jogos com javascript.

Capturando eventos do teclado

Uma das formas de capturar eventos em javascript é utilizando addEventListener. O que esta função faz é associar uma função a um evento.

Observe o código abaixo:

  document.addEventListener('keydown', function(event) {

    meuCenario.move(event.keyCode);

});


No código acima estamos associando uma função, que chamará o método "move" de "meuCenario", sempre que o evento "keydown" for acionado. Este evento é chamado cada vez que uma tecla é pressionada.

O parâmetro keyCode é um código que corresponde a tecla que foi pressionada. Utilizaremos o teste de determinados valores para tratar cada uma das teclas de seta.

Exibindo a Imagem Correspondente a Ação

Para exibir uma imagem, uma das funções do javascript é o drawImage, que desenha imagens em um canvas.

A especificação da função você pode encontrar em https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage.

Aqui nos preocuparemos com seu uso em nosso caso específico. Para isso, vale observarmos as imagens com as quais estaremos trabalhando.


Estas imagens contem um personagem de 32x48 pixels, em 16 posições diferentes. Observem que as linhas (que chamaremos de linhas 0,1,2 e 3) representam 4 direções do personagem, e as colunas (que também identificaremos como 0,1,2 e 3) representam etapas do passo do personagem.

Observe agora, a seguir, o código do desenho que estaremos utilizando. É importante gastar um tempo para entender o que está sendo feito aqui:

this.ctx.drawImage(this.imagem, 
    this.etapaPasso*TAMANHO_CELULA, this.direcaoImagem*ALTURA_PERSONAGEM, 
    TAMANHO_CELULA, ALTURA_PERSONAGEM, 
    this.x, this.y+10,
    TAMANHO_CELULA,ALTURA_PERSONAGEM);

A versão mais simples da função drawImage utiliza, além da imagem em si, dois parâmetros para definir a posição da imagem nos eixos X e Y, conforme abaixo:

void ctx.drawImage(image, dx, dy);

Aqui estamos utilizando diversos outros parâmetros, e precisaremos entender os mesmos.  Para tanto, vale olharmos a especificação da função com seu número completo de parâmetros:

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Os parâmetros de posição x e y continuam presentes, mas são respectivamente o 6º e 7º parâmetros, dx e dy, ou seja, X e Y da posição no destino.

Os parâmetros 3º, 4º e os dois últimos se referem a largura e altura da imagem, respectivamente na imagem original e no destino. No nosso caso, como não estamos redimensionando a imagem, são iguais e representam 32 (largura do personagem) e 48 (altura do personagem).

O que realmente nos interessa são os parâmetros sx e sy. Eles representam as coordenadas x e y que vamos utilizar da imagem original. Se forem 0 e 0, basicamente estamos exibindo uma imagem de 32 por 48, fazendo o corte em 32 e 48 na imagem original.

Se sx for 32, porém, estaremos exibindo não a primeira imagem do personagem, mas sim a imagem do personagem na segunda coluna. Do mesmo modo, se sy for 48, estaremos exibindo a imagem da segunda linha.

Assim sendo, podemos agora entender os parâmetros de sx e sy utilizados. Em ambos temos um índice da imagem multiplicado por 32 ou 48.

This.etapaPasso representa, assim, um número de 0 a 3 correspondendo a etapa do passo.

This.direcaoImagem representa, um número de 0 a 3 correspondendo a direção que o personagem se move.


Gerando uma Animação

Mover o personagem sempre foi relativamente simples, após sabermos capturar o teclado. Basta mantermos uma variável com a posição X e Y, e alterá-la conforme a tecla pressionada, chamando drawImage novamente.

Mudar a posição do personagem agora torna-se simples também. Selecionando um número de 0 a 3 para this.direcaoImagem, temos cada uma das 4 direções de nosso desenho.

Gerar o movimento do personagem em si é mais complexo, já que exige a exibição de uma sequência de imagens. Existem diferentes abordagens para obter este resultado, mas, via de regra, todas exigirão o uso de funções com intervalo de tempo.

Observe o segmento de código em que implementamos a caminhada no exemplo:

  this.semiPasso = function()
  {
    var posicaoInterna_Celula = ((this.etapaPasso%4)+1)/4 * TAMANHO_CELULA;
    switch (this.iniciouDirecao)
    {
      case NORTE: this.y = this.oldy - posicaoInterna_Celula;
                  this.direcaoImagem = IMAGEM_COSTAS; break;

      case SUL:   this.y = this.oldy + posicaoInterna_Celula;
                  this.direcaoImagem = IMAGEM_FRENTE; break;

      case LESTE: this.x = this.oldx + posicaoInterna_Celula;
                  this.direcaoImagem = IMAGEM_DIREITA; break;

      case OESTE: this.x = this.oldx - posicaoInterna_Celula;
                  this.direcaoImagem = IMAGEM_ESQUERDA; break;

      default:break;
    }
    this.etapaPasso = (this.etapaPasso+1) % 4;
    if (this.etapaPasso == 0 )
    {
      this.iniciouPasso = false;
    }
  }


A função semiPasso é chamada a cada ciclo de execução do jogo, caso this.iniciouPasso seja verdadeiro. Ela é responsável por fazer o movimento do personagem da sua posição inicial até a posição final, passando pelas 4 etapas do movimento.

Além de setar a imagem correspondente a direção do movimento, ela controla this.etapaPasso, variando de 0 a 3, encerra o movimento quando atinge a etapa 3, e ainda move 1/4 de posição entre uma posição definida e a outra a cada iteração.



Juntando Tudo

Estes itens acima são as funcionalidades mais complexas e/ou novas do código. Faça o download do código e abra em seu próprio computador para testá-lo. Acompanhe os cursos gratuitos e pagos de jogos em javascript da Alfamídia, que apresentam as demais funcionalidades relevantes do programa.

Assine nossa newsletter para ser avisado quando disponibilizarmos um mini-jogo contendo este recurso. Os códigos-fonte dos jogos desenvolvidos para os cursos de criação de jogos javascript da Alfamídia são disponibilizados livremente a medida que concluídos, e podem ser utilizados em qualquer desenvolvimento de jogo, comercial ou não.


terça-feira, 3 de maio de 2016

Orientação a Objetos: Herança em Javascript

No curso de Criação de Jogos Javascript, utilizamos o jogo Miaus 2.0 para explicar uma das diversas formas de implementarmos herança em Javascript, e aproveitamos para buscar demonstrar as vantagens da Programação Orientada a Objetos.

Vamos mostrar a seguir como utilizamos herança em um exemplo simplificado semelhante ao fonte do Miaus 2.0. No código fonte do Miaus 2.0 vocês podem encontrar esta mesma aplicação de herança de uma forma mais sofisticada.

Por que Utilizamos Herança no Miaus 2.0

No curso de Criação de Jogos Javascript, utilizamos uma função sprites para implementar uma série de ações comuns a todos os elementos da cena. Na função sprites temos funções para desenho (que fazem a exibição do objeto), funções de movimento, de detecção de colisões, entre outras.

Todos os elementos da cena, por sua vez, são criados a partir de funções derivadas de sprites. Isso significa que cada elemento só precisa implementar alguma função quando a mesma tem uma funcionalidade diferente da implementação básica definida na função sprites.

Adicionalmente, podemos armazenar todos os elementos da cena em um vetor único, o qual percorremos chamando as funções de desenho, ciclo, etc. Isso simplifica significativamente o desenvolvimento e manutenção do código, deixando o tratamento de como é feito o desenho, quais ações ocorrem a cada ciclo, sob responsabilidade das funções derivadas de sprite.

Como Implementar Herança em Javascript

Existem diversas formas de implementarmos herança. Abaixo apresentamos a abordagem adotada no jogo Miaus 2.0, utilizando um código mínimo. Você pode testar este código diretamente no console do seu navegador. No caso do Chrome, basta seguir os passos abaixo:

  1. Abra uma janela do Chrome
  2. Digite "about:blank" e dê ENTER
  3. Digite F12
  4. Selecione a aba console 
  5. Copie e cole o código abaixo, e observe os resultados

Código-fonte demonstrando herança em javascript

Selecione a partir daqui e copie:
----------------------------------------------------------------------------
function Pai()
{
  this.funcao_comum = function()
  {
     return "esta função é igual para todos";
  }
}
Pai.prototype.funcao_especifica = function()
{
    return  "esta é uma função do pai";
}

function Filho1()
{
  Pai.call(this);
  this.funcao_especifica = function()
  {
     return "esta é uma função do filho 1";
  }
}
Filho1.prototype = Object.create(Pai.prototype)

function Filho2()
{
  Pai.call(this);
  this.funcao_especifica = function()
  {
     var mensagemPai = Pai.prototype.funcao_especifica.call(this);
     return mensagemPai + " e esta é uma função do filho 2";
  }
}
Filho2.prototype = Object.create(Pai.prototype)


{
  lista = [];
  lista[0] = new Pai();
  lista[1] = new Pai();
  lista[2] = new Pai();
  lista[3] = new Filho1();
  lista[4] = new Filho2();
  for (i = 0; i < 5; i++) {
    console.log(lista[i]);
    console.log(i,lista[i].funcao_comum());
    console.log(i,lista[i].funcao_especifica());
  }

}

----------------------------------------------------------
Marque até aqui, e cole na janela de console de seu navegador


Estudando o Código de Demonstração de Herança

Observe que criamos uma lista de 5 elementos, e fizemos um loop através de cada um dos elementos. Fizemos a chamada a função funcao_comum() e funcao_especifica(), com diferentes resultados. Como funcao_comum() só é implementada na função principal ela é mostrada igual em todas as chamadas do console. Já funcao_especifica() apresenta resultados diferentes em cada uma das funções.

Ocorre que o Javascript utiliza prototype como um ponteiro para um conjunto de funções definidas pela função, e como ponteiro para o prototype da classe superior. Ao utilizarmos Filho1.prototype = Object.create(Pai.prototype), estamos garantindo que toda função não encontrada dentro da função Filho1, será chamada da função Pai, se existir na mesma.

O resultado, se a cópia para o console ocorreu adequadamente, é mostrado a seguir. (Também é perfeitamente possível copiar o javascript para dentro de uma página HTML):

> Pai {}
0 "esta função é igual para todos"
0 "esta é uma função do pai"
> Pai {}
1 "esta função é igual para todos"
1 "esta é uma função do pai"
> Pai {}
2 "esta função é igual para todos"
2 "esta é uma função do pai"
> Filho1 {}
3 "esta função é igual para todos"
3 "esta é uma função do filho 1"
> Filho2 {}
4 "esta função é igual para todos"
4 "esta é uma função do pai e esta é uma função do filho 2"

Como Utilizar o Código do Miaus 2.0

A primeira versão do Miaus está descrita em um curso gratuito, que você pode realizar acessando este link: Curso Básico de Jogos em Javascript.

O código-fonte da versão 2.0 do Miaus também está disponível gratuitamente. Um link neste próprio blog permite abrir diretamente o jogo em si.

O curso Criando Jogos em Javascript, em que trabalhamos de forma mais aprofundada com orientação a objetos e o código fonte do Miaus 2.0, faz parte do Curso Online em Criação de Jogos Digitais.

Se desejar, você pode utilizar livremente o código-fonte do Miaus 2.0, seja para estudo, seja para utilizar como base para a construção de jogos gratuitos ou comerciais.

Links

domingo, 1 de maio de 2016

Jogo com Código Fonte para Aprender Programação - Miaus 2.0

O Javascript hoje é uma linguagem poderosa, que permite muito mais que validar formulários e criar pequenos efeitos em uma página Web.

A linguagem pode ser uma alternativa interessante para iniciar o processo de aprendizagem de lógica de programação, especialmente quando seguimos pela abordagem que a Alfamídia defende: desenvolver o domínio de uma linguagem praticando a mesma.

Assim como a leitura é fundamental para o domínio de uma língua, da mesma forma a prática contínua de programação é fundamental para dominar e ter fluência tanto em programação e lógica de programação, quanto em uma linguagem específica.

Jogos nos Cursos Online Alfamídia de Programação

Uma das abordagens dos cursos online Alfamídia, especialmente os voltados para adolescentes e os cursos para desenvolvedores profissionais de jogos, é o desenvolvimento de jogos, tanto em javascript, quanto em plataformas profissionais de desenvolvimento de jogos, desde GameMaker a Unity e Unreal.

Jogo em Javascript Orientado a Objetos

Confira a nova versão, 2.0, do jogo em javascript Miaus, disponibilizada hoje, um dos jogos básicos usados no ensino de javascript, o MIAUS (mutantes invasores alienígenas do universo sideral).

Para baixar os fontes completos do jogo, incluindo imagens, basta fazer download do jogo.

Este é apenas um esqueleto básico de um jogo de tiro, criado para fins didáticos. Utilize-o à vontade para estudar, como base para um jogo ou como desejar.

Confira o processo de construção da primeira versão do jogo, 1.0, tanto utilizando programação estruturada quanto com orientação a objetos no curso gratuito Alfamídia de jogos Javascript.

Aprendendo Programação Orientada a Objetos


Em breve, estaremos mostrando alguns dos recursos de orientação a objetos, implementação de herança e outras funcionalidades neste portal. Todos, recursos que farão parte dos cursos Alfamídia de programação javascript utilizando jogos.

Links