Android Tutorial Android Arkanoid game example

Erel

Administrator
Staff member
Licensed User
This is a "bare" arkanoid game:



The code is made of 4 modules:
Main - main activity. Also holds the main timer that is running the game.
Ball - code module. Responsible for moving the ball and checking for hits.
Slider - code module. Responsible for moving the slider. It also draws a red marker to mark the slider target.
Bricks - code module. Responsible for drawing and managing the bricks.

Two layers are used for the drawing. This is done by adding two panels over the activity. One layer is used for the ball and the second layer for the bricks and slider.
By separating the drawing to two layers we overcome issues where the ball might erase a part of the slider or a brick.

SoundPool is used to play the three sounds.
Sounds were downloaded from here: Crash Sounds | Free Sound Effects | Crash Sound Clips | Sound Bites
If you want to use those sounds for commercial use you should check their license.

Drawings are related to the screen size and should look properly on all devices.

I've checked this program on several devices and the game speed looks fine. If you run it on the emulator you will need to change the timer interval (and it will not run smoothly). Make sure to disable the debugger if you are encountering performance issues.

The game progress is managed by MainTimer which calls the other modules:
B4X:
Sub MainTimer_Tick
    Ball.Tick(drawers) 'move and handle the ball
    Slider.Tick(drawers) 'move and handle the slider
End Sub
I hope that you this code will be helpful. Please feel free to ask any question about it...

The compiled APK can be downloaded here: http://www.basic4ppc.com/android/files/Arkanoid.apk
 

Attachments

thedesolatesoul

Expert
Licensed User
Nice work Erel. That looks really good and the code is elegant too :sign0188:
I have made something similar but it is probably worse in implementation.
I have some questions though.
When you erase the slider, you invalidate the Rect, then redraw it and invalidate it again. Is it not better to invalidate it once, with the combined rectangle?
I was invalidating the whole canvas in my program, so I did it just once in the loop, but ofcourse your way is more efficient.
Also, the fact that you are using 2 layers to avoid the ball eating out other drawables. I had that problem too, and even if I redraw the slider etc AFTER the ball, there is still some visible artefacts. So I guess your solution works but I was hoping for something else.
I havent run this yet, but I can already see its quite helpful!
 

Erel

Administrator
Staff member
Licensed User
When you erase the slider, you invalidate the Rect, then redraw it and invalidate it again. Is it not better to invalidate it once, with the combined rectangle?
Calling Invalidate marks part of the panel or all of it as "dirty". Only later the panel will be redrawn (this will happen when the message queue is processed). So it doesn't really matter if you call it twice in a row. It is important to only redraw the required part.

Try it on a real device. It should work smooth.
 

agraham

Expert
Licensed User
Can you think of a reason why the sounds don't play on my 2.1 ZTE Blade but are OK on the Zoom? :confused:
 

agraham

Expert
Licensed User
No, the game sounds play fine on the Music app and when clicked in a File Manager, but there's no sound in the game.
 

Erel

Administrator
Staff member
Licensed User
No idea. Did you check the unfiltered logs for any message? SoundPool does print some useful messages there.
 

XverhelstX

Well-Known Member
Licensed User
Nice Erel :sign0098:, I will try it out right away.

XverhelstX

EDIT:

Very nice. Plays smooth on my Xperia PLAY.
Love the red dot thingy :)
 
Last edited:

agraham

Expert
Licensed User
I assume PlayerDriver is the daddy. There is lots of stuff I don't understand the significance of but one of the lines is

Sample channel count (0) out of range
 

agraham

Expert
Licensed User
Actually mine is a San Franciso but I call it a Blade as otherwise non-UK people don't know what it is. So that is very strange if you get game sounds and I don't! :confused:
 

Merlot2309

Active Member
Licensed User
Hi,

Runs smooth on my HTC Legend, sound as well.
If you want to get a compliment from Erel himself :sign0060: just compile and play.

Helen.

Ps. I won´t forget to try to learn from this coding example. :icon_clap:
 

kickaha

Well-Known Member
Licensed User
Actually mine is a San Franciso but I call it a Blade as otherwise non-UK people don't know what it is. So that is very strange if you get game sounds and I don't! :confused:
Well that was odd.

I tested it again this morning and it was only playing the brick hitting sound. I uninstalled it and recompiled/installed it and now the sounds are not working.
 

Widget

Well-Known Member
Licensed User
I hope that you this code will be helpful. Please feel free to ask any question about it...
Erel,
Nice game. But I'm having a problem understanding the code in Slider.Touch. Is MarkerRect really necessary?

B4X:
Sub Touch(Drawers As DrawerType, xx As Int)
   target = xx
   'draw the red marker (erasing the old one first and then drawing the new one)
   Drawers.canvasBall.DrawRect(MarkerRect, Colors.Transparent, True, 0)
   Drawers.pnlBall.Invalidate2(MarkerRect)
   MarkerRect.Left = xx - 1.5%x
   MarkerRect.Right = xx + 1.5%x
   Drawers.canvasBall.DrawCircle(MarkerRect.CenterX, MarkerRect.CenterY, 1.5%x, Colors.Red, True, 0)
   Drawers.pnlBall.Invalidate2(MarkerRect)
End Sub
I can comment out the code that references MarkerRect and the game plays fine on the emulator. Did you intend to use MarkerRect on the CanvasBall and pnlBall?

TIA

Widget
 

Erel

Administrator
Staff member
Licensed User
The user can touch the screen to make the slider move to this point. In that case a red mark shows the target point.
 

Erel

Administrator
Staff member
Licensed User
Note that this is quite an old example. There are better ways now to create games.

This line draws the ball (Ball module):
B4X:
Drawers.canvasBall.DrawCircle(BallRect.CenterX, BallRect.CenterY, BallSize / 2, Colors.Blue, True, 0)
You can replace it with DrawBitmap.
 
Top