Moving Images For Games

[Bob Katayama]

Can anyone shed some light into if I can move custom images on the screen and allow for foreground, background and collision detection?

I looked at Imageview and Animation types. What else should I be looking at to create a simple asteroid type of game?

Thanks

Bob

 

[Erel]

The best option in this case is to handle the drawing yourself with the Canvas object.
See the smiley example: http://www.b4x.com/forum/basic4android-updates-questions/6442-catch-bouncing-smiley.html#post38084

 

[Bob Katayama]

The best option in this case is to handle the drawing yourself with the Canvas object.
See the smiley example: http://www.b4x.com/forum/basic4android-updates-questions/6442-catch-bouncing-smiley.html#post38084

I did discovered your smiley app after writing my original post. If I understand the smiley example correctly, I am drawing the image in the new location and erasing the image in the old location. Is this correct?

Bob

 

[Erel]

Yes, that is correct.

 

[Libor]

Hi I've been playing with this a little bit trying to understand it and I now have several of these smileys running around the screen and it's pretty smooth.

I tried a different image but it was not running so well. I was getting some kind of background artifacts when they were rewritten.

Is there something I need to watch out for in terms of the image to not have this happen? I didn't alter your original script except to add a different image for this test.

I also tried to come up with basic collision detection. I tried using the Rect.CenterX and Rect.CenterY to detect their proximity to each other. I seem to be having trouble with this because the initialization zero.

So I set it to some non zero number which is at least 10 apart so that I don't get a collision initially.

Then I try to use the below to detect if there is overlap. I'm just using the message box to tell me what the values are at each interval where a collision is detected .... I changed it to half a second so that I could kind of see what is going on.

I'm trying to check a pair of values and the AND doesn't seem to let me do that. If I just use the first half of the if statement and leave out the part after the AND then I detect properly.

Can someone suggest how I should be doing this?

If Rect1.CenterX - Rect3.CenterX < Abs(10) And Rect1.CenterY - Rect3.CenterY < Abs(10) Then 'Check for collisions between smiley 1 and 3
vx1 = -vx1
vx3 = -vx3
Msgbox("Collision detected Rect1 - Rect3 Centers are ... " & Abs (Rect1.CenterX - Rect3.CenterX),"")
End If

 

[Erel]

About the image leaving artifacts. It is probably an image of different size. Make sure that you are redrawing the correct rectangle.

If Rect1.CenterX - Rect3.CenterX < Abs(10) And Rect1.CenterY - Rect3.CenterY < Abs(10)

Abs(10) is 10.
Your code should be:

If Abs(Rect1.CenterX - ...) < 10 AND Abd(Rect1.CenterY - ...)

 

[klaus]

I did discovered your smiley app after writing my original post. If I understand the smiley example correctly, I am drawing the image in the new location and erasing the image in the old location. Is this correct?

Since Basic4Android version 1.2 there are more possibilities with the ability to draw 'transparent'.
Attached you find a new version of the Smiley program.
- In the original version the smiley is drawn onto the activity bitmap and at each timer tick the whole background is drawn to erase the smiley.

- In the new version I use 2 ImageViews
- The first one to draw the smiley, at each timer tick the smiley at the current position is drawn transparent and the new smiley is drawn at the new position.
- The second to draw the red circles. In the original version when the smiley goes over a red circle it is erased. In the new version the circles remain and the smiley passes over.
The Circle ImageView is declared before the Smiley ImageView so the smiley passes in front of the circles.
If we invert the declaration order, the Smiley ImageView before the Circle ImageView, the smiley will pass behind the circles.

This example is just to give an idea what can be done now.

Best regards.

 

[Bob Katayama]

Thanks for the updated smiley program.

This does help some what.
It is very similar to GWBasic in some ways.
It would be nice if Basic4Android can have direct sprite support someday.
Like load a sprite, specify speed, and direction.

Bob

 

[mshihrer]

simple box collision

here is a simple box collision sub. Based on this example:
Collision Detection

works well and made for rects. of course, you can change that to fit whatever your using.

Sub collision_check(obj1 As Rect,obj2 As Rect) As Boolean
   'simple box collision check
   

   If obj1.Bottom  < obj2.Top Then 
      Return(False)   
   End If
   
   If obj1.Top > obj2.Bottom Then
      Return(False)
   End If
   
   If obj1.Right < obj2.Left Then
      Return(False)
   End If
   
   If obj1.Left > obj2.Right Then
      Return(False)
   End If
   
   Return(True)   
    
End Sub

and sample test using canvas and rects
middle box is the target, whereever you click that is NOT a collision has no effect on target. Once you make collision, you can drag the target around. Interesting because it shows the internall buffering for the move event. Can't drag too fast!

'Activity module
Sub Process_Globals
   'These global variables will be declared once when the application starts.
   'These variables can be accessed from all modules.
   
End Sub

Sub Globals
   'These global variables will be redeclared each time the activity is created.
   'These variables can only be accessed from this module.
   
   Dim cursor As Rect 'rect we can move around
   Dim target As Rect 'rect to collide with
   Dim can1 As Canvas
      
End Sub

Sub Activity_Create(FirstTime As Boolean)

   
   'activity.LoadLayout("main")
   can1.Initialize(activity)
   target.Initialize((activity.Width/2) - 30dip,(activity.height/2) - 30dip,(activity.Width/2) + 30dip,(activity.height/2) + 30dip)
   cursor.Initialize((activity.Width/2) - 10dip,(activity.height/2) - 10dip,(activity.Width/2) + 10dip,(activity.height/2) + 10dip)
   can1.DrawRect(target,Colors.White,False,2dip)
   
   
End Sub

Sub Activity_Resume
   
End Sub

Sub Activity_Pause (UserClosed As Boolean)
   
End Sub


Sub Activity_Touch (Action As Int, X As Float, Y As Float)
   
   If action = activity.ACTION_MOVE Then
      'position cursor rect on move event
      cursor.Left = x - 25dip
      cursor.Right = x + 25dip
      cursor.Top = y - 25dip
      cursor.Bottom = y + 25dip
      'clear and draw
      can1.DrawColor(Colors.black)
      can1.DrawRect(cursor,Colors.Green,False,2dip)
      col = collision_check(cursor,target)
      
      If col = True Then
         target.Left = x - 30dip
         target.Right = x + 30dip
         target.Top = y - 30dip
         target.Bottom = y + 30dip
         can1.DrawRect(target,Colors.Red,True,2dip)
      End If
      
      can1.DrawRect(target,Colors.White,False,2dip)
      activity.Invalidate   
   End If
   
End Sub
Sub Activity_Click
   
End Sub
Sub Activity_LongClick
   
End Sub

Sub collision_check(obj1 As Rect,obj2 As Rect) As Boolean
   'simple box collision check
   'all 4 checks have to occur to return True

   If obj1.Bottom  < obj2.Top Then 
      Return(False)   
   End If
   
   If obj1.Top > obj2.Bottom Then
      Return(False)
   End If
   
   If obj1.Right < obj2.Left Then
      Return(False)
   End If
   
   If obj1.Left > obj2.Right Then
      Return(False)
   End If
   
   Return(True)   
    
End Sub