DYNAMIC UI

SCALABLE UI SYSTEM

This is a post that I would keep updating the dynamic UI I created
Aiming to create scalable system for wide range of interactions
‍KEYWORDS
VR; AR; Pipeline; Content Creation; User Interface; Interaction; Experience Design; UI; Game; Product Design; User Experience; Game Development; Visual Design
‍
Yiqi Zhao
DEMO1 - Animated Button System
DEMO2 - Dynamic Tooltip Module
DEMO3 - Progress Bar [TBD...]
❤️Please give it several seconds to be loaded~⏲️

‍

TILES SYSTEM

Outline:
  • Base [Background Bitmap Groups]
  • Content [Dynamic Data]
  • Behavior [UI Animation]

The approach demo site has three tile placeholder with empty data, where would populate content based on class input. Each of the tile would display related data based on point 1 and point 2 and point 3. This system is modular and scalable for more tiles with multi lists.

Behavior

//browse button left and right will update the tile index for displaying title, profile, and description texts

//runtime: destroy active bitmaps could reduce rendering budget

//active the easing animations and blink them for visual effects

‍

‍

‍

Slider and Data

StringBuilder builder = new StringBuilder(); infoText.text = builder.ToString();

Get all text contents in a new string to display, and add Append

slider1.GetComponent<Slider>().value = item.(the data we need from item);

Parse data from items into 0 - 1 slider value

‍

Cursor follow

 float (xxxx) EdgeToScreenEdgeDistance: calculate the from (left top right bottom) to cursor distance 

private void FollowCursor()

public void DisplayInfo(Item item)

public void HideInfo()

‍

Color from Rarity

Get the color palate we want from rarity setup and modify the icon sprite’s color or text color accordingly 

 if (ColorUtility.TryParseHtmlString("here goes hex of item's color", out mycolor))

‍

ALL IN ONE PROGRESSBAR

Outline:

  • Base
  • Alpha 1
  • Alpha 2

The progress bar is made with a single shader that takes a base sprite and an alpha sprite. The  alpha is a gradient mask to calculate the percentage of opacity of the above layer on the base layer. The shader is designed so any irregular shape base could have same performance.

TBD...

Yiqi, designer, technologist, artist.

about me
contact me
⇑ TOPBACK TO WORKS


Have a good day !
HOME
Contacts
WA, USA
vanyiqi@gmail.com
sirrandom
Follow
/Long dream stretches, because of you.
Copyright © 2022 Yiqi Zhao. All rights reserved. 0_0