Game Design Document Editor built with PySimpleGUI
When you are working with Python, from time to time you find that you want to have a graphical user interface (GUI) to replace the command line so that it’s easier for users of your software to work with it. For a long time, this has been a difficult task. The main issue is that there are multiple types of GUIs available and they work differently on each operating system. However, there is an open-source project that is solving this problem! PySimpleGUI allows you to use a very simple code based layout that can have you creating UIs in minutes.
Game Design Doc Creator
In order to learn PySimpleGUI, I needed a project and decided to create a simple Game Design Document creator/editor that would enable users to make a game design doc and edit it. In just a few hours I had something working that showed the user a simple UI that allowed them to edit their game design information and then save it as a markdown file to add to their GitHub or wherever they save their game too.
The game design doc editor’s basic task is to read in the saved version of your game design doc, and allow you to make modifications to it. Once you are done, you can click the Save button and it will generate a game design document in markdown format.
Working with PySimpleGUI
I could not add all the elements to a single-window unless I used scrolling, but I decided the UI would be better with tabs. So the main window is a set of tabs, each tab has its own contents and the Save button. This UI is easily created with a few lines of code. Let’s start with the main window and work backward.
# main layout of window
layout = [[sg.TabGroup([[sg.Tab('Project', tab1_layout, key='-mykey-'),
sg.Tab('Story', tab2_characters),
sg.Tab('Story Progression',
tab_story_progression),
sg.Tab('Gameplay 1', tab_gameplay1),
sg.Tab('Gameplay 2', tab_gameplay2),
sg.Tab('Art-Music', tab4_art_music),
sg.Tab('Technical Description', tab5_technical),
sg.Tab('Marketing & Funding', tab6_marketing)]],
title_color='white',
selected_title_color='yellow',
tab_location='left')],
[sg.Button('Save')]
]
# create window
window = sg.Window('Game Design Document Creator', layout,
default_element_size=(12, 1))
The last line of code actually makes the window, and the second parameter, layout is the object that contains all the information that the window needs to draw itself. The code block above that devines the layout parameter for this function, and it is made up of a list of rows, each row of the UI is an element in the array (this window has 2 elements in the array, and has 2 rows of the UI.)
The second row is just one element, a single button labeled ‘Save’. Above that is the single row that is made up of several Tab elements. Each Tab is defined with the label and the contents of the tab. Each tab contents is actually itself a layout (an array with one element per row.)
Let’s explore a tab next.
tab6_marketing = [[sg.Text('General Plan')],
[sg.Multiline(data.get('marketing'),
key='marketing', size=(60, 6))],
[sg.Text('Demographics')],
[sg.Multiline(data.get('demographics'),
key='demographics', size=(60, 7))],
[sg.Text('Platforms & Monetization')],
[sg.Multiline(data.get('monetization'),
key='monetization', size=(60, 7))],
[sg.Text('Localization')],
[sg.Multiline(data.get('localization'), key='localization', size=(60, 7))]]
At the top of the code, the import for PySimpleGUI is named as sg, so all simple GUI elements are sg. This element is 8 rows of UI, each row is a list, with one element in it. Most of the elements used in this UI are Text and Multiline elements.
You can see the complete description of all window elements in the repository.
Once the window was described, this window is designed to stay open and allow for events, so we need an event loop. There are really only two events that we are interested in.
- Closing the window Event: This occurs when the user closes the program or clicks the close box in the GUI.
- Save Event: This event occurs when the user clicks the save button on the UI.
Here is the main event loop:
while True:
event, values = window.read()
if event == 'Save':
# make the gameDoc and Save
make_gd(values, template, destination)
sg.popup_non_blocking("Saved", f"Saved to file {save_file}")
if event == sg.WIN_CLOSED: # always, always give a way out!
break
window.close()
The main event loop consists of fetching the event and values from the UI, and then checking for the event to see if it is an event that we are interested in reacting too. If we are, we handle the event. Whenever we exit this while loop, the window will close by the next line of code, window.close. This means to close the window, all we need to to is exit the while loop. This is handled with the break whenever the user tries to close the window.
The save event is similarly easy to work with, the event, in this case, is the Value of the button, but can be set to whatever you like by adding a key to the description of the button and then checking to see if the event is the key you added. In this case, it is simply checking for the title of the button as the event.
Finally, I also used another popup window to show the user where the data had been saved to using popup_non_blocking. This creates a window that the user can see that the data was saved, and where it was saved.
A Simple UI for a GDD Creator
I was happy to see how easy it was to create the UI and there seemed to be endless ways to customize the colors, fonts and design of the UI. If I need to build another Python GUI, I’ll be using PySimpleGUI!
And if you are working on a new game, this is a handy editor, and it’s open-source so you can add features as you like customize, and send pull requests, thanks in advance!
The image of the ‘professional game design document’ is from Ihodgesdesign. All code is available here: https://github.com/nycynik/GameDesignDocMarkdownTemplate check it out, and get started writing your game design document, or learning more about Python now!
