Author: Kristian Bauer

[vc_row row_type=”none” type_width=”full_size” box_size_states=”content_box_size” el_class=”” row_fit_to_height=”no” row_vertical_align=”no” row_padding_top=”45″ row_padding_bottom=”45″ row_padding_right=”0″ row_padding_left=”0″ row_margin_top=”0″ row_margin_bottom=”0″ background_color=”rgba(0, 0, 0, 0)” row_webm_url=”” row_mp4_url=”” background_color_image=”rgba(0,0,0,0.2)” row_image_position=”default” row_bg_image_size_tab_image=”cover” row_bg_repeat_image_gp=”no” first_color=”#000″ second_color=”#000″ row_gradient_color=”{‘color1′:’#fff’,’color2′:’rgba(255,255,255,0)’,’color1Pos’:’0.00′,’color2Pos’:’100.00′,’angle’:0}” row_image_position_gradient=”fit” row_bg_image_size_tab_gradient=”cover” row_bg_repeat_gradient_gp=”no” row_inner_shadow=”no” row_sloped_edge=”no” row_slope_edge_position=”top” row_sloped_edge_color=”#000″ row_sloped_edge_angle=”-3″ parallax_status=”no” parallax_speed=”1″][vc_column][md_rev_slider md_rev_slider_alias=”gdc-notes-3d-ui”][/md_rev_slider][/vc_column][/vc_row][vc_row row_type=”none” type_width=”full_size” box_size_states=”content_box_size” el_class=”” row_fit_to_height=”no” row_vertical_align=”no” row_padding_top=”45″ row_padding_bottom=”45″ row_padding_right=”0″ row_padding_left=”0″ row_margin_top=”0″ row_margin_bottom=”0″ background_color=”rgba(255, 255, 255, 0)” row_webm_url=”” row_mp4_url=”” background_color_image=”rgba(0,0,0,0.2)” row_image_position=”default” row_bg_image_size_tab_image=”cover” row_bg_repeat_image_gp=”no” first_color=”#000″ second_color=”#000″ row_gradient_color=”{‘color1′:’#fff’,’color2′:’rgba(255,255,255,0)’,’color1Pos’:’0.00′,’color2Pos’:’100.00′,’angle’:0}” row_image_position_gradient=”fit” row_bg_image_size_tab_gradient=”cover” row_bg_repeat_gradient_gp=”no” row_inner_shadow=”no” row_sloped_edge=”no” row_slope_edge_position=”top” row_sloped_edge_color=”#000″ row_sloped_edge_angle=”-3″ parallax_status=”no” parallax_speed=”1″][vc_column width=”12/12″][md_text md_text_alignment=”left” md_text_title_line_height=”40″ md_text_desc_line_height=”21″ md_text_title_bottom_space=”10″ md_text_separator_bottom_space=”10″ md_text_description_bottom_space=”25″ md_text_title_separator=”yes” md_text_separator_width=”110″ md_text_separator_height=”5″ md_text_separator_color=”rgb(0, 0, 0)” md_text_use_desc_custom_font=”yes” md_text_desc_google_fonts=”font_family:Roboto%3Aregular%2C100%2C100italic%2C300%2C300italic%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” md_text_use_button=”no” md_text_style=”solid” md_text_solid_color=”rgba(20,20,20,1)” md_text_gradient_color=”{‘color1′:’#8702ff’,’color2′:’#06ff6e’,’color1Pos’:’0.00′,’color2Pos’:’100.00′,’angle’:0}” md_text_title_size=”32″ md_text_letter_space=”0″ md_text_hover_letter_space=”0″ md_text_easing=”cubic-bezier(0.215, 0.61, 0.355, 1)” md_text_use_title_custom_font=”no” md_text_title_google_fonts=”font_family:Roboto%3Aregular%2C100%2C100italic%2C300%2C300italic%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” md_text_use_title_slider=”no” md_text_number=”1″ md_text_title1=”

” md_text_title2=”Typography Shortcode” md_text_title3=”Typography Shortcode” md_text_title4=”Typography Shortcode” md_text_title5=”Typography Shortcode” md_text_content_size=”14″ md_text_content_color=”rgba(20,20,20,1)” md_text_button_style=”fade-oval” md_text_button_text=”READ MORE” md_text_button_icon_class=”icon-angle-right” md_text_button_color=”rgba(0,0,0,1)” md_text_button_text_color=”rgba(255,255,255,1)” md_text_button_bg_hover_color=”rgb(0,0,0)” md_text_button_hover_color=”rgb(255,255,255)” md_text_button_size=”standard” left_right_padding=”0″ md_text_button_url=”#” md_text_button_target=”_self” md_text_animation_speed=”400″ md_text_animation_delay=”0.0″ md_text_animation_position=”center” md_text_animation_show=”once”]

  

• UI is part of the world
• sometimes too subtle
• big red button
• “prosthetic UI”
• manage attention
• center of view for readability
• edges to draw attention
• audio more important than ever

 

Depth

• objective markers
• inverse scaling
• less 3D
• focusing on different depths
• give depth context
• UI usually unlit
• use light/shaders
• fresnel effect for opacity

 

Menus

• doesn’t have to be too different
• using world adds a lot
• global nav not effective
• transitions are key
• show controller layout – don’t label buttons
• have a grounding/orientation
• pressed vs released is snappier – used in all menus
• full attention
• menus = whole environments
• practically games in their own right
• good UI can be no UI
• gameplay info more difficult to deliver consistently

 

Tech

• alpha blending is tricky
• UI usually alpha blended
• painter’s algo
• set offsets during creation process – just for sorting
• render to texture
• box filtering
• not good at small sizes
• signed distance fields
• results are good, text appears rounded
• more steps to author
• text mesh rendering
• needs anti-aliasing solution, best in long run
• hover detection
• raycasting usually
• angle comparison
• closes element
• forgiving, no exact hit area, can use proximity based effects, cheaper than raycast
• not precise, gets tricky w/ crosshair

 

• anti-aliasing
• important for menus
• can cause distracting pixel swimming effect
• post process anti-aliasing bad for UI

 

Design Workflow

• sketching
• pre-visualize w/ hands
• mockups done in 3D app
• use CryMannequin – similar to characters
• use animation and blending
• FlowGraph

[/md_text][/vc_column][/vc_row]