Endless Island TowerDefense-TD V2 Devlog-3

Endless Island TowerDefense-TD V2 » Devlog
2024-11-28 by Xf68 Game Studio
Share this post:

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.

Today’s goal

  • Break down the UI elements in the flowchart
  • Made the first version of the UI KIT

Decomposition interface

Game scene loading/switching interface

  • Background image

Set the interface

  • Full screen mask
  • Popup background
  • Close button
  • ON/OFF Indicates the on/off check box
  • Text button

Main interface – Battle page

  • Top background bar
  • Set button
  • Gold coin icon
  • Mode Switch TAB button
  • Difficulty selection button group (left button, right button)
  • Start button
  • Bottom bar background
  • Bottom button
  • card
  • battle
  • upgrade

Main interface – Card page

  • Card slot location
  • Empty status
  • In a state.
  • Card list
  • Card button
  • It’s unlocked.
  • Equipped.
  • Not equipped.
  • Not unlocked.

~~ Main interface – Upgrade page (function is not ready, do not design) ~~

Tower information interface

  • Background image
  • Back button
  • Tower picture/video presentation
  • Information small background picture
  • Equip button
  • Remove the button.
  • Unlock button
  • Tower related ICONS
  • Attack power.
  • Attack range.
  • Attack frequency

Game interface

  • Exit button
  • Treasure icon
  • Help button
  • Start work button
  • Acceleration button
  • Expand Island button
  • Bottom background image
  • Bottom selection taka slot
  • Normal state.
  • Selected status
  • Build button
  • Can build progress (fill background)

~~N Select 1 interface (event interface) (function is not ready, do not design) ~~

  • Full screen mask

Help interface

  • Information small background picture
  • Back button

Pause the game interface

  • ON/OFF Indicates the on/off check box
  • Popup background
  • Retreat button
  • Continue button
  • Guide character avatar
  • Talk bubbles.
  • Bubble background
  • Profile picture background

Successful retreat interface

  • Treasure icon
  • Gold coin icon
  • Treasure conversion gold arrow picture
  • Campaign statistics related ICONS
  • Attack power.
  • Attack range.
  • Attack frequency
  • Collect button

Visual classification design

** 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

Sort out the resource design table

** 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 (

Summary

I will also keep a record of the development ideas and progress of this game, if you are interested, welcome to discuss together.

Endless Island TowerDefense-TD V2

A Perfect Blend of Dynamic Island Expansion and Strategic Tower Defense!

Add Game To Collection

More posts

Leave a comment

Log in with itch.io to leave a comment.