Programming in Unity · Module 01 · C# Programming

Introduction to Programming

An entry-level look at how computers think, what programming actually is, and your very first steps writing C# syntax to talk to the Unity engine.

Lorenzo Morini · Lead Unity Developer

Test slides · June 2026

 

Section Header Template

Chapter 02

Use this template to introduce a brand new chapter or topic in your presentation.

Template not found: generic/section-header-image

Chapter 02

Content Slide Template

This is the general-purpose slide. Write whatever you like in the body — paragraphs, lists, or a mix — so a slide never feels empty.

  • An unordered list still gets the diamond markers
  • Just write a normal <ul> in the slide body
  • Clean, simple, and readable

Then keep explaining below the list, with as much text as you need.

Chapter 02

Numbered Steps, Inline

Need a sequence? Drop an ordered list into the body and it picks up the numbered accent badges automatically.

  1. First, write your intro text above
  2. Then add an <ol> for the steps
  3. Finish with a closing thought below

No dedicated template required — one content slide does it all.

Chapter 02

Wall of Text Template

It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide.

It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide.

It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide. It uses standard text tags to ensure readability when you have a lot to say on a single slide.

Chapter 02

Two Column Text Template

Left Column

This space is for the first concept or idea you want to present.

Right Column

This space is for the second concept, allowing side-by-side comparison.

Chapter 02

Two Columns With an Image

Instructor portrait

Image on the side

Drop an <img> into one column and text in the other — no dedicated template needed.

The image scales to fit its column and stays level with the text.

Chapter 02

Narrow Left, Wide Right

Sidebar

A slim column for a label, stat, or small note.

Main Content

The wide column carries the bulk of the slide — the explanation, the detail, the thing you actually want them reading.

The split is roughly one-third / two-thirds.

Chapter 02

Wide Left, Narrow Right

Main Content

Here the wide column sits on the left, so the reading flows left-to-right into the supporting note.

Same one-third / two-thirds split, mirrored.

Sidebar

The slim column trails on the right — handy for an aside or a key takeaway.

Chapter 02

Three Column Template

Define

State the concept in one clear sentence.

Explain

Add the detail that makes it click.

Apply

Show where it shows up in Unity.

Full Bleed Image Template

This is the Quote template. Use it to highlight an important piece of advice or text.

— Template Designer, System Architect

Chapter 02

The Definition Template

ˌdef.ɪˈnɪʃ.ən n.

1A layout specifically designed to highlight a single vocabulary word and explain what it means.

e.g.This is where you put an example of the term in action.

Chapter 02

The Hotkeys Template

A grid of shortcuts — the key combo on the left, what it does on the right. Keys render as physical keycaps automatically.

Ctrl+Sor⌘+S
Save the current scene
Ctrl+Shift+B
Open the build settings
Ctrl+Por⌘+P
Play / stop the scene in the editor
F
Frame the selected object in the viewport
Ctrl+Zor⌘+Z
Undo the last action
Alt+←
Orbit the scene camera

Chapter 02

The Grid Primitive

The grid is not a template — it's a <div class="grid"> you can drop into any slide. Each top-level child is a cell; add cols-2/3/4 to set columns.

Write a cell

Any top-level element inside .grid becomes one cell.

It becomes a grid

Cells sit flush, divided by hairline gridlines, with equal rows.

Works anywhere

This is a normal content slide — the grid is just markup.

Opt out per cell

Add class="bare" to strip a cell's fill.

Chapter 02

Grid With An Image

Give an image cell class="bare" and it fills the cell edge-to-edge (cropped to fit), flush beside text cells.

Portrait

Image fills the cell

The bare cell drops its surface fill so the picture reads as the cell itself.

Text alongside

Normal cells keep the surface, mixing media and prose in one matrix.

Same gridlines

Image or text, every cell shares the dividers and equal rows.

Chapter 02

Grid With A Resized Image

Use class="contain" instead to resize the whole image to fit (no crop), centred on the cell surface.

Portrait

Resized, not cropped

The contained image scales down to show in full, centred on the cell's surface — nothing is cut off.

Chapter 02

Code In Any Slide

// Paste real code — angle brackets are escaped for you.
List<int> scores = new List<int>();
if (scores.Count > 0 && scores[0] < 10) {
    Debug.Log("Takes up the whole screen.");
}

Chapter 02

Code + Explanation

function splitView() {
    // Code on the left
}

Use the two-column template: a code block in one column and the explanation in the other — no dedicated layout needed.

Chapter 02

Script + Console

Script.cs

console.log("Simulating output...");

Unity Console

> Simulating output...

Chapter 02

Bar Chart

The .bar-chart component is themed from the --c-* contract — no dedicated layout, just drop the markup into any slide or column. Set each bar's length with --w (a width %, relative to the biggest bar) and add bar--accent to highlight a row.

Engine Usage

Indie devs surveyed · 2026
Unity61%
Godot28%
Unreal24%
▲ Most popular for 2D

Chapter 02

Diagram — Node Shapes

flowchart LR
    A([Stadium]) --> B[Rectangle]
    B --> C(Rounded)
    C --> D{Diamond}
    D --> E{{Hexagon}}
    E --> F[(Database)]
    F --> G((Circle))

Chapter 02

Diagram — Edges & Groups

flowchart TD
    A[Source] -->|labeled| B[Arrow]
    A -.-> C[Dotted]
    A ==> D[Thick]
    subgraph G [Subgraph]
        E[Step 1] --> F[Step 2]
    end
    B --> G

Chapter 02

Shapes — Classic Short Syntax

flowchart LR
    a["rectangle"] ~~~ b("rounded") ~~~ c(["stadium"]) ~~~ d[["subroutine"]] ~~~ e[("cylinder")]
    f(("circle")) ~~~ g((("double circle"))) ~~~ h>"asymmetric"] ~~~ i{"diamond"} ~~~ j{{"hexagon"}}
    k[/"parallelogram"/] ~~~ l[\"parallelogram-alt"\] ~~~ m[/"trapezoid"\] ~~~ n[\"trapezoid-alt"/]
    a ~~~ f
    f ~~~ k

Chapter 02

Shapes — Processes & Terminals

flowchart LR
    p1@{ shape: rect, label: "rect" } ~~~ p2@{ shape: rounded, label: "rounded" } ~~~ p3@{ shape: stadium, label: "stadium" } ~~~ p4@{ shape: subproc, label: "subproc" }
    p5@{ shape: notch-rect, label: "notch-rect" } ~~~ p6@{ shape: lin-rect, label: "lin-rect" } ~~~ p7@{ shape: div-rect, label: "div-rect" } ~~~ p8@{ shape: st-rect, label: "st-rect" }
    p9@{ shape: bow-rect, label: "bow-rect" } ~~~ p10@{ shape: sm-circ, label: "sm-circ" } ~~~ p11@{ shape: fr-circ, label: "fr-circ" } ~~~ p12@{ shape: dbl-circ, label: "dbl-circ" }
    p1 ~~~ p5
    p5 ~~~ p9

Chapter 02

Shapes — Decisions & Control Flow

flowchart LR
    c1@{ shape: diam, label: "diam" } ~~~ c2@{ shape: hex, label: "hex" } ~~~ c3@{ shape: notch-pent, label: "notch-pent" } ~~~ c4@{ shape: fork, label: "fork" }
    c5@{ shape: f-circ, label: "f-circ" } ~~~ c6@{ shape: cross-circ, label: "cross-circ" } ~~~ c7@{ shape: odd, label: "odd" } ~~~ c8@{ shape: text, label: "text" }
    c9@{ shape: brace, label: "brace" } ~~~ c10@{ shape: brace-r, label: "brace-r" } ~~~ c11@{ shape: braces, label: "braces" }
    c1 ~~~ c5
    c5 ~~~ c9

Chapter 02

Shapes — Input / Output & Manual

flowchart LR
    i1@{ shape: lean-r, label: "lean-r" } ~~~ i2@{ shape: lean-l, label: "lean-l" } ~~~ i3@{ shape: trap-t, label: "trap-t" } ~~~ i4@{ shape: trap-b, label: "trap-b" }
    i5@{ shape: sl-rect, label: "sl-rect" } ~~~ i6@{ shape: curv-trap, label: "curv-trap" } ~~~ i7@{ shape: hourglass, label: "hourglass" } ~~~ i8@{ shape: tri, label: "tri" }
    i9@{ shape: flip-tri, label: "flip-tri" } ~~~ i10@{ shape: flag, label: "flag" }
    i1 ~~~ i5
    i5 ~~~ i9

Chapter 02

Shapes — Storage & Documents

flowchart LR
    s1@{ shape: cyl, label: "cyl" } ~~~ s2@{ shape: h-cyl, label: "h-cyl" } ~~~ s3@{ shape: lin-cyl, label: "lin-cyl" } ~~~ s4@{ shape: win-pane, label: "win-pane" }
    s5@{ shape: delay, label: "delay" } ~~~ s6@{ shape: bolt, label: "bolt" } ~~~ s7@{ shape: doc, label: "doc" } ~~~ s8@{ shape: lin-doc, label: "lin-doc" }
    s9@{ shape: docs, label: "docs" } ~~~ s10@{ shape: tag-doc, label: "tag-doc" } ~~~ s11@{ shape: tag-rect, label: "tag-rect" }
    s1 ~~~ s5
    s5 ~~~ s9