Basics: Project 107f
Project name: Building your first game app with MIT App Inventor 2
Tags: MIT App Inventor 2, First game app
We will learn how to build a simple game app Ball Bounce with the MIT App Inventor 2 software. You will learn about animation in MIT App Inventor 2 by making a Ball (a sprite) bounce around on the screen (on a Canvas).
We assume that you have read our previous projects about MIT App Inventor 2.
Step By Step instruction
1.Go to appinventor.mit.edu and click on Create Apps! orange button.
2.Click on Start new project and give your project a name. As we’re just exploring the MIT App Inventor 2, you can name it as BallBounce. Click on OK button. Your project will be saved.
3.Go to Designer editor tab.
4.Select components to design your app. From the Drawing and Animation drawer, drag out a Canvas component and drop it onto the Viewer.
5. Set the Screen so that it does not scroll. The default setting for MIT App Inventor 2 is that the screen of your app will be “scrollable”, which means that the user interface can go beyond the limit of the screen and the user can scroll down by swiping their finger (like scrolling on a web page). When you are using a Canvas, you have to turn off the “Scrollable” setting (UNCHECK THE BOX) so that the screen does not scroll. This will allow you to make the Canvas to fill up the whole screen.
6. Change the Height and Width of the Canvas to Fill Parent. Make sure the Canvas1 component is selected so that its properties show up in the Properties Pane. Down at the bottom, set the Height field to “Fill Parent”. Do the same with the Width field.
7. Add a Ball. Now that we have a Canvas in place, we can add a Ball Sprite. This can also be found in the Drawing and Animation drawer. Drag out a Ball component and drop it onto the Canvas. If you’d like the ball to show up better, you can change its Radius field in the Properties pane.
8. Go to Blocks editor tab. So far you have been arranging your app’s screen and components in the Designer, which is in a web browser window. To start programming the behavior of the app, you need to go to the Blocks editor. Click the Blocks button in the upper right of your screen to go to the Blocks Editor.
9.On the left side of the Blocks Editor, click the Ball1 Drawer to view the Ball’s blocks. Drag and drop the block when Ball1.Flung do in the work area (the open area on the right). Flung refers to the user making a “Fling gesture” with finger to “fling” the ball. Fling is a gesture like what a golf club does, not like how you launch Angry Birds! In MIT App Inventor 2, the event handler for that type of gesture is called when Flung.
Those mustard yellow blocks are called event handler blocks. The event handler blocks specify how the mobile device should respond to certain events: a button has been pressed, the phone is being shaken, the user is dragging her finger over a canvas, etc. when Ball1.Flung do is an event handler.
10. Set the Ball’s Heading and Speed. First get the setter blocks. Open the Ball1 drawer and scroll down in the list of blocks to get the set Ball1.Heading to and set Ball1.Speed to blocks. Plug the set Ball1.Speed to and set Ball1.Heading to into the when Ball1.Flung do event handler.
11. Set the Ball’s speed to be the same as the Fling gesture’s speed. Mouse over the “speed” parameter of the when Ball1.Flung do event handler. The get and set blocks for the speed of the fling will pop up. Grab the get speed block and plug that into the set Ball1.Speed to block. Set the Ball’s heading to be the same as the Fling gesture’s heading. Do the same for the Ball’s heading. Mouse over the heading parameter and you’ll see the get heading
block appear. Grab that block, and click it into the set Ball1.Heading to block.
13. Try it out on your device or with the emulator! It is a good habit while building apps is to test while you build. MIT App Inventor 2 lets you do this easily because you can have a live connection between your phone (or emulator) and the MIT App Inventor 2 development environment. After flinging your ball across the screen, you probably noticed that it got stuck on the side. This is because the ball’s heading has not changed even though it hit the side of the canvas. To make the ball “bounce” of the edge of the screen, we can program in a new event handler called “When Edge Reached”.
14. Add an Edge Reached Event. Go into the Ball1 drawer and pull out a when Ball1.EdgeReached do event.
15.Go back into the Ball1 drawer and pull out a call Ball1.Bounce edge block. Plug it in when Ball1.EdgeReached do event handler.
16. Add the edge value for the call Ball1.Bounce edge block. The Ball1.Bounce method needs an edge argument. Notice that the when Ball1.EdgeReached do event has an “edge” as a parameter. We can take the get edge block from that argument and plug it into the call
Ball1.Bounce edge method. Grab the get edge block by mousing over (hover your mouse pointer over) the “edge” parameter on the when Ball1.EdgeReached do block.
17. Your final blocks should look like this. Try it out on your device or with the emulator! When you fling the ball, it should bounce off the edges of the canvas. Congratulations, your first game app is running!
18.While your device (emulator or phone/tablet) has been connected to App Inventor, your app has been running in real time on your device. If you disconnect the emulator/device from the Blocks Editor, the app will vanish. You can always make it return by reconnecting the device. To have an app running without being connected to App Inventor, you must “package” the app to produce an application package (apk file). To “package” the app to install on your device or to send to someone else, click the Build tab at the top of the screen. Under Build, there are two options available for you to choose from:
- App (provide QR code): You can generate a Barcode (a QR Code), which you can use to install the app on a mobile device that has a camera, with the aid of a barcode scanner, like the ZXing barcode scanner (freely available in Google Play). This barcode is only good for two hours. If you want to share your app with others via barcode over a longer period, you’ll need to download the .apk file to your computer and use a third-party software to convert the file into a barcode. More information can be found here.
- App (save to my computer): You can download the app to your computer as an apk file, which you can distribute and share as you like by manually installing it on other devices. (sometimes called “side loading“).
We have successfully built the first game app with MIT App Inventor 2. There are many ideas on how to extend this project, for example:
- Change the color of the ball based on how fast it is moving or which edge it reaches.
- Scale the speed of the ball so that it slows down and stops after it gets flung.
- Give the ball obstacles or targets to hit.
- Introduce a paddle for intercepting the ball, like a Pong game.