1ª parte do trabalho

TRABALHO

Em traços gerais, a primeira parte do trabalho de avaliação da disciplina consiste em nós escolhermos um jogo presente na segunda geração de consoles, que cronologicamente corresponde aos anos de 1976 e 1983, cuja principal estrela foi o Atari 2600. Apesar de esta era não ter tido um final feliz, hoje em dia este console é um ícone e o seu pioneirismo é devidamente valorizado.

Sendo eu pai de um Nintendista, obviamente tinha que ver a possibilidade de escolher um jogo da minha empresa japonesa preferida e, para meu espanto, o Atari 2600 teve vários jogos licenciados pela Nintendo para lançamento nos Estados Unidos. A Nintendo nesta época lançava apenas jogos para Arcade e o célebre Famicom só seria lançado precisamente em 1983, dando início à 3ª geração de videogames.

Atari 2600

ColecoVision

A Nintendo licenciou inicialmente para a Coleco, empresa americana que viria a lançar o seu próprio console, o ColecoVision, que sublicenciou para o já citado líder de mercado Atari 2600. O jogo que escolhi foi Donkey Kong, um clássico do Arcade, que foi lançado para o Atari em 1982 (Atari).

Isto é mesmo o Donkey Kong???

Comparado com a de Arcade, o desenho dos personagens é bem mais grosseiro, o Donkey Kong parece mais um alienígena do que um gorila, mas as mecânicas básicas são as mesmas e é isso que interessa para o nosso trabalho.

Modelo Natural

Donkey Kong em versão Arcade

Donkey Kong é um jogo básico de plataformas, com várias fases, em uma única tela, em que o personagem principal, que nós controlamos, tem que chegar ao topo da estrutura, onde está posicionada a “donzela em perigo”, que foi raptada por um “suposto” gorila, que dá o nome ao jogo e que hoje em dia é um personagem emblemático da Nintendo. Para isso, o nosso herói, que é quase a cara do garoto propaganda da Nintendo, o “Mario”, tem que percorrer plataformas, subir e descer escadas, e evitar obstáculos e “capangas” do vilão ao longo do seu caminho. 

Na elaboração dos protótipos, fui desenvolvendo as mecânicas de forma complementar e por grau de complexidade, ou seja, comecei com a mecânica mais simples, andar na horizontal, para a mais trabalhosa de implementar, o pulo para evitar a colisão com os inimigos.

Fase original escolhida

Como fase a recriar, escolhi a segunda, que tem plataformas perpendiculares em ângulos retos e cujos inimigos são uns capangas.

1º Protótipo

Movimento lateral

Permitie ao personagem “caminhar” em cima de uma plataforma horizontal, tanto para esquerda como para a direita, a uma velocidade constante, usando-se as teclas direcionais esquerda e direita, movimentando-se consoante a direção do botão apertado.

         2º Protótipo

Subindo e descendo escadas

O personagem move-se em velocidade uniforme verticalmente, podendo subir ou descer apenas e só onde tem escada, ou seja, quando o Mario está posicionado na base de uma escada, pode começar a subi-la, ou descer a partir de qualquer ponto da subida, podendo ir da plataforma mais em baixo até à mais em cima, e vice-versa. Enquanto o personagem está nas escadas, este não pode se mover horizontalmente, exceto quando a sua base está alinhada à parte superior das plataformas horizontais.

           3º Protótipo

Neste último protótipo, que inclui os dois anteriores, é implementado um pulo para evitar a colisão com os  "capangas", que estão posicionados cada um nas plataformas horizontais, onde se movem de extremidade a extremidade, repetidamente, ou seja, em movimento oscilatório e a uma velocidade constante. O pulo do Mario pode ser vertical, quando apenas se aperta a tecla espaço, ou em forma de retangular quando se aperta um dos botões direcionais depois da tecla espaço, ou seja, o personagem fica um tempo “no ar”, a uma distância e tempo suficiente para evitar o obstáculo, voltando a descer à plataforma. De referir que esta é a única situação em que o personagem pode se movimentar horizontalmente sem que esteja em cima da plataforma, embora por um tempo limitado. 

Protótipo integrado, com pulo e colisão

Modelo Matemático

Na construção dos protótipos e respectivo modelos matemáticos, as unidades de medida mais usadas são pixel (px), e para coordenadas um plano cartesiano invertido verticalmente.

Outra unidade de medida de referência é frames por segundo (fps), com ciclos de 60fps.

O tamanho da tela emula as proporções e resoluções mais comuns na geração de videogames escolhida, ou seja, tela de 4:3, com valores absolutos de 640px de largura e 480px de altura, a chamada Standard Definition (SD).

1º Protótipo

                Sendo este um jogo de plataformas, estas em termos matemáticos são retângulos, equidistantes entre si, e posicionados mais para a parte inferior da tela, mas centralizados horizontalmente, com os parâmetros:

     Largura (L) = Largura da tela – 80 = 580px,

    Altura (A) = 15px,

    X = (Largura da tela – largura plataforma) / 2 = (600 - 580) /2 = 4

    Y = 100;

O X e o Y correspondem ao vértice superior esquerdo do retângulo. A coordenada X das restantes plataformas é igual à 1ª, sendo o Y incrementado em 80px em cada plataforma.

Quanto ao personagem, ele pode se mover da esquerda para a direita livremente, desde que obedeça a uma relação entre o seu X e sua largura e o X da plataforma em que está posicionado. O placeholder escolhido para substituir o Mario , foi um retângulo, com altura de 40px e largura de 20px. As coordenadas deste retângulo vão sempre variando ao longo do jogo. 

Xpersonagem ≥  Xplataforma  V  Xpersonagem + Lpersonagem ≤ Xplataforma + Lplataforma-Lpersonagem = Verdadeiro

Xpersonagem > 40 V Xpersonagem ≤ 600 = Verdadeiro;

O movimento do personagem corresponde a um Movimento Retilíneo Uniforme, com a distância percorrida de 2px a cada ciclo (60fps), o que corresponde a 120px por segundo, levando assim 4,7 segundos a percorrer a plataforma de uma ponta a outra em movimento constante. O tempo é incógnito e variável, ou seja, depende de quanto tempo determinada tecla é apertada.

Quando o objeto se desloca para a esquerda, existe um decremento, ou seja, “velocidade negativa”. As condições são as seguintes:

Move direita = Xpersonagem + tempo(s) x fps x velocidade = Xpersonagem + tempo(s) x 60 x 2px = Xpersonagem + 120px/s

Move esquerda = Xpersonagem + tempo(s) x fps x –(velocidade) = Xpersonagem – tempo(s) x 60 x 2px = Xpersonagem – 120px/s

               

2º Protótipo

Aqui pode se mover verticalmente e de forma contínua quando está subindo ou descendo escadas. Em termos matemáticos, os degraus são retângulos com 20px de largura e 2px de altura. São no total 4 escadarias, com vários degraus equidistantes entre si em intervalos de 10px. As escadarias estão posicionadas, duas mais às esquerdas, sendo os seus X de 60 e  180, e as outras duas mais à direita, com X de 440 e 560.

Condição do personagem poder subir as escadas:

Xpersonagem ∈ Xescadarias {60, 180, 440, 560}

A fórmula do movimento vertical é em tudo idêntica às dos movimentos laterais:

Move baixo = Ypersonagem + tempo(s) x fps x velocidade = 
Ypersonagem + tempo(s) x 60 x 2px = Ypersonagem + 120px/s

Move cima = Ypersonagem + tempo(s) x fps x –(velocidade) =
 Ypersonagem – tempo(s) x 60 x 2px = Ypersonagem – 120px/s

Para pode se mover lateralmente, acrescenta-se:

Ypersonagem + 40 ∈ Yplataformas {120, 200, 280, 360, 440}

3º Protótipo

No aspecto matemático importa saber quais as coordenadas onde estão os “capangas”, os quais se movem horizontalmente ao longo da plataforma, encostados nela. Como placeholder, optou-se por colocar círculos amarelos com raio (R) de 10px. O seu Y é fixo, enquanto que o seu X é variável, com a restrição das extremidades das plataformas. O X e Y do círculo corresponde ao seu centro.

Ycapangas {} = Yplataformas {120, 200, 280, 360, 440} – Rcapangas = Ycapangas {110, 190, 270, 350, 430}

                

Xcapanga = Xinimigo + 1px x 60fps

Xcapanga<=60 V X>=580) →  VelocidadeCapanga= - (VelocidadeCapanga);

                

A colisão pode ocorrer em várias direções, ou seja, por cima, por baixo, pela esquerda ou pela direita, tanto do personagem como dos capangas, mas considerando as formas usadas, suas coordenadas, tamanhos e possíveis posicionamentos relativos, a expressão usada foi a seguinte:

Xpersonagem-Xcapanga<=10 Λ Xpersonagem-Xcapanga >=-30 Λ Ypersonagem-Ycapanga<=10 Λ Ypersonagem-Ycapanga>=-50

O personagem agora tem um novo recurso, pode pular. No aspecto matemático, o pulo representa um decremento da sua posição Y durante seguido de incremento, com distância e tempo suficiente para evitar a colisão, que têm um diâmetro de 20px. 

Ypersonagem -25px,

(após 50frames) Xpersonagem + 25px.

 Modelo Computacional

A plataforma usada para a criação dos protótipos foi o Processing, com utilização essencialmente de procedimentos, considerando que se tratavam de protótipos de mecânicas, com placeholders, ou seja, com objetos pouco complexos e como o  que importava destacar neste momento eram as mecânicas do jogo, as ações e interações dos elementos, considerei que seria a abordagem mais apropriada. 

Em termos de linguagem propriamente dita e lógica computacional, esta não se revelou muito complicada, principalmente nos movimentos retilíneos uniformes, tendo sido a mais exigente, não em termos de linguagem, mas de recursos lógicos e técnica de programação a implementação do pulo, pelo que o Processing se revelou uma ferramenta adequada para a construção destes protótipos, até mesmo por questões de preferência pessoal.

1º Protótipo 

Na codificação foi criada uma variável em forma de vetor que guarda os valores Y das plataformas horizontais, sendo criado um procedimento void plataformas () que desenha as plataformas e que é repetido ciclicamente na função draw(). 

Variáveis globais: int posicaoX=100;

                   int posicaoY=400;

                   int numPlataformas = 5;

                   int [] yPlataformas =                              new int [numPlataformas];

               int velocidade = 2;

Para o movimnto optou-se pela utilização da variável keyPressed, com a utilização das teclas codificadas RIGHT e LEFT, em dois procedimentos distintos. Estes movimentos estão restritos às posições assumidas pelo personagem, que são sempre guardadas nas variáveis globais posicaoX e posicaoY.

As restrições são aplicadas à posição X do personagem, a qual é incrementada em 2px, tendo linha de código de salvaguarda, no caso de ultrapassado o limite da plataforma.

Procedimentos:      moveDireita(), com keyPressed;

                    moveEsquerda(), com keyPressed;

                    background (0);

                    plataformas ();

escadas ();

                               fill (255, 0, 0);

                               noStroke();

                               rect (posicaoX, posicaoY, 20, 40);  // Placeholder

Baixe aqui a pasta do 1º protótipo.

  

2º Protótipo:

Para o desenho das escadas, são criadas variáveis globais de quantidade de escadarias e posição X dos retângulos das escadarias em int Xescadas [], seguido de um procedimento com 1 laço de repetição de desenho dos degraus, dentro de outro laço para posicionamento X das escadarias, usando os valores do vetor Xescadas.

Variáveis globais acrescentadas:         int numEscadarias = 4;

int [] xEscadas = {60, 180, 440, 560};

int contador1, contador2;   
  

Esta mecânica é complementar à anterior, o personagem terá que se movimentar horizontalmente, para se posicionar nas escadarias, com uma tolerância de 5px, condição esta que é verificada através de um laço de repetição. Também foram criados 2 procedimentos diferentes, um para subir e outro para descer, dependentes da variável keyPressed, com o valor codificado de UP e DOWN.

Neste protótipo foi adicionado mais uma condição para os procedimentos de movimento horizontal, acrescentando-se aos argumentos do if, com o operador &&,  pois o personagem apenas poderá se movimentar horizontalmente se também estiver em determinadas coordenadas na posicaoY, sendo também criada um laço dentro do draw para verificar se o personagem está em posição vertical que lhe permita movimentar-se lateralmente.

Procedimentos acrescentados: moveBaixo(), com keyPressed;                                                                       

moveCima();  com keyPressed

escadas ();

Baixe aqui a pasta do 2º protótipo

3º Protótipo:

Este protótipo foi mais exigente em termos matemáticos no aspecto computacional. Com a inclusão do pulo e colisão, foram incluídas novas variáveis vetoriais, para os 5 inimigos, com posições e velocidades variáveis.

Para a implementação do pulo, utilizou-se variáveis booleanas, para que o personagem dê um pulo de cada vez, e uma variável inteira que servirá para a medição do tempo que dura o pulo.

Variáveis globais acrescentadas:         int [] xInimigos = {100, 200, 300, 400, 500};

int [] yInimigos = new int [numPlataformas];

int velInimigos [] = {1, 1, 1, 1, 1};

int Tempo = 5000;

boolean pulo = true;                       

boolean noAr = false;   

int tempoPulo = 50;

Foram criados procedimentos novos, um para os inimigos, que os posiciona, estabelece os seus limite de movimentos e determina a velocidade de cada um, atualizando os respectivos vetores.

Procedimento para colisão, em que posições dinâmicas são usadas para estabelecer as condições em que se verifica a colisão. Em vez de um retorno booleano, optei por um retorno void que cria uma tela com a expressão “você perdeu” em inglês, durante 3 segundo, voltando o jogo aonde estava.

O procedimento mais complexo na concepção acabou por ser o pulo, que faz com o personagem suba o suficiente para evitar a colisão, durante 50 frames, podendo durante este período de tempo também ser utilizados os procedimentos moveDireita e moveEsquerda, desde que se solte a tecla de pulo, daí a utilização das variáveis booleanas pulo e noAr.

Também foi implementado um temporizador regressivo, iniciando em 5000, no topo central da tela, com a particularidade que decresce às centenas.

Procedimentos acrescentados: inimigos ();

                                                                                                                                  colisao ();

                                                                  pular();  com keyPressed;

                                                                  Timer();

Baixe aqui a pasta do 3º protótipo

Para um documento mais explicativo do processo de construção dos protótipos, baixe aqui.