Curso de Basic
Animações na Screen 5
Você está em: MarMSX >> Cursos >> BASIC
As animações no MSX 2 melhoraram sensivelmente graças às novidades apresentadas nesse sistema.
Antes de falarmos sobre animação, vamos entender primeiro quais foram as melhorias introduzidas no MSX 2. 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.
No exemplo a seguir, um trecho de 8x1 pixels da screen 5 é comparado com o mesmo trecho 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 tela de vídeo, onde tudo que está sendo desenhado na tela deverá estar armazenado nas 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, mas a transferência de dados entre a RAM e VRAM é mais lenta que da VRAM para VRAM.
Com o aumento significativo da capacidade de armazenamento da VRAM de 16 KB para 128 KB, agora há espaço não mais para armazenar apenas uma tela, mas sim para até quatro telas de vídeo.
As principais vantagens do uso de várias telas são:
- Possibilidade de esconder o processamento gráfico do usuário, que são feitos em telas ocultas (aŕea de rascunho).
- Armazenar objetos que serão utilizados na confecção de uma tela.
- Maior velocidade de processamento em comparação ao uso da RAM.
Cada tela desse novo sistema é chamada de página de vídeo, onde somente uma pode ser exibida por vez.
Exemplo de layout das páginas de vídeo nas screens 5 e 6, onde a página exibida é a 0 e as demais páginas são utilizadas como rascunho:
|
|
|
|
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, onde a página exibida é a 0 e a página 1 é utilizada como rascunho:
|
|
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 (ou uso). É isso mesmo, o MSX 2 permite visualizar uma página, enquanto trabalha em outra.
Veja o exemplo a seguir.
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 visualizada e a página 1 para ser a página de trabalho (uso). Dessa forma, as intruções gráficas executadas a partir desse momento irão desenhar na página em uso (página 1), como, por exemplo, o círculo da linha 30.
Uma vez que a página 1 é a página em uso, mas não é a página visível (página 0), o círculo desenhado não será visível até que a área dele seja copiada para a página 0 ou que a página visível seja trocada para a página 1.
Esse comando permite, é claro, visualizar e trabalhar na mesma página. 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 de blocos de 8x8 pixels, como na screen 2, e sim por uma área inteira de n x m pixels.
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".
Veja a seguir o exemplo de uma cópia de região de vídeo, onde o círculo do canto superior esquerdo da tela foi copiado para a região central da tela.
A ilustração a seguir destaca as duas regiões envolvidas na cópia: a região de origem, delimitada pelas coordenadas (Xi,Yi)-(Xf,Yf), e a região de destino, começando em (Xd,Yd) e tendo OBRIGATORIAMENTE as mesmas dimensões da região de origem.
O comando COPY possui ainda um recurso 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 região de destino, sobrescrevendo todos pixels dessa região. 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, na qual fazem parte do conjunto blocos de 8x8 que compõe o desenho.
No MSX 2, em uma cópia de área de vídeo, podemos utilizar algumas operações lógicas entre a região de origem e destino, que irão decidir o que fazer com os pixels de destino. São elas: AND, OR, XOR, PSET e PRESET.
Além disso, é possível utilizar o recurso de transparência (pixels com valor igual a 0), onde somente os pixels da área de origem NÃO transparentes são utilizados na cópia.
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 desse programa é o mesmo para o exemplo da screen 2, uma vez que a operação lógica default PSET é utilizada.
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 de transparência 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:
- O jogador da abertura do jogo Soccer em três posições de movimento
- O logotipo "MarMSX"
- A bola em quatro posições de movimento
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 de 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 deslocado 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.
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:
- Ambas as figuras possuem 17x25 pixels, preservando a área em preto em torno do personagem.
- Os troncos do personagem estão alinhados nas duas imagens, evitando deslocamento desses entre as animações.
- A linha 90 controla a velocidade da animação.
- A linha 100 troca a imagem do personagem a a cada 4 pixels, evitando uma passada rápida. A variável P modifica a coordenada X do objeto de origem, escolhedo um dos objetos.
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:
- A imagem da bola é trocada também de 4 em 4 pixels.
- O movimento do conjunto se dá até a coluna 60 (linhas 70-130).
- Quando o jogador atinge a posição 60, começa a animação do chute.
- O primeiro passo é desenhar o jogador na posição de chute (imagem 3).
- Depois, a bola é movimentada em diagonal.
Animação 3 - double buffering
Nessa nova animação, vamos fazer o personagem caminhar na tela tendo como fundo o logo do MarMSX.
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 diretamente no destino, e tendo ele o entorno da cor preta, todo o caminho percorrido por ele será apagado.
Agora, vamos tentar usar os pixels transparentes 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
Nessa nova solução, o personagem deixa o rastro dele pelo caminho.
Entretanto, é ainda mais complicado apagar esse rastro, pois envolve o contorno e buracos do personagem (destacado em verde na próxima figura).
Outra alternativa seria utilizar um retângulo na cor preta para apagar o personagem a cada iteração. Entretanto, isto apagaria também o fundo. Uma vez que somente o personagem é reconstruido a cada iteração, o fundo seria "perdido".
A solução para o problema é apagar o que foi feito e reconstruir o cenário completo a cada iteração.
Há duas alternativas para isso. A primeira é reconstruir todo o caminho do personagem a cada iteração, que é computacionalmente mais custoso. A segunda, seria reconstruir somente a área em que o personagem está sobre.
Na primera solução, em cada iteração toda a trajetória do personagem é apagada com um retângulo preto, o logo é novamente desenhado na mesma posição e o personagem na nova posiçã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, quanto maior a região de imagem copiada, maior o tempo gasto nessa operação.
Na segunda solução, iremos copiar somente a área de fundo em que o personagem está sobre, de forma a apagá-lo e depois copiar o personagem na nova posição.
Para as regiões onde não há o logo, outra estratégia deverá ser adotada. 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.
Nas duas soluções apresentadas, a animação possui o efeito de flicker (pisca a imagem), uma vez que toda a reconstrução é feita na página visível.
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 o processamento, 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.