Foreword

Welcome to the documentation for your online thesis! My name is Jeff Jacobs, professor of Game Engines at Luca School of Arts. I created this template for our students to create their own online thesis.

We started to feel that pure text documents got a bit outdated, especially for our medium of Game Design. Students want to show off their work using video and audio, maybe even a playable WebGL build right here in their thesis! Let’s walk through all of the features this template offers you.

Table of Contents

TODO : write a script that adds an automatic full table of contents here.

Introduction

This resource is divided into two primary chapters Template Features and Content Features.

Template Features

Automatic TOC

The template automatically generates a Table Of Contents for you. When you look at the site on a large display it will be shown off to the left side. All of the chapters are clickable and will take you to their respective chapter in the text. Once you scroll into a chapter it’s sub-chapters will show up.

You can easily write chapters in the following way :

<h1> Chapter One </h1>
Lorem ipsum dolor sit amet

<h2> Subchapter One </h2>
Lorem ipsum dolor sit amet

<h3> Subsubchapter One </h3>
Lorem ipsum dolor sit amet

You can change the level of the chapter using h1, h2 or h3. That way all h2-s are a subchapter of the h1 above them. In the same way all h3-s are a subchapter of the h2 above them. You can add even more levels but generally you should really not go deeper than 3.

Warning: if your chapter starts with a number or contains a period it will break the TOC!

To fix this set a custom ID for your chapter that does not start with a number or have any spaces or periods :

<h1 id="ChapterOne"> 1. Chapter One </h1>

Footnotes

Sometimes when you are writing your thesis you don’t want to break the flow of your text by explaining something the reader probably knows. However it’s always good to make sure you explain even what to you might be obvious. In such a case it’s very easy to add a footnote in your text. For example next to this line of text will be a footnoteA test footnote about how you can add footnotes..

Citations and references

Whenever you’re referencing another source like a paper you need to cite it! Luckily citing them inside the text is very easy. For example, if we would talk about how Shigeru Miyamoto explains that making New Super Mario Bros. for DS was a fresh start returning to the core principles Mario games, you could simple add a <d-cite> tag referencing the correct source in your bibliography.

All your references should be put inside the thesis_bibliography.bib file under /assets/bibliography. In this file you put your references in a specific format. For example if you would want to cite Jeff Jacobs’ amazing master’s thesis you could reference it like this.

Each type of source to cite has their own formatting. Let’s take a look at the following examples :

Content Features

Quotes

To add a quote like the following :

The way to get started is to quit talking and begin doing. - Walt Disney

Simply use the following code :

> The way to get started is to quit talking and begin doing. - Walt Disney

Code Blocks

You’ve seen it in the chapters above but adding code blocks is super easy. All you need to do is start a block of code with three backticks and write the programming language, then paste in your code! Here is an example of some code

public class BestBehaviour : MonoBehaviour
{
	private string message = "Hello World";

	private void Start()
	{
		Debug.Log(message);
	}
}

Which can simply be added by writing the following

```csharp
your code here
```

Tables

Easily add tables like the following one :

    <table data-height="250" data-toggle="table" data-url="{{ '/assets/json/table_data.json' | relative_url }}">
        <thead>
            <tr>
                <th data-field="id">ID</th>
                <th data-field="name">Item Name</th>
                <th data-field="price">Item Price</th>
            </tr>
        </thead>
    </table>

You can set up the table and define what fields to show. Change the height of the table by changing the data-height value or remove it completely to just fit the table to all the data.

The code references the json file table_data.json in the assets/json folder of your site. Ofcourse you can have multiple json files with different data. Here is an example of a part of the data in that file :

[
  {
    "id": 0,
    "name": "Item 0",
    "price": "$0",
    "amount": 3
  },
  {
    "id": 1,
    "name": "Item 1",
    "price": "$1",
    "amount": 4
  }
]

Grid system

Using the grid system we can create rows and columns to order our content on the page. For example if you want to write text in two equal columns :

    <div class="row">
        <div class="col-sm mt-3 mt-md-0">
            This text will be put in the first column and will get half the width of the row.
            This happens because both columns use `col-sm` so they get equal space in the row.
        </div>
        <div class="col-sm mt-3 mt-md-0">
            This text will be put in the second column, so the right one. 
            It gets the exact same width as the first column.
        </div>
    </div>

Ofcourse you can put anything in these columns, you can also make them larger or smaller. The columns live in a 12-wide grid. Instead of col-sm we can use col-sm-1 up to col-sm-12 to tell the column how wide it should be. If you want multiple columns to stay together on the same line and be the full width of the page, you need to make sure that the values always add up 12.

For example the following layout with an image on the left using col-sm-3 and text on the right using col-sm-9, together adding up to 12 :

This text is inside a column of 9-wide next to an image that is in a column of 3-wide. The `mt-3` and `mt-md-0` classes that you see in the code are not important to us. They make it so that the columns have appropriate margin when looking at them on a smaller screen.

    <div class="row justify-content-sm-center">
        <div class="col-sm-3 mt-3 mt-md-0">
            {% include figure.liquid path="assets/img/thesis/balloons.jpg" class="img-fluid rounded z-depth-1" %}
        </div>
        <div class="col-sm-9 mt-3 mt-md-0">
            Text...
        </div>
    </div>

Images

We use the Grid system to choose the size of our images and place them next to eachother. For example a full-width hero image :

    <div class="row justify-content-sm-center">
        <div class="col-sm mt-3 mt-md-0">
            {% include figure.liquid 
            path="assets/img/thesis/balloons.jpg" 
            title="Picture of balloons floating in the mountains" 
            class="img-fluid rounded z-depth-1" zoomable=true %}
        </div>
    </div>
    <div class="caption">
        The caption for this image. In this case : A picture of balloons floating in the mountains.
    </div>

This image has some features you probably notice. First off you can click the image to zoom in on it. Secondly it has a caption underneath. In a thesis we always want to add a caption for each image explaining what it illustrates or why it is relevant to the text.

What happens here is we set up a row of images. We tell it to use the balloons.jpg image using the path field. The title field is used so that people that use screen reader software get a description of the image. In the Caption div we write our caption text.

Grouped Images

Here is an example with three images next to eachother using the exact same code, just adding more div tags with images data in them :

<div class="row justify-content-sm-center">
    <div class="col-sm mt-3 mt-md-0">
        {% include figure.liquid 
        path="assets/img/thesis/book.jpg" 
        title="Picture of a book" 
        class="img-fluid rounded z-depth-1" zoomable=true %}
    </div>
    <div class="col-sm mt-3 mt-md-0">
        {% include figure.liquid 
        path="assets/img/thesis/coffee.jpg" 
        title="Picture of a mug of coffee." 
        class="img-fluid rounded z-depth-1" zoomable=true %}
    </div>
    <div class="col-sm mt-3 mt-md-0">
        {% include figure.liquid 
        path="assets/img/thesis/kayak.jpg" 
        title="Picture of a lake with mountains in the distance" 
        class="img-fluid rounded z-depth-1" zoomable=true %}
    </div>
</div>
<div class="caption">
    On the left, an image of a book. Middle, a mug of coffee in front of a bed. Right, a kayak on a pier at a lake with mountains in the background.
</div>

Since we’re using col-sm for all images they all get exactly the same width. If you want to make one image larger you can ofcourse change the width using the grid system. The following example uses col-sm-6, col-sm-2 and col-sm-4 to change the widths. Remember that all these widths added up can not exceed 12 or the last images will just move to the next line.

<div class="row justify-content-sm-center">
    <div class="col-sm-6 mt-3 mt-md-0">
        {% include figure.liquid 
        path="assets/img/thesis/book.jpg" 
        title="Picture of a book" 
        class="img-fluid rounded z-depth-1" zoomable=true %}
    </div>
    <div class="col-sm-2 mt-3 mt-md-0">
        {% include figure.liquid 
        path="assets/img/thesis/coffee.jpg" 
        title="Picture of a mug of coffee." 
        class="img-fluid rounded z-depth-1" zoomable=true %}
    </div>
    <div class="col-sm-4 mt-3 mt-md-0">
        {% include figure.liquid 
        path="assets/img/thesis/kayak.jpg" 
        title="Picture of a lake with mountains in the distance" 
        class="img-fluid rounded z-depth-1" zoomable=true %}
    </div>
</div>
<div class="caption">
    On the left, a large image of a book. Middle, a tiny picture of a mug of coffee in front of a bed. Right, a small image of a kayak on a pier at a lake with mountains in the background.
</div>

Image Swiper

Now for some more advanced image content. This example sets up images in a swiper component, letting the user swipe or click buttons to go to the next image.

    <swiper-container keyboard="true" navigation="true" pagination="true" pagination-clickable="true" pagination-dynamic-bullets="true" rewind="true">
        <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/thesis/book.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
        <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/thesis/coffee.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
        <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/thesis/kayak.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
    </swiper-container>

Image Comparer

The following example lets you create a comparison image. This is especially great for showing off before / after images. Simply put two images in a img-comparison-slider tag and the template does the rest.

<img-comparison-slider>
    {% include figure.liquid path="assets/img/thesis/balloons_bw.jpg" class="img-fluid rounded z-depth-1" slot="first" %}
    {% include figure.liquid path="assets/img/thesis/balloons.jpg" class="img-fluid rounded z-depth-1" slot="second" %}
</img-comparison-slider>

Video

Ofcourse the biggest advantage of putting our thesis online is being able to not only show images but also play video! You can either link local video files in mp4 format or link an external file like one from youtube.

To link a youtube video the path should start with https://www.youtube.com/embed/ then you should add the video code. This is the code directly after the watch?v= in the url. Also make sure to remove Also make sure you only get the code and not anything including an & or anuthing after that. Your video code should be 11 characters long. You can specify the start and end time in seconds inside the url. To make a video start at 1:36 and end at 2:30 you could use ?start=96&end=150 at the end of the video path since 1:36 is 96 seconds and 2:30 is 150 seconds.

Audio

Perhaps you are using a lot of custom audio in your project and you want your readers to be able to play the audio right here on your site? Simply use the audio includes at point it at an mp3 file in your assets/audio/ folder. Or point it an an mp3 file online.

Mermaid diagrams

Thanks to the Mermaid plugin in the template we can easily add all sorts of diagrams. I won’t go into detail on these since there are just so many options. You can read more about the plugin on here.

Some examples :

Flowchart

flowchart LR
    A(Start) -->|Awake| B[Idle]
    B --> C{IsHungry?}
    C -->|True| D[Eat]
    C -->|False| E[Dance]

```mermaid
flowchart LR
    A(Start) -->|Awake| B[Idle]
    B --> C{IsHungry?}
    C -->|True| D[Eat]
    C -->|False| E[Dance]
```

Class diagram

classDiagram
    class MonoBehaviour {
        Start()
    }
    class HelloWorld {
        string message
        Start()
        LogMessage()
    }
    class IMessageLogger {
        <<interface>>
        LogMessage()
    }
    MonoBehaviour --|> HelloWorld
    IMessageLogger --|> HelloWorld : implements

```mermaid
classDiagram
    class MonoBehaviour {
        Start()
    }
    class HelloWorld {
        string message
        Start()
        LogMessage()
    }
    class IMessageLogger {
        <<interface>>
        LogMessage()
    }
    MonoBehaviour --|> HelloWorld
    IMessageLogger --|> HelloWorld : implements
```

Pie chart

pie title VR headset ownership in march 2024
    "Other" : 13.51
    "Windows MR" : 4.26
    "HTC Vive" : 4.51
    "Rift S" : 8.17
    "Quest 3" : 15.03
    "Valve Index" : 16.68
    "Quest 2" : 37.84

```mermaid
pie title VR headset ownership in march 2024
    "Other" : 13.51
    "Windows MR" : 4.26
    "HTC Vive" : 4.51
    "Rift S" : 8.17
    "Quest 3" : 15.03
    "Valve Index" : 16.68
    "Quest 2" : 37.84
```

3D Models

You can integrate a model viewer using the <model-viewer> tag

WebGL builds

And now for the big finale : You can even embed Unity WebGL builds on your page! This game is the Oasis scene from the Unity URP Sample Scenes built for the WebGL platform. Since we don’t want people to download gigabytes of data when they simply visit our site you would never upload your whole game here. Make a small build of a single test scene or small part of your game instead, showing off a specific feature or asset you made. This example is around 100MB thanks to forcing it to use the Mobile Graphics target in the Graphics settings.

Conclusion

In conclusion I think you would agree that this template offers you a lot of features to create an interactive thesis.

Footnotes

Bibliography