02 - Aulas do Tiago - Fazendo uma Bolinha se Mover

Como Fazer uma bolinha se mover usando as setas do teclado

Linguagem: FreeBasic
Nível: Iniciante



Olá a todos, é com muito prazer que eu venho compartilhar da minha inisperiencia outra vez .
Este tutorial é o passo dois pra quem está começando no Free Basic.
O que Você vai aprender? Vai aprender como criar uma janela, usar a primitiva Circle, usar comandos do teclado e muito mais.
Dessa vez eu não irei dar o código pronto, mas nós iremos montar juntos!!!

Vamos começar?

Bem, como nós iremos sair do console do windows e entrar para o mundo das janelas? Isso é very easy (brasileiro que nem fala portugues metido a saber inglês )
Nós iremos usar a Função Screen, ela cria uma janela com as configurações que nós iremos passar pra ela.

Escreva assim:

Código:

Screen 18, 8, 1, 0

Vamos entender os argumentos aí inseridos:

• 18 => É o formato da janela e o modo de cores, 18 é uma janela de 640x480px e 256 cores
  
• 8 => A palheta de cores usada, 8-bits
  
• 1 => É numero de paginas para desenho, não se preocupe em entender nesse tutorial
  
• 0 => 0 indica pra abrir numa janela, 1 indica pra abrir em tela cheia

Pronto, se você executar esse código você vai ver abrir uma janela (se não piscar ) bem rapidinho e fechar.

Mas por que ela fecha? Porque depois de ler e executar o código todo o freebasic manda fechar, hora...

Como eu faço pra ela não fechar? Digite Sleep na linha seguinte, o sleep manda o freebasic parar de ler o código até que seja pressioda uma tecla.

Agora apague o sleep, é isso mesmo, ele foi só pra você brincar um pouco, da qui pra frente a coisa é séria!!!

Declare duas variaveis:

Código:

Dim x As Short = 320
Dim y As Short = 240

Elas irão armazenar os valores das posições x e y da nossa bolinha. Por padrão eu coloquei x = 320 e y = 240 (320, 240), para a bolinha surgir no centro da tela.

Nota: Espero que você não tenha gaziado as aulas de plano cartesiano, se você tiver o feito, tu tá frito em bichin?

Prosseguindo, eu quero explicar outra função antes de qualquer coisa, é a MultiKey.
Mas o que ela faz Senhor Bottini?
Ha! O que ela faz é incrivel!!! Ela diz se uma tecla esta sendo precionada!!!

Entedeu? Bem, vamos esmiuçar mais.
MultiKey(tecla que você quer saber se está sendo pressionada)
Pra indicar qual tecla está sendo pressionada você devera colocar o código dela como parametro.
Nós iremos usar cinco teclas nesse tuto: ESCAPE = 1; LEFT = 75; RIGHT = 77; UP = 72 e DOWN = 80.

Bem, se você achou facil até aqui, sinto dizer, mas daqui pra frente é mais facil ainda!!!

Crie um Loop:

Código:


While Not MultiKey (1)

Wend


Veja que esse loop é o seguinte: enquanto tecla 1 (esc) não for precionada o loop é executado.

Vamos em frente.

Que tal aprender agora a desenhar um circulo? É bom, né?

A função é Circle.
Os parametros são: Circle(x, y), Raio

Escreva esse código dentro do seu Loop:

Código:

Circle(x, y), 20

Tá facil de entender, né? x e y são as variaveis que nós criamos mais acima, 20 é o raio do criculo (ou seja, ele tera 40 de altura e 40 de largura).

Até o momento o codigo está assim:

Código:


Screen 18, 8, 1, 0

Dim x As Short = 320
Dim y As Short = 240

While Not MultiKey (1)
    Circle(x, y), 20
Wend


Pode testar que já funciona, é só precionar Esc para sair da janela.

Agora vamos fazer essa rodinha se mover.

A lógica é simples:

Código:


If MultiKey (72) Then y = y - 4
If MultiKey (75) Then x = x - 4
If MultiKey (77) Then x = x + 4
If MultiKey (80) Then y = y + 4


Esse código fica dentro do loop de pois da função que desenha o circulo. o que ele faz. É simples, ele faz quatro testes, o primeiro se UP foi precionado, o segundo se LEFT foi precionado, o terceiro se RIGHT foi precionado e o quarto se DOWN foi precionado. Cada um desses testes faz algo diferente, porem muito pouco, quando a tecla dele é precionada.
O Primeiro diminui em 4 o valor de y;
O segundo diminui em 4 o valor de x;
O terceiro aumenta em 4 o valor de x;
O quarto aumenta em 4 o valor de y;

A reta de y é a posição vertical e a de x a posição horizontal.
Um detalhe, o ponto zero do plano carteziano fica no lado esquerdo superior da tela, Ok?



O seu Código deve estar assim:

Código:


Screen 18, 8, 1, 0

Dim x As Short = 320
Dim y As Short = 240

While Not MultiKey (1)
    Circle(x, y), 20
    If MultiKey (72) Then y = y - 4
    If MultiKey (75) Then x = x - 4
    If MultiKey (77) Then x = x + 4
    If MultiKey (80) Then y = y + 4
Wend


Pode testar, porem você vai ficar chocado quando precionar alguma tecla. Ué, por que borrou tudo?
Bem, pense só, a cada vez que o loop repete (que é muito rápido) ele desenha o circulo numa nova posição, mas não apaga a anterior!!!

Vamos resolver por partes.
Primeiro vamos deixar mais devagar o processo.
Lembra da função Sleep? Eu não contei, mas ela tem dois parametros!!! No primeiro, você póde colocar, tipo em milissegundos, o tempo que é para sleep esperar para prosseguir a ler o código.
No segundo você coloca o valor 1 caso não queira que a função sleep seja interrompida pelo precionamento de uma tecla.
Lembrando que os dois parametros são opcionais como já vimos antes.

Ex.: Sleep (100) faz o programa dar uma parada (cochilo) de 100 milisegundos, mas se uma tecla for precionada ele enterrompo a parada (acorda);
Sleep(100, 1) faz o programa parar 100 milisegundos, e você pode é quebrar o seu teclado de tanto apertar alguma tecla que o programa não volta a correr enquanto não passarem os 100 milisegundos.

Coloque Sleep(10, 1) na linha anterio ao Wend e na seguinte ao ultimo If. O que ela fara? Ela vai mandar o computador parar 10 milisegundos quando chegar nela, aí depois de 10 milisegundas continua a ler o código. Por tanto, a cada 10 milissegundos o Loop se repete, enquanto a tecla Esc não for precionada.

Eiiii! Mas ainda tá borrando a tela!!! Aliás, até dá pra brincar de desenhar agora!!!

Bem, esse borrão é ainda mais facil de resolver, para isso existe a função Cls (Clear Screen), ela realmente limpa a tela.
Coloque o Cls na linha seguinte ao Sleep. Toda vez que o loop repetir ele vai desenhar a bolinha, esperar 10 milissegundo e apagar a tela, porem isso é tão rapido que nossas vistas nem dão fé (que nós não enchergamos)!!!

O código pronto é assim:

Código:


Screen 18, 8, 1, 0    'Configura tela

Dim x As Short = 320        'cria variaveis que posicionam a bolinha
Dim y As Short = 240

While Not MultiKey (1)      'loop do "jogo"
   Circle (x, y), 20  'desenha circulo
   
    If MultiKey (72) Then y = y - 4    'checa se o jogador "moveu" a bolinha
    If MultiKey (75) Then x = x - 4
    If MultiKey (77) Then x = x + 4
    If MultiKey (80) Then y = y + 4
    Sleep (10, 1)                                  'Espera 10 milissegundo
    Cls                                          'Limpa tela
Wend                                          'Termina jogo se Esc for precionado


---

Bem, antes de te deixar em paz, vou ensinar mais umas coisinha (eu tenho TIC, Transtorno Instrutivo Obsessivo), vamos dar cor a bolinha!!!
Circle(x, y), Raio, Cor, Não interessa, Não interessa, Não interessa, (pra preencher com a cor ponha um "F" aqui, se não colocar só aparecerá o contorno).

Altere a código "Circle (x, y), 20" para "Circle (x, y), 20, 2, , , , f"

Outra dica. Pra não ter que de ficar lembrando o numero de cada tecla use umas palavras especiais que são mais faceis de lembras.

Left = SC_LEFT
Right = SC_RIGHT
Up = SC_UP
Down = SC_DOWN
Escape = SC_ESCAPE

Mas antes de usar essas palavras especias abilite elas escrevendo isso no começo do seu código:

Código:


#include "fbgfx.bi"
using FB


Ele inclui a biblioteca "fbgfx.bi" e cria uma especie de atalho (outro dia explico) com o "using FB".

Então o código final fica assim:

Código:


#include "fbgfx.bi"    'inclui biblioteca "fbgfx.bi
using FB                  'Usa atalho FB

Screen 18, 8, 1, 0    'Configura tela

Dim x As Short = 320        'cria variaveis que posicionam a bolinha
Dim y As Short = 240

While Not MultiKey (SC_ESCAPE)      'loop do "jogo"
  Circle (x, y), 20, 2, , , , f  'desenha circulo
 
    If MultiKey (SC_UP) Then y = y - 4    'checa se o jogador "moveu" a bolinha
    If MultiKey (SC_LEFT) Then x = x - 4
    If MultiKey (SC_RIGHT) Then x = x + 4
    If MultiKey (SC_DOWN) Then y = y + 4
    Sleep (10, 1)                                  'Espera 10 milissegundo
    Cls                                          'Limpa tela
Wend                                          'Termina jogo se Esc for precionado


Bem espero que você tenha gostado, e mais ainda, espero que tenha intendido.

Agora eu me despesso, mas qualquer coisa postem ai, OK?

Fui!!!

Execelente tutorial! Gostei muito do seu jeito de explicar e espero que você crie mais tutoriais como esse para colocarmos la no site. É importante inclusive, que você siga uma sequência, pois fica mais interessante para quem está usando o tutorial para aprender.
Parabéns!

Obrigado
Que bom que você gostou, eu só espero que esses tutos sejam uteis para despertar a curiosidade em outras pessoas sobre o freebasic.
E sinta-se avontade para uza-los.

tblima123 escreveu:Obrigado
Que bom que você gostou, eu só espero que esses tutos sejam uteis para despertar a curiosidade em outras pessoas sobre o freebasic.
E sinta-se avontade para uza-los.

Exatamente, estou pensando em fazer um tutorial de um jogo pequeno, bem pequeno mesmo, porem completo pra poder colocar la no Site. Eu fiz isso com C + Allegro e acho que é bem interessante desse jeito pois facilita o entendimento do pessoal.
Voce teria alguma sugestão de game pra podermos criar? Tem que ser um jogo bem simples pra começar, depois agente cria um mais sofisticado.

Olha, eu acho que um joguinho bem simples de se fazer seria aquele Street Racer do Game Maker, não precisa fazer igual, é só tirar alguns elementos e deixar mais parecido com um minigame.

Só que por enquanto eu vou aguardar pra ver como você faz, lidar com buffer e imagens é uma praia muito inesplorada por mim ainda então não sei nem pra onde ir direito.

Tu vai usar Allegro tambem?

tblima123 escreveu:Olha, eu acho que um joguinho bem simples de se fazer seria aquele Street Racer do Game Maker, não precisa fazer igual, é só tirar alguns elementos e deixar mais parecido com um minigame.

Só que por enquanto eu vou aguardar pra ver como você faz, lidar com buffer e imagens é uma praia muito inesplorada por mim ainda então não sei nem pra onde ir direito.

Tu vai usar Allegro tambem?

É verdade, poderia ser tipo aquele sim, mas já estou fazendo um de nave. Muito simples mesmo.

Estou fazendo sem usar a Allegro por enquanto pois usar uma library talvez seja meio pesado para iniciantes, então pretendo usar o sistema de graficos internos GFXLib e uma função da Api do Windows para som! Depois em outras versões vou fazer o mesmo jogo usando a Allegro.