Embedded Files
En èpoques d'engany com ara, dir la veritat és revolucionari. Front el feixisme, ni un pas enrere! Viure sense llibertat, no és viure, és sobreviure.
Teoria. Canvas i Sprite
Teoria. Canvas i Sprite
El component Canvas permet que una pantalla o una part de la mateixa contingui objectes en moviment i l'usuari pugui actuar sobre ells. El Canvas s'utilitza per crear una gran varietat de jocs.
El Canvas està format per tres elements:
El Stage o l'escenari és el fons del Canvas. En ell és pot definir un color de fons o una imatge de fons, un color de vora i l'alçada i l'amplada de l'escenari.
Un Sprite Type és una categoria de Sprites que podeu afegir a l'aplicació. Per exemple, en un videojoc és possible que tingueu un Sprite Type de personatge principal i un Sprite Type d'obstacles.
Un Sprite és un únic element d'un Sprite Type. A l'exemple del videojoc, podeu tenir un únic Sprite Type genèric d'obstacles, que contingui diversos Sprites d'obstacles a la vostra aplicació.
Al següent exemple hem creat un joc on la imatge de la Marmota xoca contra el component Sprite_Type2 que està formada per 4 imatges o com s'anomenen dins del Thunkable 4 Sprites.
Com ja veureu, per moure els objectes de la pràctica 4 creareu un Canvas que contindrà dos Sprite_Types i 5 Sprites.
Pràctica 4. Timer, Canvas i Sprite
Pràctica 4. Timer, Canvas i Sprite
En aquesta pràctica aprendreu a utilitzar els:
Instrucció When
Timer.
Canvas i Sprite.
Creeu una app que anomenareu Cognom_Nom_App4.
Heu de crear un joc molt senzill. El funcionament és el següent:
Tenim un marcador i tres rectangles: blau, vermell i verd.
El vermell està immòbil al centre de la pantalla, però el podeu arrossegar amb el dit per la pantalla.
El blau i verd és mouen aleatòriament per la pantalla.
Quan el blau toca el vermell sumeu 10 punts al marcador.
Quan el verd toca el vermell resteu 10 punts al marcador.
Una bola que es mourà per la pantalla rebotant per les parets. Si el rectangle vermell la toca es resta 10 punts.
Apareixen aleatòriament boles taronges. Si el rectangle vermell les toca es resta 10 punts.
P4 Com funciona el joc.mp4Inserir el Label del Marcador i crear la variable als blocs
Inserir el Label del Marcador i crear la variable als blocs
Inseriu un Label que serà el marcadore amb les propietats:
Nom: L_Marcador.
Text 0.
Size i Color que vulgueu.
Dins dels blocs, creeu una variable anomenada Marcador amb valor inicial a 0.
Inserir el Canvas, l'Stage, l'Sprite Type i els Sprites
Inserir el Canvas, l'Stage, l'Sprite Type i els Sprites
Inseriu un Canvas que anomenareu Canvas1 amb les propietats:
X: 3 i Y: 53.
Width: 365 i Height: 610.
Dins del Canvas1 s'ha creat un Stage1 que tindrà les següents propietats:
Background Color i Frame Color el que vulgueu.
Height: 570 i Width: 580.
Dins de l'Stage1 s'ha inserit un Sprite_Type1 que podeu anomenar SpT_Objectes.
Canvas.webmDins del SpT_Objectes inseriu tres Sprites (Sprite1, Sprite2 i Sprite3) i per a cadascun configureu les propietats:
Noms: Sprite1 (Sp_RectangleVermell), Sprite2 (Sp_RectangleBlau) i Sprite3 (Sp_RectangleVerd).
Height i Width de 50.
Posició del Sp_RectangleVermell: X i Y 250.
Posició del Sp_RectangleBlau: X i Y 100.
Posició del Sp_RectangleVerd: X i Y 200.
Per poder arrossegar amb el dit el rectangle Vermell
Per poder arrossegar amb el dit el rectangle Vermell
Activeu a True la propietat Is Draggable del Sp_RectangleVermell.
Abans de continuar comproveu amb l'iPad que l'app és veu correctament. En cas contrari, reviseu les configuracions anteriors.
Blocs per fer moure aleatòriament els rectangles Blau i Verd
Blocs per fer moure aleatòriament els rectangles Blau i Verd
Per moure els rectangles de manera aleatòria dins del Canvas utilitzareu dos Timers, un pel rectangle verd (Sp_RectangleVerd) i un altre pel blau (Sp_RectangleBlau). Les seves propietats seran:
Nom: TVerd i TBlau.
Interval 2 seconds.
Loops i Enabled True.
Els blocs que utilitzareu i que podeu veure més a baix, per moure aleatòriament els rectangles els trobareu dins dels Timers, i les categories Motion i dins de Math.
Ara creeu el Timer i les instruccions de moviment per al rectangle verd.
Abans de continuar comproveu amb l'iPad que l'app és veu correctament.
Timers.webm
Blocs per incrementar el marcador quan xoquin els rectangles
Blocs per incrementar el marcador quan xoquin els rectangles
Abans heu creat la variable Marcador amb valor inicial 0. Ara sumareu 10 punts cada vegada que el rectangle Vermell xoqui amb el Verd o el Blau.
Utilitzareu la instrucció When ... Collides with ...
Tot seguit sumareu 10 punts.
I per últim mostrareu la puntuació al Label LMarcador.
Ara creeu les instruccions per la col·lisió del rectangle vermell amb el verd, però quan xoqui retareu 10 punts al marcador.
Abans de continuar comproveu amb l'iPad que l'app és veu correctament.
Afegir la bola groga
Afegir la bola groga
Dins de l'Sprite Type SpT_Objectes, inseriu una bola groga (Bola Groga) que es mourà per la pantalla rebotant per les parets.
Nom: Sp_BolaGroga.
Les mides Heigh i Width 25.
Inseriu, a l'esquerra del marcador, un botó anomenat B_BolaGroga. Quan cliqueu el botó la bola és mourà per la pantalla. Necessitareu els blocs:
When Click del botó.
Dins de la categoria Direction que trobareu al Canvas, el bloc Set ... angle to ... amb un random entre 0 i 360.
I dins de la categoria Motion que trobareu al Canvas, el bloc Set ... speed to ... pointing direction. Amb 200 de velocitat.
Feu que quan la bola toqui alguna de les parets (edge) reboti.
Dins de la categoria Events que trobareu al Canvas, el bloc When ... collides with any edge.
I repetireu les dues mateixes instruccions anteriors de l'angle i speed.
Mireu als apartats anteriors per fer que quan el rectangle vermell xoqui amb la bola groga descompti 10 punts.
Abans de continuar comproveu amb l'iPad que l'app és veu correctament.
Afegiu les boles taronges aleatòries
Afegiu les boles taronges aleatòries
Ara creareu un nou SpriteType que generarà cada segon unes boles. Quan el rectangle vermell xoqui amb una d'aquestes boles retarem 1 punt al marcador. Com ho fareu:
Inseriu un nou SpriteType que anomenareu Sp_BolaTaronja (Bola Taronja), amb les mides Heigh i Width 25.
Creeu un nou Timer que anomenareu (TBolesTaronges).
Cada 1 segon apareixerà una nova bola taronja en llocs aleatoris de la pantalla. Per fer això necessiteu les instrucions:
La instrucció d'inici del Timer When ... Fires.
Dins de la categoria Add & Remove que trobareu al Canvas, el bloc Create ... amb un random a la X i a la Y entre 25 i 475.
Mireu als apartats anteriors per fer que quan el rectangle vermell xoqui amb alguna bola descompteu 10 punts.
Abans de continuar comproveu amb l'iPad que l'app és veu correctament. En cas contrari, reviseu les configuracions anteriors.
Extra per assolir l'Excel·lent Alt. Afegir un so de fons al joc
Extra per assolir l'Excel·lent Alt. Afegir un so de fons al joc
Descarregueu aquest so. Feu que soni des de l'inici del joc. La seva durada ha de ser de 35 segons.
Lliurament de la Pràctica
Lliurament de la Pràctica
Data de lliurament de la pràctica:
Per lliurar l'app, premeu la icona Share que trobareu al Thunkable i genereu el link que copiareu a la Plataforma. Trobareu l'explicació més detallada si cliqueu aquí.
Data d'entrega: 06/06/2025.
Report abuse