Curso de Basic
Animações na Screen 5


  As animações no MSX 2 ganham reforço de peso com as novidades apresentadas nesse sistema.
  Antes de falarmos sobre animação, vamos entender primeiro quais foram as melhorias introduzidas no MSX 2 e compará-las com o sistema anterior. Em seguida, vamos por a mão na massa, apresentando algumas animações que aproveitam os novos recursos.


  Melhorias gŕaficas no MSX 2

  Com o advento do MSX 2, novos modos de vídeo foram criados, no qual trouxeram significativas melhorias gráficas. Dentre elas, podemos destacar: pixels independentes, aumento significativo do tamanho da memória de vídeo, sistema de páginas de vídeo, paleta de cores e a cópia de áreas de vídeo de qualquer tamanho de um dada página para outra qualquer.


  Pixels independentes

  Não existe mais a limitação de duas cores a cada 8x1 pixels. Agora, cada ponto pode ter uma cor diferente. Com isso, não há mais o "borrão" da screen 2.
Pixel:     01234567
Screen 2:           - Limite de 2 cores para cada 8x1 pixels
Screen 5:           - Pixels independentes (permite um pixel de cada cor)

  Assim, temos o fim do borrão:

Screen 2 Screen 5


  Páginas de vídeo

  O MSX 1 possui apenas uma página de vídeo, onde tudo que está sendo desenhado na tela deverá estar armazenado nas limitadas tabelas de caracteres e cores. É bem verdade que parte dos gráficos podem ser armazenados em RAM para posterior cópia para a tabela de caracteres na hora da exibição. Entretanto, isto causa um trabalho extra de movimentação e organização dos dados.
  Com o aumento significativo da VRAM de 16 KB para 128 KB, agora há espaço para não mais apenas uma tela (e cheia de limitações), e sim para até quatro telas.
  Cada tela desse novo sistema é chamada de página de vídeo, onde somente uma pode ser exibida por vez. As principais vantagens do uso de páginas de vídeo são:
  Exemplo de layout das páginas de vídeo nas screens 5 e 6:

Página 0 Página 1 Página 2 Página 3


  Exemplo de layout das páginas de vídeo nas screens 7 e 8:

Página 0 Página 1

  A razão das screens 7 e 8 possuirem apenas 2 páginas é que cada tela dessas screens ocupa exatamente o dobro de memória das screens 5 e 7.

  A tela principal (que exibe a imagem) não deve ser necessáriamente a página 0, e nem as de rascunho as páginas 1, 2 e 3. Os layouts dos novos modos de tela podem ser configurados através da instrução em Basic SET PAGE.
  Este comando permite ajustar tanto uma página para a exibição, bem como qual a página de trabalho. É isso mesmo, o MSX 2 permite visualizar uma página, enquanto trabalha em outra. Ex:
10 SCREEN 5
20 SETPAGE 0,1
30 CIRCLE(128,105),50,15
40 GOTO 40
  O comando SET PAGE na linha 20 ajusta a página 0 para ser apresentada e a página 1 para ser a página de trabalho. Dessa forma, tudo o que for desenhado na tela será desenhado na página 1, como, por exemplo, o círculo da linha 30. Este círculo não será visível ao usuário, até que ele seja copiado para a tela principal ou que a tela principal seja trocada para a página 1.
  Esse comando permite, é claro, visualizar e trabalhar na mesma página, como no MSX 1. Para maiores detalhes, rever o capítulo 12, seção "Páginas de vídeo - SET PAGE".


  Cópia gráfica

  No MSX 2, podemos copiar áreas de qualquer tamanho de uma determinada região da tela para qualquer outra região de qualquer uma das páginas. Este recurso permite que utilizemos os objetos contidos nas páginas de rascunho na tela prinicipal, alem de permitir criar animações. Outra vantagem é que os desenhos não são mais formados por mosaicos, como na screen 2, e sim por uma peça inteira.
  Ex:
10 SCREEN 5
20 CIRCLE(10,10),10,15
30 COPY(0,0)-(20,20),0 TO (100,100),0
40 GOTO 40
  O comando COPY é responsável por copiar regiões da tela. Sua sintaxe pode ser vista no capítulo 12, seção "Recortando e colando áreas - COPY".
  O resultado pode ser visto a seguir:

 

  Onde o círculo do canto superior esquerdo da tela foi copiado para a região central da tela:

 

  O comando COPY possui ainda um recursos bastante interessante: a operação lógica entre as áreas de origem e destino. Para entender a importancia desse conceito, vejamos antes como as cópias são feitas na screen 2.
  Na screen 2, toda a área do objeto é copiada para a o destino, apagando o que havia ali, mesmo que seja criada uma área com pixels invisíveis (valor 0). Veja o exemplo a seguir.
05 COLOR 15,0,0
10 SCREEN 2
20 OPEN"GRP:" AS #1
30 PRESET(0,0) : ?#1,"A"
40 FOR X=8 TO 15 STEP 2
50 LINE(X,0)-(X,16),13
60 NEXT
70 VPOKE 6145,0
80 GOTO 80
  Saída:

Antes da linha 70 Depois da linha 70

  Observe que quando a letra "A" é copiada para a região onde havia as linhas rosas, elas são apagadas. Outro exemplo pode ser visto no jogo Soccer da Konami, onde as linhas do campo são apagadas pela região em torno jogador que pertencem ao mosaico do jogador.

 

  No MSX 2, podemos utilizar algumas operações lógicas entre a região de origem e destino durante a cópia. Além disso, é possível estabelecer uma área "invisível" em torno de um objeto (pixel com valor igual a 0), fazendo com que essa área seja ignorada na operação de cópia, mantendo os objetos da área de destino. Entretanto, os pixels da imagem de origem que não forem invisíveis, irão substituir os pixels correspondentes na área de destino.
  Vejamos este exemplo.
05 COLOR 15,0,0
10 SCREEN 5
20 OPEN"GRP:" AS #1
30 PRESET(0,0) : ?#1,"A"
40 FOR X=8 TO 15 STEP 2
50 LINE(X,0)-(X,16),13
60 NEXT
70 COPY(0,0)-(7,7),0 TO (8,0),0
80 GOTO 80
  O resultado é o mesmo para a screen 2, uma vez que nenhuma operação lógica foi estabelecida.
  Alterando a linha 70 para
70 COPY(0,0)-(7,7),0 TO (8,0),0,TPSET
  iremos preservar a imagem destino onde foram definidos os pontos invisíveis na imagem de origem, que no caso foram os pixels em torno da letra "A".
  Veja o resultado:

 

  As operações lógicas são descritas no capítulo 12, seção "Operações lógicas".


  Animações na screen 5

  Este estudo serve para qualquer modo de tela do MSX 2. Entretanto, vamos utilizar a screen 5 como base do aprendizado.
  Como material de apoio, vamos utilizar a seguinte imagem, que será convertida para screen 5:

 

  Ela possui:   A imagem convertida para a screen 5 pode ser baixada aqui. Ela estará na página 1, a página utilizada como rascunho pelos programas a seguir.


  Animação 1 - personagem andando na tela

  A primeira animação é simples, mas envolve alguns conceitos e cuidados importantes. O comando COPY será utilizado na movimentação.
  O primeiro passo é mover o personagem pela tela. Vamos pegar o desenho do personagem mais à esquerda da imagem, localizado na área de 0,0 a 17,25 da tela do MSX.
10 SCREEN 5
20 SET PAGE 0,1
30 BLOAD"TELA.S05",S
40 SET PAGE 0,0
50 FOR X=240 TO 0 STEP -1
60 COPY(0,0)-(17,25),1 TO (X,94),0
70 NEXT X
  Um pequeno truque foi utilizado nesse exemplo para evitar o efeito de rastro. Uma área da mesma cor da tela envolve o personagem na frente e atrás dele. Com isso, cada vez que o bloco do personagem se move, o rastro que é formado é da cor do fundo da tela.

 

  Caso não utilizássemos essa área, o rastro seria formado nas cores da última linha vertical do personagem. Assim, desconsiderando as áreas em preto em volta do personagem, teríamos o bloco localizado de 4,1 a 12,25.
10 SCREEN 5
20 SET PAGE 0,1
30 BLOAD"TELA.S05",S
40 SET PAGE 0,0
50 FOR X=240 TO 0 STEP -1
60 COPY(4,1)-(12,25),1 TO (X,94),0
70 NEXT X
  Saída:

 

  Uma alternativa para contornar o problema anterior seria desenhar uma linha preta atrás do personagem, a cada iteração do movimento. Entretanto, essa solução iria causar um "flicker", ou seja, a região do personagem onde a linha é desenhada iria ficar piscando. Observe no exemplo abaixo.
10 SCREEN 5
20 SET PAGE 0,1
30 BLOAD"TELA.S05",S
40 SET PAGE 0,0
50 FOR X=240 TO 0 STEP -1
55 LINE(X+9,94)-(X+9,117),0
60 COPY(4,1)-(12,25),1 TO (X,94),0
70 NEXT X
  Veja na ilustração abaixo que o personagem é desenhado em uma parte da tela (mais ao topo). Em seguida, ele é desenhado novamente só que um pixel à esquerda, deixando o rastro do desenho anterior (central). Por fim, uma linha é desenhada para apagar o rastro (mais embaixo).

 

  O personagem desliza sobre a tela, sem ter o efeito do andar. O próximo passo é alternar as duas primeiras imagens do personagem, de modo com que ele pareça estar andando. Para isso, vamos utilizar como base o código da primeira animação dessa seção, que é o mais apropriado.
10 SCREEN 5
20 SET PAGE 0,1
30 BLOAD"TELA.S05",S
40 SET PAGE 0,0
60 P=0
70 FOR X=240 TO 0 STEP -1
80 COPY(P,0)-(P+17,25),1 TO (X,94),0
90 FOR T=1 TO 5 : NEXT T
100 IF X MOD 4=0 THEN IF P=0 THEN P=18 ELSE P=0
110 NEXT X
  Observações:   O alinhamento do tronco do personagem.

 



  Animação 2 - personagem andando na tela com a bola

  A bola possui quatro animações. Vamos acrescentá-la a frente do jogador.
10 SCREEN 5
20 SET PAGE 0,1
30 BLOAD"TELA.S05",S
40 SET PAGE 0,0
60 P=0 : B=161
70 FOR X=240 TO 30 STEP -1
80 COPY(P,0)-(P+17,25),1 TO (X,94),0
90 COPY(B,14)-(B+9,23),1 TO (X-10,108),0
100 FOR T=1 TO 5 : NEXT T
110 IF X MOD 4=0 THEN IF P=0 THEN P=18 ELSE P=0
120 IF X MOD 4=0 THEN IF B<>206 THEN B=B+15 ELSE B=161
130 NEXT X

  Acrescentando o chute:
10 SCREEN 5
20 SET PAGE 0,1
30 BLOAD"TELA.S05",S
40 SET PAGE 0,0
60 P=0 : B=161
70 FOR X=240 TO 60 STEP -1
80 COPY(P,0)-(P+17,25),1 TO (X,94),0
90 COPY(B,14)-(B+9,23),1 TO (X-10,108),0
100 FOR T=1 TO 5 : NEXT T
110 IF X MOD 4=0 THEN IF P=0 THEN P=18 ELSE P=0
120 IF X MOD 4=0 THEN IF B<>206 THEN B=B+15 ELSE B=161
130 NEXT X
140 COPY(36,0)-(53,25),1 TO (60,94),0
150 FOR X=50 TO 0 STEP -1
160 Y = 83 + X*.5
170 COPY(160,13)-(171,25),1 TO (X,Y),0
180 NEXT X

  Observações:

  Animação 3 - double buffering

  Nessa nova animação, vamos fazer o personagem caminhar na tela, tendo o logo MarMSX ao fundo.
  O programa mais intuitivo para realizar essa tarefa seria o programa a seguir.
10 SCREEN 5
20 SET PAGE 0,1
30 BLOAD"TELA.S05",S
40 SET PAGE 0,0
45 COPY(60,0)-(150,24),1 TO (83,94),0
60 P=0
70 FOR X=240 TO 0 STEP -1
80 COPY(P,0)-(P+17,25),1 TO (X,94),0
90 FOR T=1 TO 5 : NEXT T
100 IF X MOD 4=0 THEN IF P=0 THEN P=18 ELSE P=0
110 NEXT X

  Uma vez que o personagem é copiado no destino sem nenhuma operação lógica, ao mesmo tempo que o entorno dele é da cor preta, todo o caminho dele será apagado. Assim, o logo é apagado conforme o personagem passa sobre ele.

 

  Agora, vamos tentar usar os pixels invisíveis, através da operação lógica TPSET.
10 SCREEN 5
20 SET PAGE 0,1
30 BLOAD"TELA.S05",S
40 SET PAGE 0,0
45 COPY(60,0)-(150,24),1 TO (83,94),0
60 P=0
70 FOR X=240 TO 0 STEP -1
80 COPY(P,0)-(P+17,25),1 TO (X,94),0,TPSET
90 FOR T=1 TO 5 : NEXT T
100 IF X MOD 4=0 THEN IF P=0 THEN P=18 ELSE P=0
110 NEXT X

  O resultado era esperado: o personagem deixa o rastro dele pelo caminho. Nesse caso, é ainda mais complicado apagar esse rastro, pois envolve o contorno do personagem.

 

  A solução para o problema é reconstruir o cenário e o personagem a cada iteração. Para isso, teremos que apagar o que foi feito na iteração anterior e depois reconstruir tudo.
  Não podemos apagá-lo simplesmente com um retângulo da cor preta, pois isto iria também apagar o logo quando o personagem passasse por ele. É necessário sempre apagar o personagem com o fundo de tela original daquela posição e desenhá-lo novamente por cima, utilizando o TPSET.
  Há duas alternativas para isso. A primeira é reconstruir todo o caminho do personagem a cada iteração. A segunda, e mais trabalhosa, é reconstruir somente a área do personagem.
  Vejamos a primeira solução.
10 SCREEN 5
20 SET PAGE 0,1
30 BLOAD"TELA.S05",S
40 SET PAGE 0,0
60 P=0
70 FOR X=240 TO 0 STEP -1
74 LINE(0,94)-(255,120),0,BF
75 COPY(60,0)-(150,24),1 TO (83,94),0
80 COPY(P,0)-(P+17,25),1 TO (X,94),0,TPSET
90 FOR T=1 TO 5 : NEXT T
100 IF X MOD 4=0 THEN IF P=0 THEN P=18 ELSE P=0
110 NEXT X
  Conseguimos! O personagem passa pelo logo sem apagá-lo. Entretanto, essa solução causa um efeito de flicker (pisca a imagem).
  Quanto maior o tamanho do bloco de imagem copiado, maior o tempo gasto na operação. Para um processador como o Z80, apagar uma região grande e copiar o logo inteiro causa um retardo significativo na animação.

  A segunda solução esbarra em um problema: a reconstrução do fundo. Devemos lembrar que o cenário completo do caminho foi construído ao longo do programa, e assim, não temos uma referência na área de rascunho para reconstruí-lo através do comando de cópia. No caso anterior, sempre reconstruimos o fundo todo, a cada iteração. Mas não é isso que desejamos agora.
  Mais adiante veremos como solucionar o problema do caminho completo. Por ora, vamos fazer com que o personagem passe somente pelo logo, no qual temos o objeto já pronto para a cópia.
10 SCREEN 5
20 SET PAGE 0,1
30 BLOAD"TELA.S05",S
40 SET PAGE 0,0
45 COPY(60,0)-(150,24),1 TO (83,94),0
60 P=0
70 FOR X=160 TO 80 STEP -1
74 K = X-22
75 COPY(K,0)-(K+17,24),1 TO (X+1,94),0
80 COPY(P,0)-(P+17,25),1 TO (X,94),0,TPSET
90 FOR T=1 TO 5 : NEXT T
100 IF X MOD 4=0 THEN IF P=0 THEN P=18 ELSE P=0
110 NEXT X
  o resultado é o mesmo que o anterior, porém com a animação mais rápida.

 

  Então, como resolver o problema do personagem piscando na tela? Simples! Utilizando o conceito de página de rascunho, descrito no inicio desse capítulo.
  A idéia é formar toda a imagem na página 1 (rascunho) e depois copiar o resultado pronto para a tela principal (página 0). Essa técnica, muito utilizada nos PCs, é chamada de double buffering.
10 SCREEN 5
20 SET PAGE 0,1
30 BLOAD"TELA.S05",S
40 SET PAGE 0,0
45 COPY(60,0)-(150,24),1 TO (83,94),0
60 P=0
70 FOR X=160 TO 80 STEP -1
74 K = X-23
75 COPY(K,0)-(K+18,24),1 TO (X,94),1
80 COPY(P,0)-(P+17,25),1 TO (X,94),1,TPSET
85 COPY(X,94)-(X+18,119),1 TO (X,94),0
90 FOR T=1 TO 5 : NEXT T
100 IF X MOD 4=0 THEN IF P=0 THEN P=18 ELSE P=0
110 NEXT X
  Agora sim. O personagem passa pelo logo sem apagar ele e tampouco piscar.
  As linhas 75 e 80 atualizam a posição do personagem na página 1. A linha 85 copia o resultado final para a página 0 (principal). O que o usuário vê é somente o resultado final.
  A imagem a seguir ilustra o que foi feito aqui.

 

  Obs: a área de fundo utilizada para apagar o personagem foi aumentada em relação à solução anterior. Agora consideramos a posição atual e anterior (18 pixels em vez de 17, por 25). Isto porque a cópia final (página 1 para 0) deve ser bruta, ou seja, sem operação lógica. Se fosse aplicado o TPSET, causaria um rastro. Além disso, caso não considerássemos a nova linha da iteração corrente, ela seria preta e apareceria no resultado final (veja ilustração abaixo).

 

  Agora, vamos fazer o personagem andar pela tela toda. Para isso, há dois momentos: o primeiro, quando ele passa pelo fundo preto, e o segundo, quando ele passa pelo logo.
  Quando ele passar pelo fundo preto, basta copiá-lo sem operação lógica, que ele apaga o desenho anterior. Quando passar pelo logo, utilizamos a solução apresentada. O problema é quando houver a transição do logo para o fundo preto, pois sempre que ele passar pelo logo, deverá copiá-lo para o fundo. A solução é adicionar margens pretas nas laterais do logo, mas conforme podemos observar na área de rascunho, não há espaço para isso. Para contornar esse problema, basta copiá-lo para outra área da página 1, de modo que possam ser adicionadas as margens. Esse logo passaria a ser o logo de referência.
45 COPY(60,0)-(150,24),1 TO (18,30),1
46 COPY(0,30)-(126,54),1 TO (65,94),0

  O programa que faz a animação completa é apresentado a seguir.
10 SCREEN 5
20 SET PAGE 0,1
30 BLOAD"TELA.S05",S
40 SET PAGE 0,0
50 COPY(60,0)-(150,24),1 TO (18,30),1
60 COPY(0,30)-(126,54),1 TO (65,94),0
70 P=0
80 FOR X=240 TO 0 STEP -1
90 IF X>=67 AND X<=175 THEN GOSUB 200 ELSE GOSUB 300
100 NEXT X
110 END
200 ' Animação logo
210 K = X-65
220 COPY(K,30)-(K+18,54),1 TO (X,94),1
230 COPY(P,0)-(P+17,25),1 TO (X,94),1,TPSET
240 COPY(X,94)-(X+18,119),1 TO (X,94),0
260 IF X MOD 4=0 THEN IF P=0 THEN P=18 ELSE P=0
270 RETURN
300 ' Animação fundo preto
310 COPY(P,0)-(P+17,25),1 TO (X,94),1
320 COPY(X,94)-(X+17,119),1 TO (X,94),0
330 FOR T=1 TO 5 : NEXT T
340 IF X MOD 4=0 THEN IF P=0 THEN P=18 ELSE P=0
350 RETURN

  Obs: foi retirado o retardo de tempo da animação do logo para acelerar a animação, e colocado na animação do fundo preto (linha 330), de modo que deixe as animações com a mesma velocidade. Se a linha 330 for comentada, ficará visível a diferença de tempo entre as duas animações.


MARMSX/CURSOS/Basic