LifeBar in App Inventor

How to a Add LifeBar to your game


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.



0 comentarios:

Publicar un comentario