Android Game Development with AppInventor by Anshul Bhagi S.B EECS MIT 2011 Submitted to the Department of Electrical Engineering and Computer Science in Partial Fulfillment of the Requirements for the Degree of Master of Engineering in Electrical Engineering and Computer Science at the Massachusetts Institute of Technology May 23, 2012 ©2012 Massachusetts Institute of Technology All rights reserved. Author: ------------------------------------------------------------------------------------------------------------ Anshul Bhagi Department of Electrical Engineering and Computer Science Certified by: ------------------------------------------------------------------------------------------------------------ Prof. Hal Abelson Class of 1992 Professor of Computer Science and Engineering MIT Department of Electrical Engineering and Computer Science Thesis Supervisor Accepted by: ------------------------------------------------------------------------------------------------------------ Prof. Dennis M. Freeman Chairman, Masters of Engineering Thesis Committee Android Game Development with AppInventor Abstract Anshul Bhagi1 Department of Electrical Engineering and Computer Science AppInventor is an educational learning tool provided by MIT that allows users to build Android apps without any knowledge of programming. As AppInventor gains popularity amongst educators and students around the world, it will become increasingly important to ensure that the tool offers its users the breadth and depth of app-development functionality they desire. In anticipation of AppInventor's expanding role and influence in educational institutions worldwide (middle schools and high-schools, primarily), this thesis focuses on the age group of 3rd to 12th grade students, and on the topic that is of greatest interest to them: gaming, animation, and graphics. The aim of this thesis is to identify AppInventor's existing capabilities and limitations with respect to game development, and to implement ideas (both pedagogical and technological in nature) that will improve the diversity, complexity, aesthetic appeal, and performance of games that can be built using AppInventor. The author of this thesis believes that if AppInventor's game development capabilities can be augmented, the adoption rate of the tool and its popularity amongst school students will be impacted very positively. In this thesis, the author describes his personal experiences teaching AppInventor game development in India and USA, as well as the limitations (in teaching methodology and in AppInventor's feature set) that he identified through this experience. The author's primary contributions are the development of a hands-on curriculum for a 40-hour AppInventor Game Development course, and the implementation of several new features and components for AppInventor. The author will be traveling to China and India in Summer 2012 to test to what extent his creative curriculum and novel AppInventor modifications facilitate the development of games using AppInventor. 1 [email protected] Chapter 1-2 Table of Contents Chapter 1: Introduction and Overview 4 About AppInventor 5 Why AppInventor Should Support Game Development 5 Game Development with AppInventor today 6 Author's approach to improving AppInventor's game development capabilities 8 Chapter 2: Original Curriculum 9 Curriculum Overview 10 Day 1 11 Day 2 16 Day 3 26 Day 4 30 Day 5 31 Chapter 3: Teaching Experiences and Lessons Learned 34 Teaching in Bangalore, India 35 Teaching in Boston 36 Pictures of Student Projects 37 Lessons Learned 38 Chapter 4: Modifications to AppInventor 41 Four Modifications 42 Precise Handling of Touch Events 42 Fling Gesture Detection 45 The AnimatedSprite Component 46 The ProximitySensor Component 47 Chapter 5: Modified Curriculum 48 Curriculum Overview 49 Media Library 50 AppInventor Flashcards 51 Day 1 61 Day 2 66 Day 3 79 Day 4 83 Day 5 84 Chapter 6: Future Plans and Suggestions 87 Suggested Feature Additions 88 Future Plans and Experiments 91 Chapter 7: Contributions and References 92 Chapter 1-3 Chapter 1 Introduction & Overview Chapter 1-4 About AppInventor. AppInventor is a web-based tool developed jointly by MIT and Google to enable the creation of Android apps via a visual, block-based development environment that requires no prior knowledge of programming languages. Since its conception, AppInventor has gained popularity amongst educators as a learning tool for fundamental concepts in computer science, and more importantly, as a medium through which students can exercise creativity and practice innovation. AppInventor (along with its peer applications at MIT such as Scratch and StarLogo) has empowered a whole new age group (specifically, elementary and middle school students) to create applications for android phones -- a task that had previously been impossible due to the numerous demands and requirements of the Android app creation process (knowledge of Java, comprehension of computer science principles, and familiarity with software development tools and environments such as Eclipse, the Android SDK, Android Developer Bridge, etc.). Why AppInventor should support game development. Ever since AppInventor found a new home at MIT's Center for Mobile Learning in early 2012 (it was previously housed at Google), it has been receiving significant attention from educational communities that hope to use the tool to facilitate technology learning in the classroom and beyond. Much of AppInventor's current user base is teachers in high-schools and colleges, and as the tool continues to attract more users, it is likely that many of these users will be teachers of students in grades 3 thru 12 (i.e. students who are old enough to know how to use computers and design/develop apps, yet not experienced enough to get their hands dirty with the Android SDK). Students of this age group are quite fond of gaming, and so we anticipate that there will be a strong demand for developing graphically appealing, interactive single-player and multi- player games using App Inventor in the coming years. It is therefore important that the AppInventor team at MIT prepare for the imminent growth of the AppInventor game development community. Accordingly, this thesis looks at where AppInventor currently stands with Chapter 1-5 respect to game development and how its game development capabilities can be improved and extended. Game development with AppInventor today. Developing games with AppInventor's existing feature set is very much a possibility, and in fact the process is quite easy to learn, thanks to AppInventor's intuitive interface and the numerous tutorials (e.g. PaintPot, QuizMe, MoleMash) available online at beta.appinventor.mit.edu/learn/tutorials. In particular, the following AppInventor components prove quite useful for the task of developing games: Buttons: These are perhaps the simplest way in which a game developer can get input from the game player. Buttons can be used to create a joystick (with controls for moving up, down, left, right), and to perform any other actions in response to a button click. Canvas: Canvas components are useful for multiple reasons. First, they are the component where game objects are drawn -- shapes such as rectangles, ovals, etc. can be drawn on these using the methods provided by AppInventor in the Blocks Editor, and images can be uploaded as backgrounds. Second, they are containers for other components known as sprites (described below), and provide a set of bounds within which sprite objects can be drawn and moved around. Third, Canvas objects can be used as a source of touch-input, and they provide a "dragged" and "touched" event that the app developer can respond to. Fourth, these objects can be used as a spacing mechanism in layouts, e.g. if a developer wishes to center a button on the screen, he/she can add an empty/transparent canvas on each side within a Horizontal Layout, and set the width property of each canvas to "fill parent" -- magically, the end result will be the centering of the button or whatever other object is between the two outside canvases. Chapter 1-6 Clock: Clocks are instrumental for game development since they are the time-keepers. They have an Interval property which the game developer can define and modify at any time, and they fire an event after each interval expires. The game developer can easily react to the firing of these clock timer events in the Blocks Editor in order to perform certain tasks (such as updating the location of a Sprite) every few milliseconds. Sound: Sound effects are easy to add in App Inventor and can make a significant impact on perceived game quality. The 'Sound' component is an invisible component that allows the developer to easily select a source sound file and to easily play this file in response to other actions from the Blocks Editor. Ball: The ball component is perfect for games that actually require balls that need to move around on a canvas. The ball component supports rectangle-based collision detection and implements the physics of ball movement/bouncing. The game developer can provide it a direction (called a heading), a speed, a radius, and the time interval the ball should wait between each pair of movements. ImageSprite: Sprites are a fundamental part of any game that requires animation or motion. They are essentially more generic 'ball' components in that they can be visualized by any image that the developer uploads (animated gifs not supported). They support rectangle-based collision detection and are restricted to movement within the bounds of the canvas in which they reside (they can't go off-screen). GameClient: This component is the foundation for building multi-player games with AppInventor. It allows for web-based communication between multiple clients (phones) and a single game server that the game developer deploys independently. Chapter 1-7 Author's approach to improving AppInventor's game development capabilities. The goal of this thesis is to identify AppInventor's existing capabilities and limitations with respect to game development, and to implement ideas (both pedagogical and technological in nature) that will improve the diversity, complexity, aesthetic appeal, and performance of games that can be built using AppInventor. The author adopted the following iterative hands-on approach to understanding how AppInventor could be improved for game development: Develop  Initial  Curriculum  for  AppInventor   Game  Development  Course  (Fall  2011)   Teach  Game  Development  Course  at  schools  in   Bangalore  (India)  and  Boston.  (Winter  2011)   Identify  Limitations  in  AppInventor  as  well  as   in  the  initial  curriculum  (Winter  2011)   Refine  the  curriculum,  and  add  new  features   and  components  to  AppInventor  that  would   facilitate  game  development.  (Spring  2012)   Test  refined  curriculum  and  augmented   AppInventor  feature-­‐set  by  teaching  Game   Development  in  India  and  China  (June  2012).   The remainder of this report describes each step of this process in detail. Chapter 2 describes the original curriculum; Chapter 3 communicates the experience of teaching AppInventor in India and Boston and describes the learning that emerged from this experience; Chapters 4 and 5 address modifications to AppInventor and to the curriculum, respectively; Chapter 6 addresses future plans and suggests additional features that should be added to AppInventor, and Chapter 7 summarizes the contributions of this work. Chapter 1-8 Chapter 2 Original Curriculum Chapter 2-9 Curriculum Overview Planned Activities Concepts Learned Ice Breakers Sound, Button, Screen, event handling, Playing with Android Phones calling procedures, connecting to device, Day 1 AppInventor Setup Player, screen arrangements, Label, (8 hrs) Overview of AppInventor's interface TextBox, getting and setting property Project 1: HelloPurr and Media Player values, if-else statements, packaging apps Project 2: Calculator to phone Project 3: Drawing Program Canvas, handling 'dragged' and 'touched' Project 4: Balls, Sprites, and Motion of events, drawing lines and circles, colors, Day 2 Objects Ball, ImageSprite, making objects move, (8 hrs) 4 ways to make things move (automatically; edge-detection, bouncing ball, defining using Clock, using Buttons, using custom variables, defining custom Accelerometer) procedures, Accelerometer Project 5: Car on a Road collision detection, random-number Day 3 Project 6: Paper Prototyping generation, making multiple objects move (8 hrs) Begin final project (game of student's simultaneously using Clock, choice) Instruction on Day 4 will be one-on-one Day 4 Continue final project (game of student's and highly customized to each student's or (8 hrs) choice) group's needs. Google Play developer registration process, Publishing AppInventor apps to Google downloading AppInventor apps as .apk Play Day 5 files, uploading .apk files to Google Play. Continue final project (game of student's (8 hrs) The remainder of the learning on Day 5 choice) will be customized to each student's or Presentations of final projects group's needs. Chapter 2-10