29.11.09

Flex 3 / AS3 : Save User Interface for Games

Source Code:
The commented code for this save interface can be found here.

Introduction:
I'm currently in the process of developing using the Pushbutton Engine, and it's going to be a long time before I can write a tutorial on the ideas/process involved in creating the save interface, so I've decided to just present a tutorial for using it in this post. Also if , if version 1.0 of Pushbutton Engine still doesn't have support specifically for savedata I will port this code to be compatible with the component framework.

Rundown of Classes:
  • ISaveState : This is the interface that should be implemented by objects that you intend to use as save states.
  • ExampleSaveState : An example implementation of ISaveState, used for the demo in Main.mxml.
  • SaveManager : This class contains the code for saving and loading.
  • Main.mxml : A messy, poorly labeled, but functional demonstration of the features of SaveManager.
Features of SaveManager:
  1. Ability to save objects to local storage.
  2. Ability to enumerate and load objects from local storage.
  3. Ability to delete objects from local storage.
  4. AutoSave/Load/Delete feature that allows the class to be used without a user interface.
  5. Multiple save slots, with a code specified max number of slots.
  6. Alerts to handle user confirmation for overwrites and deletes.
  7. Data displayed adapts according to current user interface specified.
SaveManager Constructor:
  • showAlerts - Boolean determines if alerts should pop up during use saveClass. This should probably be set to false when autosave is used so that the "Confirm Overwrite" dialog doesn't pop up.
  • saveClass - Class representing the class of the saved data. This is required by actionscript serialization so that the object can be successfully serialezed / deserialized from a SharedObject. Without it casting would throw type errors because type info would be lost.
  • targetSave - The object you will be saving if this instance is going to be used for saving, can also be set later using targetSaveState()
  • slotList - A component that extends the flex ListBase class. This parameter will be used for displaying the save slots.
  • saveButton - A button that will cause a save to the currently selected slot, or the autosave slot if no slot is selected.
  • loadButton - A button that will load the currently selected slot, or the autosave slot if no slot is selected.
  • deleteButton -A button that will delete the currently selected slot, or the autosave slot if no slot is selected.

Dynamic UI:
The UI adjusts depending on which component parameters are set to null.

  1. If slotList is null, only the autoSave save slot will be available to the buttons, because there is no way to select a save slot.
  2. If saveButton is null, the Create New Save... entry won't appear in the slotlist.

Demonstration:
Main.mxml defines a bunch of controls that demonstrate the SaveManagerClass.

  1. The top row of buttons determines which features are available in the current SaveManager. Clicking buttons will hide or show controls according to their nullity.
  2. The first list shows all of the save states.
  3. The save button will save the "create save info" text fields to the currently selected slot (or autosave slot).
  4. The load button loads the currently selected (or autosave) slot.
  5. The delete button deletes the currently selected (or autosave) slot.
  6. The three text inputs are for creating save data members to demonstrate saving.
  7. The data grid shows the object currently stored in targetSaveState of the SaveManager (it will change when slots are loaded)

Usage Notes:
ISaveState.as
- Implementing classes must have a parameterless constructor in order for serialization to work.

The commented code for this save interface can be found here.