# Self-Learning Mechanism for Mobile Game Adjustment towards a Player
## 3 Graphical User Interface Adjustment According to the User's Screen  
On the marketplace of mobile phones, there are many models of phones with various configurations, including different screen resolutions and screen sizes. Due to the flexibility of app development languages and a lack of standards, each mobile app is very different from other apps. Furthermore, the graphical user interfaces for similar functionalities are rarely consistent or similar [29]. It should be noted that mobile phone manufacturers mark the longer side of the screen as the screen width and the shorter side as screen height. This notion is inherited from the TV and computer monitor technology and it corresponds to the horizontal orientation of the screen. In that sense, the screen aspect ratio is defined as the ratio of the longer screen side to the shorter screen side. On the market, there are screens with various screen aspect ratios, e.g., 16:9, 18:9. In _Wonderful Animals_, a vertical screen orientation is set as the default orientation (as shown in Figure 1). Due to the vertical orientation, the longer screen side is noted as the screen height, and the shorter screen side is noted as the screen width. This notion is used in the rest of the paper. In order to be able to adapt the graphical user interface of every part of the game to a variety of phone models regarding different screen resolutions and sizes, a mathematical model of graphical user interface adjustment is developed. Firstly, the background image has to be properly displayed on the screen. Proper background image scaling must satisfy two conditions: (1) the original aspect ratio of the image has to be preserved; and (2) after the background image is scaled, there should not exist any white space on the screen (space on the screen not covered by the background image). When the game starts, it gathers information about the screen width and screen height in pixels (by using the Android system functions). Afterwards, the screen ratio is calculated according to Equation (1):  
\[R_{s}=\frac{height_{s}}{width_{s}},\ R_{s}>1 \tag{1}\]  
where \(height_{s}\) is the screen height in pixels and \(width_{s}\) is the screen width in pixels. **Theorem 1**: _For a given screen display whose aspect ratio is \(R_{s}\) and a given background image whose aspect ratio is \(R_{b}\), there is an adequate image scaling, regarding at least one image dimension and preserving the image \(R_{b}\), which occurs without empty space on the screen._  
**Proof of Theorem 1. ** Let us define screen aspect ratio \(R_{s}\) and background image aspect ratio \(R_{b}\), as defined by Equation (2), respectively:  
\[R_{s}=\frac{height_{s}}{width_{s}}\ \text{and}\ R_{b}=\frac{height_{b}}{width_{ b}},\ \text{where}\ R_{s}>1,\ R_{b}>1. \tag{2}\]  
If \(height_{b}\geq height_{s}\), then the background image is scaled properly and it can be drawn on the screen. If \(height_{b}<height_{s}\), then the background image height is not properly scaled in the first attempt because there will be white space if such a scaled image is shown on the screen. Thus, the background image scaling is carried out in the second attempt. The background image height is set to the screen height (Equation (8)), and the background image width is recalculated, as in Equation (9):  
\[height_{b}=height_{s} \tag{8}\]  
\[width_{b}=\frac{height_{b}}{R_{b}}. \tag{9}\]  
According to Theorem 1, there is at least one image dimension for which the background image will be properly scaled to any screen. So, if scaling to the screen width is not proper, then scaling to the screen height is proper, and vice versa. In this way, the application ensures that there is no white space displayed on the screen and that the original aspect ratio of the background image is preserved, avoiding image stretching.