Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.
|
B4A en español - Juan Antonio Villalpando
(BASIC4Android)
-- Tutorial de B4A --
Volver al índice del tutorial
____________________________
48.- Rebote de bola. Movimiento lateral del fondo.
- Tutoriales. Rebote de bola. Movimiento lateral del fondo.
____________________________
1.- Rebote de bola.
- Presentación.
La pantalla debe estar en horizontal (landscape, panorámico), para ello pulsamos la combinación de teclas:
Ctrl - F11
- En esta ocasión vamos a realizar un programa en donde una bola roja rebote contínuamente en la pantalla.
- Me he basado en el programa anterior de tiro parabólico, voy a utilizar el mismo fondo de paisaje.
- Creamos un Layer y le añadimos un Canvas, un canvas es un lugar donde podemos dibujar, en este caso una bola roja.
- Ponemos un Temporizador con un Intervalo de 1 ms, (su tiempo se establece en milisegundos).
- Cada vez que pasa 1 milisegundo se ejecuta el algoritmo que contiene.
- Se incrementa x, se incrementa y, se dibuja un círculo rojo en x,y
- Si los valores de x,y se salen del límite de la pantalla, la bola cambia su dirección.
- Podemos hacer que la bola vaya más rápida o más lenta cambiando el Intervalo del Temporizador:
temporizador.Initialize("temporizador", 1) ' 1000 = 1 segundo
- También se puede variar la velocidad, cambiando los valores de los incrementos de x, y. Si ponemos incrementos distintos, variará el ángulo de recorrido.
- Para realizar el programa, copiamos y pegamos el código, y guardamos la imagen "paisaje.gif" en la carpeta Files del proyecto.
- Si deshabilitamos la línea siguiente, se verá el rastro de la bola.
' canvas1.DrawBitmap(bmpBackground, Null, DestRect)
- El programa se puede depurar algo más, ya que los rebotes en la parte derecha y abajo no ha tenido en cuenta el ancho de la bola.
- En vez de una bola se puede poner un gráfico como veremos en los siguientes proyectos.
paisaje.gif
Rebote de bola |
' Juan Antonio Villalpando
' juana1991@yahoo.com
Sub Globals
Dim temporizador As Timer
Dim pnlLayer1 As Panel
Dim canvas1 As Canvas
Dim DestRect As Rect
Dim derecha, arriba As Boolean
Dim x, y As Int
x = 100 : y = 100
Dim bmpBackground As Bitmap
Dim bmdBackground As BitmapDrawable
End Sub
Sub Activity_Create(FirstTime As Boolean)
' Establece Fondo de Activity bmpBackground.Initialize(File.DirAssets,"paisaje.gif")
bmdBackground.Initialize(bmpBackground)
Activity.Background = bmdBackground
' Crea el Panel
pnlLayer1.Initialize("pnlLayer1")
Activity.AddView(pnlLayer1, 0, 0, 100%x, 100%y)
' Crea un Canvas en el Panel, para dibujar el círculo rojo.
canvas1.Initialize(pnlLayer1)
' Temporizador
temporizador.Initialize("temporizador", 1) ' 1000 = 1 segundo
temporizador.Enabled = True
DestRect.Initialize(0dip, 0dip, 100%x,100%y)
End Sub
Sub Temporizador_Tick
If derecha = True Then
x = x + 10
Else
x = x - 10
End If
If x <= 0 Then derecha = True
If x >= 100%x Then derecha = False
If arriba = True Then
y = y + 10
Else
y = y - 10
End If
If y <= 0 Then arriba = True
If y >= 100%y Then arriba = False
canvas1.DrawBitmap(bmpBackground, Null, DestRect)
canvas1.DrawCircle(x, y, 5, Colors.Red, True, 3dip)
pnlLayer1.Invalidate
End Sub
|
____________________________
2.- Bola que rebota y paleta.
Vamos a crear un nuevo proyecto, utilizaremos el archivo de paisaje.gif que hemos usado en el proyecto anterior y además el archivo bola.gif y paleta.gif que podemos bajar de aquí... (Estos archivos se guardan en la carpeta Files del proyecto)
Recordemos que la carpeta Files se llama desde el código como File.DirAssets
bola.gif paleta.gif
- No utiliza Canvas porque no hay que dibujar la bola, en este caso la bola es un gráfico: bola.gif
- He creado por código un ImageView y luego la he añadido al Panel1
Panel1.AddView(ImageView1,50,50,50,50)
- El rebote lo realiza esta línea
If (xb > (xp - 100) AND xb < (xp + 100)) AND (yb > (yp - 50) AND yb < (yp + 50)) Then arriba = False
Se debe perfilar un poco, se puede utilizar las propiedades With y Heigh de la imagen para acotar la zona de rebote.
- Es un código de ejemplo y aprendizaje y por tanto mejorable.
Rebote de bola con paleta |
' Juan Antonio Villalpando
' juana1991@yahoo.com
Sub Globals
Dim temporizador As Timer
Dim panel1, panel2 As Panel
Dim ImageView1 As ImageView ' Contendrá la bola.gif
Dim bmpImage As Bitmap
Dim derecha, arriba As Boolean
Dim xb, yb, xp, yp As Int ' Posición de la bola y la paleta
Dim bmpBackground As Bitmap
Dim bmdBackground As BitmapDrawable
Dim labelxb, labelyb, labelxp, labelyp As Label
Dim boton As Button
End Sub
Sub Activity_Create(FirstTime As Boolean)
' Fondo de pantalla del Activity
bmpBackground.Initialize(File.DirAssets,"paisaje.gif")
bmdBackground.Initialize(bmpBackground)
Activity.Background = bmdBackground
' Crea Panel 1
panel1.Initialize("panel1")
Activity.AddView(panel1, 0, 0, 100%x, 100%y)
' Crea ImageView con la bola y lo agrega al Panel1
bmpImage.Initialize(File.DirAssets,"bola.gif")
ImageView1.Initialize("ImageView1")
ImageView1.Bitmap=bmpImage
Panel1.AddView(ImageView1,50,50,50,50) ' Posición inicial y tamaño
' Crea Panel 2 y lo agrega a Panel 1
panel2.Initialize("panel2")
panel2.SetBackgroundImage(LoadBitmap(File.DirAssets, "paleta.gif"))
panel1.AddView(panel2, 100, 100, 100, 50) ' Posición inicial y tamaño
' Crea Botón
boton.Initialize("boton")
Activity.AddView(boton, 5, 200, 160, 55) ' Posicion, ancho y alto
boton.Text = "Parar S/N"
' Crea etiqueta xb
labelxb.Initialize("labelxb")
labelxb.TextColor = Colors.Black
labelxb.Text = "Xb = "
Activity.AddView(labelxb, 5, 5, 200, 30) ' Posicion, ancho y alto
' Crea etiqueta yb
Labelyb.Initialize("labelyb")
labelyb.TextColor = Colors.Black
labelyb.Text = "Yb = "
Activity.AddView(labelyb, 5, 50, 200, 30) ' Posicion, ancho y alto
' Crea etiqueta de xp
labelxp.Initialize("labelxp")
labelxp.TextColor = Colors.Black
labelxp.Text = "Xp = "
Activity.AddView(labelxp, 5, 100, 220, 30) ' Posicion, ancho y alto
' Crea etiqueta yp
labelyp.Initialize("labelyp")
labelyp.TextColor = Colors.Black
labelyp.Text = "Yp = "
Activity.AddView(labelyp, 5, 150, 200, 30) ' Posicion, ancho y alto
' Temporizador
' 1 milisegundo de intervalo
temporizador.Initialize("temporizador", 1) ' 1000 = 1 segundo
temporizador.Enabled = True
End Sub
Sub Temporizador_Tick
If derecha = True Then
xb = xb + 5
Else
xb = xb - 5
End If
If xb <= 0 Then derecha = True ' Rebotes horizontales
If xb >= 100%x - ImageView1.Width Then derecha = False
If arriba = True Then
yb = yb + 5
Else
yb = yb - 5
End If
If yb <= 0 Then arriba = True ' Rebotes verticales
If yb >= 100%y - ImageView1.Height Then arriba = False
' Rebote en la paleta
If (xb > (xp - 100) AND xb < (xp + 100)) AND (yb > (yp - 50) AND yb < (yp + 50)) Then arriba = False
Labelxb.Text ="Xb = " & xb
Labelyb.Text ="Yb = " & yb
Labelxp.Text ="Xp = " & xp
Labelyp.Text ="Yp = " & yp
ImageView1.Left = xb
ImageView1.Top = yb
' Panel1.Invalidate
End Sub
Sub panel1_Touch (Action As Int, X As Float, Y As Float)
' Arrastre del dibujo de la paleta
X = X-(panel2.Width/2)
Y = Y-(panel2.Height/2)
If x >= 0 AND x <= panel1.Width-panel2.Width Then
panel2.Left = X
End If
If y >= 0 AND y <= panel1.Height-panel2.Height Then
panel2.Top = Y
End If
xp = x
yp = y
End Sub
Sub boton_Click
' Para y Activa el Temporizador
Temporizador.Enabled = Not(Temporizador.Enabled)
End Sub
|
____________________________
3.- Paisaje con movimiento lateral.
Vamos a crear un nuevo proyecto, utilizaremos los archivos:
- paisaje.gif que hemos utilizado en el primer proyecto.
- además el archivo bola.gif y paleta.gif
- Y también el archivo paisaje2.gif que pudes bajar desde aquí..
(Estos archivos se guardan en la carpeta Files del proyecto)
Recordemos que la carpeta Files se llama desde el código como File.DirAssets
bola.gif paleta.gif
También es necesario el
paisaje.gif que se encuentra en el primer proyecto. |
paisaje2.gif |
En este proyecto los paisajes de fondo: paisaje.gif y paisaje2.gif se moverán horizontalmente, uno a continuación del otro.
- Fíjate que ahora no utilizo para poner fondo de pantalla del Activity...
' Fondo de pantalla del Activity
bmpBackground.Initialize(File.DirAssets,"paisaje.gif")
Ahora el fondo se establece en el Panel0 y Panel00
- Esta es la parte del código que realiza el movimiento horizontal de los paisajes:
' Movimiento del paisaje
xp0 = xp0 + 5 ' paisaje.gif
If xp0 >= 100%x Then xp0 = -100%x
Panel0.Left = xp0
xp00 = xp00 + 5 ' paisaje2.gif
If xp00 >= 200%x Then xp00 = 0
Panel00.Left = xp00 - 100%x
Rebote de bola con paleta. Movimiento lateral del paisaje. |
' Juan Antonio Villalpando
' juana1991@yahoo.com
Sub Globals
Dim temporizador As Timer
Dim panel0, panel00, panel1, panel2 As Panel
Dim ImageView1 As ImageView
Dim bmpImage As Bitmap
Dim derecha, arriba As Boolean
Dim xb, yb, xp, yp As Int ' Posción de la bola y la paleta
Dim xp0, xp00 As Int ' Posición de los paisajes
Dim labelxb, labelyb, labelxp, labelyp As Label
Dim boton As Button
End Sub
Sub Activity_Create(FirstTime As Boolean)
' Crea Panel 0 para el paisaje
panel0.Initialize("panel0")
panel0.SetBackgroundImage(LoadBitmap(File.DirAssets, "paisaje.gif"))
Activity.AddView(panel0, 0, 0, 100%x, 100%y)
' Crea Panel 00 para el paisaje2
panel00.Initialize("panel00")
panel00.SetBackgroundImage(LoadBitmap(File.DirAssets, "paisaje2.gif"))
Activity.AddView(panel00, 0, 0, 100%x, 100%y)
' Crea Panel 1
panel1.Initialize("panel1")
Activity.AddView(panel1, 0, 0, 100%x, 100%y)
' Crea ImageView con la bola y lo agrega al Panel1
bmpImage.Initialize(File.DirAssets,"bola.gif")
ImageView1.Initialize("ImageView1")
ImageView1.Bitmap=bmpImage
Panel1.AddView(ImageView1,50,50,50,50)
' Crea Panel 2 con la paleta y lo agrega a Panel 1
panel2.Initialize("panel2")
panel2.SetBackgroundImage(LoadBitmap(File.DirAssets, "paleta.gif"))
panel1.AddView(panel2, 100, 100, 100, 50)
' Crea Botón
boton.Initialize("boton")
Activity.AddView(boton, 5, 200, 160, 55) ' Posicion, ancho y alto
boton.Text = "Parar S/N"
' Crea etiqueta xb
labelxb.Initialize("labelxb")
labelxb.TextColor = Colors.Black
labelxb.Text = "Xb = "
Activity.AddView(labelxb, 5, 5, 200, 30) ' Posicion, ancho y alto
' Crea etiqueta yb
Labelyb.Initialize("labelyb")
labelyb.TextColor = Colors.Black
labelyb.Text = "Yb = "
Activity.AddView(labelyb, 5, 50, 200, 30) ' Posicion, ancho y alto
' Crea etiqueta de xp
labelxp.Initialize("labelxp")
labelxp.TextColor = Colors.Black
labelxp.Text = "Xp = "
Activity.AddView(labelxp, 5, 100, 220, 30) ' Posicion, ancho y alto
' Crea etiqueta yp
labelyp.Initialize("labelyp")
labelyp.TextColor = Colors.Black
labelyp.Text = "Yp = "
Activity.AddView(labelyp, 5, 150, 200, 30) ' Posicion, ancho y alto
' Temporizador
' 1 milisegundo de intervalo
temporizador.Initialize("temporizador", 1) ' 1000 = 1 segundo
temporizador.Enabled = True
End Sub
Sub Temporizador_Tick
If derecha = True Then
xb = xb + 5
Else
xb = xb - 5
End If
If xb <= 0 Then derecha = True ' Rebotes horizontales
If xb >= 100%x - ImageView1.Width Then derecha = False
If arriba = True Then
yb = yb + 5
Else
yb = yb - 5
End If
If yb <= 0 Then arriba = True ' Rebotes verticales
If yb >= 100%y - ImageView1.Height Then arriba = False
' Rebote en la paleta
If (xb > (xp - 100) AND xb < (xp + 100)) AND (yb > (yp - 50) AND yb < (yp + 50)) Then arriba = False
Labelxb.Text ="Xb = " & xb
Labelyb.Text ="Yb = " & yb
Labelxp.Text ="Xp = " & xp
Labelyp.Text ="Yp = " & yp
ImageView1.Left = xb ' Posición de la bola
ImageView1.Top = yb
' Movimiento del paisaje
xp0 = xp0 + 5 ' paisaje.gif
If xp0 >= 100%x Then xp0 = -100%x
Panel0.Left = xp0
xp00 = xp00 + 5 ' paisaje2.gif
If xp00 >= 200%x Then xp00 = 0
Panel00.Left = xp00 - 100%x
' Panel1.Invalidate
End Sub
Sub panel1_Touch (Action As Int, X As Float, Y As Float)
' Arrastre del dibujo de la paleta
X = X-(panel2.Width/2)
Y = Y-(panel2.Height/2)
If x >= 0 AND x <= panel1.Width-panel2.Width Then
panel2.Left = X
End If
If y >= 0 AND y <= panel1.Height-panel2.Height Then
panel2.Top = Y
End If
xp = x
yp = y
End Sub
Sub boton_Click
' Para y Activa el Temporizador
Temporizador.Enabled = Not(Temporizador.Enabled)
End Sub
|
__________________________________
- Libro sobre Basic4Android y algunos programas de muestra
Hay un libro en inglés sobre Basic4Android, en esta página puedes verlo. En esa página vienen varios ejemplos del libro que podemos bajar gratutitamente.
Consulta la página y bájate por ejemplo...
- Layers : a graphics animation of a horse (un caballlo corriendo que se mueve sobre un paisaje)
- RotatingNeedle : simple graphics example. (una brújula que se mueve al pulsar botones)
Consulta también estos códigos de juegos...
http://alwaysbusycorner.wordpress.com/category/basic4android/
y también este...
http://alwaysbusycorner.wordpress.com/2011/09/02/lets-get-physical-with-basic4android/ (Debes tener instalada y activada la librería ABPhysicsEngine
________________________________
|
|