Uma introdução ao Scratch

Apresentação em tema: "Uma introdução ao Scratch"— Transcrição da apresentação:

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 Lifelong Kindergarten no MIT Media LabScratch, em colaboração com o grupo de pesquisa KIDS da UCLA (Graduate School of Education & Information Studies).

3 Scratch é um programa que permite criarmos jogos, histórias animadas e arte interativa, assim como compartilhá-las através da Internet. 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.

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

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
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)
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
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 sprites do 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
A área 5 é a barra de ferramentas. Por meio dela é possível mover, duplicar, apagar, aumentar ou diminuir um sprite ou bloco de comandos.

12 Ao lado estão os botões de execução
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 sprites da galeria do Scratch, importar algum da internet ou até mesmo desenhar seus próprios sprites! Para escolher um sprite da galeria, clique no botão “escolha um sprite do arquivo”, como mostrado na figura ao lado.

16 Escolhendo o sprite do arquivo
Scratch possui diversas categorias de sprites. Escolha o que você gostaria de usar. É possível ter vários sprites por 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 sprite no 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 sprites e 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 sprite com 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 sprite pode 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 sprite movendo 50 pixels para a direita: clique duas vezes sobre o bloco na área de comando! (Se for colocado um número negativo o sprite se 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 sprite moverá 10 passos caso o usuário realize um clique no mouse. Caso contrário, ou seja, se o mouse não for clicado, o sprite permanecerá 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 sprite que 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 sprite que 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 sprite se 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 sprite se 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 Então, para fazer com que o sprite deslize 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 exemplos com 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 sprite se 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 sprite se 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 sprite fique 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 sprites e o cenário. O sprite controlado pelo jogador será o polvo e pelo jogo será o dragão. Dica: sempre renomeie os sprites para facilitar quando for especificar os comandos!

51 O primeiro bloco dita: “Quando a bandeira verde for clicada, o polvo sempre irá estar direcionado para o mouse e , caso ele ainda não tenha chegado ao mouse, se moverá na direção dele (ou seja, é como se o sprite estivesse sendo controlado através do jogador, pelo mouse)” O segundo bloco é para caso o polvo seja capturado pelo dragão, ele dita que “se o polvo tocar no dragão (for capturado), ele dirá “você me capturou”!”.

52 Quanto ao dragão, queremos que ele persiga o polvo
Quanto ao dragão, queremos que ele persiga o polvo. Para isso, podemos fazer como no código a seguir. Segundo ele “quando a bandeira verde for clicada, o dragão irá sempre se mover 2 passos em direção ao polvo e deve retornar caso chegue a borda da tela”. Com isso, temos o nosso jogo! Você pode aprimorá-lo com os conhecimentos adquiridos. Que tal, adicionar outros trajes para melhorar a animação? Ou sons?

53 Exemplo 3 - Desenhando Adicionamos um sprite que é apenas um ponto e, usando a caneta, obtivemos o resultado mostrado na área 3 da figura ao lado. Tente alterar o código para obter novas figuras!

54 Referências Super Scratch programming adventure! by the LEAD Project; hProject?feature=watch