Skip to content

EvolutionAnimation

koschke edited this page Mar 22, 2021 · 7 revisions

Preparing the scene

You will find a Unity scene prepared for animating an evolving code city in Assets/Scenes/EvolutionScene.unity.

If you want to create your own scene, follow these steps:

Preparations shared with non-animated code cities

Take the steps that are required for non-animated code cities, too.

Game Objects normally required

In addition to the game objects described in the following, your scene must contain - as usual - a main camera with an instance of FlyCamera attached to it (see next subsection) and all other kind of game objects generally added to a SEE scene (e.g., CScapeCity, Directional Light, EventTystem).

If you want to (optional, purely for the aesthetics), you can select "Window=>Rendering=>Lighting Settings" to open the lighting settings. Click on the right dotted circle next to the field "Skybox Material" to select WispySkyboxMat.

Prepare Main Camera

Add a component "Fly Camera (Script)" to the Main Camera of your scene. You can configure that component as you wish by way of various parameters concerning speed, acceleration, and the like. You should consider to increase the "Far" parameter of the "Clipping Planes" of the main camera (e.g., 10000) depending upon the size of your city so that the whole city can be seen from afar.

Setting up the animation

Add an instance of Assets/Prefabs/Animation/SEECityEvolutionAnimation.prefab to the scene. It has two children:

  1. AnimationCanvas: The UI canvas to be shown while the animation is running.
  2. RevisionSelectionCanvas: The UI canvas that allows a user to select the graph revision to start the animation with.

During game play, a user can toggle between the two with the ESC key or "Close" button, respectively.

The SEECityEvolutionAnimation has the following component attached to it (can be seen in the Inspector window):

  • AnimationInteraction: Takes care of the user interactions it receives from the AnimationCanvas and RevisionSelectionCanvas.

In addition to that, you need to add a component "SEE City Evolution" to it (use button "Add Component"):

  • SEECityEvolution: Allows a user to configure the code city visualization.

Configuring AnimationInteraction

For the AnimationInteraction component, you must assign the FlyCamera component of the the main camera of the scene to the attribute "Fly Camera". To do so, click on the circle with a dot icon right on the attribute field and select the main camera.

Configuring SEECityEvolution

Here you can configure various attributes influencing the visualization. They become effective only when the game starts. One of the most important aspects is the selection of the data. The data path prefix is the directory in which the GXL files of the graph series is looked up. You can select the directory by way of the "Select" button next to it. The GXL files must follow the convention BASE-XXX.gxl where BASE is a base name equal for all graph data files and XXX is a number. The files will be read in lexical order, which determines the time series of the graphs. Each GXL file describes a complete graph as it could be visualized in the non-animated visualization of a single code city. The mapping between nodes of two subsequent graphs is based on the node attribute Linkage.Name. The field "Maximal revisions" determines the maximal number of GXL files read. It can be used if there are too many large graphs to be rendered. Example graph series can be found in "Data\GXL\animation-clones".

Interactions during game play

Key Effect
T toggles between the animation and revision-selection modes/canvases
tab toggles between the automatic/manual play modes
left arrow show previous revision
right arrow show next revision
insert sets a marker
delete deletes a marker

You can press the play button (▶) to enable auto-play mode. If auto-play mode is enabled you can press the same button again to pause the animation. The reverse button (◀) acts the same way as the play button, just in reverse. Aditionally, there are fast-forward (⏩️) and fast-backward (⏪) buttons, which speed up their respective play modes. There is a slider, representing the graph series, which can be clicked or dragged to select a specific revision. Markers can be added to select interesting points. To add a marker, press the Insert key. By left-clicking a marker you open a comment field attached to that marker which can be used for descriptive purposes. Clicking the marker again will close the comment field. To delete a marker, select it by left-clicking and press the Delete key. Markers are automatically saved between sessions. The path they are saved at is the Application.persistentDataPath, whose location can be found in the Unity Documentation. While the animation is running, you can navigate around the scene as usual. T brings you back to the menu, in which you can select the first revision to start from in the selection box.