SF Game Dev Meetup Presentation

by ... posted on
EVENTS

I gave a short presentation on Game UI/UX the other day! It was fun to talk to such a smart group and share some of the stuff I’ve learned over the years. You can read about the event here: https://www.meetup.com/Monthly-SF-Game-Development-Community/events/284643154/

I don’t believe the show was recorded but you can check out my slides below 👇

This presentation was modified for embedding purposes
###### Game UI Tips and Tricks --- ## Proper Text Size - Consider Screen Usage - 18px for PC, 26px for Console (XAG) notes: when in doubt? go bigger --- # Game UI # Tips and Tricks --- ![Hard to see text over game world](/assets/media/gameuipres_textbg_before.png) --- ## What's Behind the Text? - Legible against Background - Drop Shadow or Outline - Costly? Unsupported? Bake it into the font! --- ![Outline makes text visible](/assets/media/gameuipres_textbg_after.png) --- ## Pick a Good Font! - Sans Serif* - Font Weight - Distinct Letter Shapes - Consider text volume --- ## Icon - Consider icon size - Consider icon lingo notes: comparable to font size, icons shortcut to avoid text - clarity is important! --- ![Icons examples](/assets/media/gameuipres_icons.png) notes: legibility at different scales, lean on established traditions --- ## Never Rely Just On Color notes: texture and shape --- ![Comparison of plain colors vs shapes and patterns](/assets/media/gameuipres_colors.png) --- ## Oreo Trick for Overlay Icons --- ![Stroking trick for better visibility](/assets/media/gameuipres_oreo.png) --- ## Localization From Day One - Process User-facing String - Never concatenate - Text Overflow --- ## Make your UI an # unintelligent ## display - Purely visual - Separate data from view --- ## Optimization - Flatten graphics - Invisible views - Cache Variables --- ## Resources - https://www.gameuidatabase.com/ - https://gameaccessibilityguidelines.com/ - https://benui.ca/ - https://uitraps.com/ --- ## Final Tip: Empathy - Think of your user --- # THANK YOU - Handle: @goldenxp - Site: www.goldenxp.com