







Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Encontra documentos específicos para os exames da tua universidade
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Jogo de Scratch. Aprende a criar e programar um jogo utilizando a plataforma do Scratch.
Tipologia: Exercícios
1 / 13
Esta página não é visível na pré-visualização
Não perca as partes importantes!








Atas do 2.º Encontro sobre Jogos e Mobile Learning. Braga: CIEd.
Introdução Scratch é uma linguagem de programação concebida no Massachusetts Institute of Technology (MIT) sob o lema “imagina, programa, partilha”. É uma ferramenta concebida para apoiar o desenvolvimento da fluência tecnológica em crianças, desde muito cedo, permitindo assim que estas adquiram as competências transversais ditas do “para o séc. XXI”. É uma linguagem de programação extremamente acessível por não exigir conhecimentos prévios de outras linguagens e não exigir a escrita de comandos. Está traduzida em muitas línguas e tem capacidades multimédia permitindo a inserção de imagens e sons. Este documento não pretende ser um guia exaustivo do programa. Tem por objetivo fornecer uma primeira abordagem a iniciantes que tencione criar um jogo em Scratch.
O ambiente de programação Comece por aceder, no seu browser , a http://scratch.mit.edu/
Figura 1. Página inicial http://scratch.mit.edu
Atas do 2.º Encontro sobre Jogos e Mobile Learning. Braga: CIEd.
O site reconhece que estamos a aceder a partir de Portugal e, por essa razão, a página é apresentada em português. Será neste site que poderemos criar programas em Scratch e ainda explorar, partilhar e comentar programas criados por scratchers de todo o mundo. 78 No cimo do ecrã, à esquerda, estão em destaque três grandes opções que exibimos na figura 2.
Figura 2. Três opções
Vamos começar por selecionar a primeira destas opções para darmos início à nossa aventura. A segunda opção permitiria ver exemplos de programas feitos em Scratch e a terceira registarmo-nos gratuitamente para, posteriormente, partilhar o nosso trabalho com a comunidade. Este aspeto de partilha é muito importante, pelo que nos registaremos mais tarde. Será nesta página, diretamente no nosso browser, representada na figura 3, que programaremos o nosso jogo.
Figura 3. Ambiente de programação Scratch
Este ecrã está dividido em várias zonas que começaremos a explorar de seguida. Do lado direito abre-se uma aba que nos permite dar os primeiros passos em Scratch e que, se estiver com tempo, aconselhamos a seguir. Para continuar este roteiro podemos fechar essa aba, fazendo
(^78) Caso queira utilizar o scratch sem ligação à Internet pode descarregar uma versão que funciona sem estar ligado à rede aqui: http://scratch.mit.edu/scratch2download/
Atas do 2.º Encontro sobre Jogos e Mobile Learning. Braga: CIEd.
Figura 5: Remover uma personagem Figura 6: Criar um novo ator
Escolhemos a primeira das opções (fig. 6 A) e teremos acesso à biblioteca de personagens do Scratch representada na figura 7.
Figura 7. Escolher um ator
Podemos filtrar essas imagens por categoria, tema ou tipo (fig. 7 A). Assim escolhendo “fantasia” encontraremos facilmente o nosso herói, o fantasma! Pode, no entanto, escolher qualquer outro.
Movimentar o fantasma O nosso fantasma está agora no centro do ecrã. Vamos programá-lo para que se movimente quando premir as setas do cursor. A programação em Scratch é feita arrastando os comandos que se encontram na zona de comandos (fig. 4 C) para a zona de programação (fig. 4 D). Os comandos disponíveis estão agrupados por categoria, havendo ainda um código de cores que facilita a sua identificação. Assim, os comandos de movimento, por exemplo, são todos azuis e aparecem quando clicamos no botão “movimento” (fig. 8 A).
Atas do 2.º Encontro sobre Jogos e Mobile Learning. Braga: CIEd.
Vamos arrastar o comando “Anda (10) passos” da zona de comandos para a zona de programação. Este comando, sempre que executado, faz “andar” o nosso personagem 10 passos. Podemos executar o comando (ou um bloco de comandos) fazendo duplo clique sobre ele. Quando fazemos duplo clique reparamos que o fantasma se desloca, 10 passos, da esquerda para a direita. O facto de se deslocar para a direita é mero acaso, nada do que disse até agora garante que assim aconteça. Por omissão, quando criamos um novo ator, ele está orientado para a direita e, por isso, é nessa direção que se desloca. No caso de querer garantir que será nesta direção que a deslocação acontece temos que juntar antes do comando de movimento outro que o “obrigue” a, antes de andar, alterar a direção para a direita (90o).
Figura 8. Mover o fantasma Figura 9. Virar para a direita e mover
Reparem que os comandos estão concebidos para encaixarem uns nos outros. Notem também que a ordem é importante, para andar para a direita é necessário primeiro garantir que o fantasma está orientado nessa direção e apenas depois se deve movimentar. Se fizermos agora duplo clique sobre o primeiro comando serão ambos executados e, agora, temos a certeza que o fantasma se desloca na direção certa! Para garantir que estes comandos são executados quando premirmos a tecla “seta para a direita” juntamos o comando “Quando alguém pressionar a tecla” e escolhemos a tecla “seta para a direita” (fig. 10) Este comando está no grupo dos “Eventos” e, se reparar, não é possível encaixar nenhum outro comando antes, apenas depois. Assim, definimos que “quando alguém o pressionar a tecla seta para a direita o fantasma vira para a direita e move 10 passos”. Tente! Quando carregarmos na seta para a esquerda algo de muito parecido acontecerá. Neste caso apenas a direção será outra. Se fizermos clique sobre o primeiro dos comando do bloco aparece no menu contextual a opção duplicar. Assim teremos outro bloco de comandos e bastará fazer as alterações (fig. 11).
Atas do 2.º Encontro sobre Jogos e Mobile Learning. Braga: CIEd.
Desenhar um percurso Vamos agora desenhar o labirinto. Para tal, escolhemos o palco e clicamos no botão “pintar novo cenário” (fig. 16).
Figura 13. Alterar as propriedades de um ator Figura 14. Alterar as propriedades de um ator
O palco onde decorre a ação vai poder assumir diferentes imagens ao longo de um projeto Scratch. Designaremos esses aspetos por “cenários”.
Figura 15. Alterar as propriedades de um ator Figura 16. Desenhar um cenário
No lado direito do ecrã surge uma nova aba com um editor de imagem simples que permitirá desenhar o cenário do labirinto. Na barra de ferramenta do lado esquerdo (fig. 17 A) escolhemos a ferramenta para traçar linhas. Se premirmos a tecla “shift” em simultâneo (seta utilizada para obter maiúsculas) teremos linhas apenas na horizontal ou vertical. Podemos ainda pintar – “encher” – o palco com uma cor, utilizando a ferramenta que está representada por um pequeno balde (fig. 17 A). Vamos agora arrastar o nosso herói para a posição de partida. Se o tamanho do fantasma não estiver adequado ao percurso que desenhamos podemos utilizar o botão assinalado na figura 19 (A) para diminuir ou o comando ao lado para o aumentar.
Atas do 2.º Encontro sobre Jogos e Mobile Learning. Braga: CIEd.
Figura 17. Alterar o cenário
Sempre que toca no labirinto, volta ao início Vamos agora programar o fantasma para que inicie o seu percurso na mesma posição e volte à esta posição sempre que tocar nas linhas do labirinto. Um programa/jogo Scratch inicia, normalmente, quando carregamos na bandeira verde (Fig. 19 B), pelo que vamos começar um novo bloco de comandos com um bloco inicial que indicará os comandos a serem executados sempre que se carrega na bandeira verde para dar início ao jogo. Assim, arrastamos esse bloco (conjunto eventos) e em seguida o bloco “vai para as coordenadas...” presente no conjunto de bloco “movimento”. Repare que as coordenadas presentes neste bloco (fig. 20 A) correspondem à posição atual do fantasma que podemos confirmar nas suas propriedades (fig. 20 B). Seguidamente, tente arrastar o fantasma para qualquer outra posição e iniciar o programa, clicando na bandeira verde. Se tudo estiver a funcionar, o fantasma deve posicionar-se na sua posição inicial sempre que a bandeira é premida. No entanto, se utilizarmos as setas para o movimentar e tocar no labirinto nada acontece.
Atas do 2.º Encontro sobre Jogos e Mobile Learning. Braga: CIEd.
Figura 19. Posicionar o fantasma e alterar o seu tamanho
Sons Associado a cada um dos atores, temos “Guiões”, “Trajes” e “Sons”. Em “Guiões” definimos os comportamentos, o que devem fazer e quando. E “Trajes” o aspeto que podem tomar e em “Sons” vamos definir o som que podem produzir. Se passarmos para a aba referente ao som (Fig. 25 A), veremos que associado ao fantasma há já um som. Podemos também gravar novos sons ou importar sons gravados em ficheiro (fig. 25 B). Estes sons, associados às personagens ou cenários, podem ser tocados, evocando-os a partir dos comandos associados no grupo “Som”. Assim, podemos juntar na nossa programação o comando que reproduz um pequeno som sempre que o fantasma chocar com o labirinto (fig. 24). O nosso jogo deve funcionar, mas não temos ainda um objetivo final definido. Vamos precisar de outro ator que colocaremos no final do percurso. Sempre que o fantasma tocar nesse novo “personagem” exclamará “Consegui!” Vamos portanto à biblioteca de imagens (Fig. 6 A) e escolhemos uma nova personagem. No meu caso escolhi um presente (Gift). Arrastamos o presente para o final do percurso e escolhemos o tamanho que melhor se adeque (Fig. 27).
Atas do 2.º Encontro sobre Jogos e Mobile Learning. Braga: CIEd.
Figura 20. Bloco de comandos a executar no início
Figura 21. Se tocar então…
Pode agora importar outro som e fazer com que seja tocado sempre que o fantasma chegue ao fim do percurso!
Guardar o trabalho Estamos a trabalhar on-line , podemos guardar o nosso trabalho de duas formas: (i) transferindo o ficheiro para o nosso computador ou (ii) gravando no próprio site associando à nossa conta de utilizador. Para gravar o ficheiro no seu computador ou pen , aceda ao menu “Arquivo” e aí a “Descarregar para o meu computador”.
Atas do 2.º Encontro sobre Jogos e Mobile Learning. Braga: CIEd.
Figura 26.Descarregar para o computador Figura 27 Um presente para objetivo final.
Figura 28. Parte do código final