Design To Game



Game Engines

Possible Game engines for iPad



Pros: Free,




Pros: Free, Broken Aged used this engine.




GDD || Home || Mechanics || Demo || Documentation of Code || User Interface || Navigation || Next Section

Navigation:  Swipe left and right (x axis) to move across the environment and up and down (y axis) at key locations to move in to and out of the environment (x axis).

Map of Greyton: Navigate through the environment (box’s) by swiping (x axis) and into new environments by scrolling (y axis).


Design Decisions: Keeping the navigation intuitive to touch screen, it is easier to swipe through the environment than click or use sudo arrow keys.

GDD || Home || Mechanics || Demo || Documentation of Code || User Interface || Navigation || Next Section

User Interface

GDD || Home || Mechanics || Demo || Documentation of Code || User Interface || Navigation

Interacting with the environment

Some objects will turn the colour of your character:  OrangeTree

When pressed will show more story


An arrow indicates that you can more further into the environment, showing you to swipe in that direction:



Interacting with other characters:

Characters will light up your colour indicating you can interact:


When pressed your UI handler will appear (your inbuilt computer) show you choices, swipe to make a decision.


Showing text, you can scroll down if there is too much text, and leaves when you click the character:



Text Images:


Design Decisions:

In order to keep game play simple and to focus on the narrative the user interface is kept minimal but allows the player to easily see the choices available using colour.


GDD || Home || Mechanics || Demo || Documentation of Code || User Interface || Navigation


GDD || Home || Mechanics || Demo || Documentation of Code || User Interface || Navigation


To understand the way the narrative is told I ran a couple of test pieces, where I wrote out the structure.  Below is the  template or structure for my narrative using Twine, below is the structure for predominantly Serenity (legacy name:Lottie) over chapters 1 and chapters 2.


Each box corresponds to a location and time, e.g. canteen breakfast and a number representing the level of that story. Within the code different options depending on what has happened before (states which have been triggered).


Example: Walk to Work 0

The location is walking to work and this box can be accessed from the first loop (loop 0).

The passage checks for variables: $posterDays, $event, $choiceBake and $cupCakes and shows a different line of narrative depending on which variables are true, and sometimes shows multiple  passages.



Example: Breakfast 0

The location is the canteen at breakfast and the loop can be accessed from the first loop.

This passage checks for variables: $breakfastCanteen, $choiceBake and $cupCakes.

The passage also tells you how many times you have had breakfast at the canteen (print: $breakfastCanteen)

And randomly selects which breakfast you are going to eat today (either: “porrdige”, “toast”,  “cereal”).

Breakfast 0



I also included a little bit of formatting so that text would also appear at the top of page even if the passage shown is local at the bottom. To do this I put all text within {} and using html mark-up put the text into paragraphs <p></p>



Alternative Coding Method

Instead of putting the text into each box, I could also have written it in one long box and called it from other box’s. This would be a better method when using a lot of different strands of narrative. You would be separating the text from the code more clearly. I used this method when writing the prose version.


Example: Start

I set all paragraph in the start box, with a hook $verse1 all the way to $verse28.



Example: Verse 1

Then named each box 1-28 and called the hook I had set in Start. If I had wanted multiple paragraphs to be show there would be much less text in these box’s.


Example: Strucutre

There are less links as I only wrote the first loop and hadn’t included other characters yet, each box is a separate paragraph.



Design Decisions:

It is easier to edit text in one file, and then to call the text into the relevant part of the story than to manage the text over many files. It is also easier to write out the state-machine first before the narrative and deal with the instances separately.




GDD || Home || Mechanics || Demo || Documentation of Code || User Interface || Navigation

Documentation of Code

GDD || Home || Mechanics || Demo || Documentation of Code || User Interface || Navigation


Functions and Behaviours

As I was writing the code in Twine I kept a list of all the variables/functions I included, here is the list.

Screen Shots of How the Code Developed:

Twine File – Structure (13.12.15)
Twine File – Structure (14.12.15)
Twine File – Structure (04.01.16)



KEY –> $varables,  Page Names

  1. $alarm
    • +1 each visit to Alarm 0
  2. $Bagel
    •  Sting set in
    • GroceryShop 2 to “bought”
    • Breakfast 1 to “eaten”
    • Alarm 0 to “none”
  3. $cake
    • String set in:
    • Home cook 3 to “baked”
  4. $canteenBagel
    • +1 each visit to Breakfast 1
  5. $canteenLunch
    •  +1 each visit to Lunch 0
  6. $choiceBake
    • Sting set in:
    • Shop Keeper 2  to “no”
    • Home 3 Cook  to “yes”
    • Grocery Shop 3 to “no”
  7. $cookSkill
    • +1 each visit to Home 2 Cook
    • +1 each visit to Home 3 Cook
  8. $cupCakes
    • string which is set in:
    • Baking 3  to “cooked”
    • Morning Bake to “cooked”
    • Breakfast 0 to “eaten”
    • Grocery Shop 3 to “sold”
  9.  $day
    • +1 each visit to Start
  10.  $event
    • Sum of visits to Snooze 1 +  Event.
  11. $eventType
    • String which is set in Event :
    • “routine”
    • “propaganda”
  12. $groceryShop
    • string which is set in:
    • Jog 1  to “seen”
    • Grocery Shop 1  to “inside”
  13. $home3cook
    • Sting which is set in:
    • Home 3 cook to “visited”
  14. $joe
    • Checks wither Lottie has met Joe Breakfast 1
    • Set in Joe 0  to 1
  15. $joeBagel
    • String which is set in:
    • Joe 0 to “none”
    • Joe Exercise 2  to “bought”
    • Joe Breakfast 0 to “eaten”
    • Joe Breakfast 2 to “none”
  16. $joeBreakfast0
    • +1 each visit to Joe Breakfast 0
  17. $joeClub
    • +1 each visit to Joe Activities 0
  18. $joeChoice
    •  Set to 1 if visited Joe Choice Wake Up 
  19. $joeDay
    • +1 each visit to Joe 0
  20. $joeEvent
    • +1 each visit to Joe Event
  21. $joeExplore
    • Set to 1 if visited Joe Explore 1
    • Set to “newspaper” on second visit
  22. $joeGrocery
    • string which is set in
    • Joe Exercise 2 to “seen”
  23. $joeLunch
    • Joe Lunch 0  to 1
  24. $joeNewspaper
    • String which is set in
    • Joe Newspaper 0 to “writing”
  25. $joeWork
    • +4 to Joe Morning Work 0
  26. $jog1
    • +1 each visit to Jog 1
  27. $lottieJob
    • String which is set in:
    • Walk to Work 0 to “Maximo”
    • Afternoon Bake 0 to “baker”
  28. $newspaper
    • String which is set in:
    • Joe Breakfast 2  to “Article 1”
  29. $offer
    • string which is set in:
    • Decline Offer to “decline”
    • Morning bake 0 to “accept”
  30. $posterDays
    • +1 each visit to Start
  31. $printingShop
    • string which is set in:
    • BLANK to “seen”
  32. $Sarah
    • Checks wither Lottie has met Sarah Lunch 0
  33. $shop
    • String set in:
    • Shop Dinner 2 to “closed”
  34. $shopConvo
    • +1 each visit to Shop Dinner 2
  35. $shopKeeper
    • String which is set in:
    • Grocery Shop 3 to “angry”
    • Shop Keeper 3  to “happy”
  36. $shopKeeper3
    • String which is set in:
    • Shop Keeper 3 to “visited”


GDD || Home || Mechanics || Demo || Documentation of Code || User Interface || Navigation

Blog at

Up ↑