Minor text and style imptovements

global.typ

@@ -4,9 +4,11 @@
 
 #let add(s) = todo(inline: true, s)
 
+#let hightlightBgColor = luma(80%)
+
 #let path(segments) = {
   let e = 0.2em
-  box(inset: (x: e, y: e), fill: gray, radius: 3pt, baseline: e, {
+  box(inset: (x: e, y: e), fill: hightlightBgColor, radius: 3pt, baseline: e, {
     for (idx, s) in segments.enumerate() {
       let f = "DejaVu Sans Mono" // I think this is the default mono font. See https://github.com/typst/typst/issues/2870
       text(font: f, size: 9pt, s)

leitfaden.typ

@@ -38,7 +38,7 @@ To create a game several components are usually needed:
 *Graphics*#h(1em)
 To show something in the game, you will need graphical assets.
 In 2D games, the graphics consist of 2D UI Overlay elements like the menu, buttons, or the score.
-The rest of the game graphics are also 2D images and are usually called sprites.
+The rest of the game graphics are also 2D images and are usually called _sprites_.
 Often, many sprites are stored together in the same file called spritesheet or texture atlas.
 Animations are done by having different variants of an object and cycling through them.
 
@@ -128,7 +128,7 @@ If you want to do your own networking, I also recommend the networking section o
 
 == Entity-Component-System (ECS) <ecs>
 #info[This section does not apply to Godot. Godot does not use ECS, but uses an object-oriented class hierachy.]
-Game engines usually use the entity-component-system (ECS)#footnote[Strictly speaking Unity does not use ECS either, but only the EC-pattern. The systems part is not used in Unity.].
+Game engines sometimes use a design pattern named entity-component-system (ECS)#footnote[Strictly speaking Unity does not use ECS either, but only the EC-pattern. The systems part is not used in Unity.].
 An entity is like an object.
 It could be a physical object in the game, f.e. the player character, the camera, a light source, a spawn point, or a projectile.
 But it could also be something without relevant 3D Location, f.e. an event receiver or a global script.
@@ -142,7 +142,7 @@ For example, an arrow projectile could have the following components:
 - a script component, to process events (f.e. the event that the arrow hit another entity)
 
 #figure(image("/images/Unity/components.png"), caption: [
-  Screenshot from Unity with the hierachy of entities to the left and the components of a PlayerArmature to the right.
+  Screenshot from Unity with the hierachy of entities to the left (the red box) and the components of a PlayerArmature to the right (the blue box).
 ])
 
 == Where can I obtain free assets?
@@ -170,7 +170,7 @@ and gives them to the public domain.
 === OpenGameArt
 #link("https://opengameart.org")[OpenGameArt] is a public exchange platform for game assets with free licenses.
 It contains 2D and 3D assets, particle effects, music, and sound effects.
-A difficulty when using OpenGameArt are the different artistic styles used between the many graphics.
+A difficulty when using OpenGameArt, are the different artistic styles used between the many graphics.
 
 #figure(grid(
   columns: (1fr, 1fr, 1fr),

sections/godot.typ

@@ -10,7 +10,7 @@ You navigate in the 3D panel, by pressing the right mouse button and move around
 Press `Shift` to fly faster.
 
 == Physics
-You can generate a collider from a `MeshInstance3D` by selecting it, then open the `Mesh` options as seen in @godot-create-mesh.
+You can generate a collider from a `MeshInstance3D` by selecting it, then open the `Mesh` options as shown in @godot-create-mesh.
 
 #figure(image("/images/godot/create_mesh.png"), caption: [
   "`Create Trimesh Static Body`" creates a static body (position and rotation are locked) with a complex collider.
@@ -30,17 +30,24 @@ You can generate a collider from a `MeshInstance3D` by selecting it, then open t
 
 == UI
 UI components all inherit from the `Control` class.
-The simplest layouting is to use `BoxContainer`s or `FlowContainer`s.
-They work conceptually similar to flexbox#footnote[https://css-tricks.com/snippets/css/a-guide-to-flexbox/] in the HTML document model.
+As simple but powerful layout containers, I recommend using `BoxContainer`s or `FlowContainer`s,
+which work conceptually similar to #link("https://css-tricks.com/snippets/css/a-guide-to-flexbox/")[flexbox] in the HTML document model.
 `HBoxContainer` and `VBoxContainer` stretch elements along the cross axis and cannot wrap in main direction.
 `HFlowContainer` and `VFlowContainer` don't stretch elements along the cross axis and do wrap in main direction.
 Elements whose position and size is not determined by the parent container, can use either absolute positions or anchors.
-Text colors of `Label`s, space between of container elements, and similar properties are defined by the theme and can be overwritten by individual elements.
 
-#add("Image with anchor example")
+#figure(image("/images/godot/Anchors.png"), caption: [
+  The `VBoxContainer` named `ButtonContainer` in this example is anchored to be in a rectangle with $0.45 dot mono("width")$ as its left border.
+  The anchor point rectangle is shown by the green pins in the main view.
+  The rectangle after adding the absolute anchor offsets to each border is shown as orange box in the main view.
+])
 
+Text colors of `Label`s, space between of container elements, and similar properties are defined by the theme and can be overwritten by individual elements.
 To theme your UI, set the theme in the topmost UI node.
-#add("Theme example")
+#figure(image("/images/godot/Theme.png"), caption: [
+  In the right box, you set the theme for a node and all it's children.
+  On the bottom panel, you have a preview on the left and a panel to edit the properties (f.e. the text color) of UI types on the right.
+])
 
 == Global state / Keep state accross scenes
 https://docs.godotengine.org/en/stable/tutorials/scripting/singletons_autoload.html

sections/unity.typ

@@ -15,7 +15,7 @@ See also the `Network Object`, `Client Network Transform`, and `Network RigidBod
 == UI Overlay
 The GalacticKittens sample project still uses the old UI system.
 It is simple to start with, but inflexible and unresponsive.
-The new system #link("https://docs.unity3d.com/Manual/UIElements.html")[UI Toolkit] builds UIs from XML and CSS with flexbox#footnote[https://css-tricks.com/snippets/css/a-guide-to-flexbox/] for layouts.
+The new system #link("https://docs.unity3d.com/Manual/UIElements.html")[UI Toolkit] builds UIs from XML and CSS with #link("https://css-tricks.com/snippets/css/a-guide-to-flexbox/")[flexbox] for layouts.
 
 #figure(```xml
 <ui:UXML
@@ -58,11 +58,11 @@ See #link("https://github.com/UnityTechnologies/GalacticKittens/blob/main/Assets
 
 == Input processing
 There are two input systems.
-The old one, called #link("https://docs.unity3d.com/Manual/class-InputManager.html")[Input Manager], and the new one in the #link("https://docs.unity3d.com/Packages/com.unity.inputsystem@1.7/manual/index.html")[`InputSystem`-Package].
+The old one, called #link("https://docs.unity3d.com/Manual/class-InputManager.html")[Input Manager], and the new one in the #link("https://docs.unity3d.com/Packages/com.unity.inputsystem@1.7/manual/index.html")[InputSystem-Package].
 The new input systems has a simple way (actionmaps) and a complex way (event handling) of processing user input.
 
 The simple way is shown by #link("https://docs.unity3d.com/Packages/com.unity.inputsystem@1.7/manual/ActionAssets.html")[the docs].
-You create an `.inputactions` file with actions that are then mapped to `On<actionname>` methods.
+You create an `*.inputactions` file with actions that are then mapped to `On<actionname>` methods.
 This works if you have only one input device per local game instance.
 However, it is unsuited if you want to allow a multiplayer mode by connecting multiple gamepads to the same PC.
 In that case you need the to handle InputEvents, that know what device triggered them.
@@ -84,7 +84,7 @@ UnityEngine.InputSystem.InputSystem.onEvent -= OnInputEvent;
 ```
 
 #figure(image("/images/Unity/actionmaps.png"), caption: [
-  Example of an action map with an action `Move` of type `Vector 2`,
+  Example of an action map with an action `Move` of type 2D vector,
   that can be triggered on keyboard by WASD keys or with on gamepad with the left stick.
 ])
 

template.typ

 #let apply-template(title, lang, doc) = {
 
+import "global.typ": *
 import "@preview/codly:0.2.0": *
 set document(title: title.replace("\n", " - "), author: "Lars Frost")
 
@@ -49,7 +50,7 @@ show raw.where(block: false): r => {
   //   text(font: f, r)
   //   h(e)
   // })
-  box(inset: (x: e, y: e), fill: gray, radius: 3pt, baseline: e, text(font: f, r))
+  box(inset: (x: e, y: e), fill: hightlightBgColor, radius: 3pt, baseline: e, text(font: f, r))
 }
 
 show figure.caption: it => block({