Android Crash Course No. 2 - Anatomy of an App, Drawing Images, the Game Loop, Touch Controls
Last post I started covering all the stuff I've learned about android in the past couple of days. In this post I'm going to try and finish it up. It's a lot of stuff to cover in one blog post, and I tend to be pretty wordy, but I'll try to reign myself in. So we've done the easy part, setting up everything on our computer that's necessary to start app programming. Now let's see what we need to do to get the basics of a game going: that is, drawing images on the screen, having a consistent "game loop," and getting input from the user (in this case, touch control). Let us begin.
Applications on Android have some unique features to them that are both cool and, at first, a little bewildering. I'm going to do a rundown here of the key components I've learned about, which I think would be useful to know for anyone attempting to make an app for the first time.
Activities - An android app is broken up into distinct activities, each of which is in its own java file, and is its own class (extending the Activity class, naturally). Essentially each activity represents a "screen." In my case, I have a main one, with buttons leading to subscreens (New Game, Continue, About, etc.) each of which are also activities.
Intents - An intent is basically a message that you can send from one activity to another, saying that you want to open the other activity, or send it information. So far, I've just used them to open up other screens (for ex. you click on the "About" button, it creates an intent that you use to open the "About" screen).
Views - A view is a GUI element that is displayed by an activity. If the activity represents a "screen," then views are the things you put on the screen - these can include anything from pictures, to text, to buttons, to search bars. Android comes with many pre-made views (like the ones I just mentioned), but if you're making a game you'll probably need to create your own custom view, extending the basic View class or its SurfaceView subclass.
The Application Manifest - This is an XML file that sets some of the basic parameters of your program including its name, icon, and which activities are part of it. In Eclipse you can conveniently edit most of its properties through some built in forms. Basically, it organizes the "metadata" for your app.
Layouts (and other xml files) - Every activity needs a view. You set this through the method setContentView( view ). If you want, you can use an XML file to create a layout separately from the actual activity and then load it using setContentView( R.layout.layoutName ). This is pretty cool for two reasons: one, you get to define the GUI of the activity separately from the activity which keeps things from getting messy, and two, in Eclipse you are actually given a visual editor for layout files which makes it really easy to place buttons, text, etc. All you have to do is make a new XML file in the folder "res/layout" which is automatically made with your project if you use Eclipse.
Resources - Layouts are the only types of things which can be stored in the "res" folder. There are also subfolders for "drawable" (pictures) and "values" (strings, ints, arrays, or any other constants). These let you store all your resources in one convenient place and reference them in this fashion "R.resourceType.resourceName" which is just really organized and cool (as a very disorganized person, I am impressed by organization). Keep in mind that you'll have to use a method (like setContentView for layouts) to actually access those resources.
Alright, that covers the basic parts of an android app. For a good step by step look (with code) at how to make activities, add buttons, and use intents to make those buttons link to other activities, take a look at the first part of this tutorial for Conway's Game of Life on Android. The tutorial is unfinished but the first section is really useful.
If you simply wish to display an image on Android, its actually extraordinarily simple. All you have to do is this: 1) make an activity 2) create a xml layout for the activity 3) use the visual layout editor to add an ImageView 4) right click the image view and edit the image it uses 5) select your image from the "res/drawable" folder 6) go back into your activity and make sure it has setContentView(R.layout.myLayout) in its onCreate method. Simple!
Unfortunately, we want to make a game, and in a game, its not enough to just display a pretty picture. We need to be able to move the pretty picture around, animate it, make it disappear, know exactly where it is, and be able to specify its position down to the exact pixel location. Now, it turns out that the layout editor and standard views that come pre-made with Android aren't very good at this kind of thing. What they're good at is being easy to create, and being adaptable for different size devices or different screen orientations. They achieve this by having relative layouts - GUI elements are located on the screen in relation to other GUI elements rather than at specific coordinates, which makes it easy for the OS to adapt it to different situations, but impossible for us to know exactly where we're putting things, which is a necessity for most games.
To get around this problem is actually fairly simple. All we have to do is make a custom view. We do this by making a new class that extends the View class (or a subclass of the View class). Then we can edit what goes in the "onDraw" method. The onDraw method takes in a Canvas object which we can draw to. If we've loaded a Bitmap object from our resources folder we can then draw the image to the screen like this:
canvas.drawBitmap( imageName, x, y);
Now we can specify exactly where we want images to appear. The only thing left to do is to make an activity display our view, using setContentView. For a more detailed example of creating a custom view, check out this tutorial.
Unfortunately, not all our problems have been solved. Yes, now we can draw an image on the screen in any position that we want. However, what if we want to move it around? To animate it?
Game Design 101: Most any game will have something called the "Main Loop." This is just a basic while loop that keeps on going until the player quits the game. Inside the loop are methods that update the state of the game (take in player input for example, or calculate what the AI is going to do) and then draw an updated version of the game to the screen. Each run through of the loop is essentially one frame of the game.
The problem: Android only redraws the screen when it feels like it. For most android apps, the images and buttons on the screen stay static most of the time, so by default android only redraws the screen when it knows something major is happening (like a button push). It doesn't waste time and energy constantly redrawing the screen. So we have to force it to. This is pretty tricky, and there are a couple of ways to do it. This page has a good explanation of the three main methods.
I went with the third way, creating a custom SurfaceView, because it runs the fastest. Truthfully, I only partially understand how it works, but in essence it's like this: with a custom SurfaceView you can create an object called a SurfaceHolder that contains a reference to the screen (I believe), using that reference you can "lock" the screen and force it to redraw. You then create a Thread (another type of class), which you launch whenever your SurfaceView is called to the screen. Threads have a method called "run()" which starts whenever they run (wow!). Inside of this you put a while loop - that's your game loop. Since the thread is inside of the SurfaceView, you can pass down to it a reference to the SurfaceHolder. Therefore, inside the game loop, after you update the game's state, you can lock the screen and draw to it, before starting the loop over again. This code contains everything you need to make this method work. When I finished I had these classes:
An activity - All this does is serve as the "board" that everything is placed on. It uses setContentView() to hold my custom view.
A customized SurfaceView - The view creates a SurfaceHolder with a reference to the screen, creates the Thread that holds the game loop, and starts and stops the Thread when the view opens and closes.
A Thread - the thread holds the actual game loop inside of its run() method. Inside of the run method is a loop that calls the update() from the game engine, then locks the screen, then calls the render() method from the game engine, then starts over.
A Game Engine - This is just an ordinary java class with an update() method that updates the state of all objects in the game, and a render() method that draws everything in the game to the screen.
Alright! Making a main loop in Android is a trick, but I feel like it's probably the hardest hurdle to cross in getting a game started. At least so far.
Now that we can draw things on the screen, and we can update them and redraw them regularly, we need a way for the player to actually control the action. Since we're using Android and Android phones have touch screens and touch screens are cool - we'll use a touch screen! This is actually pretty simple.
Views are capable of collecting information about user input. All you have to do is implement an interface that gives it the correct methods. In this case we'll use an interface called OnTouchListener, which adds the onTouch method. If you've ever used a ButtonListener in java, it's basically the same deal.
Whenever the user touches the screen, the onTouch method will be passed a MotionEvent object. The object will contain information about the touch - most usefully, the x and y position of the touch. All I did then was save that position as a variable, and give the information to the game engine. To see how to implement an OnTouchListener look at this code.
At this point I have an opening menu screen with a title, a little flying letter emblem, and some buttons. If you press the "new game" button you are taken to the game screen. It has a little icon that you can control by touching the touch screen. Touch to the left of the icon and it moves left, to its right and it moves right, etc. It's not much, but at least now we have the beginnings of a game!
1. Replica Island - This side scrolling game for Android is really fun. Also, it's open source and has a blog, so you can go look at its code to see how it works!
2. Google Example Projects - These projects are all open source examples created by Google to help show what you can do in Android and how to do it. I think the snake one looks particularly useful.
jacobvanloon
jbbartram-illu
yousharknotpass
prguitarman
dailybridgerton
gummygunk