Basic Interactable Objects Design
This page involved information about the design process of interactable objects, the introduction of the interaction flow and inspirations for designs.
The following basic interactable objects will be included:
- Bed: Interact with this object to win the game.
- Door: Interact with this object to move to the next map.
- TV: Interact to turn on or off the TV to complete some missions.
Like the original design of the bed, the design of the door is also designed as a 2D picture from a frontal perspective. The color matching uses the same wood color as the bed board. The effect of light and shadow is also added, but because of the relatively flat design of the door itself, the effect of light and shadow will not be very obvious.
Two different kinds of doors are designed since the job allocation was duplicated. Also, because the first design did not fit the map well and these doors (see below) are more closely related to the map in both size and direction. Thus, the second version of doors is generated and decided to be used in the first sprint via teams‘ collaboration. The outline colour is still decided to utilise yellow because it will be more obvious and findable within the game scene.
The final version of the door is an integration of the first and second designs. It utilised the colours of the first version and the shape of the second version. The size is decided after a full discussion with the designer who is responsible for the NPC and character design to ensure the door is suitable for the character. The main reason for the colour change is because the brown wooden door is more regular than the purple one, also more compatible with the wall texture.
Interaction Flow
- When the character is in contact with the bed, there will be a highlight on the object.
- When the user interacts with the door(by keypress). The screen will go dark and the sound effect will be played. The next map will be shown after the dark screen.
Animation Effect
Use the perspective of directly facing the bed to create the prototype of the bed. In order to comply with the setting that the character is a child, the main color of talking blue is adopted. In order to show the three-dimensional effect of the object, light and shadow effects are added to the picture.
Since the job allocation was unclear and lack of communication between teams, two different kinds of beds are designed. However, door interaction was not implemented at this stage. However, this version of the bed was not used on the map eventually.
On the basis of the second version, the light and shadow effects of the first version are combined. The colour is still based on blue. In order to match the Retroactive's style, darker and more retro colours are used in the colour. According to previous user testing, some users reported that shining was not obvious enough. Therefore the highlight outline is chosen to be the switch between two colours: bright yellow and dark yellow, to make the shining look more obvious. At the same time, in order to avoid changing the size of the object itself when highlighting, the original black outline will directly become a shining outline during animation, instead of adding another layer of shining outline to the outside.
Interaction Flow(Sprint 1)
- When the character is in contact with the bed, there will be a highlight on the object.
- When the user interacts with the bed(by keypress). The screen will go dark and the sound effect will be played. A winning page will be shown after the dark screen.
Animation(Sprint 2)
The original texture is also from team 3 to better fit the map as basic furniture.
In order to maintain consistency with the character design, the TV was redesigned to a lower pixel quality version. When the TV is on, the continuous snowflake screen is used to remind the user that the TV is on. In the animation effect of turning off the TV, there will be a momentary splash screen to restore the style of TV screen operation in the 1980s. This part did not choose to add a highlight to the TV. The reason is that the TV is a comfortable and extra task-related prop, which requires users to discover and judge by themselves.
Interaction Flow
- When the user interacts with the bed (by keypress). The TV will be turned off.
Animation Effect
This idea is generated during a meeting. If there is guidance at the starting screen, Users will be able to get the information of which key to press when they want to interact with the object during the game.
When the character is in contact with the object, there will be a pop-up bubble to let players know which key to press to interact with it.
After the user testing in sprint 1, one of the responses mentioned that it would be better to add some animation for the guideline when it pops up. Therefore, an animation of the growing bubble is created. This design is more in line with the metaphor of the user’s daily thought bubble. This design will reduce the user’s sense of violation when receiving information and bring a good experience to the user. Similarly, in order to play a 3D visual effect, the time has also been added to the design.
Fallout
CS
Speech Bubble in games
Shape of the key
