Posted November 28, 2024 by Xf68 Game Studio
#AI DESIGN GAME #DEVLOG #GAMES #MAKE #PRODUCTION #RESOURCES #UNITY
At present, we have the general flow of the game, and based on this flow, we have made an interface based flow chart.
So next, we will sort out some UI elements we need according to this flow chart, and make a published UI KIT.
| ** Type ** | ** Color Code (Suggested) ** | ** Visual Meaning ** | ** Scenario ** |
|---|---|---|---|
| ** Main * (Primary) | ‘#FFFFFF’ (pure white) | simple and clear, highlighting the core content | main interface background, main content display area, the highest priority |
| ** Secondary ** (secondary) | ‘#F0F2F5’ (light gray) | secondary content area to distinguish the main background and weaken the visual impact | secondary content display area, auxiliary information area, and expansion module background |
| ** Warning ** (warning) | ‘#FFD966’ (bright yellow) | attract attention and convey a moderate sense of emergency | Indicates the background of a pop-up indicating a potential risk, the operation area requiring user confirmation (if a warning has not been entered) |
| ** Success ** (success) | ‘#A5D6A7’ (soft green) | positive emotions, delivering successful operation feedback | successful operation feedback area, reward display page, task completion background |
| ** * (Danger) | ‘#E57373’ (bright red) | Strongly alerts users to risky operations | Delete confirmation fields, destructive operations (such as reset, delete data) |
| ** Information ** (Info) | ‘#64B5F6’ (soft blue) | Provides auxiliary information, highlighting but not preoccupying the core attention | help information area, description details page, function guide background |
| ** Mask ** (Overlay) | ‘rgba(0, 0, 0, 0.7)’ (deep transparent black) | reduces background and highlights foreground content | modal popup background, full-screen dialog mask, and global block interaction layer |
| ** pop-up window main background ** (Dialog Primary) | ‘#FAFAFA’ (light grayish-white) | simple and bright, suitable for most pop-up background | general function pop-up window (such as setting interface, confirmation window) |
| ** Pop-up Secondary background ** (Dialog secondary) | ‘#E0E0E0’ (medium gray) | emphasizes the secondary content and weakens the secondary background (such as help prompt, additional info box) | in the primary function area |
| ** Interface name ** | ** Resource Type ** | ** Full folder path ** | ** File name ** | ** Resource Description ** | ** Visual Classification Type ** |
|---|---|---|---|---|---|
| Settings | ** Common Resource ** | SharedAssets/buttons/ | button_close.png | The Settings screen – close button | Secondary ( |
| SharedAssets/buttons/ | button_text.png | sets the interface – text button | Secondary ( | ||
| SharedAssets PopupBackground / | popup_background. PNG | popup window background Overlay ( | |||
| SharedAssets ToggleSwitch / | toggle_switch_on. PNG | ON state switch The Success (Success) | |||
| SharedAssets ToggleSwitch / | toggle_switch_off. PNG switch | OFF state Secondary ( | |||
| SceneLoading | ** Independent resource ** | SceneLoading/ | background_scene_loading.png | Background image of game scene loading/switching interface | The Primary process is |
| * * * * ge resources SharedAssets FullscreenMask / | fullscreen_mask. PNG | full screen mask | Overlay ( | ||
| MainBattle | ** Independent resource ** | MainBattle/ | background_top_bar.png | Background bar at the top of the Battle page | Secondary |
| MainBattle/ | button_settings.png | sets the Battle page | on the main interface Secondary ( | ||
| MainBattle/ | button_mode_tab.png | indicates the mode switchover TAB button on the main screen. | Information (Info) | ||
| MainBattle/ | button_difficulty_left.png | Choose the difficulty left button | Secondary ( | ||
| button_difficulty_right.png | Select the difficulty button to the right | Secondary | |||
| MainBattle/ | button_start.png | The start button | The Primary process is | ||
| background_bottom_bar.png | The background of the bottom bar | ||||
| MainCard | ** Independent resource ** | MainCard/ | slot_empt. png | Card slot position – empty status | Secondary ( |
| MainCard/ | slot_filled.png | Indicates the slot position of the card. The status is | The Primary process is | ||
| MainCard/ | background_card_list.png | card list | The Primary process is | ||
| MainCard/ | button_card_equipped.png | card button – unlocked (equipped) | Information (Info) | ||
| MainCard/ | button_card_unequipped.png | card button – unlocked (not equipped) | Secondary ( | ||
| MainCard/ | button_card_locked.png | card button – unlocked | Danger | ||
| TowerInfo | ** Independent resource ** | TowerInfo/ | background_tower_info.png | The background image of the tower information UI | Information (Info) |
| TowerInfo/ | button_back.png | returns the | button Secondary ( | ||
| TowerInfo/ | preview_tow. png | A picture/video of the tower | Information (Info) | ||
| TowerInfo/ | button_equip.png | The equip button | The Primary process is | ||
| TowerInfo/ | button_unequip.png | Remove the button | Danger | ||
| TowerInfo/ | button_unlock.png | The unlock button | The Success (Success) | ||
| ** Common Resource ** | SharedAssets/Icons/ | icon_attack.png | attack icon | Information (Info) | |
| SharedAssets/Icons/ | icon_range.png | Attack range icon | Information (Info) | ||
| SharedAssets/Icons/ | icon_frequency.png | Attack frequency icon | Information (Info) | ||
| GameScreen | ** Independent sources ** | GameScreen/ | button_exit.png | Game exit button | Danger |
| GameScreen/ | button_help.png | The help button | Information (Info) | ||
| GameScreen/ | button_start_work.png | The start work button | The Primary process is | ||
| GameScreen/ | button_speed_up.png | the information button | Information (Info) | ||
| GameScreen/ | button_expand_island.png | Expand the island button | Information (Info) | ||
| GameScreen/ | background_bottom.png | Secondary | |||
| * * * * ge resources SharedAssets FullscreenMask / | fullscreen_mask. PNG | full screen mask | Overlay ( |
I will also keep a record of the development ideas and progress of this game, if you are interested, welcome to discuss together.