Scratch Novatec
Scratch Novatec
Scratch Novatec
Programar com
S c r at c h
Uma introduo visual
p r o g r a m a o c o m j o g o s , a r t e,
cincia e matemtica
Ma j e d Ma r j i
novatec
Copyright 2014 by Majed Marji. Title of English-language original: Learn to Program with Scratch, ISBN 978-159327-543-3, published by No Starch Press. Portuguese-language edition copyright 2014 by Novatec Editora Ltda.
All rights reserved.
Copyright 2014 por Majed Marji. Ttulo original em Ingls: Learn to Program with Scratch, ISBN 978-1-59327-543-3,
publicado pela No Starch Press. Edio em Portugus copyright 2014 pela Novatec Editora Ltda. Todos os direitos
reservados.
Novatec Editora Ltda. 2014.
Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. proibida a reproduo desta obra, mesmo
parcial, por qualquer processo, sem prvia autorizao, por escrito, do autor e da Editora.
Editor: Rubens Prates
Traduo: Lcia Kinoshita
Reviso gramatical: Marta Almeida de S
Editorao eletrnica: Carolina Kuwabata
ISBN: 978-85-7522-312-3
Histrico de impresses:
Julho/2014
Primeira edio
O que o Scratch?
Um programa de computador nada mais do que um conjunto de instrues
que dizem o que um computador deve fazer. Essas instrues so escritas por
meio de uma linguagem de programao, e aqui que o Scratch entra em cena.
A maioria das linguagens de programao baseada em texto, o que significa
que voc deve dar comandos ao computador no que parece ser uma forma enigmtica de ingls. Por exemplo, para exibir Hello! na tela, voc pode escrever:
print('Hello!')
System.out.print("Hello!");
Um programa do Scratch
que contm um nico bloco
O resultado
da execuo
do programa
Figura 1.1 Ao executar esse bloco do Scratch, o gato diz Hello! em um balo.
O gato que voc v na figura 1.1 chamado de sprite (ator). Os sprites entendem e obedecem a conjuntos de instrues que voc lhes atribui. O bloco
roxo esquerda diz ao gato para exibir Hello! em um balo. Muitas das
aplicaes que sero criadas neste livro contero vrios sprites, e voc utilizar
blocos para fazer com que os sprites se movam, girem, digam algo, toquem
msica, realizem alguma operao matemtica e assim por diante.
Voc pode programar em Scratch ao juntar blocos diferenciados por cores,
como seria feito com as peas de um quebra-cabea ou com blocos de LEGO. As
pilhas de blocos que forem criadas so chamadas de scripts (roteiros). Por exemplo, a figura 1.2 mostra um script que altera a cor de um sprite quatro vezes.
Primeira
vez
Segunda
vez
Terceira
vez
Quarta
vez
Ferramentas
de cursor
Stage (Palco)
Paleta de blocos
Barra de menu
Scripts Area
(rea de scripts)
Janela de dicas
Abas
Figura 1.3 A interface de usurio do Scratch, em que voc ir criar os seus programas.
Voc dever ver uma nica janela contendo pelo menos os trs painis a
seguir: o Stage (Palco, na parte superior esquerda), a Sprite List (Lista de
Sprites, na parte inferior esquerda) e a aba Scripts (Roteiros, direita), que
contm a aba Blocks (Blocos) e a Scripts Area (rea de Scripts). O painel
direita tambm contm duas abas adicionais: Costumes (Fantasias) e Sounds
(Sons), que sero discutidas posteriormente nesta seo. Se estiver logado em
uma conta no site do Scratch, voc ver tambm o Backpack (Mochila, na
parte inferior direita), que contm botes que permitem compartilhar o seu
projeto e usar sprites (atores) e scripts (roteiros) de projetos existentes.
Vamos dar uma olhada rpida nos trs painis principais.
Introduo ao Scratch23
O Stage
O Stage (Palco) o local em que os seus sprites se movem, so desenhados e
interagem. O Stage tem 480 passos de largura e 360 passos de altura, conforme mostrado na figura 1.4. O centro do Stage tem coordenada x igual a 0 e
coordenada y igual a 0.
y
180
Modo de apresentao
Nome do projeto
(0,0)
240
180
240
Bandeira verde
Parar
Cursor do mouse
rea de exibio
da posio
(x,y) do mouse
x: 150 y: 100
Figura 1.4 O Stage (Palco) como um plano de coordenadas com o ponto (0,0) no
centro.
Lista de sprites
A Lista de Sprites (Sprite List) exibe os nomes e as miniaturas (thumbnails)
de todos os sprites de seu projeto. Novos projetos comeam com o Stage em
branco e um nico sprite representado por um gato, conforme mostrado na
figura 1.5.
24Captulo 1
Miniatura do Stage
Cada sprite de seu projeto tem seus prprios scripts, fantasias e sons. Voc
pode selecionar qualquer sprite e ver os seus pertences. (1) Clique na miniatura do sprite na Lista de Sprites ou (2) d um clique duplo no prprio sprite
no Stage. A miniatura do sprite selecionado no momento sempre estar em
destaque, contornada com uma borda azul. Ao selecionar um sprite, voc
poder acessar seus scripts, suas fantasias e os sons ao clicar em uma das trs
abas localizadas acima da rea de Scripts. Daremos uma olhada nos contedos dessas abas posteriormente. Por enquanto, clique com o boto direito do
mouse (ou d um ctrl-clique se voc estiver usando um Mac) na miniatura
do sprite Cat para ver o menu pop-up mostrado na figura 1.6.
Figura 1.6 Clicar com o boto direito do mouse em uma miniatura de sprite faz com que
esse menu prtico seja mostrado.
Introduo ao Scratch25
A aba Blocks
Os blocos no Scratch esto divididos em dez categorias (paletas): Motion
(Movimento), Looks (Aparncia), Sound (Som), Pen (Caneta), Data (Variveis),
Events (Eventos), Control (Controle), Sensing (Sensores), Operators (Operadores)
e More Blocks (Mais Blocos). Os blocos so diferenciados por cor para ajudar
voc a identificar facilmente aqueles que esto relacionados. O Scratch 2 tem
mais de cem blocos, embora alguns apaream somente em determinadas condies. Por exemplo, os blocos da paleta Data (Variveis, discutida nos captulos 5 e 9) aparecem somente depois que uma varivel ou uma lista for criada.
Vamos dar uma olhada nos diversos componentes da aba Blocks na figura 1.7.
Seleo atual (em detaque)
A parte superior da aba Blocks mostra
os dez grupos de blocos. Clique em
cada categoria para ver os blocos
existentes nessa categoria
Experimente clicar em um bloco para ver o que ele faz. Se voc clicar em
(mova 10 passos) da paleta Motion (Movimento), por exemplo, o sprite deslocar dez passos no Stage. Clique nesse bloco novamente e o
sprite deslocar mais dez passos. Clique no bloco say Hello! for 2 secs (diga
Hello! por 2 segundos) na paleta Looks (Aparncia) para fazer o sprite mostrar
Hello! em um balo durante dois segundos. Voc tambm pode acessar a
move 10 steps
26Captulo 1
tela de ajuda de um bloco ao selecionar Block help (Ajuda do bloco, que corresponde ao cone de ponto de interrogao) na barra de ferramentas e clicar no
bloco a respeito do qual voc tem dvidas.
Alguns blocos exigem uma ou mais entradas (tambm chamadas de argumentos) que dizem ao bloco o que ele deve fazer. O nmero 10 no bloco move
10 steps (mova 10 passos) um exemplo de um argumento. Observe a figura
1.8 para ver as diferentes maneiras pelas quais os blocos permitem que suas
entradas sejam alteradas.
Voc pode alterar o nmero de passos em move 10 steps (mova 10 passos) ao clicar na rea branca em que vemos o nmero 10 e inserir um novo
nmero , por exemplo, 30, como pode ser visto na figura 1.8. Alguns blocos,
como point in direction 90 (aponte para a direo 90 graus), tambm possuem menus suspensos para suas entradas . Voc pode clicar na seta para
baixo para ver uma lista das opes disponveis e selecionar uma delas. Esse
comando em particular apresenta uma rea em branco editvel, portanto
voc tambm pode simplesmente digitar um valor na caixa branca. Outros
blocos, como point towards (aponte para) , foraro voc a escolher um
valor a partir do menu suspenso.
Fa a voc me smo 1.4
V para a paleta Looks (Aparncia), altere o valor dos dados de entrada dos blocos e clique neles para ver o que eles fazem. Por exemplo, faa experincias com
o bloco set color effect to (mude o efeito cor para). Experimente usar nmeros
como 10, 20, 30 e assim por diante at que o gato retorne sua cor original.
Experimente usar as opes do menu suspenso com nmeros diferentes. Voc
pode clicar no bloco clear graphic effects [apague os efeitos grficos, tambm
na paleta Looks (Aparncia)] para eliminar as suas alteraes.
A rea de Scripts
Para fazer com que um sprite faa algo interessante, necessrio program-lo
arrastando blocos da aba Blocks (Blocos) para a Scripts Area (rea de Scripts),
unindo-os. Ao arrastar um bloco para a rea de Scripts, uma rea destacada em
branco indica em que local esse bloco pode ser solto para formar uma conexo
vlida com outro bloco (Figura 1.9). Os blocos do Scratch somente se encaixam de determinadas maneiras, eliminando os erros de digitao que tendem a
ocorrer quando as pessoas usam linguagens de programao baseadas em texto.
Introduo ao Scratch27
Arraste
rea de Scripts
Figura 1.9 Arraste os blocos para a rea de Scripts e una-os para criar scripts.
Voc pode facilmente desmontar uma pilha de blocos e testar cada uma
das partes individualmente. Essa ser uma estratgia de valor inestimvel
quando voc estiver tentando entender scripts longos. Para mover toda uma
pilha de blocos, clique no bloco superior da pilha. Para desassociar um bloco
que est no meio de uma pilha e todos os blocos abaixo dele, clique nesse
bloco e arraste-o. V em frente e experimente fazer isso.
Esse recurso tambm permite criar o seu projeto por partes. Voc pode
conectar conjuntos pequenos de blocos, test-los para garantir que funcionam
conforme esperado e ento combin-los em scripts mais longos.
28Captulo 1
Voc pode at mesmo copiar uma pilha de blocos de um sprite para outro.
Basta arrastar a pilha da rea de Scripts do sprite de origem para a miniatura
do sprite de destino na Lista de Sprites.
Fa a voc me smo 1.6
Adicione outro sprite ao seu projeto. Arraste o script do sprite Cat e solte-o sobre a
miniatura do novo sprite. O ponteiro do mouse deve estar sobre a miniatura do novo
sprite para que esse processo seja bem-sucedido. Verifique a aba Scripts (Roteiros)
do novo sprite para garantir que ele contenha uma cpia idntica do script.
A aba Costumes
A aparncia de um sprite pode ser alterada se mudarmos a sua fantasia
(costume), que somente uma imagem. A aba Costumes (Fantasias) contm
tudo o que necessrio para organizar as fantasias de seu sprite; voc pode
imagin-la como se fosse um guarda-roupa. O guarda-roupa pode conter
diversas fantasias, porm um sprite pode vestir somente uma em um determinado instante.
Vamos agora tentar alterar a fantasia do sprite Cat. Clique na miniatura
do sprite Cat e selecione a aba Costumes (Fantasias). Como mostrado na
figura 1.10, Cat tem duas fantasias: costume1 e costume2. A fantasia em destaque
(costume1, nesse caso) representa a fantasia atual do sprite.
Utilize estes botes para adicionar
novas fantasias ao sprite
Utilize esta caixa de edio para
alterar o nome da fantasia selecionada
Clique no x para apagar a fantasia
A fantasia em destaque representa
a fantasia atual do sprite
Voc pode alterar a ordem
das fantasias ao arrastar e
mover as miniaturas
Clique na miniatura de uma
fantasia para fazer com que ela
seja a fantasia corrente
Figura 1.10 Voc pode organizar todas as fantasias de um sprite a partir da aba
Costumes (Fantasias).
Se voc clicar com o boto da direita do mouse na miniatura de uma fantasia, um menu pop-up com trs opes ser apresentado: (1) duplicate (duplicar), (2) delete (apagar) e (3) save to local file (salvar em arquivo local). A
primeira opo adiciona uma nova fantasia com uma imagem idntica da
fantasia que voc estiver duplicando. A opo delete apaga a fantasia selecionada. A ltima opo permite salvar a fantasia em um arquivo. Voc pode
Introduo ao Scratch29
A aba Sounds
Os sprites tambm podem reproduzir sons, o que deixa os seus programas
mais animados. Por exemplo, voc pode disponibilizar diferentes sons a um
sprite para que sejam usados quando ele estiver feliz ou triste. Se o seu jogo
contiver um sprite que se parea com um mssil, voc poder faz-lo gerar
sons diferentes de acordo com o fato de o mssil atingir ou errar um alvo.
Os botes da aba Sounds (Sons) ajudaro a organizar os diferentes sons
que seus sprites podem reproduzir. Como mostrado na figura 1.11, o Scratch
oferece at mesmo uma ferramenta que pode ser usada para editar arquivos
de udio. No discutirei os detalhes a respeito dessa ferramenta neste livro,
porm sugiro que voc faa experimentos por conta prpria.
Na maioria das vezes, voc precisar somente dos trs botes que esto
na parte superior da aba Sounds. Eles permitem selecionar um som a partir
da biblioteca de sons do Scratch , gravar um udio novo (se voc tiver
um microfone) ou importar um arquivo de udio de seu computador . O
Scratch pode ler somente arquivos de udio MP3 e WAV.
Utilize estes botes para adicionar um novo som a um sprite
Voc pode digitar um nome diferente para o som
Figura 1.11 A aba Sounds (Sons) permite organizar os sons associados a um sprite.
30Captulo 1
A aba Backdrops
Ao selecionar a miniatura do Stage na Lista de Sprites, o nome da aba do meio
mudar de Costumes (Fantasias) para Backdrops (Panos de fundo). Utilize essa
aba para organizar as imagens de fundo do Stage, que podem ser alteradas juntamente com seus scripts. Por exemplo, se voc estiver criando um jogo, um
pano de fundo contendo instrues para comear poder ser apresentado e,
em seguida, poder ser alterado para algo diferente quando o usurio iniciar o
jogo. A aba Backdrops (Panos de fundo) idntica aba Costumes (Fantasias).
Fa a voc me smo 1.9
Clique no boto Choose backdrop from library (Escolher fundo do acervo)
abaixo da miniatura do Stage na Lista de Sprites. Selecione o pano de fundo
xy-grid na janela apresentada e clique em OK. O Scratch adicionar o xy-grid
ao seu projeto e far com que ele seja o pano de fundo default. (O xy-grid mostra um plano cartesiano de duas dimenses, que ser til quando voc estiver
trabalhando com os blocos de comando de Movimento.) Repita esses passos e
selecione qualquer outro pano de fundo que voc desejar.
Introduo ao Scratch31
A barra de ferramentas
Vamos dar uma olhada rpida na barra de ferramentas do Scratch na figura
1.14, comeando por alguns dos botes. (A barra de ferramentas ter uma
aparncia um pouco diferente se voc estiver logado, conforme ser discutido no Apndice A.) Utilize os botes Duplicate (Duplicar) e Delete (Apagar)
para copiar e remover sprites, fantasias, sons, blocos ou scripts. O boto Grow
(Aumentar) aumenta o sprite, enquanto o boto Shrink (Reduzir) faz com que
ele diminua. Basta clicar no boto que voc quiser usar e, em seguida, clicar em
um sprite (ou em um script) para aplicar essa ao. Para retornar ao cursor em
forma de seta, clique em qualquer rea em branco da tela. Voc pode utilizar o
menu Language (Idiomas) para alterar o idioma da interface do usurio.
32Captulo 1
Duplicar
Idiomas
Apagar
Diminuir
Aumentar
A partir do menu File (Arquivo), voc pode criar novos projetos, carregar (abrir) um projeto existente em seu computador, descarregar (salvar) o
projeto corrente para o seu computador ou desfazer (undo) todas as alteraes feitas no projeto corrente. Os projetos do Scratch 2 tm uma extenso de
arquivo .sb2 para distingui-los dos projetos criados com a verso anterior do
Scratch (.sb).
No menu Edit (Editar), a opo Undelete (Recuperar) trar de volta o
ltimo bloco, script, sprite, fantasia ou som que voc apagou. A opo Small
stage layout (Disposio com palco pequeno) diminui o Stage e proporciona
mais espao para a rea de Scripts. Selecionar Turbo mode (Modo turbo)
aumenta a velocidade de alguns blocos. Por exemplo, executar um bloco
move (mova) 1.000 vezes pode levar cerca de 70 segundos em modo normal e
aproximadamente 0,2 segundo em modo Turbo.
Agora que vimos o essencial sobre a barra de ferramentas do Scratch, discutiremos brevemente o Paint Editor includo no Scratch.
O Paint Editor
Voc pode usar o Paint Editor (Figura 1.15) para criar ou editar fantasias (costumes) e panos de fundo (backdrops). ( claro que voc tambm pode usar o
seu programa favorito de edio de imagens.) Se quiser aprender mais sobre
o Paint Editor do Scratch, d uma olhada em ScratchPaintEditor.pdf (localizado
junto aos recursos online, que podem ser baixados a partir de http://nostarch.
com/learnscratch/).
Por enquanto, h dois recursos importantes que voc deve conhecer: definir o centro de uma imagem e definir a cor transparente. Vou explicar esses
recursos nas sees a seguir.
Introduo ao Scratch33
Especificar
centro da
fantasia
Cor
transparente
Figura 1.16 Alterando o centro de uma fantasia aps clicar no boto Set costume center
(Especificar centro da fantasia).
34Captulo 1
Figura 1.17 Voc pode deixar qualquer parte de uma imagem transparente ao
preench-la com a cor transparente .
Agora que voc conhece a interface do Scratch, faremos um bom uso desse
conhecimento e criaremos algo divertido. Arregace as mangas e prepare-se:
vamos criar um jogo!
Introduo ao Scratch35
Nesta seo, voc criar um jogo para um s participante, no qual os jogadores deslocaro uma raquete para evitar que uma bola de tnis atinja o piso, de
acordo com o clssico jogo Pong do tipo arcade. A interface de usurio para o
nosso jogo est sendo mostrada na figura 1.18.
Quando o jogo iniciado,
a bola comea neste ponto
e se move para baixo em
um ngulo aleatrio
Quando a bola atinge a
raquete, ela rebatida
em um ngulo aleatrio
Utilize o mouse para mover
a raquete horizontalmente
Se a bola tocar nesta parte
do Stage, o jogo chegar ao fim
36Captulo 1
a
Selecione
ferramenta Retngulo
Selecione o
retngulo cheio
Selecione
a cor
Figura 1.19 Passos para desenhar um retngulo na parte inferior da imagem do pano de fundo.
38Captulo 1
Comece o movimento.
Se tocar na borda do
Stage, faa a bola ser
rebatida
225
180
135
Introduo ao Scratch39
Parabns! Seu jogo agora est completo (a menos, claro, que voc queira
acrescentar mais recursos a ele), e voc acabou de implementar o seu primeiro
programa no Scratch. Se quiser realizar mais alguns experimentos, tente
duplicar o sprite Ball para ter duas (ou mais) bolas em seu jogo e veja como
isso muda a maneira de jogar!
40Captulo 1
Blocos de comando
Blocos de funo
No possuem
salincias.
Retornam um valor
Blocos de trigger
Blocos de controle
Figura 1.26 O formato de um bloco de funo indica o tipo de dado que ele retorna.
Operadores aritmticos
O Scratch suporta as quatro operaes aritmticas bsicas de adio (+), subtrao (-), multiplicao (*) e diviso (/). Os blocos usados para realizar essas
operaes, chamados de operadores, esto sendo mostrados na figura 1.27.
Como esses blocos geram um nmero, voc pode utiliz-los como entradas
para qualquer bloco que aceite nmeros, conforme mostrado nessa figura.
Exemplo
Operador
Adio
Subtrao
Multiplicao
Diviso
42Captulo 1
Nmeros aleatrios
medida que programar com mais frequncia, bem provvel que voc precisar gerar nmeros aleatrios em algum momento, especialmente se voc
criar jogos e simulaes. O Scratch disponibiliza o bloco pick random (escolha nmero entre) especificamente para esse propsito.
Esse bloco gera um nmero aleatrio sempre que utilizado. Suas duas
caixas brancas editveis permitem inserir um intervalo para esse nmero, e
o Scratch selecionar valores somente entre esses dois limites (inclusive). A
tabela 1.1 mostra alguns exemplos de uso desse bloco.
Tabela 1.1 Exemplos de uso do bloco pick random (escolha nmero entre)
Exemplo
Resultados possveis
{0, 1}
{0, 1, 2, 3, ... , 10}
{2, 1, 0, 1, 2}
{0, 10, 20, 30, ... , 100}
{0, 0.1, 0.15, 0.267, 0.3894, ... , 1.0}
{0, 0.01, 0.12, 0.34, 0.58, ... , 1.0}
Nota
Funes matemticas
O Scratch tambm suporta um grande nmero de funes matemticas. O
bloco sqrt of (raiz quadrada de) agrupa 14 funes matemticas que podem ser
selecionadas a partir do menu suspenso, incluindo raiz quadrada, funes trigonomtricas, logartmicas e exponenciais. Consulte MathematicalFunctions.pdf
para obter uma descrio detalhada dessas funes.
Resumo
Este captulo forneceu uma viso geral do Scratch e de seu ambiente de programao. Voc conheceu os vrios elementos da interface do usurio e at
mesmo criou um jogo! Tambm exploramos os operadores e as funes matemticas do Scratch.
Introduo ao Scratch43
Problemas
1. D o resultado de cada bloco do script a seguir. H um padro nesses
produtos?
Valor
3 + (2 5)
(10 / 2) 3
7 + (8 2) 4
(2 + 3) 4
5 + (2 (7 4))
(11 5) (2 + 1) / 2
5 (5 + 4) 2 (1 + 3)
(6 + 12) mod 4
3 (13 mod 3 )
5 + (17 mod 5) 3
Agora utilize o comando say (diga) e os blocos apropriados de operadores para conferir suas respostas.
4. Avalie as expresses a seguir do Scratch usando lpis e papel. Suponha
que x = 2 e y = 4.
44Captulo 1
a)
d)
b)
e)
c)
Introduo ao Scratch45