|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
   AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
Translate:
Búsqueda en este sitio:


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

________________________________

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información