6 Parte: Grficos no Qbasic

Finalmente grficos! Nesta parte iremos estudar as principais rotinas grficas utilizando o Qbasic. No FreeBasic temos algumas alteraes e estas sero tratadas mais adiante. Comandos estudados at agora: Parte 1
- REM - CLS - PRINT - INPUT - LOCATE - END

Parte 2
- COLOR - SLEEP - UCASE$ - LCASE$ - LEN - LEFT$ - RIGHT$ - MID$ - LTRIM$ - RTRIM$ - SPACE$ - STR$ - VAL - ASC - CHR$

Parte 3
- TIME - DATE$ - TIMER - IF / THEN - IF / THEN / ELSE - IF / THEN / ELSEIF -SELECT CASE - GOTO -PRINT SPC(N) -PRINT USING - LINE INPUT - INKEY$

Parte 4
- DO / LOOP - EXIT - WHILE / WEND - FOR / NEXT

Parte 5
- GOSUB / RETURN - SUB / END SUB - FUNCTION / END FUNCTION - DEF FN - SCREEN (grficos)

Para que as primitivas grficas funcionem deve-se executar o programa no modo grfico, o que feito utilizando o comando SCREEN. Qualquer dvida, d uma olhada na 5 parte para rever as principais janelas grficas disponveis. Os exemplos ilustrados aqui sero executados em SCREEN 9 ou SCREEN 12. Mas sinta-se a vontade para utilizar o screen que desejar. PSET :: Esta funo desenha um ponto na tela em mdia ou alta resoluo. Sintaxe: PSET (coordenada X, coordenada Y), cor Observao: A coordenada X corresponde as colunas. As coordenadas Y correspondem as linhas. A cor a cor que o ponto ser exibido. Caso seja omitido ele ser impresso com a cor corrente do foreground (ou seja, cor da frente ou da fonte). Ex:
SCREEN 12 DIM t AS INTEGER DIM x, y AS SINGLE FOR t = 1 TO 640: y = .1 * t ^ 2: x = 9 * t: PSET (x, y), 3: NEXT t ' tempo ' funo horria do MUV (ajustado ao programa) ' funo horria do MU ' imprime a posio do projtil para cada t

Observaes: 1] O sistema de coordenadas do vdeo diferente do sistemas que estamos acostumados. Geralmente imprimimos grficos ou pontos num sistema carteziano ortogonal tomando a origem (posio 0,0) como 42

estando no canto inferior esquerdo. Mas no Qbasic, assim como em outros compiladores, a origem do sistema de coordenadas encontra-se no canto superior esquerdo. Cuidado para no confundir isto! Veja os screenshots abaixo:

2] Podemos imprimir pontos por referncia, ou seja, em relao a um ponto j desenhado. Para isto utilizamos o termo STEP depois do PSET. STEP significa passo, o mesmo que dizer: ande tantos passos em relao ao ponto original. Ex1: PSET STEP (5,-5) Desenha um ponto 5 colunas direita e 5 linhas acima do ponto ativado. A esse tipo de representao d-se o nome de representao relativa. Ex2:
SCREEN 12 PSET (320, 240), 7: 'desenha um ponto no centro do vdeo

' vamos desenhar um ponto a 10 pixels a esquerda do ponto original na cor vermelha PSET STEP(-10, 0), 4 ' vamos desenhar um ponto a 30 pixels acima do ponto anterior na cor amarelo PSET STEP(0, -30), 14 '////////// Observacao //////////// 'Note que o segundo PSET foi relativo ao ltimo PSET e no ao primeiro End

3] Quase todas as primitivas tero opes de cor. Abaixo segue o nmero das cores disponveis para o parmetro cor (para alguns screens, veja tabela do tutorial 6). Nmero Cor

43

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Preto Azul Verde Azul-ciano Vermelho Magenta Marrom Branco Cinza Azul brilhante Verde brilhante Ciano claro Vermelho brilhante Magenta brilhante Amarelo Branco (alta intensidade)

Vale uma ressalva aqui. No comando COLOR, se voc somar 16 a qualquer cor da tabela acima para a cor da fonte, a fonte ser exibida na cor escolhida s que piscando ( o que chamamos de cor intermitente). 4] O comando PRESET (X,Y), COR similar a PSET. A diferena que se nenhuma cor for especificada para PRESET, a cor de fundo 0 (zero) selecionada. Assim, PRESET (X,Y) vai desenhar um ponto sobre o screen (vdeo) na cor zero (0). No difcil perceber que PSET (X,Y),0 idntico a PRESET (X,Y). LINE :: Esta instruo permite desenhar linhas, retngulos vazios ou preenchidos. Sintaxe: LINE (X1,Y1) (X2,Y2) [, COR, [B|BF], [ESTILO]] Onde: - (X1,Y1) :: coordenadas do primeiro ponto da linha. Lembre-se X1 (coluna 1) e Y1 (linha 1). - (X2,Y2) :: coordenadas do ltimo ponto da linha. - COR :: cor da linha (veja a tabela) - B|BF :: se o parmetro for B ir desenhar um retngulo vazio e se BF ir desenhar um retngulo preenchido na cor escolhida. - ESTILO :: estilo da linha. Ex:
SCREEN 12 CLS LOCATE 29, 1: PRINT "Desenha uma linha da posicao 2,2 at 100,100"; COLOR 2: LOCATE 30, 1: PRINT "Tecle algo"; : COLOR 15 LINE (2, 2)-(100, 100), 4 SLEEP

44

GOSUB limpacampo LOCATE 29, 1: PRINT "Desenha uma linha da posicao 340,220 at 680,220"; COLOR 2: LOCATE 30, 1: PRINT "Tecle algo"; : COLOR 15 LINE (340, 220)-(680, 220), 14 SLEEP GOSUB limpacampo LOCATE 29, 1: PRINT "Desenha um quadrado incio posicao 2,2 e trmino 100,100"; COLOR 2: LOCATE 30, 1: PRINT "Tecle algo"; : COLOR 15 LINE (2, 2)-(100, 100), 2, B SLEEP GOSUB limpacampo LOCATE 29, 1: PRINT "Desenha um quadrado preenchido"; COLOR 2: LOCATE 30, 1: PRINT "Tecle algo"; : COLOR 15 LINE (101, 101)-(200, 200), 6, BF SLEEP GOSUB limpacampo LOCATE 29, 1: PRINT "Finalmente, desenha uma linha com estilo..."; COLOR 2: LOCATE 30, 1: PRINT "Tecle algo"; : COLOR 15 LINE (201, 201)-(300, 100), , , &HF00F SLEEP GOSUB limpacampo END limpacampo: LOCATE 29, 1: PRINT SPC(70); LOCATE 30, 1: PRINT SPC(70); RETURN

Observaes: 1] possvel desenhar linhas por referncia, ou seja, o ponto inicial da linha comear a ser traado a partir do ultimo ponto da linha anterior. Isto muito til pois permite a criao de curvas, a impresso de grficos, etc. Sintaxe: LINE (X2,Y2), COR Ex: Eis uma modificao do primeiro exemplo que imprime pontos (PSET)
SCREEN 12 DIM t AS INTEGER DIM x, y AS SINGLE PSET (0, 0), 3: FOR t = 1 TO 640: y = .1 * t ^ 2: x = 9 * t: LINE -(x, y), 3: ' coloca a referncia na posicao 0,0 ' tempo ' funo horria do MUV (ajustado ao programa) ' funo horria do MU ' imprime uma linha aps a outra, desenhando a trajetria do projtil

45

NEXT t

Outra maneira seria, ao invs de escrever LINE (X2,Y2), COR escrever LINE STEP(0,0)-(X2,Y2), COR. 2] O estilo da linha um parmetro que deve ser passado ao comando em hexadecimal. O Qbasic reconhece os valores hexadecimais atravs do prefixo &H. Abaixo segue alguns estilos. Cdigo hexadecimal &HF00F &HF0F0 &H8888 &HAAAA &HFAFA &H1111 Estilo Traado com linhas extendidas Traado com linhas curtas Pontilhado espaado Pontilhado Traado + pontilhado Pontilhado mdio

Ex:
SCREEN 12 LINE (0,0)-(400,400),,, &HF00F: // Mude os cdigos para ver os efeitos

Para o formato da linha exibido no display, ou simplesmente o estilo da linha, possvel criar diferentes estilos obtendo, desta forma, uma reta totalmente personalizada. O estilo feito de um conjunto de 16 bits, onde o bit 1 significa ligado (pixel aceso) e o bit 0 significa desligado (pixel apagado). Veja a ilustrao abaixo:

A palavra acima (conjunto de bits) equivalem em hexadecimal a AAAA, pois A = 1010. Agora ficou fcil! Basta criar a sua combinao de bits, passar a palavra para hexadecimal e pronto! Est criado o estilo. Veja: 1100110011001100 __ __ __ __ __ (&HCCCC) 1110111011101110 ___ ___ ___ ___ (&HEEEE) 1111100011111000 _____ _____ (&HF8F8) 1111111100000000 ________ (&HFF00) 3] possvel desenhar linhas tomando um ponto como referncia, ou seja, a partir de coordenadas iniciais traar retas relativas a esta coordenadas. semelhante ao que fizemos ao imprimir pontos utilizando coordenadas relativas.

46

Vejamos como isto feito: LINE (100,100) STEP(50, - 30) // O comando acima vai desenhar uma linha de (100,100) at (150, 70) LINE (100,100)-STEP(-50,-50) // O comando acima vai desenhar uma linha de (100,100) at (50,50) LINE (340,220)-STEP(100,100),4,B,&HF0F0 // Este comando ir desenhar uma caixa vazia, com bordas traadas na cor vermelha cuja as coordenadas do canto superior direito so 340,220 e as do canto inferior esquerdo esto a 100 pixels mais abaixo e 100 pixels mais a direita, ou seja, na coordenada 440, 320. Abaixo segue a listagem de um exemplo interessante utilizando linhas! Ao rodar, o programa ir transformar seu vdeo num radar multicolorido.
SCREEN 12 cor = 1 DO FOR n = 0 TO 679 STEP .1 LINE (340, 220)-(n - 1, 0), 0 LINE (340, 220)-(n, 0), cor NEXT n FOR n = 0 TO 439 STEP .1 LINE (340, 220)-(680, n - 1), 0 LINE (340, 220)-(680, n), cor NEXT n FOR n = 679 TO 0 STEP -.1 LINE (340, 220)-(n + 1, 440), 0 LINE (340, 220)-(n, 440), cor NEXT n FOR n = 439 TO 0 STEP -.1 LINE (340, 220)-(0, n + 1), 0 LINE (340, 220)-(0, n), cor NEXT n cor = cor + 1 IF cor = 15 THEN cor = 1 LOOP UNTIL INKEY$ <> "" END

Alguns exemplos do uso do comando LINE podem ser baixados na pgina criada especificamente para estes tutoriais (visite http://ddj.orgfree.com). CIRCLE :: Desenha crculos, arcos, pizzas e elipses. Sintaxe: CIRCLE (X,Y), raio [,cor [,inicio, fim [, aspecto]]]

47

Onde: - (X,Y) :: coordenadas do centro do crculo - raio :: raio do crculo em pixels - cor :: cor do crculo (veja tabela acima) - incio e fim :: correspondem ao ngulo inicial e final para o desenho de arcos. Devem ser especificados em radianos. - aspecto :: aspecto do crculo. Dependendo do valor ( >1 ou <1), teremos um crculo achatado, ou seja, uma elipse. Ex: CLS
SCREEN 12 pi = 3.141593 CIRCLE (340, 220), 100 CIRCLE (340, 220), 100, , , , 5 / 18 CIRCLE (340, 220), 95, 2, 1.2 * pi, 1.7 * pi CIRCLE (340, 220), 105, 3, -1.3 * pi, -1.7 * pi

Observaes: 1] No segundo CIRCLE do exemplo acima, podemos notar uma srie de virgulas sem parmetros. Isto significa que foram ignorados. Repare que todos os parmetros que, na sintaxe, esto entre colchetes, podem ser ignorados. Para fazer isto, basta no digitar nada entre as vrgulas. Neste caso, o programador desejou mudar o aspecto do circulo mas no quis mexer nas configuraes default da cor, incio e fim, assim omitiu estes parmetros no colocando nada entre as virgulas correspondentes a estes parmetros. 2] Ainda no segundo CIRCLE temos um valor para o aspect ratio, ou aspecto. Se o aspecto for omitido, ser desenhado um circulo normal, agora, se o aspecto for diferente de 1 (que o valor default), ento teremos uma esfera achatada, ou seja, uma elipse. Um valor para aspecto menor que 1 ir achatar a esfera verticalmente, isto , ela ficar alongada na direo X. Se aspecto for maior que 1, a esfera ficar achatada horizontalmente e alongada na direo Y. Ex:
CIRCLE (340,220), 100 CIRCLE (340,200), 100, 2, , , 1.5 CIRCLE (340,200), 100, 4, , , 0.5 : uma elipse alongada na direo Y : uma epipse alongada na direo X

3] No terceiro crculo, temos um valor para incio e fim. Estes valores determinam a faixa do arco que ser desenhado. Note que eles foram dados em radianos. Se voc no recorda a definio de radiano, sugiro procurar um livro de matemtica bsica. Para facilitar, veja o screenshot abaixo.

48

Valores positivos para incio e fim iro desenhar um arco. Valores negativos para incio e fim ir desenhar um arco com linhas ligadas ao centro do crculo, como uma fatia de pizza! Ex:
Cls SCREEN 12 DIM I AS SINGLE FOR I=0 TO 1 STEP .1 CIRCLE (340,220), 100, , , , I NEXT I END

PAINT :: Pinta uma rea fechada por pixels bastando identificar um ponto dessa rea, a cor desejada e o limite da rea. Sintaxe: PAINT (X,Y), COR, BORDA Onde: (X,Y) :: ponto dentro da rea fechada por um conjunto de pixels. COR :: cor da tinta. BORDA :: cor da borda da figura (cor do limite) Ex:

49

SCREEN 13 CIRCLE (100, 100), 20, 4 PAINT (100, 100), 2, 4 LINE (200, 50)-(250, 150), 7, b CIRCLE (200, 100), 40, 7 PAINT (201, 51), 8, 7 PAINT (201, 100), 9, 7 PAINT (199, 100), 1, 7

Observaes: 1] A cor da borda do comando PAINT deve ser a mesma cor do contorno da figura que deseja pintar. Se voc especificar uma cor de borda diferente o PAINT ir ignorar a borda da figura e passar a tinta sobre todo o desenho. 2] O parmetro COR pode ser substitudo por uma string contendo valores hexadecimais correspondendo a uma mascara de pintura. A expresso string deve ter no mximo 64 bytes. Isto permite criar TILES com belos efeitos. A combinao de bytes ir gerar um estilo especfico de pintura.

Vejamos como isso feito: Desejamos criar uma mascara para pintura de um TILE com apenas 3 bytes tendo a seguinte combinao de cdigo: Byte Byte Byte 0 1 0 1 0 1 1 1 1 0 0 1 0 1 1 0 1 1 1 0 1 0 1 1 1 0 0 CHR$(&HC5) CHR$(&H5A) CHR$(&H7E)

Aqui criamos uma mscara com apenas trs bytes, mas lembre-se, uma mscara pode ter no mximo 64 bytes. O cdigo acima escrito traduzido para o Qbasic da seguinte maneira: String$ = CHR$(&HC5) + CHR$(&H5A) + CHR$(&H7E) Agora, no lugar do parmetro COR, basta substituir pela String$. Ex:
SCREEN 12 '// Desenha dois circulos com bordas na cor 1 (sera a cor limite para o paint) CIRCLE (340, 200), 100, 1 CIRCLE (340, 200), 150, 1

50

'// cria as duas strings que serao as mascaras de pintura '// uma com 3 bytes e outra com 4 bytes. '// sinta-se a vontade para mudar os parmetros ou adicionar bytes '// para ver os efeitos gerados tile1$ = CHR$(&HFF) + CHR$(&HF0) + CHR$(&HAA) tile2$ = CHR$(&H11) + CHR$(&H33) + CHR$(&HFF) + CHR$(&H56) '// pinta as reas desejadas (note que o limite a cor 1) PAINT (340, 200), tile1$, 1 PAINT (380, 340), tile2$, 1 End

Modifique o exemplo acima quantas vezes for necessrio at pegar a jeito de criar as mscaras do jeito que desejar. Se tiver pacincia, crie uma com 64 bytes! Novamente deve ficar claro que a cor limite muito importante, caso contrrio, o PAINT ir cobrir completamente sua figura. DRAW :: Este comando desenha um objeto que foi previamente especificado por uma string. Sintaxe: DRAW string O comando DRAW permite a construo de figuras que uma vez definidas dispensam sua elaborao ponto a ponto cada vez que forem usadas. A string contem uma srie de parmetros que dizem como os pontos sero exibidos criando desta forma uma figura. Esses parmetros esto listados abaixo:

Un Dn Ln Rn En Fn Gn Hn

:: :: :: :: :: :: :: ::

norte n pontos sul n pontos oeste n pontos leste n pontos diagonal norte-leste (nordeste) n pontos diagonal sul-leste (sudeste) n pontos diagonal sul-oeste (sudoeste) n ponto diagonal norte-oeste (noroeste) n pontos

51

O movimento comea a partir do ltimo ponto referenciado. Ex1:

CLS SCREEN 12 PSET (100, 100), 2 DRAW "d50 r50 u50 l50 d50" PSET (340, 220), 4 DRAW "g40 r80 h40"

:// Ajusta o ponto inicial e define qual ser a cor da figura :// desenha um retngulo verde :// Define o ponto inicial da construo da nova figura :// Desenha um tringulo vermelho

Muitas vezes queremos desenhar a mesma figura diversas vezes. Neste caso basta atribuirmos a sequncia a uma string, assim o cdigo fica mais limpo e fcil de entender. Vejamos: Ex2:
CLS SCREEN 12 q$ = "d50 r50 u50 l50 d50" t$ = "g40 r80 h40" FOR i = 20 TO 600 STEP 50 PSET (i, 4), 2 DRAW q$ PSET (i, 404), 2 DRAW q$ NEXT i FOR i = 54 TO 400 STEP 50 PSET (20, i), 2 DRAW q$ PSET (570, i), 2 DRAW q$ NEXT i PSET (340, 220), 4 DRAW "g40 r80 h40" END

Rode o exemplo acima e tente desvendar o cdigo! No difcil. Os parmetros do comando DRAW podem ser classificados em MOVER E DESENHAR, PREFIXOS e AES. A tabela abaixo abrange todos eles: Comando MOVER DESENHAR Formato comando E M x, y M +x, +y doEfeito Parmetros

Para um ponto especfico (x,y) x, y = coordenadas absolutas Para um ponto especfico (X + x,X, Y = ltimo ponto referenciado Y + y)

52

Un Dn Rn Ln En Fn Gn Hn

n linhas Move para cima n linhas Move para baixo n colunas Move para direita n colunas Move para esquerda n = distncia diagonal Diagonal p/ cima e p/ direita n = distncia diagonal Diagonal p/ baixo e p/ direita n = distncia diagonal Diagonal p/ baixo e p/ esquerda n = distncia diagonal Diagonal p/ cima e p/ esquerda eMove sem desenhar Desenha linha do ponto corrente eao ponto inicial Gira todos os pontosn = ngulo de rotao subsequentes no sentido anti-0 = 0 1=90 2= 180 3=270 horrio. n = ngulo de rotao Gira de um ngulo n -360 n 360 n > 0 sentido horrio n < 0 sentido anti-horrio n = fator de escala Escala distncias subsequentes 1 n 255 n = 0 ou 1 (modo 640x200) Seleciona a cor de uma dadan = 0, 1, 2 ou 3 (modo 320x200) paleta tinta = cor da tinta limite = cor do limite Pinta uma dada rea varivel = string que contem outros subcomandos Executa subcomandos de uma string

PREFIXOS

AES

B [mover desenhar] N [mover desenhar] An

TA n

Sn

Cn

P tinta, limite

X varivel

Para que possamos entender perfeitamente como se processa estes comandos, segue alguns exemplos. Ex1:
SCREEN 12 '// Desenha uma caixa box$ = "u20 r28 d20 l28" '// define a cor e move o incio da construo da caixa para o ponto (340,220)

53

draw "c14; m340,220" '// desenha a caixa draw box$ '// tecle algo sleep '// define uma nova cor e move, em relao ao ponto (340,220), para (370,250) draw "c2; m+30,+30" draw box$ sleep

Observao: Ambos os movimentos com o comando M so feitos sem referncia a qualquer prefixo, logo uma linha ser desenhada do ponto inicial at o ponto referenciado. Veja o screenshot abaixo.

Experimente colocar o prefixo B antes dos comando Mx,y. As linhas no sero desenhadas. Veja...

54

Ex2:
SCREEN 12 '// Desenha uma caixa box$ = "u70 r78 d70 l78" '// define a cor e move o incio da construo da caixa para o ponto (340,220) DRAW "c14; bm340,220" '// desenha a caixa DRAW box$ FOR i = 1 TO 360 STEP 10 DRAW "ta" + STR$(i) DRAW box$ NEXT i SLEEP

55

Ex3:
SCREEN 12 '// Desenha uma caixa box$ = "u70 r78 d70 l78" '// define a cor e move o incio da construo da caixa para o ponto (340,220) DRAW "c14; bm340,220" '// desenha a caixa DRAW box$ DRAW "bm-150,150; s7" DRAW box$ SLEEP

56

Explore estes comandos a exausto pois, provavelmente, precisar dele na implementaes de rotinas grficas mais elaboradas.

WINDOW :: Permite a redefinio das coordenadas do vdeo (screen). Sintaxe: WINDOW [[SCREEN] (X1,Y1)-(X2,Y2)] Onde: SCREEN :: Parmetro opcional. Se referenciado, mantm as coordenadas iniciais no canto superior esquerdo da janela. (X1,Y1) :: Coordenadas do canto superior esquerdo da janela (X2,Y2) :: Coordenadas do canto inferior direito da janela. O WINDOW ir nos permitir desenhar objetos num novo sistema de coordenadas espaciais (sistema de coordenadas globais) que no apresenta limite lgico do sistema de coordenadas do screen (sistema de coordenadas fsico). Os grficos so re-escalados para o novo sistema de coordenadas quando o comando referenciado.

57

Sem o comando WINDOW o screen do PC configurado de tal maneira que o canto superior esquerdo corresponde a origem do sistema de coordenadas, ou seja, o ponto (0,0). Sendo o canto inferior direito as coordenadas da resoluo mxima que est sendo usada (RESXMAX, RESYMAX). Veja o exemplo abaixo: Ex1:
screen 12 window (-10,-10)-(10,10) :// Agora a janela inicia com o canto inferior esquerdo como (-10,-10) e superior direito como (10,10). A coordenada (0,0) line (0,0)-(10,10),1 :// est no centro do vdeo. Repare o comando line. sleep

Ex2:
screen 12 window screen (-10,-10)-(10,10) :// se for referenciado o parmetro opcional SCREEN ento as coordenadas iniciais, no caso, (-10,-10) estar line (0,0)-(10,10),1 // no canto superior esquerdo e as coordenadas (10,10) no canto inferior direito. Veja como ficou o line agora! sleep

58

O WINDOW bastante til na construo de programas que devem exibir grficos com funes matemticas, por exemplo. Ex3:
SCREEN 12 pi = 3.1415 DIM x, y AS SINGLE WINDOW (-10!, -10!)-(10!, 10!) LINE (-10, 0)-(10, 0), 14, , &HF0F0 LINE (0, -10)-(0, 10), 14, , &HF0F0 PSET (-10, 2 * SIN(-10)), 2 FOR x = -10! TO 10! STEP .1 y = 2 * SIN(x) LINE -(x, y), 2 NEXT x SLEEP

Alm disso, o WINDOW, nos d a liberdade de fazermos um ZOOM ou PAN (mover) imagens sobre o screen, bastando que se mude as coordenadas da janela. Se aumentarmos os valores dos corners a imagem

59

parecer menor, se diminuirmos, ela ficar maior. Se mudarmos as coordenadas dos cantos igualmente, iremos criar um efeito de movimento da figura. Deixarei esta implementao para o leitor como treino.

VIEW :: Este comando permite criar portas de visualizao na janela. Sintaxe: VIEW [[SCREEN] [(X1,Y1)-(X2,Y2)[,COR][,BORDA]]]] ] Onde: - SCREEN :: opcional. Se for referenciado os pontos sero absolutos e podem estar dentro ou fora do limite da janela. - (X1,Y1) :: coordenadas do canto superior esquerdo da janela. - (X2,Y2) :: coordenadas do canto inferior direito da janela. - COR :: cor de preenchimento da janela - BORDA :: cor da borda da janela O comando VIEW ir escalar os objetos dependendo do tamanho das viewports (portas de visualizao). As coordenadas das janelas de visualizao so determinadas pelo ltimo comando WINDOW executado, desta forma, os objetos so escalados e exibidos nas viewports. Execute o exemplo abaixo: Ex:
SCREEN 12 WINDOW (0, 0)-(1000, 1000) LOCATE 2, 2: PRINT "Pense nas possibilidades" LINE (0, 0)-(1000, 1000), , B GOSUB circulo VIEW (340, 10)-(630, 160), 1, 3 GOSUB circulo VIEW (340, 170)-(630, 470), 8, 14 GOSUB circulo SLEEP END circulo: CIRCLE (240, 150), 40, 2, , , 5 / 18 CIRCLE (240, 150), 40, 2, , , 1 RETURN

60

GET / PUT :: So recursos usados para capturar uma imagem no vdeo e exib-la. Estes comandos so usados em animaes grficas. O GET permite capturar um sprite e o PUT permite exibir o sprite no vdeo. Para animar o sprite, basta colocar uma sequncia de PUTs. Sintaxe: GET (X1,Y1)-(X2,Y2), matriz PUT (X1,Y1), matriz [, ao] Onde: Para o GET: - (X1,Y1) :: coordenadas do canto superior esquerdo. - (X2,Y2) :: coordenadas do canto inferior direito. - matriz :: matriz onde a imagem ser armazenada. Para o PUT: - (X1,Y1) :: coordenada do canto superior esquerdo da imagem capturada. A imagem ser colocada no vdeo com esta coordenada. - matriz :: matriz onde a imagem est armazenada. - ao :: parmetro opcional. Determina como a imagem ser exibida.

61

Observaes: 1] Se voc deseja usar sprites em seu programa utilizando GET e PUT, a primeira coisa que deve fazer dimensionar a matriz do sprite ou tile. Veja como:

DIM bola(tamanho)
Onde tamanho corresponde a memria que ser reservada para guardar a figura capturada. Este valor depende da resoluo utilizada. Algumas frmulas para a determinao deste valor podem ser utilizadas. Veja a tabela abaixo: SCREEN 1 SCREEN 2, 11 SCREEN 7, 9, 12 SCREEN 13 tamanho = INT((c_pixels + 1) * 1.125) * (l_pixels + 1) tamanho = (c_pixels + 1) * (l_pixels + 1) tamanho = (c_pixels + 1) * 4 * (l_pixels + 1) tamanho = INT((c_pixels + 1) * 1.875) * (l_pixels + 1)

Existe uma outra equao que pode ser usada para determinar o nmero de bytes que devem ser reservados para o tamanho da imagem:

Tamanho = 4 + INT[(c_pixels*B + 7) / 8] * l_pixels

Onde: -B :: bits por pixel (2 para mdia resoluo, e 1 pra alta resoluo) - c_pixels :: tamanho da coluna em pixels (horizontal). - l_pixels :: tamanho da linha em pixels (vertical). Existem vrias equaes acima. As quatro primeiras consegui em pesquisa na internet e a ltima num livro sobre computao grfica (no final do curso estar disponvel a bibliografia consultada). Fiz alguns testes com a ltima equao mas ocorreu erros. A equao que melhor funcionou foi a terceira equao da tabela. De um modo geral, utilizei a equao c_pixels*l_pixels e funcionou muito bem. 2] As opes de ao para o comando PUT so: PSET Desenha a imagem exatamente como foi capturada por GET, incluindo o fundo (background). Se voc colocar uma imagem com esta opo com um fundo diferente da cor do fundo de captura ir aparecer o retngulo com o fundo original que foi capturado com GET. Desenha cada pixel invertido da cor original, incluindo o background. A imagem aparece como um retngulo com cores de fundo invertidas. Difcil explicar, faa um teste! Calculos de pixel. A imagem colocada sobre o background no iro aparecer. A imagem ir aparecer como no original quando colocada numa rea branca. Calculos de pixel. A imagem colocada sobre o background iro aparecer 62

PRESET

AND OR

XOR Ex:

normalmente, mas no ir aparecer em reas brancas. Este o mtodo default.

SCREEN 12 WINDOW (-4, -4)-(4, 4) screen VIEW (10, 20)-(630, 470), , 3 CIRCLE (0, -1), 1, 3 CIRCLE (-.87, .5), 1, 3 CIRCLE (.87, .5), 1, 3 PAINT (0, 2), 1, 3 PAINT (0, -1), CHR$(&HAA), 3 PAINT (-.87, .5), CHR$(&H55), 3 PAINT (0, 1), CHR$(&H11), 3 PAINT (-.87, -.5), CHR$(&HFF), 3 PAINT (.87, -.5), CHR$(&H22), 3 PAINT (0, 0), CHR$(&HCC), 3 PRINT "Tecle algo" SLEEP WINDOW: VIEW DIM array(13204) imagem GET (190, 90)-(450, 350), array CLS PUT (50, 50), array, PSET ajuste PSET LOCATE 1, 1: PRINT "PUT com PsET. [[ Tecle algo ]] SLEEP CLS LINE (80, 80)-(200, 200), 2, BF LINE (190, 190)-(300, 300), 15, BF PUT (50, 50), array, PRESET LOCATE 1, 1: PRINT "PUT com PRESET. [[ Tecle algo ]] SLEEP CLS LINE (80, 80)-(200, 200), 2, BF LINE (190, 190)-(300, 300), 15, BF PUT (50, 50), array, AND LOCATE 1, 1: PRINT "PUT com AND. [[ Tecle algo ]]" SLEEP CLS LINE (80, 80)-(200, 200), 2, BF LINE (190, 190)-(300, 300), 15, BF PUT (50, 50), array, OR

: Redefine o sistema de coordenadas do : Cria uma janela de visualizao : Cria circulos

: Pinta os crculos

: Reseta a janela e a viewport : dimensiona a matriz onde ser colocada a : Captura a imagem

: coloca a imagem na posio 50,50 com o "

"

63

LOCATE 1, 1: PRINT "PUT com OR. [[ Tecle algo ]]" SLEEP CLS LINE (80, 80)-(200, 200), 2, BF LINE (190, 190)-(300, 300), 15, BF PUT (50, 50), array, XOR LOCATE 1, 1: PRINT "PUT com XOR. [[ Tecle algo ]]" SLEEP END

O exemplo acima ilustra bem todas as combinaes do comando PUT. Rode o exemplo abaixo... Ex2:
SCREEN 12 LINE (2, 2)-(8, 8), 2, BF LINE (1, 1)-(9, 9), 14, B DIM quadrado(400) GET (0, 0)-(10, 10), quadrado FOR i = 1 TO 300 PUT (RND(1) * 600, RND(1) * 400), quadrado, XOR depois XOR. Veja os efeitos NEXT i SLEEP

: Troque por PSET, PRESET, AND, OR e

Veja alguns screenshots do exemplo acima. Com PSET

64

Com PRESET

Com AND

65

Com OR

66

Com XOR

Espero que tenha ficado bem claro para o leitor o que vem a ser um SPRITE e como manipul-los utilizando GET e PUT. Treine bastante estes comando residentes do Qbasic. Para quem est acompanhando tambm o DirectQB j deve ter percebido que existem diversos DQBput, cada um com uma finalidade especfica para a manipulao de sprites. Alguns para escalar, outros para girar o sprite, combinao de cores, etc. Quem manda a imaginao do programador combinar os efeitos de modo a gerar um visual bacana ou uma animao. Como j foi mencionado, uma animao em 2D nada mais do que uma sequncia de PUTs com matrizes de imagens diferentes (em posies diferentes), que passadas muito rpido d a idia de movimento. Iremos aprender a criar personagens 2D e a anim-los em tutoriais futuros. BSAVE / BLOAD :: O BSAVE um comando que salva dados binrios na forma de um arquivo no computador. A sintaxe do BSAVE : BSAVE arquivo, endereo, tamanho Onde: - arquivo :: o nome do arquivo que deseja salvar. - endereo :: o endereo onde os dados sero salvos. Se for 0 (nulo) os dados sero armazenados na pgina de trabalho. - tamanho :: o tamanho dos dados que deseja salvar em bytes. :: O BLOAD l os dados anteriormente salvos com BSAVE, ou seja, carrega arquivos no formato binrio e tambm BMP. A sintaxe do BLOAD : BLOAD arquivo [, endereo]

67

Onde: - arquivo :: o nome do arquivo que deseja carregar. - endereo :: o endereo onde os dados esto contidos. Se for 0 (nulo) os dados sero carregados a partir da pgina de trabalho. Observaes: 1] Foi utilizado o termo endereo acima, mas em muitos livros e tutoriais a palavra utilizada offset. Um offset nada mais que um endereo de memria. Para que se possa trabalhar bem com esses endereos necessrio ter conhecimento do mapa de memria. Isto no ser explorado aqui (caso seja necessrio em tutoriais futuros, ai falaremos sobre como trabalhar com este mapa). 2] O BLOAD e BSAVE so comandos usuais para ler e salvar programas feitos em linguagem de mquina. Isto mesmo que voc est lendo! possvel implementar rotinas em linguagem de mquina diretamente do QB. Estes programas em linguagem de mquina so chamados com a funo CALL. 3] Em computao grfica BSAVE e BLOAD pode ser utilizado para salvar e recuperar uma imagem no screen. 4] Em BSAVE, o offset 0 e o tamanho &H4000 especifica que a entrada de 16Kb do buffer screen salvo por default no disco rgido. Uma vez que o arquivo foi criado com BSAVE ele pode ser carregado a qualquer momento com o comando BLOAD. Ex1:
DIM Cube(1 TO 675) SCREEN 1 ' desenha uma caixa. LINE (140, 25)-(140 + 100, 125), 3, B DRAW "C2 BM140,50 M+50,-25 M+50,25 M-50,25" DRAW "M-50,-25 M+0,50 M+50,25 M+50,-25 M+0,-50 BM190,75 M+0,50" ' Salva o desenho na matriz cube GET (140, 25)-(240, 125), Cube ' Ajusta o segmento de memria onde sera armazenado a matriz cube DEF SEG = VARSEG(Cube(1)) BSAVE "figura.bmp", VARPTR(Cube(1)), 2700 DEF SEG :' restaura a posio da memria default

Uma vez que salvamos a figura, podemos carreg-la. Ex2:

DIM Cube(1 TO 675) ' Ajusta o modo de vdeo. O modo de vdeo precisa ter a mesma resoluo do modo utilizado no desenho original. SCREEN 1

68

' Ajusta a posio do segmento de memria da matriz cubo para ler o grfico contido na matriz cubo. DEF SEG = VARSEG(Cube(1)) BLOAD "figura.bmp", VARPTR(Cube(1)) DEF SEG :' recupera a figura armazenada no exemplo 1. ' Imprime o desenho sobre o screen. PUT (80, 10), Cube

Com esses comandos possvel fazer muitas coisas. Agora, cabe ao leitor treinar bem todos eles. O BSAVE e o BLOAD so os mais enjoados para se trabalhar. Tem que saber utilizar bem o BSAVE seno o BLOAD no ir conseguir carregar o arquivo. Existem diversas maneiras de contornar este problema. Algumas ginsticas so possveis. Eu fiz uma destas ginsticas quando criei um editor de sprites a alguns anos atrs (na poca tinha um 486). Atualmente no vale a pena utiliz-lo, mas na poca eu no tinha editores disponveis, alm do PAINT. Neste curso voc ir aprender a criar o seu prprio editor de SPRITES ou um PAINT, se preferir. sempre bom saber criar as prprias ferramentas para apoio na criao de jogos.

EXERCCIOS:
1] Faa um programa que exiba no vdeo o smbolo das olimpadas (aqueles cinco crculos coloridos). 2] Faa um programa que mostre um esboo da bandeira do Brasil no vdeo. [Seja criativo] 3] Idem para o programa anterior. Pinte a bandeira. 4] Faa um programa que imprima o grfico de uma funo qualquer do 2 grau. 5] Idem para o item anterior. Que imprima a funo seno e cosseno. Mude os argumentos do seno e cosseno e veja o que acontece. Compare os resultados. Adote como funo: y = A*sin (x) e y=A*cos(x).

69

6] Escreva um programa que imprima uma linha dado as coordenadas iniciais e finais, sem utilizar o LINE, utilizando somente o comando PSET. Compare a execuo do seu programa com o comando LINE. 7] Escreva um programa que usa o comando PSET para desenhar um circulo centrado em (a,b) com raio r. A equao do crculo dada abaixo: X = r*cos() + a Y = r*sin() + b 8] Tente implementar um editor de sprites simples. 9] Implemente um jogo da velha utilizando os recursos grficos ensinados at aqui. 10] Monte um jogo de quebra cabea em que se deve colocar os nmeros de 1 a 8 em ordem numa rede quadrada de 9 lugares (matriz 3x3), sendo que um espao da rede dever estar sempre vazio para mover os nmeros. 11] Monte um gnius (antigo brinquedo da Estrela) [Se vira nos trinta!!!] Obs: Gnius um brinquedo que possui cinco cores. Ele acende uma cor e voc deve apertar o boto da cor que acendeu. Em seguida ele acende aquela cor e mais uma, e voc repete, ento vai trs cores, quatro, cinco e voc deve repetir a seqncia corretamente. Ele vai contabilizando seus acertos, o jogo acaba quando voc erra!

70