Mockup Interface - e-ucm/ead GitHub Wiki

eAdventure Game Mockup Editor

The app

eAdventure games are composed of scenes that link to each other, and which are somewhat similar to slides in programs such as MS PowerPoint, but much more interactive. Everything in a scene (images, drawings, text) can be animated and respond to user actions and the "state of the game", which is kept in its variables.

The interface of eAdventure Mockup has 3 main views: one to manage and choose a game to edit or play, one to manage and choose scenes in the current game, and one to edit a scene in the game. You will spend most of the time editing scenes. When managing or editing scenes, you can also launch the game using the play button (). When playing the game, you can always go back to the previous view by using the back button ().

Managing games:

Button Description
Creates a new, empty game, with a single blank starting scene
Toggle help dialogues and change eAdventure Mockup's language (used for all dialogues) here
Sort the list of games alphabetically
Sort the list in reverse alphabetic order
Hide all games that do not contain the text that you write here

Managing Scenes:

Button Description
Plays the game from the start
Shares the game with whoever you choose, using your preferred method (mail, bluetooth, ...)
Creates a new, blank scene for your game
Toggle help dialogues and change eAdventure Mockup's language (used for all dialogues) here
Sort the list of scenes alphabetically
Sort the list in reverse alphabetic order
Hide all scenes that do not contain the text that you write here

Editing a scene:

There are 3 main areas within the scene-editing interface:

  • the bar on the top (which you may need to scroll sideways on small screen) contains buttons that apply to the whole scene or game, regardless of what is currently selected.
  • the bar on the left (which you may need to scroll vertically on small screen) contains buttons that only apply to the currently-selected element, which can be an image, a drawing, or text, among others. Touch any element to select it.
  • finally, the big (initially blank) canvas is your scene, where you place the elements that make up the game. When you select an element (for example, an image or a drawing), a small context dialogue pops up next to it, with buttons that apply only to the element that you have selected.

Top menu (no selection required)

Button Description
Plays the game from the start
Shares the game with whoever you choose, using your preferred method (mail, bluetooth, ...)
Undoes the last action (almost any change is an action; for example, adding an element or modifying an element)
Redoes the last action that was undone
Pastes a copy of the last element that was copied (, from the element context dialogue)
Opens a dialogue so you can add free art elements from repositories in the internet. You will need network access to use this feature. Click on images to add them, or press to display more information about them.
Adds an existing image from the memory of your Android device
Takes a photo and adds it to the scene
Add a free-form drawing to this scene. You can draw using your finger, using different colors () and line-widths, and also erase () parts of the drawing until you consider it finished.
Add some text to the scene. You can later change what it says, how big it appears, and its color ().
Adds a square, transparent area that, when touched, can do things (in combination with , , , and ).
Adds a door that, when touched during play, switches to another scene. The other, new, scene starts with a door that goes back to this scene.
Change the name of the scene, or make it the first scene in the game.

Left menu (selection required)

Button Description
Jump to the scene that you choose when the element is touched during play
Change game variables when the element is touched during play
Play a sound when the element is touched during play
Add a dialogue speech bubble that will be shown when the current element is clicked. During play, the speech dialogue can be closed by touching anywhere on the screen.
Show or hide the element during play, depending on the values of variables ()
Ignore touches during the game, depending on the values of variables ().
Animate the element. The effects of the animations are only visible while the game is being played. Notice that all animations will repeat over and over again, and you can combine as many as you wish.
Choice Effect
Spins the element
Moves the element up and down
Moves the element sideways
Makes the element smaller and then normal
Makes the element bigger and then normal
Fades the element in and out

Context dialogue (next to currently-selected element)

Button Description
Moves the element in front of other overlapping elements
Moves the element behind other overlapping elements
Copies the element. You can paste an exact copy into any scene using the paste button ()).
Opens the element in a photo editor such as Pixlr Express, allowing you to replace it with an edited version
Removes the element from the scene. Don't worry, you can undo () this
Changes the text that appears in this element (only for text elements)
pens up a color-picker, allowing you to interactively change the color of the selected text (only for text elements)
⚠️ **GitHub.com Fallback** ⚠️