Nível 1

Introdução à Programação com Jogos

Você pode acessar esse roteiro em www.tinyurl.com/ismartoficina.

Programar é como criar uma peça de teatro.

Existem várias analogias para ensinar programação, mas uma ótima para quem está começando com o Scratch e quer fazer jogos e animações é compará-la com uma peça de teatro.

Em uma peça de teatro…

Você precisa de atores para a interpretação dos textos. Além disso, você também precisa criar fantasias para eles.

Um ator pode interpretar diferentes papéis: um personagem, um animal, uma árvore, uma mesa, etc.

Como a apresentação da peça de teatro é feita em um palco, você pode usar panos de fundo para decorar o seu palco com o tema da sua peça.

Além disso você deverá criar um roteiro para cada ator, com instruções sobre o que eles devem fazer. Algumas vezes até o palco pode precisar de um roteiro, para mudar de pano de fundo ou modificar o cenário.

No Scratch…

Para programar nós vamos utilizar o Scratch (www.scratch.mit.edu).

No Scratch nós também temos um palco, onde podemos escolher diferentes panos de fundo .

Podemos inserir atores, e escolher diferentes fantasias.

No Scratch..

Cada ator tem o seu roteiro.



E juntando tudo isso você pode criar animações ou jogos.

Como em uma peça de teatro, é normal que no começo algumas coisas saiam erradas.

Programar é como ensaiar uma peça de teatro, é preciso passar um pouco de tempo corrigindo os erros.

Criando meu primeiro jogo

Introdução: Nós vamos criar um jogo de pega-pega, com o gato Félix e o rato Herbert. Você controla o Herbert com o mouse e tenta fugir do Félix. Quanto mais tempo você ficar sem ser pego, mais pontos você ganhará. Se for pego, perderá pontos!

  1. Antes de começar certifique-se que o Scratch esteja em Português. Se não for o caso clique no globo, em cima, no canto esquerdo da tela e escolha Português (Brasil).



PASSO 1: Félix persegue o ponteiro do mouse

Acompanhe o seu progresso marcando os quadros abaixo.

  1. Crie um novo projeto. Arquivo -> Novo
  2. Clique em palco, na área em baixo à esquerda da tela. Em seguida, vá até a aba Panos de Fundo, Importar fundo da biblioteca e escolha o fundo Interior/hall.
  3. Clique no Félix (no canto esquero, em baixo da tela) e depois clique no i azul.
  4. Mude o nome do ator para Félix.
  5. Certifique-se que o estilo de rotação do Félix é esquerda-direita.
  6. Arraste e encaixe estes blocos para a área de roteiros na direita da tela:

    quando clicar em BANDEIRA
        sempre
        aponte para [ponteiro do mouse v]
        mova (10) passos
        próxima fantasia
        toque o tambor (62) por (0.3) batidas
    fim
    

Teste o projeto

Clique na bandeira verde.

O Félix está seguindo o ponteiro do mouse?

Ele mexe as pernas enquanto se movimenta?

A velocidade que ele se move é correta?

Salve o projeto

PASSO 2: Félix persegue o Herbert

Agora vamos fazer com que o Félix persiga o Herbert ao invés de perseguir o mouse.

  1. Crie um novo ator, clicando em Importar ator da biblioteca (na área em baixo, à esquerda) e escolha Animais/Mouse1
  2. Mude o nome do ator para Herbert
  3. Certifique-se de que o estilo de rotação do Herbert é esquerda-direita.
  4. Clique no botão reduzir que fica junto com as ferramentas na parte de cima da tela.
  5. Arraste e encaixe os blocos seguintes para o Herbert (ATENÇÃO: Certifique-se de que os blocos são criados para o Herbert, clicando 2x sobre ele antes de começar a encaixar):

    quando clicar em BANDEIRA
    sempre
        vá para [ponteiro do mouse v]
        aponte para [Felix v]       
    fim
    

Teste o projeto

Clique na bandeira verde.

O Herbert se move com o ponteiro do mouse?

O Félix está perseguindo o Herbert?

Salve o projeto

PASSO 3: Diga “Te peguei!”

Vamos fazer com que o Félix diga quando ele pegou o Herbert

  1. Modifique o roteiro do Félix para que ele fiquem assim (Não apague os blocos existentes, apenas encaixe os blocos que estão faltando):

ATENÇÃO: Certifique-se de que os blocos são criados para o Félix, clicando 2x sobre ele antes de começar a encaixar

    quando clicar em BANDEIRA
    sempre
    aponte para [ponteiro do mouse v]
    mova (10) passos
    próxima fantasia
    toque o tambor (62) por (0.3) batidas
    se <tocando em [Herbert v]>
            diga [Te peguei!] por (1) segundos
        fim
    fim

Teste o projeto

Clique na bandeira verde.

O Félix diz algo quando pega o Herbert?

Salve o projeto.

PASSO 4: Virando fantasma

Ao invés de o Félix dizer algo, nós vamos fazer com que o Herbert vire um fantasma quando for pego.

  1. Modifique os blocos do Félix para enviar uma mensagem quando pegar o Herbert.

    quando clicar em BANDEIRA
    sempre
        aponte para [ponteiro do mouse v]
        mova (10) passos
        próxima fantasia
        toque o tambor (62) por (0.3) batidas
        se <tocando em [Herbert v]>
            envie [pego v] a todos
            toque o tambor (58) por (0.2) batidas
            espere (1) segundos
        fim
    fim
    
  2. Clique sobre o Herbert, vá até a aba fantasias, clique em importar fantasia da biblioteca e escolha a fantasia Imaginários/ghost2-b.

  3. Clique no botão reduzir para diminuir o tamanho da fantasia.

  4. Mude o nome das fantasias do Herbert, de maneira que o rato (mouse1) se chame ‘vivo’ e o fantasma (ghost2-b) se chame ‘morto’.

  5. Crie um novo conjunto de blocos para o Herbert, que irá fazer ele virar fantasma.

Estes blocos ficarão ao lado dos blocos já existentes para o Herbert (não apague o que já existe!).

ATENÇÃO: Certifique-se de que os blocos são criados para o Herbert, clicando 2x sobre ele antes de começar a encaixar

    quando receber [pego v]
    mude para a fantasia[morto v]
    espere (0.5) segundos
    mude para a fantasia[vivo v]    

Teste o projeto

Clique na bandeira verde.

O Herbert vira fantasma quando pego?

O Félix toca o som certo no momento certo?

O Félix fica parado tempo suficiente para o Herbert fugir?

PASSO 5: Conte os pontos

Vamos criar um placar para saber se estamos indo bem. O placar começa do zero e aumenta um ponto a cada segundo. Quando o Félix pegar o Herbert, o jogador perderá cem pontos.

  1. Clique em Variáveis e crie uma variável chamada placar.
    Mantenha selecionada a opção “para todos os atores”.
  2. Clique no palco e crie estes dois conjuntos de blocos. ATENÇÃO: Certifique-se de que os blocos são criados para o palco, clicando sobre ele no canto esquerdo da tela antes de começar a encaixar

    quando clicar em BANDEIRA
    mude [placar v] para (0)
    sempre
        adicione a [placar v], (1)
        espere (1) segundos
    fim
    
    quando receber [pego v]
    adicione a [placar v], (-100)
    

Teste o projeto

Clique na bandeira verde.

Os pontos aumentam um a um a cada segundo?

Os pontos diminuem de 100 quando o Herbert é pego?

O que acontece quando o Herbert é pego antes que o placar chegue a 100?

O placar volta a zero quando você começa um novo jogo?

Salve o projeto

Parabéns, você acaba de criar o seu primeiro jogo! Não esqueça que você pode compartilhar seu jogo clicando em Compartilhar na barra de menu!

Até onde consigo ir com o Scratch?

Nós fizemos um joguinho bem simples, mas, apesar de simples, o Scratch é uma ferramenta que possibilita botar em prática idéias legais e mais complexas. Veremos alguns projetos de jogos famosos e como isso é possível!

Além disso, o seu aprendizado no Scratch é totalmente reaproveitado no aprendizado de outras linguagens de programação, pois você terá contato com as principais estruturas e componentes delas:

Condicionais:

Estruturas de repetição:

Variáveis:

Remixando Projetos

Além de ver do que o Scratch é capaz, vamos aproveitar para apresentar a possibilidade de remixar um projeto. Isso significa que você pode encontrar um jogo legal no site do Scratch, clicar no botão “ver dentro” e ter acesso ao código exatamente como o autor escreveu. Além disso, você pode modificá-lo!



Ler, entender e modificar o código de outras pessoas é uma maneira bem legal de aprender programação ou técnicas específicas usadas em determinados programas, tire proveito dessa possibilidade no Scratch!

Alguns projetos para fuçarmos!

Dois jogos: www.tinyurl.com/ismartmario e www.tinyurl.com/ismartflappybird



Duas animações: www.tinyurl.com/ismartanimacao1 e www.tinyurl.com/ismartanimacao2



Projetos com um foco científico:

www.tinyurl.com/ismartondas e www.tinyurl.com/ismartmoleculas



Quero continuar aprendendo: por onde seguir?

Aprender mais do Scratch: Você pode cadastrar-se como voluntário em nosso site (basta um clique e logar com o Facebook!) e acompanhar o nosso material por conta própria! As atividades possuem um formato parecido com essa atividade. Nosso segundo módulo em Scratch ainda não está revisado, mas você já pode usá-lo para aprender por conta própria no seguinte link: http://tinyurl.com/ismartmodulo2. A última atividade desse módulo ensina a fazer um jogo no mesmo estilo do Super Mario. Após aperfeiçoar o seu conhecimento das estruturas de programação no Scratch, nós sugeriríamos que você mudasse a língua do programa para inglês, assim você conhecerá o nome que essas estruturas terão em outras linguagens já tendo aprendido como utilizá-las.

Quero continuar programando e aprender outras linguagens: Existe um infinidade de opções para se aprender programação na internet. Como dica, você poderia ter Python como a sua próxima linguagem de programação. Sugeriríamos que você desse uma olhada nos seguintes sites: programae.org.br/, code.org e codecademy.com/.

Conheça mais o Code Club Brasil!

Agradecemos a sua participação na nossa oficina! Conheça mais sobre o Code Club Brasil em nosso site: www.codeclubbrasil.org e acompanhar as novidades do projeto através da nossa página do Facebook: https://www.facebook.com/CodeClubBrasil

Qualquer dúvida pode entrar em contato pelo nosso e-mail: [email protected]!

Seguindo as nossas dicas você poderá em pouco tempo, inclusive, tornar-se um instrutor voluntário de um Code Club!