21 Jul

Pràctiques Snap! 1 – Control i moviment

A les últimes entrades, he estat escrivint una introducció als llenguatges de programació visuals com Snap! amb un petit tutorial introductori. Ho faig per tal d’apropar l’eina als catalanoparlants. Com a més, ahir vam fer un taller d’Storytelling amb Snap! a l’Espai Obert de Sants, documentaré una mica el que vam fer i una miqueta més per posar exemples de com manegar totes les categories de blocs.

RECORDATORI I OBJECTIU

Com comentàvem a l’última entrada de la paleta de blocs, els blocs de control (de color groc) són imprescindibles i permeten diverses accions, com que succeeixin esdeveniments quan es clica una tecla o un objecte, que s’aturi un projecte o s’esperi un objecte i, fins i tot, repetir accions, establir condicions o crear clons.

Els blocs de moviment (de color  blau fosc), recordem que posicionen els objectes a l’escenari i els fan moure, girar, lliscar i, fins i tot, els poder fer rebotar al tocar una vora de l’escenari. És important recordar també que l’escenari no té blocs de moviment, només en tenen els objectes o sprites.

L’objectiu d’aquesta entrada és aprendre a manegar blocs de moviment i control. Per començar, farem una cosa ben fàcil: fer moure la fletxa per l’escenari. Primer la farem moure poquet i manualment. Després, la programarem perquè vagi tota sola. I, a la propera pràctica, convertirem la nostra fletxa en un ratpenat volador!

BANDERA VERDA I PASSOS
.

  1. Un cop dins de la web d’Snap!,
  2. Obrim un nou projecte i cliquem sobre l’objecte de la fletxa a la zona dels objectes i l’escenari.
  3. A la pestanya dels “Programes”, arrosseguem des de la paleta fins l’àrea de treball un bloc de control de color groc “Quan la bandera verda es premi”.
  4. I, encaixat a sota, posem un altre bloc: “Moure 100 passos” (que trobarem a la categoria de moviment, blau fosc). 

Snap0-Intro1-Programacio-visual-bloc Per defecte, el nombre de passes és 10, però podem variar-ne el nombre tot clicant sobre del número i modificant-lo al nostre gust.

Snap3-Blocs-Basics1-Control-Moviment1-coord

PASSOS I ESCENARI

Si programem aquest conjunt de blocs o script, indicarem a l’objecte (la fletxa) que s’ha de moure 100 passes (o píxels) cada vegada que es cliqui la bandera verda, que és com un botó de play.

Com per defecte l’objecte de la fletxa se situa  apuntant 90º, és a dir, mirant cap a la dreta, al clicar la bandera verda, la fletxa es desplaçarà cap a la dreta de l’escenari.

A la imatge de l’esquerra la fletxa se situa a les coordenades x=0; y=0, és a dir, al centre de l’escenari. Un cop desplaçada, és a la coordenada x=100; y=0.

L’escenari fa un total de 480×360 píxels o passes: 480 píxels de llarg (coordenada horitzontal x) i 360 píxels d’ample (coordenada vertical y). Intentaré fer una entrada per explicar millor les coordenades, que són molt útils!

Xy-grid

BUCLE INFINIT

Com és molt avorrit anar clicant tota l’estona la bandera perquè l’objecte es mogui, podem crear un bucle infinit i l’objecte es mourà sol tota l’estona fins que parem el projecte. Snap3-Blocs-Basics1-Control-per-sempre-bloc

Per fer-ho, necessitarem un bloc de control (groc) que es diu “per sempre”. Haurem de:

  1. Desenganxar el bloc de moviment del bloc de la bandera verda
  2. I posar-lo dins del bucle “per sempre”.
  3. Finalment, haurem de fer encaixar el bloc sota de la bandera verda.

Snap-Practica-Blocs-Control-Moviment-per-sempre-tallUn cop acabat, assegura’t que el projecte està aturat (o clica el botó vermell d’Stop) i tornar a clicar la bandera verda (o botó verd de Play).

RECUPERA I REBOTA

On ha anat la fletxa? Al posar el bucle “per sempre” ha desaparegut la fletxa perquè ha començat a moure’s de 100 en 100 passes i ha acabat sortint de l’escenari. Però no passa res, la podem recuperar!

Si la fletxa surt de la pantalla, pots recuperar-la aturant el projecte i clicant el bloc de moviment blau fosc «vés a x: 0 y: 0». Pots clicar directament el bloc a la paleta i veuràs com la fletxa torna a aparèixer dins de l’escenari. Les coordenades 0,0 del bloc situaran a la fletxa al centre de l’escenari.

Perquè la fletxa no surti més de la pantalla, podem posar el bloc de moviment blau fosc «rebotar si toca una vora» dins del bucle “per sempre”. Si cliquem de nou la bandera verda (o al damunt del bloc) per activar el nostre programa, veurem com ara la fletxa es desplaça per la pantalla en un moviment esquerra/dreta perquè rebota quan toca una vora.

Perquè la fletxa no vagi tant ràpid, podem variar el nombre de passes. Jo en posaré 10 per no marejar-me, hehe.

Snap3-Blocs-Basics2-Moviment-ves-x-y-rebota

POSICIONA

Per qüestió d’eficiència i precisió, quan programem sempre és millor tenir en compte algunes bones pràctiques, una d’elles, posicionar els objectes al iniciar un projecte. Al nostre bloc, li podem afegir un bloc de moviment “ves a x=0 y=0” per situar l’objecte al centre de la pantalla al iniciar el projecte.

Com veiem a la imatge, també podem afegir comentaris als blocs. Clica botó dret sobre l’àrea de treball dels blocs de programació i clica l’opció “afegeix un comentari”. El pots deixar a la pantalla o arrossegar-lo cap a un bloc concret d’un script o conjunt de blocs.

Snap-Practica-Blocs-Moviment-Control-posicionar-comentari-tall

RESULTAT  I CONSELL

Resultat del projecte: aquí deixo el projecte d’exemple d’aquesta primera pràctica de control i moviment a Snap!

Consell: “desa” el teu projecte a Snap! amb un nom que l’identifiqui, com per exemple: “Pràctica 1. Control i moviment”. Si segueixes a la propera pràctica, fes una copia d’aquest primer projecte.

Per fer-ho, clica l’opció “desa com” i posa-li per exemple “Pràctica 2. Aparença i so”. Si vas fent totes les pràctiques sobre el mateix projecte, només tindràs un projecte. Si les deses separadament, tindràs un projecte per a cada pràctica.

Segueix a “Pràctiques Snap! 2 – Aparença i so” per canviar-li el vestit a l’objecte de la fletxa i a l’escenari. Convertirem la fletxa en un ratpenat que sobrevola una ciutat. També podrem posar un so al nostre ratpenat.

 

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *