💾 Archived View for gamifi.cat › blog › 2015-11-24_ap3_entorn › index.html captured on 2024-06-16 at 12:51:18.
⬅️ Previous capture (2024-02-05)
-=-=-=-=-=-=-
<!doctype html> <html lang="ca"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="blog, cultura lliure, internet, programari lliure, snap, gemini, fediverse, llengua catalana, catala"> <title>Aprendre programando 3. Entorn - Gamifica't!</title> <link rel="stylesheet" href="../../static/style.css"> <link rel="shortcurt icon" type="image/svg" href="../../img/favicon.svg"> </head> <body> <header class="header"> <a href="#main" class="skip">Salt al contingut</a> <a href="../../" class="logo" ><img src="../../img/logo.svg" width="300" alt="Logo Gamifica't"></a> <nav class="header-right"> <a href="../">Blog</a> <a href="../../projectes/">Projectes</a> <a href="../../glossari/">Glossari</a> <a href="../../contacte/">Contacte</a> <a href="../../blog.xml" class="logo" ><img src="../../img/rss.png" width="32" alt="RSS Gamifica't"></a> </nav> </header> <main id="main"> <div class="page"> <div class="blog-post"> <h1>Aprendre programando 3. Entorn</h1> <p class="meta">2015-11-24</p> <p>Si la setmana anterior fèiem les primeres passes amb Scratch i creavem un compte, en aquest tercer mòdul veurem el menĂş, l’escenari i com se situen i es modifiquen els personatges. La propera setmana ens introduirem als blocs bĂ sics.</p> <p><a href="../2015-11-14_ap1_algoritmes/index.html">Consulta els continguts del curs</a></p> <h2>Escenari i menĂş</h2> <p>L’escenari Ă©s l’espai on interactuen els personatges i Ă©s allĂ on es visualitzen, en temps real, els projectes que creem. Cal tenir en compte que l’escenari tĂ© 480 pixels d’ample i 360 d’alt. A la part inferior de l’escenari trobem les coordenades del punter, Ă©s a dir, que se’ns indica en tot moment la posiciĂł X i Y a l’escenari.</p> <p>Afegir que, per saber les coordenades d’un personatge, Ă©s a dir, per saber en quina posiciĂł de l’escenari estĂ , nomĂ©s cal 1) clicar el personatge que vulguem, 2) anar a la pestanya Programes (sota l’interrogant del menĂş) i 3) clicar els blocs de Moviment. AllĂ trobarem un bloc titulat “Ves a x: (…) y: (…)” que indicarĂ la ubicaciĂł en coordenades a l’escenari.</p> <p><img src="../../img/scratch/entorn.png" alt="Entorn Scratch" /></p> <p>A sota de l’escenari de visualitzaciĂł trobem “l’à rea de personatges”, des d’on afegir, dissenyar i programar els nostres personatges i l’escenari. A l’esquerra dels personatges hi ha un requadre amb l’escenari principal representat. Sota d’aquest mini-escenari, trobem 4 botons per a crear un nou escenari.</p> <p>El primer d’ells, comptant d’esquerra a dreta, ens porta a la galeria d’escenaris predeterminats d’Scratch; el segon, ens permet crear el nostre escenari a l’editor grĂ fic; el tercer botĂł permet obrir un arxiu que tinguem a l’ordinador i, el quart i Ăşltim botĂł permet fer una fotografia amb la web cam.</p> <p>Un dels escenaris que proporciona Scratch de sèrie Ă©s aquest que marca les coordenades x i y a l’escenari (de 240 d’ample a 180 d’alt). Molt rĂ pidament un exemple per a les coordenades: si juguem a un joc d’aquests tipus Space Invaders… Tenim un personatge principal (que controla el jugador) situat a la part inferior de la pantalla i uns altres personatges a la part superior que disparen.</p> <p><img src="../../img/cs/xy-grid.gif" alt="Eix de coordenades" /></p> <ul> <li>Eix x</li> </ul> <p>El personatge principal es mou d’esquerra a dreta per la part inferior de la pantalla pero no puja ni baixa, nomĂ©s es mou d’esquerra a dreta, Ă©s a dir, en les seves coordenades x (en horitzontal a la nostra vista).</p> <ul> <li>Eix y</li> </ul> <p>Els personatges que disparen (bĂ©, en aquest cas, mĂ©s aviat els trets). Els trets, baixen en vertical, Ă©s a dir, que usen l’eix y (i no es mouen a l’esquerra o a la dreta sinĂł de dalt a baix perquè estan programats perquè simulin gravetat. En veritat, però, va disminuĂŻnt la posiciĂł y del personatge, de 180 (la part superior de l’escenari) cap a -180 (la part inferior de l’escenari).</p> <p>A sobre de l’escenari, a mĂ©s de d’haver-hi l’espai on posar nom al nostre projecte, trobem el menĂş general:</p> <ul> <li>Scratch: el logotip ens porta a la pĂ gina principal.</li> <li>La bola del mĂłn: serveix per a canviar l’idioma. Scratch estĂ traduĂŻt a molts idiomes i estĂ disponible en catalĂ . Per defecte ve en anglès.</li> <li>Fitxer: podem crear-ne un de nou, obrir un projecte existent, copiar el que estem creant o guardar-lo, etc.</li> <li>Edita: permet desfer el projecte, veure l’escenari mĂ©s petit i mode turbo.</li> <li>Ajuda: ens obre una finestra al lateral dret per buscar exemples senzills.</li> <li>Quan a: ens porta a l’explicaciĂł de què Ă©s Scratch i per què serveix com a eina educativa.</li> </ul> <h2>Entorn grĂ fic</h2> <p>TambĂ© trobem 5 icones a sobre dels blocs. Serveixen per modificar els objectes directament a l’escenari i per a rebre informaciĂł dels blocs:</p> <ul> <li>El segell clona els objectes</li> <li>Les tisores esborren els objectes</li> <li>Les fletxes enfora augmenten la mida dels objectes</li> <li>Les flextes endins redueixen la mida dels objectes</li> <li>L’interrogant informa del funcionament dels blocs. Clicant l’interrogant i desprĂ©s qualsevol dels blocs, ens apareix al lateral dret una finestreta amb un exemple senzill de com utilitzar aquell bloc.</li> </ul> <h2>Personatges</h2> <p>Tan l’escenari com els personatges es poden personalitzar. Podem fer tres coses: agafar dissenys predeterminats per la galeria d’Scratch, importar una imatge (vectorial o png/jpg) o crear els nostres propis amb l’editor. Realment, Ă©s un editor molt funcional i intuĂŻtiu.</p> <p>Cada personatge (o Sprite en anglès) pot tenir diversos vestits, amb el que es pot fer, per exemple, un stop motion. Cada vestit faria de fotograma. Com des de la pestanya de programaciĂł podrem mostrar un vestit/aparença/disfressa o altre pel mateix personatge, Ă©s recomanable canviar el nom dels personatges (i dels escenaris).</p> <h2>Exercici i comparticiĂł</h2> <p>L’exercici de la setmana Ă©s d’experimentaciĂł amb l’entorn: hem de crear un projecte modificant els vestits dels personatge i l’escenari.</p> <p>Al compartir el projecte, ens apareix la pantalla que veurĂ l’usuari. A dalt de l’escenari podrem modificar de nou el tĂtol del projecte i, a la dreta, hi ha tres cosetes destacables:</p> <ul> <li><p>Un espai per a les instruccions del projecte. Si Ă©s un joc, per exemple, les instruccions haurien de respondre preguntes com: quin Ă©s l’objectiu del joc? Què pot fer el personatge i com? Com es puntua?</p> </li> <li><p>Un espai per als crèdits i anotacions que vulguem fer. Jo sempre intento posar d’on surten les imatges i sons que no sĂłn d’Scratch. Si no ho has fet tu però ho estĂ s fent servir, què mĂnim que donar crèdit…</p> </li> <li><p>Un espai per a les etiquetes, que sempre seran Ăştils per a cercar el projecte. NomĂ©s en podem posar tres. Si fem un joc de Pong en catalĂ , per exemple, podem posar etiquetes com: joc, pong, catalĂ .</p> </li> </ul> <p>Altres opcions que trobem al peu del projecte sĂłn:</p> <ul> <li>Desactivar els comentaris per a aquest projecte</li> <li>Afegir el projecte a un estudi que haguem creat des de “Les meves coses” (clicar al nostre nom d’usuari a dalt a la dreta de la pantalla)</li> <li>Embedir els projectes, Ă©s a dir, exportar-los a travĂ©s del seu codi per, per exemple, posar-los al nostre blog.</li> </ul> <p><img src="../../img/scratch/drscratch_supergeganta.png" alt="Dr. Scratch Supergeganta" /></p> <h2>Dr. Scratch</h2> <p>Voldria afegir que, un cop finalitzat un projecte, podem portar-lo al doctor: literalment. Dr. Scratch Ă©s una eina (genial, pel meu gust) que permet saber quin nivell de pensament computacional tĂ© un projecte d’Scratch. Doneu la benvinguda a l’avaluador mĂ©s imparcial de la història :)</p> <p>Haurem d’agafar la URL del projecte, copiar-la i enganxar-la a la pĂ gina principal de projecte. En un tres i no res, se’ns mostrarĂ un resultat de projecte (mĂ xim 21 punts). A mĂ©s, es mostraran puntuacions en paral·lelismes, abstracciĂł, etc. Una eina meravellosament Ăştil i cuinada a foc lent per l’equip de Programamos.</p> <p><a href="http://drscratch.org/">Dr. Scratch</a></p> </div> </div> </main> <footer> Internets duals: gemini://gamifi.cat<br> <a href="../../llicencies/">Diverses llicències</a> / <a href="../../kukis/">PolĂtica de Kukis</a><br> ♥ Fet amb paciència i tecnologies lliures ♥ </footer> </body> </html>