Life Bar in App Inventor



In this #tutorial I show you how to add a lifebar to your App Inventor 2 game. .

1.- To make it first we create the basic graphic for the life bar, I used Inkscape (256px x 32px rectangle)
 
2.- We import it to app inventor
3.- We design the basic layout, sprites,canvas, clocks
4.- We declare the variables (full size bar, reduction fraction, original xPosition for lifebar etc)
5.- We create a "loadDefaults" procedure (runs when screen initializes.
6.- We create a "updateLifeBar" procedure to reduce the life bar width, 
7.- Insert the updateLifeBar procedure in a clock to reduce over the time.
8.- instead using a clock, I show you how to reduce size or increase size depending on collision Event, so if we collide with "Item" we increase lifebar width or if we collide with enemy reduce life bar. 

Hope you find this tutorial interesting.

Keywords: AppInventor, App Inventor, tutorial, lifebar,making an app, making an app, MIT app inventor

Tutorial, how to make a lifebar (life-bar) in app inventor


Another example:


0 comentarios:

Publicar un comentario