Figure 2. The class diagram for the Player and Camera movements-Modeling, Designing, and Implementing an Avatar-based Interactive Map

The next section describes the Unified Modelling Language (UML) diagrams designed for the project, which are a state diagrams (also known as statecharts) for the Player movement, the Navigation system (Figure 1). In addition, we used a class diagram for the Player and Camera movement (Figure 2). When the avatar-based game starts, the state of the Player is Idle, i.e., Player_IDLE. When the user selects the building, it enables the navigation path towards the destination. If the user selects any arrow keys (Right, Left & Up) the state of the player will change to running (i.e., Player_Running). Also, the path will diminish along with the player movement; hence, the state of navigation path will change to Changing_Path.