Implementation and Analysis of Reusability Framework Design for Event User Interface Component in Phaser 3

Abstract

The growth of game development is now widely supported by software such as game engines and game frameworks. Phaser 3 is a popular HTML5 based game framework on the browser platform. However, Phaser 3 does not facilitate managing code of User Interface (UI) event component. Sometimes a game developer discovers that UI event component codes, such as buttons or joysticks that have been created, must be regenerated on subsequent projects with the same function. In this research, we proposed a reusability framework for Phaser 3 by combining the factory method and the singleton pattern in managing UI event components. The aim is to make developer productivity increased so that there is no need to repeat the algorithm or code that has been created previously. Our results show that the Phaser 3 UI standard has less a reusability value of 64,241%, while the proposed framework that was built has relatively higher reusability, that is equal to 84,576%. Game developers can add the combination of design patterns, as good software development practices, into an existing game framework to achieve code reusability without major changing on the existing game framework. This approach can also be used for the creators of game framework to use design patterns from the outset of development of game framework.