[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]