In this article, I cover the design and implementation of a retro-inspired game coded in C# with Windows Presentation Foundation (WPF). The impetus for this project was to investigate different ways WPF can be used to facilitate basic game mechanics - with mostly successful results.
Figure:Prototyped UI components displayed in Adobe XD.
Table of Contents:
1. Overview
Inspired by retro arcade game mechanics and visuals, Symbol Blaster is an old-school, 2-D shooter game with modern twists. Whereas many games from the "Golden Age" of arcade systems featured static, pre-defined game object geometries, Symbol Blaster allows the player to customize the geometries and colors of all major game objects ("Sprites") in real-time. Changing the geometry of a Sprite in Symbol Blaster also changes that Sprite's underlying hit-test geometry, resulting in subtle game-play variations based on the sizes and shapes of customized Sprites. The Sprite geometry customization aspect is based on rendering certain visual, popular, or interesting computer symbols - hence the name Symbol Blaster!
- from the documentation.
Symbol Blaster arose from curiosity about the extensibility and performance of WPF in the scope of a rudimentary video game. As a desktop application framework, primary use cases for WPF do not typically include use as a game engine, considering more widely-used market alternatives (Unity, Unreal Engine, etc.); however, in advanced application use case scenarios where custom update-loops are requried, logic similar to that which is found in video games becomes a topic of interest. There are many industrial use cases which necessitate the display of data in specific visualizations that require rapid-refresh within the broader context of a typical desktop application - financial charts, simulations, and hardware sensor integration come to mind. This project constitutes a fun but meaningful exploration into the extensibility and performance of WPF regarding the custom update-loop use case within a typical desktop UI.
In addition to the above, a secondary objective was undertaken: ascertaining the extent to which a UI prototyped in Adobe XD could be implemented in XAML; the results revealed some interesting insights, particularly in terms of Adobe XD's "auto animate" Prototype transitions.
Figure:Video overview of the main UI/UX features.
2. How It Works
The application features a Model-View-ViewModel (M-V-VM) architecture to implement the user interface and game world. A MainViewModel governs the state and behavior of the user interface, while a GameViewModel governs the state and behavior of the game. The eXtensible Application Markup Language (XAML) code that defines the "skeleton" of the UI incorporates the ViewModel logic through various data-bindings that enable the user to influence application state. Since the UI navigation topology is fixed at compile time, navigation is handled by a simple TabControl populated with TabItems that contain collapsible sections. Both the front-end XAML and the back-end ViewModel components are modular in order to foster development efficiency and easier maintenance. NUnit is the unit testing framework used to conduct automated testing of the application.
3. Summary of Features
3.1. User Interface
The User Interface is comprised of two groups: the primary controls within the sidebar area and the secondary controls within the game overlay. The sidebar UI was designed according to certain modern "flat" UI principles, including emphasis on uniformity of layout and simplicity of element presentation, while the game overlay UI was inspired by the simplicity of monochromatic retro arcade systems. The sidebar UI contains three main sections:
- Configure, for viewing and modifying game settings
- Presets, for performing Create-Read-Update-Destroy (CRUD) operations on game configurations
- Help, for reading application documentation
Figure:Overview of the sidebar UI.
3.2. User Experience
The user experience was focused primarily on ease of access to and organization of the various game parameters; these considerations resulted in the design and implementation of a UI that makes application operation easy and intuitive. There were several minor UX challenges presented by the juxtaposition of the "normal" WPF UX with the custom game programming elements - these aspects included keyboard event handling and managing Focus of Controls during interaction. There are several main features implemented to streamline a positive UX:
- Information Tooltips, for revealing information that provides additional context on interface functionality
Figure:Help Tooltips UX feature.
- Resizable Text, for allowing the user to select a comfortable reading size
Figure:Resizable documentation text UX feature.
- Game Control Mapping, enabling the user view and verify game control inputs
Figure:Game controls mapping UX feature.
- Custom Color Selector, a streamlined Control for quickly selecting or editing an ARGB color
Figure:Custom color selector UX feature.
- Add Preset Form Management, for enabling one-click preset creation
Figure:Streamlined configuration preset creation UX feature.
- Fluid Interface Resizing, to accommodate different screen resolutions without loss of interface control.
Figure:Fluid application resize UX feature.
3.3. Game Mechanics
The game mechanics facilitate the interaction of a single player with obstacle and enemy objects. The goal of the game is for the player to destroy objects and enemies while avoiding destruction by objects and enemies; earning points and keeping the player alive are challenges meant to incentivize repeated gameplay. A rudimentary physics engine, which constitutes the bulk of activity during each update loop iteration, handles game object movement and collision detection. When the player has no remaining lives, the user is directed to enter a name for the previous round of gameplay and has the opportunity to view a history of high scores.
Figure:Overview of gameplay and game mechanics.
4. Conclusion
That about covers the Symbol Blaster project from a high-to-medium level overview. Part two covers the aspects of UI Prototying, application architecture, and game mechanics. The complete source is available via GitHub. Thanks for reading!