Modeling HUD Layouts for Selection Based Video Games MODELING HUD LAYOUTS for SELECTION BASED VIDEO
Total Page:16
File Type:pdf, Size:1020Kb
Modeling HUD Layouts for Selection Based Video Games MODELING HUD LAYOUTS FOR SELECTION BASED VIDEO GAMES BY MANIVANNA THEVATHASAN, B.Eng. a thesis submitted to the department of computing and software and the school of graduate studies of mcmaster university in partial fulfilment of the requirements for the degree of Master of Applied Science c Copyright by Manivanna Thevathasan, July, 2014 All Rights Reserved Master of Applied Science (2014) McMaster University (Software Engineering) Hamilton, Ontario, Canada TITLE: Modeling HUD Layouts for Selection Based Video Games AUTHOR: Manivanna Thevathasan B.Eng., (Software Engineering) McMaster University, Hamilton, Ontario, Canada SUPERVISOR: Dr. Jacques Carette NUMBER OF PAGES: x, 81 ii In loving memory of my grandfather. Abstract Display technology continues to become increasingly varied, with new combinations of screen sizes and resolutions introduced every year. In order to design or adapt Heads Up Displays (HUDs) to these screens, manual design processes are preferred, since they afford designers modeling flexibility. However, there are aspects of this process that can be automated to reduce the burden on the designers. In order to help designers, this thesis presents a semi-automated approach to model, optimize and prototype HUDs for selection based video games. Specifically, this solution produces HUD layout prototypes that are ideal for tower defense games. This approach consists of an algorithm operating with a task efficiency model, which enables flexible modeling capabilities with automated evaluation. The result helps reduce the development time and cost of creating these HUDs. In addition, this work demonstrates the viability of using semi-automated techniques in the design process of video game HUDs. iv Acknowledgements I would like to thank my supervisor Dr. Jacques Carette for his expertise and guidance throughout the entire duration of this work. His knowledge and advice were essential in forming the motivation and reaffirming the direction of this work. Our discussions with regards to this topic were invaluable. All of which, I am eternally thankful for. I would also like to thank my family and friends for their encouragement and support. They continue to inspire me towards greater accomplishments. v Contents Abstract iv Acknowledgements v Contents vii List of Tables viii List of Figures viii 1 Introduction 1 2 Prerequisite Knowledge 4 2.1 Setting The Stage . .4 2.2 Previous Work . .8 2.3 Tower Defense games . 11 2.4 Fitts' Law . 17 3 Modeling Task Efficient HUDs 22 3.1 Some Bad Models . 22 3.2 Task Efficient HUDs . 25 vi 3.3 A Task Model for Tower Defense Games . 26 4 Refining The Model 29 4.1 Set Of Required Assumptions . 29 4.2 Our Solution . 31 4.3 Additional Features . 33 4.3.1 Game Space Grid . 33 4.3.2 Overlapping Penalty Function . 37 4.3.3 Alternate Grid Centers . 40 4.3.4 Asymmetric Tasks . 42 5 Implementation 45 5.1 NOMAD . 45 5.2 Implementation details of our software . 49 6 Analysis 53 6.1 One Element Case . 54 6.2 Two Element Case . 55 6.3 Multi-Element Case . 60 6.3.1 Multi-Elements with Asymmetric Tasks . 60 6.3.2 Multi-Elements with Task Flows . 68 7 Conclusion 75 7.1 Contributions . 75 7.2 Future Work . 76 Bibliography 77 vii List of Figures 2.1 Degree of Automation in the UI Design Process [21] . .8 2.2 Plants vs. Zombies [22] . 13 2.3 Kingdom Rush [14] . 14 2.4 Fieldrunners [24] . 15 2.5 Original Fitts' Task from Paul Fitts' paper [8] . 19 3.1 An example of a task in Plants vs. Zombies............... 26 3.2 An example of a task flow in Plants vs. Zombies............. 27 4.1 Final set of assumptions . 30 4.2 Total Time objective function and the inner components. 31 4.3 Task Efficient HUD Layout Algorithm presented in pseudocode. Result is the cumulative sum of all Fitts' law calculations. 32 4.4 Visualization of the game space grid containing subgrids. In this case 16 x 9 subgrids are contained. 35 4.5 A scenario with several square HUD elements overlapping. It may be hard to notice but the inner square possesses thicker lines because several elements actually possess the same position and size. 37 4.6 Without alternate grid centers, for this scenario, the position of this element is one of only two possible optimal results. 40 viii 4.7 HUD layouts with alternate grid centers. 42 4.8 This motion is repeated to each subgrid as part of the asymmetric task. 43 5.1 Pseudocode for MADS algorithm [6]. 46 5.2 The 16 different specifiable direction types for the MADS algorithm [6]. 48 6.1 One HUD element case. Task flow: (1) . 54 6.2 Case 1: Two asymmetric tasks. Task flow: (1), (2) . 56 6.3 Case 2: One task flow consisting of two HUD elements. Task flow: (1 ! 2) ................................... 56 6.4 Modification to the previous Case 2. The task flow now consists of three elements: element 1, element 2 and the game space grid. Task flow: (1 ! 2 ! game space grid) . 58 6.5 Modification to the previous Case 2. The task flow now consists of three elements: element 1, element 2 and the subgrids. Task flow: (1 ! 2 ! Each subgrid) . 59 6.6 Seven HUD elements, all considered as asymmetric tasks. Task flow: (1), (2), (3), (4), (5), (6), (7) . 61 6.7 Seven HUD elements, all considered as asymmetric tasks. A second attempt. 62 6.8 Seven HUD elements, all considered as asymmetric tasks. No initial point provided by the designer. 64 6.9 Seven HUD elements, all considered as asymmetric tasks. Initial point provided by the designer, each HUD element restricted to squares. 65 ix 6.10 Seven HUD elements, all considered as asymmetric tasks. Initial point provided by the designer, each HUD element restricted to squares, with a smaller preset width to height ratio. 66 6.11 Seven HUD elements, all considered as asymmetric tasks. Initial point chosen by NOMAD, each HUD element restricted to squares, with a smaller preset width to height ratio. 67 6.12 Seven HUD elements, all contained in one task flow. Task flow: (1 ! 2 ! 3 ! 4 ! 5 ! 6 ! 7)........................ 68 6.13 Seven HUD elements, all contained in one task flow. The width of each element has been restricted to 120px. 70 6.14 Seven HUD elements, all contained in one task flow. Each element restricted to a square shape. Task flow: (1 ! 2 ! 3 ! 4 ! 5 ! 6 ! 7) 71 6.15 Seven HUD elements, all contained in one task flow. Each element restricted to a square shape. Task flow: (1 ! 2 ! 3 ! 4 ! 5 ! 6 ! 7) 72 6.16 Three task flows: (1 ! 2 ! 3); (4 ! 5 ! 6); (7) . 73 6.17 Three task flows: (1 ! 2 ! 3); (4 ! 5 ! 6); (7) . 74 x Chapter 1 Introduction In recent years, displays possessing a variety of screen size and resolution combinations have been rapidly introduced, causing video game designers to rethink the design of their user interfaces to suit these new displays. Many video games exist on multiple platforms supporting a plethora of display combinations and so adapting the user interface in a flexible but efficient manner is a topic of great research. These issues combined with the already long iterative development process involved, has led to increased development times and costs. In order to solve this problem, methods of automation have been explored as a possible solution to help designers during the development process of video game user interfaces. Attempts at using automation and/or code generation on video games, as a whole, has been explored before [13, 9]. In addition, automation in the development of graphical user interfaces for general applications has also been explored [26, 10, 21]. However, there has not been much research into applying those techniques towards video game user interfaces specifically. A possible reason for this is due to the unique design of each interface for each game. Heads Up Displays, (the primary interface 1 M.A.Sc. Thesis - Manivanna Thevathasan McMaster - Software Engineering used to interact with the game), in particular, possess a unique set of requirements that are tied to that specific game's mechanics and genre. This unique quirk about video games leads us to believe it is unlikely that fully automated techniques will replace the creative aspects of human game designers. However, automation can still be used in other stages of the development process to help reduce the development time and cost of creating video game user interfaces. This work proposes a solution for one such method of automation. This solu- tion involves appropriately modeling, optimizing and prototyping Heads Up Display, (HUD), layouts within tower defense video games, given the goal of task efficiency. Through the use of Fitts' law, blackbox optimization software and game genre spe- cific knowledge, an algorithm is produced that can automatically solve and present HUD layouts. These layouts, represented as wire-frame images, have been optimized with the goal of minimizing the time it takes players to perform game-specific actions. This algorithm combined with effective modeling provided by the designer, can help reduce development time, and thus cost, due to an increased number of viable layouts automatically produced possessing the designer's goal of task efficiency. While the algorithm presented here applies to a specific subgenre of games, it can be extended to other genres of video games with additional genre specific knowledge. In addition, it is important to note that the specific software developed for this paper is used to analyze and provide evidence that the presented algorithm satisfies the intended goals. The software developed does not facilitate the end goal of automation in and of itself.