CU DM Final Project – Development Progress Journal

Introduction

This is my development progress journal for the RKL3044MP Final Digital Media Research Project in order to communicate the results of research and development in the field of study and implementation covered by the journal and to keep the track of the progress for this execution phase.

The project’s purpose is to find and implement a solution to the problem that current gaming productions are ineffectively educational, particularly current football games, which are more concerned with fun than education and learning. This phase of the project will transfer the findings from the research phase to the development phase, culminating in the creation of the final product.

Below are the logs of each phase of this project’s development reported and written on weekly basis from 5th of January to 28th of April 2022.



1. Project Synopsis

Here is a brief summary of the Footballizer project which covers the primary reason to choose this topic and the main reason behind it, as well as the essential steps before development including the matters that need to be improved from the last usability test in the research phase.

1.1 Brief

This project aims to produce an educational game on the web that allows audiences to play football while they learn about football, so they can grow their football knowledge and skills.

1.2 Why Footballizer?

FIFA and eFootball are two popular football simulation video games that are now dominating the market and selling well. The problem now is that these games are mostly intended to entertain rather than to educate. This implies there isn’t a football game on the market that is both informative and fun. Due to the vast scale of the gaming business (Wijman, 2020) and the number of gamers around the globe, which is expected to continue to increase over time, such a game product that could cover both educational and entertaining parts, would be an engaging product.

1.3 Essential Steps and Improvements

Based on the comments and feedback collected from the latest usability test and the presentation, the following improvements and steps need to be considered before the development and to be applied to the product during the project execution:

  • The coverage level of educational content (from basic to advanced)
  • Presence of the content (educational) on popular platforms (IG, Youtube etc)
  • Content and features for coaching and team management in the game
  • On-line and interactive instructions & guide for users
  • Having creative ideas for education content to take it to the next level
  • Layout: same UI and functionality on mobile devices

2. Project Schedule & Timeline

Following the timeline prepared in the research phase and the academic calendar, the production timeline for this project is divided into 6 phases and will complete the project within 16 weeks.

Below is the list of phases in this project:

  • Planning & Further Research
  • Design
  • Development & Coding
  • Content Development
  • Usability Testsing
  • Final Presentation (Demos)

* Gantt Chart file has been shared with the resepective lecturer and its final version will be uploaded to the MS Teams folder.


3. Further Research

Game design and development is a time-consuming and complex process. To gain a better understanding of it, I conducted research on the game design process and was able to learn about its functionality and steps. similar to filmmaking, the game design and development process can be divided into 3 main stages – pre-production, production and post-production.

Pre-production will take up usually around 20% of the whole process. This includes, Concept Development, Concept Development, Research and Development, Mapping and Prototyping which I have basically done during the last semester – research phase. Production part features, Level Action, Level Action, Texturing, Interactivity, AI (coding) and HUDs and Menus (UI). As for the Post Production part, SFX & Visual Effects, Refining, Testing and Publishing are required (Rao, 2020).

Since my project will produce a web-based game, I need to use the HTML5 technology which requires the following web technologies (MDN, 2021):

  • Audio: Web Audio API
  • Graphics: WebGL (OpenGL ES 2.0)
  • Input: Touch events, Gamepad API, device sensors, WebRTC, Full Screen API, Pointer Lock API
  • Language: JavaScript (or C/C++ using Emscripten to compile to JavaScript)
  • Networking: WebRTC and/or WebSockets
  • Storage: Cloud

Having learned and analysed my finding and my research results, I have come up with the following steps which suit my project to be get completed within the defined timeline. Below is the breakdown of these tasks:

Design Phase

  • Data Architecture Design (Update & Modification)
  • Web App UI (Finalise)
  • Game Mechanism, Gamification & Level Architecture
  • Storyboarding
  • Game Design (General)
  • Game Design: Main Gameplay
  • Game Design: Mini Games & Trainings
  • Characters & Elements Designs
  • Web App UX Design

Development Phase

  • HTML5 & CSS Templates (Bootstrap)
  • Dynamic Engine & Database (PHP / MySQL)
  • Game Development: Main Gameplay (Match)
  • Game Development: Mini Games
  • Core Features & Game Modes
  • GFX Editing & Sprite Sheets
  • Applying Usability Test Modifications

4. Data Architecture Design (Update & Modification)

Based on usability test and presentation feedback, plus more research and experiments, there are some new updates and modifications applicable to the main info & data architecture of the project.

Here is the latest update on the project structure:

Match
  • Quick Match (AI Squad)
  • VS Player (Users’ Squads)
  • Manager Mode (Match Simulation Mode)
Training (Training and Skill Games)
  • Penalty Kick
  • Dribbling Game
  • Reactions Training
  • Vision Training (Bubble Shooter)
  • Stamina Game
Referee Mode
  • Custom Play
  • Season 1
  • Season 2
Academy (Educational Content)
  • Guides & How tos
  • Educational Articles
  • Definitions & Terminologies
Ranking (Player Rankings)
  • Players List with Ranks
  • Play Option
Settings
  • Edit Your Player
  • Edit Your Club
  • Privacy Settings
  • Inventory & Items
Store
  • Player Items
  • Club Items
  • Gameplay Items

5. Web App UX and UI Design

To finalize my game’s web app UI, I have studied further on UI and UX design and polished my final previous prototype which was representing the final user interface of my product.

Understanding the differences between the two disciplines of UI and UX design is critical. Everything that influences a user’s interaction with a (digital) product is referred to as U design, this has things to do more with the interaction and experience of consuming that product, whilst the process of designing user interfaces in software or digital devices with a focus on appearance or style is known as user interface (UI) design (Babich, 2020).

To have the most impact in my final design I considered the matters such as a) Knowing my audience and the important factors I should consider when designing a product as the product will be for the audience and not just for myself. b) Adapting my design for short attention spans, which means overwhelming users with too much information needs to be avoided. c) Using real content when designing – This will help me to see the functionality as I design rather than just using dummy content. d) Making design accessible & usable and creating for a wide range of people who will interact with my game (Babich, 2020).

5.1 Layout Design

Here is the general layout design for the web app (website):

5.2 Icons Design

As a result of Usability Test 2 in the research phase, most of the users preferred to have UI menus with a combination of text and icons. The icons below were created for use in the UI design of the web app’s main and inner screens. Because I’m merging text and symbols, I was concerned that my icons shouldn’t be overly detailed, as they should convey the meaning of the icon even if there is no supporting text.

5.3 Final UI Design

So here is the finalized design at this stage. It is responsive and optimised for both wide (desktop/tablet) and narrow (mobile) screens.

Desktop / Tablet
Mobile

6. Game Mechanics and Gamification

6.1 Game Mechanics

Game Mechanics define the rules and structures of the game to provide an engaging experience for the player. Basically, the game mechanics of a game effectively define how the game will function for users (Eng, 2020).

As a football simulation game, Footballizer’s game mechanics in the match gameplay follows the simulation category in which its main focus is on realism, with the goal of completely immersing the player in matches that they are playing (Tyler, 2019). The purpose of the game, just as in real life, is to score a goal, which is accomplished by kicking or heading the ball into the opposing team’s goal, with the player who scores the most goals winning.

The mechanics for Footballizer training games (mini skills games) are based on Arcade game mode and follow the Role-Playing and Action Points category where the game takes on the role of its created avatar (player) and collects points or scores to complete the training to accomplish their objectives.

6.2 Gamification

Gamification is a strategy for improving systems, services, organizations, and activities in order to generate experiences similar to those found in video games in order to encourage and engage users (Walter, 2020). Footballizer uses this method to motivate and encourage its users to play the game.

In order to motivate the gamers, Footballizer uses a player ranking list (world leaderboard) that places and ranks gamers based on their performance. The more they play, the higher overall rating which increases their players & clubs stronger and let them go higher in the ranking list. The rating range starts from 68 and can go up to 120.

Below is the quality range for the player ratings:

Additionally, each activity such as playing matches or skill games will have in-game rewards which can be used in the game to level up and improve your player & club.

As illustrated above, the gamification of this game encourages players to play more in order to level up and climb up the leaderboard which can make this game competitive in real life and motivates them to engage with the community and other users. At the end of each season, users will also receive rewards based on their position in the ranking list.


7. Storyboarding

Creating a storyboard for a game is an important component of the design process because it greatly aids the process (Leighfield, 2021). It will assist me in putting plot point ideas into a logical flow and fine-tuning the pacing for maximum effect. Here are my drawn storyboards for the main gameplay (match) and other mini games (skill games).


8. Game Design

8.1 General UI & Gameplay

8.1.1 Fields of Play

Pitch and surface types – Each pitch type will have different impact on the gameplay (such as running speed of players) depending on their qualities.

8.1.2 Stadiums

Designs for in-game stadiums – Bigger stadiums will improve user’s squad playing performance when play at home.

8.1.3 Balls

Design for in-game footballs – Color variations, purchasable using coins from the store.

8.1.3 Kits

Players’ kits – Selectable in settings.

8.1.4 Players Spritesheets

Players sprite sheets (includes player/goalkeeper moves & animations)

8.1.5 Club Badges

Badge for users’ clubs – Optional in the settings.

8.1.6 Character Designs

Character designs for players avatar. Male & female heads.

8.1.7 Player Card Designs

Player card designs – From low to high quality cards (Bronze, Silver, Gold, Pro, Elite)


8.2 Mini Games Design

Here are the design for the mini games (skill games) which include:

  • 8.2.1 Penalty Training Game
  • 8.2.2 Dribbling Drill Game
  • 8.2.3 Stamina Running Game
  • 8.2.4 Reactions Training
  • 8.2.5 Vision Training (Bubble Shooter)

9. Web Development – HTML5 & CSS Scripting

In order to make my product function on the web, its user interface and gameplay need to be developed using HTML markup scripting. HTML technology provides structure to the content appearing on a website, including graphic images, text, videos and web-based gameplays.

To make my web UI flexible and responsive to all screen sizes on different devices (Desktop and Mobile), I used Bootstrap template. Bootstrap is simple to set up and master, with a large number of components, a strong grid system, styling for numerous HTML elements ranging from typography to buttons, and JavaScript plugin compatibility, making it even more versatile (Bacinger, 2020).

Here is the bootstrap template I’m using for creating the main UI of my game’s website:

Below is a screenshot of my product’s HTML source file:

Here is the final output and look & feel of my game’s UI:


10. Coding Engine and Database Design

10.1 Coding Language

In order to create the main core of my game base engine which can be functioned on web based platform, I chose PHP language, for the following reasons:

  • I already am familiar with PHP language from before and have working experiences coding with PHP
  • PHP is an open-source code and it is adaptable, meaning one of the biggest advantages is that it’s platform agnostic that can be run on Mac OS, Windows, Linux, and most web browsers. PHP is fast and secure, and it is well connected with web-based databases such as mySQL (Stone, 2016)

10.2 Database Design

As for the database, MySQL database system is chosen for my game product since this relational database system is an- open-source system, is on-demand scalable, it features a distinct storage-engine platform, it is on top of the robust transactional database engines list available on the current market, and mainly, it is compatible with PHP language which is my familiar coding language (McLean, 2017).

To design the database structure, I have first defined the purpose of having a database system and how to solve the problems that this database would be able to resolve (Fachada, 2018) .

The chart above shows the relation between problem and data storage in my game. Due to security reasons and data privacy of the users, I’m not able to show or describe more details on the data structure here in this journal – However, further details have been/will be shown to my respective lecturer during WIP review sessions.


11. Game Development

11.1 Main Gameplay

The main gameplay of my game is using an open source engine which is available for licensing at EnvatoMarket. This engine is based on the P5JS closing library. P5JS (aka p5.js) is a JavaScript framework for creative coding that aims to make coding more accessible and inclusive to gamers and interaction designers. The main reason for using such a platform is because, this is a JavaScript based scripting languages and runs on the web, and most importantly, it is a language that I’m familiar with and I learnt it during my diploma course.

Using the designs and graphic elements I prepared and created in the design phase, I now need to convert and compile these GFX components for coding and apply my game design and structure to my game engine. Then, I need to create a connection and an API between P5JS and my main web interface which is written in PHP.

The API and relational connection were the most challenging part of this stage. Additionally, some other technologies such as json, jquery & Ajax were used.

The video below shows the WIP gameplay functionality:

Again, due to security reasons, I’m not able to share more source & WIP screens here which were shown to my respective lecturer during our WIP review sessions.

11.2 Training Gameplay (Mini Games)

Similar to the main gameplay (Match), training mini games are also using open source coding and are using P5.js library. There are currently 5 mini games for training. These games are connected to the main database to update user player’s and user club’s ratings and attributes.

Here is the list of these training games developed and published on the game’s website:


12. Pitching Presentation WIP 1 (Rehearsal)

The first WIP presented was placed in Week 6. This presentation was in the form of pitching and there were also two lecturers invited in order to observe, review and comment.

As the first presenter I did pitch my project to the audiences and received the following feedback and comments from guest lecturers.

  • Video Tutorial – A video tutorial of my game needs to be added to the pitching so it would represent the functionality of my product.
  • The presentation should be more like pitching – It needs to have a flow of the pitching by adding a demo video in between, showing the functionality/features of the product (website).
  • The monetizing slide should be also moved after the video / demo slide.

By analysing the given comments, my presentation slides deck need to be improved and be modified to consist of the flow of pitching so that it becomes more attractive and interesting from the point of view of an investor or sponsor.

The next pitching is scheduled to be on 17th of March with an outsider from the industry. This would be a good opportunity for me to optimise my presentation and get feedback from the person who has a better eye for marketing.


13. Usability Test – Beta Testing

13.1 Planning

After the development and making the game ready to play, I initiated the beta testing is a type of external user acceptance testing. The first round of beta testing will be started from 16 February and will be performed for a minimum 2 week time.

The primary goal of beta testing is to have the developed product tested by real users in a real-world setting. This method of beta testing is used to obtain useful feedback for product improvement before releasing the product to a wider audience (TestingXperts 2021).

To perform this beta test and to get feedback from the testers, I need to provide an online questionnaire form with some brief questions (10-15 questions) – a short survey that won’t take more than 5 minutes to complete.

My game’s present usability and functionality should be benchmarked and assessed. Users are also expected to spot and report issues, problems, and glitches during this round of testing. New ideas and suggestions are also required to be given by users if they have any.

So, for my usability test, I’ve created the following questions based on these needs:

The survey form was created and it’s now accessible at https://forms.gle/nYbvaUPZXxZuLF797.
A link to this form was also placed on Footballizer website for the current users.

13.2 Progress & Execution

The survey invites have been sent to the current users of Footballizer – 800+ users. Additionally, a notification top bar with a message of survey and the link was enabled in all pages on footballizer.com.

Based on the previous experience on surveying the community, 20 percent of users are expected to participate in this survey.

Email message sent to existing users.


Notification message enabled on Footballizer.com leading users to the survey.


Addition to this survey, I have also requested my lecturer to send my survey to her contacts from the industry. She helped me to contact two senior experts in the digital industry. I have contacted both and so far managed to discuss with one of them. The discussion was done as a video call on zoom and I had the chance to receive constructive suggestions regarding my marketing strategy, my game look & feel (UI) and the website itself.

A complete report on the survey and feedback from experts will be generated in the next week and be posted here.


13.3 Report

Here is the Usability (Beta) Test report generated after receiving 110 responses. The report was running for 14 days and it will be there for another 14 days for receving further feedback.

Report’s chart is also viewable here:


14. Updates & Changes

Besides bug fixes and modifications based on the usability test report, my product needs to be updated to keep the functionally improving and the content fresh regarding the latest updates from the real world and technological upgrades such as new device upgrades and latest software updates.

Here is the list of changes and updates to the game by 3rd of March 2022:


15. Pitching Presentation WIP 2 (Rehearsal)

The second progress pitching presentation has been placed on 11th of March at 11am with a guest from the industry, Mr Daniel. I have presented my pitching and had the chance to get his feedback and perspective on my project and presentation.

15.1 Feedback

The feedback I received from Mr Daniel were positive in general. He also commented on my presentation deck to put a timeline for my marketing campaign, so that it would show how long it would take for project lunching, which could be essential for an investor or advertiser who might be interested to back my project.


16. References

  • Babich, N., 2020. What Is UX Design? User Experience Definition | Adobe XD Ideas. [online] Ideas. Available at: https://xd.adobe.com/ideas/career-tips/what-is-ux-design [Accessed 8 January 2022].

  • Bacinger, T., 2020. What is Bootstrap? A Short Bootstrap Tutorial on the What, Why, and How. [online] Toptal Engineering Blog. Available at: https://www.toptal.com/front-end/what-is-bootstrap-a-short-tutorial-on-the-what-why-and-how [Accessed 27 January 2022].

  • Eng, D., 2020. Game Mechanics. [online] Medium. Available at: https://medium.com/@davengdesign/game-mechanics-3f2b338047aa [Accessed 13 January 2022].

  • Fachada, N., 2018. Teaching database concepts to video game design and development students. Revista Lusófona de Educação, (40), pp.151–166.

  • Leighfield, L., 2021. Video Game Storyboarding (Step-by-Step Guide for 2021) | Boords. [online] Boords.com. Available at: [Accessed 13 January 2022].

  • McLean, M., 2017. 8 advantages of using mysql. DevOps.com. Available at: https://devops.com/8-advantages-using-mysql/ [Accessed February 1, 2022].

  • MDN, Developer.mozilla.org. 2021. Introduction to game development for the Web – Game development | MDN. [online] Available at: https://developer.mozilla.org/en-US/docs/Games/Introduction [Accessed 5 January 2022].

  • Rao, N., 2020. What is the game design process? | CG Spectrum. [online] Cgspectrum.com. Available at: https://www.cgspectrum.com/blog/what-is-the-game-design-process [Accessed 5 January 2022].

  • TestingXperts. 2021. Beta Testing – An Informative Guide on Beta Testing. [online] Available at: https://www.testingxperts.com/blog/beta-testing [Accessed 18 February 2022].

  • Stone, J.A. 2016, Which Language(s) are best (for web development). UTC Scholar. Available at: https://scholar.utc.edu/cgi/viewcontent.cgi?article=1065&context=honors-theses [Accessed February 1, 2022].

  • Tyler, D., 2019. What are Video Game Mechanics? (Learn for Free). [online] Gamedesigning.org. Available at: https://www.gamedesigning.org/learn/basic-game-mechanics [Accessed 13 January 2022].

  • Walter, Z., 2020. What is Gamification? Education, Business & Marketing (2021 Examples). [online] Gamify.com. Available at: https://www.gamify.com/what-is-gamification [Accessed 29 March 2022].

  • Wijman, T., 2021. The Games Market and Beyond in 2021: The Year in Numbers | Newzoo. [online] Newzoo. Available at: https://newzoo.com/insights/articles/the-games-market-in-2021-the-year-in-numbers-esports-cloud-gaming/ [Accessed 5 February 2022].

Comments

Post a Comment