My Role: Front End Development
Project Type: Game Design (Academic)
Tools: Java, BlueJ, MS Paint, SumoPaint
Responsibilites: Pseudocoding, Flowcharts, Coding
As the final project in my Advanced Intro to Programming Course, my group was assigned the task of creating our very first playable game. Provided our laptops, a few weeks, and the frustratingly limited functionalities available in BlueJ, we present our take on what is undoubtedly the best game in the world (League of Legends, of course).
We began by devising a proposal that outlined our game’s functionalities, as well as a description of what the interface would look like.
Two players try to defend their own nexus while attacking their opponent's. The players interact in a 2D environment and the user has a top-down view of the sprites. The characters use basic attacks on eachother
We laid out each class, its methods, and what those methods would return. For example, the .getHealth() method from the Actor class would return the value representing the unit's remaining HP.
We also outlined what the controls would look like. Two players would use one keyboard. Player 1 would use the WASD pad, while Player 2 would use the key pad.
Next, we mapped out the user experience as a flow chart in order to envision how the user would navigate from screen to screen. We determined that users would begin at a Welcome Page, and then they would be able to choose between an Instructions Page or a Start Game page which would lead them to the game environment. Inside the game environment, we mapped out the player's experience, including the addition of a respawn delay that would occur if a player’s HP reached 0. Once a Nexus was defeated, the game would terminate.
We also sketched out how we imagined our sprites would look like in relation to each opponent and the nexuses. Originally we planned on giving users the option to choose between a ranged or melee character, but due to time constraints, the back end development team ultimately scrapped the idea.
We also wrote out a list of possible scenarios of user movements which was used by the back end team to program actions and movements of characters and missiles.
We divided up the workload by Front End and Back End. My partner and I were assigned Front End Development. We were in charge of creating a working Graphical User Interface for the game.
We utilized Javax.swing to create the widgets on our main page. Shown below is the formatting of our main screen:
Believe it or not, we were not taught how to use the Javax.swing kit at all in our Intro to Java course. As a result, we spent a majority of our time researching how to use Swing and familiarizing ourselves with its components and their corresponding methods. Shown here is our implementation of KeyListeners which we used to receive keybard inputs for players' movements and attacks. Upon each input, we had to either update the players' location accordingly or initiate a fireball animation to indicate an attack had occurred.
We used MS Paint to design our Sprites:
When we finally finished, we presented our game to the class. Although our final outcome lacked the polish and refinement of commercial applications found on the app store, I was proud of our project nonetheless. I left the class not only with a tangible representation of all my hard work from the quarter, but also with extensive insight into the fields of game design and computer programming. I gained an awareness of the complex processes behind game development, such as class and method creation, implementing hierarchies of classes, and mapping out flowcharts to illustrate user interactions. I also learned how to create a basic graphical user interface using the Java Swing toolkit. Thanks to my Advanced Intro to Programming course, I formed an immense enthusiasm for computer science. Moving forward in my professional career, my experience with computer programming will continue to supplement my projects and skills as a UI/UX designer.