Uma introdução ao Scratch

1. Uma introdução ao Scratch

2. Scratch foi construído em cima do ambiente Squeak, desenvolvido por Alan Kay e colegas. Foi desenvolvido pelo grupo de pesquisa LifelongKindergarten no MIT Media LabScratch, em colaboração com o grupo de pesquisa KIDS da UCLA (GraduateSchoolofEducation & InformationStudies).

3. Ele se baseia na longa tradição de jogos como o LEGO. Além disso, tira proveito de novas ideias computacionais para tornar mais fácil a programação. O Scratch foi desenvolvido com o objetivo principal de aproxima e guiar o uso de mídia digital, possibilitando a expressão criativa e realizando conexões com ideias poderosas. Scratch é um programa que permite criarmos jogos, histórias animadas e arte interativa, assim como compartilhá-las através da Internet.

4. Entre no site http://scratch.mit.edu/ Faça seu cadastro (link na parte superior direita do site). Clique no botão “criar” (parte superior esquerda do site). Pronto! Como usar?Basta ter conexão com a internet!

5. Iniciando o Scratch Uma vez aberto o Scratch, você verá a tela padrão apresentada ao lado. Discutiremos cada uma das partes que a compõem separadamente.

6. Áreas da tela 1. Comandos para o jogo 2. Área de comandos 3. Palco 4. Lista de sprites 5. Barra de ferramentas 6. Botões de execução 7. Barra de menu

7. Ao lado temos a área 1, uma das áreas mais importantes do Scratch. É nela que estão todos os comandos que podem ser utilizados para a construção do seu jogo ou animação.

8. Ao lado está a área de 2: de scripts (comandos). Ela será preenchida pelos comando da área 1, de modo a compor seu jogo ou animação. É nessa área que se especifica as ações e trajes dos personagens, além dos sons do jogo.

9. Aqui temos a área 3, que se trata basicamente do palco do seu programa. É nela que os sprites da cena podem ser vistos.

10. A área 4 conterá todos os spritesdo jogo ou animação que está sendo desenvolvida. Através dela é possível adicionar ou criar novos sprites.

11. A área 5 é a barra de ferramentas. Por meio dela é possível mover, duplicar, apagar, aumentar ou diminuir um spriteou bloco de comandos.

12. Ao lado estão os botões de execução. O primeiro botão (o da bandeira verde), é responsável por iniciar a execução do programa; por sua vez, o botão vermelho interrompe a execução.

13. Por fim, abaixo pode ser vista a área 7, contendo a barra de menus.

14. Relembrando... 1. Comandos para o jogo 2. Área de comandos 3. Palco 4. Lista de sprites 5. Barra de ferramentas 6. Botões de execução 7. Barra de menu

15. Escolhendo um sprite O Scratch já inicia com um sprite, o gato laranja (um spriteé uma pequena figura que pode ser movida pela tela, produzindo efeitos). É possível escolher diferentes spritesda galeria do Scratch, importar algum da internet ou até mesmo desenhar seus próprios sprites! Para escolher um spriteda galeria, clique no botão “escolha um spritedo arquivo”, como mostrado na figura ao lado.

16. Escolhendo o spritedo arquivo Scratch possui diversas categorias de sprites. Escolha o que você gostaria de usar. É possível ter vários spritespor jogo.

17. Alterando seu sprite Uma vez adicionados os sprites, é possível alterar seu tamanho, duplicá-los ou deletá-los. Para isso, se utiliza a barra de ferramentas. Em ordem, os botões apresentados possuem como utilidade: 1. Alterar o posicionamento do spriteno palco 2. Duplicar o sprite 3. Deletar o sprite 4. Aumentar seu tamanho 5. Diminuir seu tamanho

18. Escolhendo um cenário O Scratch inicia com um palco(background) branco. Assim como para os spritesé possível escolher um palco da galeria ou criar um. Para escolher um da galeria, clique no palco (como mostrado na primeira figura). Depois selecione a aba de backgrounds ou “fundos de tela” (como mostrado na figura 2). Escolha algum da galeria clicando em “importar” ou desenhe o seu próprio: “pintar”.

19. Programando no Scratch Já foi ensinado como escolher os spritese cenários para o jogo. Agora você já está pronto para começar a programar no Scratch!

20. A primeira coisa que precisa ser feita é selecionar o spritecom o qual se quer trabalhar (figura 1) e então selecionar a aba de comandos (figura 2). A área de comandos é onde se constrói os programas usando a programação através de blocos.

21. Programando no Scratch A área 1 contém os 8 botões mostrados na figura. Cada um deles possui blocos relacionados a suas funções particulares. Iremos primeiros estudar os de movimento.

22. Movimento Quando se clica no botão de movimento, se pode ver os blocos de ações relacionados a ele que seu spritepode realizar. Exemplo: arraste o bloco “mova 10 passos” para a área de comandos (figura acima). Modifique a quantidade de passos de “10” para “50”, clicando no bloco e digitando. Veja seu spritemovendo 50 pixels para a direita: clique duas vezes sobre o bloco na área de comando! (Se for colocado um número negativo o spritese moverá na direção oposta).

23. O palco do Scratch Um pixel é o menor elemento em um dispositivo de exibição. O palco do Scratch possui 480 pixels de largura e 360 pixels de altura.

24. Mais movimento Agora, adicione o vire 15 graus ao seu outro bloco. Quando você vir a linha branca entre os dois blocos de código (como mostrado na figura), pode soltar o bloco. A linha indica que os blocos se encaixarão. Novamente, você pode alterar a quantidade de graus.

25. Teste os comandos de movimento Usamos dois blocos da categoria de movimentos. Teste todos os outros blocos dessa categoria. Combine-os! Um comando pode ser deletado simplesmente retirando-o da área de comandos.

26. Controle A próxima categoria de botões é a de controle. Essa é uma importante categoria porque controla quantas vezes um evento acontece, quanto tempo ele dura ou quando ele ocorre.

27. Vamos analisar o bloco “quando bandeira verde é clicada” (mostrado na figura). Coloque esse bloco no topo de blocos de comando já unidos. Agora, ao invés de ter de clicar duas vezes no bloco. Você pode clicar na bandeira para iniciar a animação.

28. Modo de apresentação Para visualizar seu jogo ou animação em tela inteira, clique no botão de modo de apresentação (como mostrado na figura ao lado). Para sair do modo apresentação clique na seta do canto superior esquerdo da tela ou simplesmente clique na tecla esc.

29. De volta ao Controle Outro bloco importante da categoria de controle é o que lida com instruções condicionais. Conhecidos como “se” e “senão”. (A instrução condicional da figura acima indica que o spritemoverá 10 passos caso o usuário realize um clique no mouse. Caso contrário, ou seja, se o mouse não for clicado, o spritepermanecerá parado).

30. Sensores Os sensores serão usados juntamento com as instruções condicionais. (Observe o formato de alguns dos blocos de sensores.Eles são os únicos que se encaixam dentro da “condição”).

31. Use o que já foi aprendido Pelos próximos minutos experimente combinar os blocos de movimento, controle e sensores. Para obter informações sobre um bloco, clique com o botão direito do mouse sobre ele!

32. Som Agora, vamos adicionar algum som a nossa animação! Existem diferentes formas de introduzir som a nossa animação. A primeira forma que vamos experimentar é importar um som da galeria do Scratch.

33. Importando áudio da galeria Passo 1: Clique no spriteque você queira que tenha som. Passo 2: selecione aba de som Passo 3: clique em importar

34. Galeria de som do Scratch Você verá diferentes pastas de áudios que o Scratch disponibiliza para serem usadas na sua animação.

35. Inserindo áudio Uma vez que tenha encontrado o áudio apropriado, selecione-o e clique em OK. O áudio que você selecionou aparecerá, como mostrado na figura.

36. Você pode ouvir o áudio adicionado clicando no botão de play, como ilustrado ao lado.

37. Adicionando o áudio a sua animação Você já está pronto para adicionar áudios a sua animação! Na área de comandos (área 2), selecione a aba de comandos. Selecione o spriteque você queira que tenha som. Selecione o botão de “Som” na área 1.

38. Adicionando o áudio a sua animação Agora, localize o bloco “toque o som”. Arraste-o para a área de comandos. Selecione o áudio desejado, como mostrado na figura.

39. Gravando um áudio Clique em gravar (record). Clique no botão vermelho para iniciar a gravação. Clique no quadrado para finalizá-la. Você pode renomear o áudio, como mostrado ao lado.

40. Caneta Quando se usa a caneta, seu spritese torna seu instrumento de escrita. Você pode alterar a cor da caneta, a sua sombra e seu tamanho.

41. Números Existem muitos efeitos úteis para animação e jogos que você pode criar utilizando os números do Scratch. Um exemplo disso é conseguir fazer com que um spritese mova de modo aleatório.

42. Movimento aleatório Lembre-se que a área de animação do Scratch é 480 pixels de largura e 360 ​​pixels de altura. Isso significa que o intervalo no eixo horizontal é a partir de -240 até 240 e o intervalo no eixo vertical vai de -180 a 180. Então, para fazer com que o spritedeslize aleatoriamente toda a distância horizontal e vertical da minha área de animação, teríamos:

43. Variáveis Variáveis ​​são principalmente usadas no desenvolvimento de jogos. Abra alguns dos exemplos em Abrir > Projects > Games para ver como as variáveis ​​são usadas para manter a pontuação em um jogo.

44. Agora que já aprendemos como funciona o Scratch, é preciso praticar para consolidar o que foi aprendido. Nos slides seguintes serão apresentados alguns exemploscom explicações de códigos. Vamos analisá-los para que possa também criar os seus próprios jogos e animações!

45. Exemplo 1 - Básico Selecionamos o sprite“dog2-b” da pasta de animais da galeria do Scratch. O código dita que “quando a bandeira verde for clicada, o nosso spritese moverá sempre 10 passos e que, caso toque na borda (da tela) ele deve voltar”. Também, em vermelho na figura, o botão faz com que o spritese mova apenas horizontalmente.

46. Exemplo 1 - Básico Agora, para fazer com que o cachorro pareça de fato estar se movendo, vamos a aba de trajes (passo 1). Clicamos em importar (passo 2), selecionamos o traje “dog2-c” e clicamos em Ok (passo 3). Com isso, o novo traje aparecerá na lista, como ilustrado na figura.

47. Exemplo 1 - Básico Para fazer com que a troca de trajes ocorra, é preciso especificar isso na nossa área de comandos. Então, ao código anterior, adicionamos mais dois comandos: o “próximo traje” e o “espere 1 segundo”. O que garante que nosso spritefique alterando entre o dog2-b e dog2-c a cada 2 segundos. (teste aumentar ou diminuir os segundos!)

48. Exemplo 1 - Básico Por fim, adicionamos um novo cenário (já foi explicado como em ‘Escolhendo um cenário’) e um áudio (já foi explicado como em ‘Som’). O segundo bloco de comandos indica que “quando a tecla espaço for pressionada, o áudio ‘dog1’ irá tocar”.

49. Exemplo 2 - Sensores e eventos Para nosso próximo exemplo, vamos fazer um jogo simples! Será um jogo de perseguição entre dois personagens. Um personagem, controlado pelo jogador, deverá fugir de outro, controlado pelo jogo. O jogador controlará seu personagem através do mouse. Consegue imaginar como fazer isso?

50. Exemplo 2 - Sensores e eventos Primeiramente, escolhemos os dois spritese o cenário. O spritecontrolado pelo jogador será o polvo e pelo jogo será o dragão. Dica: sempre renomeie os spritespara facilitar quando for especificar os comandos!