### Importing the MainLayer Model

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/getstart.md

This snippet shows how to import the necessary model for the MainLayer in Elm.

```Elm
import Scenes.Home.MainLayer.Model as MainLayer
```

--------------------------------

### Font command example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/cli.md

Example of installing a custom font with a specified name.

```bash
messenger font myfont.ttf -n MyFont
```

--------------------------------

### Install Messenger CLI

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/install.md

Commands to install the Messenger CLI tool using pipx, uv, or pip.

```bash
# pipx:
pipx install -i https://pypi.python.org/simple elm-messenger>=0.6.0
# uv:
uv tool install -i https://pypi.python.org/simple elm-messenger>=0.6.0
# Or use pip on Windows:
pip install -i https://pypi.python.org/simple elm-messenger>=0.6.0
```

--------------------------------

### Example Asset Loading Scene

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/advanced/assetload.md

An example of an asset loading scene that displays the loading progress and allows the user to click to start when loading is complete.

```elm
import REGL.BuiltinPrograms as P
import Messenger.Base exposing (Runtime, getLoadingProgress)

startText : Runtime -> Renderable
startText runtime =
    let
        ( loaded, total ) =
            getLoadingProgress runtime

        progress =
            String.slice 0 4 <| String.fromFloat (toFloat loaded / toFloat total * 100)

        text =
            if loaded /= total then
                "Loading... " ++ progress ++ "%"

            else
                "Click to start"
    in
    group []
        [ P.textboxCentered ( 960, 900 ) 60 text "Arial" Color.black 
        ]
```

--------------------------------

### Example of Creating a Scene with Init File

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/init.md

Example command to create a scene named 'Home' with an initialization file.

```bash
messenger scene Home --init
```

--------------------------------

### Adding Layer to init function

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/getstart.md

This snippet demonstrates how to add a layer to the 'init' function in Elm.

```Elm
init env msg =
    ... 
    , layers =
        [ MainLayer.layer NullLayerMsg envcd
        ]
```

--------------------------------

### Layer Initialization in Game Scene

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Example of adding 'Main' and 'Front' layers to the 'Game' scene.

```elm
...,
    , layers =
        [ Main.layer (MainInitData { components = comps }) runtime envcd
        , Front.layer (FrontInitData levelName) runtime envcd
        ]
```

--------------------------------

### Scene command examples

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/cli.md

Examples of creating a scene, a raw scene, and a scene prototype.

```bash
messenger scene Home
messenger scene Menu --raw
messenger scene Forest --proto
```

--------------------------------

### Sync command examples

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/cli.md

Examples of syncing the project, listing available updates, and forcing a sync.

```bash
messenger sync
messenger sync --list
messenger sync --force
```

--------------------------------

### Loading Global Components at Game Start

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/advanced/gc.md

Example of how to load global components by editing the `GlobalComponents.elm` file.

```elm
allGlobalComponents : List (GlobalComponentStorage UserData SceneMsg)
allGlobalComponents =
    [ FPS.genGC (FPS.InitOption 20 "firacode") Nothing
    ]
```

--------------------------------

### LayerView Type Sugar

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/getstart.md

Definition of the LayerView type sugar in Elm.

```Elm
type alias LayerView cdata userdata data =
    Runtime -> Env cdata userdata -> data -> Renderable
```

--------------------------------

### Global Component command example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/cli.md

Example of creating a global component.

```bash
messenger gc Transition
```

--------------------------------

### Init command example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/cli.md

Example of initializing a new Messenger project with a custom template repository and automatically committing the template codes.

```bash
messenger init -g myproject
```

--------------------------------

### Layer command examples

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/cli.md

Examples of creating a layer for a scene, including one with components and another as a prototype.

```bash
messenger layer Home MainLayer
messenger layer Home CompLayer -c
```

--------------------------------

### Component command example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/cli.md

Example of creating a component for a scene with an Init.elm file.

```bash
messenger component Home Player -i
```

--------------------------------

### Create a new Messenger project

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/install.md

Commands to initialize a new Messenger project with default settings or custom repository/branch.

```bash
messenger init helloworld
# Or with custom repo:
messenger init helloworld -t <Repo URL>
# With custom branch:
messenger init helloworld -t <Repo URL> -b <Branch name>
```

--------------------------------

### Example of loading a custom JS GL program

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/custom_programs.md

An example demonstrating how to load a custom GL program written in JavaScript using ElmREGL.

```javascript
ElmREGL.loadGLProgram("myprog", (regl) => [
    (x) => x,
    regl({
        frag: "blabla",
        vert: "blabla,
        attributes: {
            position: regl.prop('pos')
        },
        uniforms: {
            color: regl.prop('color')
        },
        count: 3
    })])
```

--------------------------------

### Install msdf-bmfont-xml

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/text.md

Install the msdf-bmfont-xml tool globally using pnpm.

```bash
pnpm install msdf-bmfont-xml -g
```

--------------------------------

### Project Initialization Commands

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Commands to initialize the spaceshooter project, create necessary scenes, components, and layers.

```bash
messenger init spaceshooter
cd spaceshooter
messenger scene Game -p
messenger component Game Bullet -i -p
messenger component Game Enemy -i -p
messenger component Game Ship -i -p
messenger layer Game Main -c -i -p
messenger layer Game Front --proto -p
messenger level Game Level1
```

--------------------------------

### Level command example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/cli.md

Example of creating a level from a scene prototype.

```bash
messenger level Forest Level2
```

--------------------------------

### Env Type Definition

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/getstart.md

Definition of the Env type in Elm, representing the environment for layers and components.

```Elm
type alias Env common userdata =
    { globalData : GlobalData userdata
    , commonData : common
    }
```

--------------------------------

### LayerMsg for Game Scene

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Adds the 'MainInitData' constructor to the 'LayerMsg' type for the 'Game' scene.

```elm
import SceneProtos.Game.Main.Init as MainInit
...
type LayerMsg scenemsg
    = MainInitData (MainInit.InitData SceneCommonData scenemsg)
    | FrontInitData String
    | NullLayerMsg
```

--------------------------------

### Fragment shader example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/custom_programs.md

A simple fragment shader that sets the output color.

```glsl
precision mediump float;
uniform vec4 color;
void main() {
    gl_FragColor = color;
}
```

--------------------------------

### MainConfig.elm Example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/som.md

Example configuration settings for MainConfig.elm.

```elm
-- MainConfig.elm
initScene = "Home"
virtualSize = ( 1920, 1080 )
debug = True
timeInterval = REGL.AnimationFrame

```

--------------------------------

### Example 1: Change Volume

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/audio/transform.md

An example demonstrating how to change the volume of a playing audio stream using `scaleVolume`.

```elm
SOMTransformAudio (AudioName 0 "bg") (scaleVolume 0.5)
```

--------------------------------

### ComponentBase InitData for Enemy

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Defines the InitData for the Enemy component, including its properties.

```elm
type alias InitData =
    {
        id : Int,
        velocity : Float,
        position : ( Float, Float ),
        sinF : Float,
        sinA : Float,
        bulletInterval : Float
    }
```

--------------------------------

### Changing the view function

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/getstart.md

This snippet shows how to modify the 'view' function in Elm to render a textbox.

```Elm
import REGL.BuiltinPrograms as P
import Color
...
view : LayerView SceneCommonData UserData Data
view env data =
    P.textbox ( 0, 0 ) 100 "Hello World" "consolas" Color.black
```

--------------------------------

### SOMPrompt Example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/som.md

Example of showing a prompt and handling the response.

```elm
-- Show a prompt
( data, [ Parent <| SOMMsg <| SOMPrompt "playerName" "Enter your name" ], env )

-- Handle the response in updaterec
updaterec runtime env msg data =
    case msg of
        Prompt "playerName" input ->
            ( { data | playerName = input }, [], env )
        _ -> ( data, [], env )
```

--------------------------------

### SOMPlayAudio Examples

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/som.md

Examples for playing audio once and looping indefinitely.

```elm
-- Play once
( data, [ Parent <| SOMMsg <| SOMPlayAudio 0 "bgm" (AOnce Nothing) ], env )

-- Loop indefinitely
( data, [ Parent <| SOMMsg <| SOMPlayAudio 0 "bgm" (ALoop Nothing Nothing) ], env )
```

--------------------------------

### ComponentBase InitData for Ship

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Defines the InitData for the Ship component, including its properties.

```elm
type alias InitData =
    {
        id : Int,
        position : ( Float, Float ),
        bulletInterval : Float
    }
```

--------------------------------

### Configure REGL JS backend

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/install.md

Commands to initialize a project using CDN REGL JS or a local version without the default font.

```bash
# Use CDN REGL JS with default font:
messenger init helloworld --use-cdn
# Use local REGL JS with no font (~140KiB):
messenger init helloworld --min
# Use CDN REGL JS with no font:
messenger init helloworld --use-cdn --min
```

--------------------------------

### SOMCallGC Example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/som.md

Example of sending a message to a global component.

```elm
( data, [ Parent <| SOMMsg <| SOMCallGC ( "Transition", Encode.null ) ], env )
```

--------------------------------

### Play Audio Once Example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/audio/basics.md

Example of playing an audio named "bg" on channel 0 once.

```elm
SOMPlayAudio 0 "bg" <| AOnce Nothing
```

--------------------------------

### Example 2: Fading Effects

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/audio/transform.md

An example demonstrating how to create fading effects for an audio stream using `scaleVolumeAt` with specific timestamps.

```elm
import Messenger.Base exposing (getCurrentTimeStamp)

let
    ts =
        getCurrentTimeStamp runtime

    nts =
        Time.millisToPosix <| floor ts + 2000

    lts =
        Time.millisToPosix <| floor ts + 6000
in
    SOMTransformAudio (AudioName 0 "bg") (scaleVolumeAt [ ( Time.millisToPosix <| floor (getCurrentTimeStamp runtime), 0 ), ( nts, 2 ), ( lts, 0 ) ])
```

--------------------------------

### SOMChangeScene Example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/som.md

Example of how to use SOMChangeScene in a Layer/Component and a RawScene.

```elm
-- In a Layer or Component
( data, [ Parent <| SOMMsg <| SOMChangeScene (Just initMsg) "TargetScene" ], env )

-- In a RawScene
( data, [ SOMChangeScene (Just initMsg) "TargetScene" ], env )
```

--------------------------------

### Remove command example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/cli.md

Example of removing a scene and its source files.

```bash
messenger remove scene OldScene --rm
```

--------------------------------

### Saving Global Data Example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/intro/globaldata.md

An example function demonstrating how to save GlobalData, which involves encoding user data.

```elm
saveGlobalData : Runtime -> GlobalData UserData -> String
saveGlobalData runtime globalData =
    encodeUserData globalData.userData
```

--------------------------------

### Update function example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/component/user.md

Example of updating the component's color and sending a message to the next component.

```Elm
( ( { data | color = Color.black }, basedata ), [ Other ( data.id + 1, RectMsg Color.green ) ], ( env, True ) )
```

--------------------------------

### Layer Update Example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/advanced/comp.md

An example demonstrating the Five-Step Updating strategy for a layer with two lists of components in different component groups.

```elm
update : LayerUpdate SceneCommonData UserData Target LayerMsg SceneMsg Data
update runtime env evt data =
    let
        --- Step 1
        ( newData1, newlMsg1, ( newEnv1, newBlock1 ) ) =
            updateBasic runtime env evt data

        --- Step 2
        ( newAComps2, newAcMsg2, ( newEnv2_1, newBlock2_1 ) ) =
            updateComponentsWithBlock runtime newEnv1 evt newBlock1 newData1.acomponents

        ( newBComps2, newBcMsg2, ( newEnv2_2, newBlock2_2 ) ) =
            updateComponentsWithBlock runtime newEnv2_1 evt newBlock2_1 newData1.bcomponents

        --- Step 3
        ( newData3, ( newlMsg3, compMsgs ), newEnv3 ) =
            distributeComponentMsgs runtime newEnv2_2 evt { newData1 | acomponents = newAComps2, bcomponents = newBComps2 }

        --- Step 4
        ( newAComps4, newAcMsg4, newEnv4_1 ) =
            updateComponentsWithTarget runtime newEnv3 compMsgs.acomponents newData3.acomponents

        ( newBComps4, newBcMsg4, newEnv4_2 ) =
            updateComponentsWithTarget runtime newEnv4_1 compMsgs.bcomponents newData3.bcomponents

        --- Step 5
        ( newData5_1, newlMsg5_1, newEnv5_1 ) =
            handleComponentMsgs runtime newEnv4_2 (newAcMsg2 ++ newAcMsg4) { newData3 | acomponents = newAComps4, bcomponents = newBComps4 } (newlMsg1 ++ newlMsg3) handlePComponentMsg

        ( newData5_2, newlMsg5_2, newEnv5_2 ) =
            handleComponentMsgs runtime newEnv5_1 (newBcMsg2 ++ newBcMsg4) newData5_1 newlMsg5_1 handleUComponentMsg
    in
    ( newData5_2, (newlMsg5_2, ( newEnv5_2, newBlock2_2 ) )

```

--------------------------------

### Adding a texture resource

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/texture.md

Example of how to define a texture resource in `src/Lib/Resources.elm`.

```Elm
allTexture : ResourceDefs
allTexture =
    [ ( "ship", TextureRes "assets/enemy.png" Nothing )
    ]
```

--------------------------------

### Reading Config Data

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/advanced/config_data.md

Example of how to read loaded configuration data using `getConfigData`.

```elm
import Messenger.Base exposing (getConfigData)

case getConfigData "level1" runtime of
    Just raw ->
        -- raw is the file content as a String, decode it yourself
        ...

    Nothing ->
        ...
```

--------------------------------

### Vertex shader example for a rectangle

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/custom_programs.md

An example of a vertex shader used for rendering rectangles, including transformations for position, rotation, and camera.

```glsl
precision mediump float;

attribute vec2 position;
uniform vec4 posize;
uniform float angle;
uniform vec2 view;
uniform vec4 camera;

void main() {
    vec2 scaledVertex = (position - 0.5) * posize.zw;
    vec2 rotatedVertex = scaledVertex;

    if(angle != 0.) {
        // Rotate and scale the vertex
        mat2 rotation = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
        rotatedVertex = rotation * scaledVertex;
    }

    // Translate to the rectangle's position
    vec2 wpos = posize.xy + rotatedVertex;


    if (camera.w == 0.0){
        // No rotation
        vec2 pos = (wpos - camera.xy) * camera.z / view;
        gl_Position = vec4(pos, 0, 1);
    } else {
        mat2 rotation = mat2(cos(camera.w), -sin(camera.w), sin(camera.w), cos(camera.w));
        vec2 pos = (rotation * (wpos - camera.xy)) * camera.z / view;
        gl_Position = vec4(pos, 0, 1);
    }
}
```

--------------------------------

### Install latest Messenger CLI

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/intro/modules.md

Command to install the latest Messenger CLI using pipx.

```bash
pipx install -i https://pypi.python.org/simple elm-messenger>=0.6.0
```

--------------------------------

### Defining Audio Assets

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/audio/audio.md

Example of how to define audio assets in `allAudio` within `Resources.elm`.

```elm
-}allAudio : ResourceDefs
allAudio =
    [ ( "test", AudioRes "assets/test.ogg" )
    ]

```

--------------------------------

### Play Audio in Loop Example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/audio/basics.md

Example of playing an audio named "bg" on channel 0 in loop mode.

```elm
SOMPlayAudio 0 "bg" <| ALoop Nothing Nothing
```

--------------------------------

### RGBA Color Examples

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/color.md

Examples of defining opaque, semi-transparent, and fully transparent colors using premultiplied alpha.

```elm
import Color exposing (rgba)

-- Opaque red: R,G,B <= A holds (1 <= 1)
red = rgba 1 0 0 1

-- Semi-transparent red: pre-multiply RGB by alpha (0.5 * 1 = 0.5)
transparentRed = rgba 0.5 0 0 0.5

-- Fully transparent
invisible = rgba 0 0 0 0
```

--------------------------------

### Sceneproto Model Initialization

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Initializes the common data and layers for the sceneproto model, including component initialization.

```elm
commonDataInit : Runtime -> Env () UserData -> Maybe (InitData SceneMsg) -> SceneCommonData
commonDataInit _ _ _ =
    {
        score = 0
    , gameOver = False
    }

init : LayeredSceneProtoInit SceneCommonData SceneMsg (InitData SceneMsg)
init runtime env data =
    let
        cd = commonDataInit runtime env data
        envcd = addCommonData cd env
        comps = List.map (\x -> x runtime envcd) (Maybe.withDefault [] (Maybe.map .objects data))
        levelName = Maybe.withDefault "" (Maybe.map .level data)
    in
    {
        renderSettings = []
    , commonData = cd
    , layers =
        [
            Main.layer (MainInitData { components = comps }) runtime envcd
        , Front.layer (FrontInitData levelName) runtime envcd
        ]
    }
```

--------------------------------

### Built-in Shape Commands Example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/shapes.md

An example demonstrating the usage of various built-in shape drawing commands like rect, circle, and triangle.

```elm
import REGL.BuiltinPrograms exposing (rect, rectCentered, circle, triangle, lines, poly)
import Color exposing (rgba)

r = rect ( 100, 100 ) ( 200, 150 ) (rgba 1 0 0 1)
c = circle ( 400, 300 ) 50 (rgba 0 1 0 1)
```

--------------------------------

### InitData for Main Layer

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Defines the InitData type for the 'Main' layer, which accepts a list of components.

```elm
type alias InitData cdata scenemsg =
    { components : List (AbstractComponent cdata UserData ComponentTarget ComponentMsg BaseData scenemsg)
    }
```

--------------------------------

### Sequential GC Construction

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/advanced/gc.md

Example of constructing a sequential GC manually for transitions.

```elm
import Messenger.GlobalComponents.Transition.Model exposing (genGC, InitOption)
import Messenger.GlobalComponents.Transition.Base exposing (genNoMixTransition, genMixTransition)

-- Sequential
SOMLoadGC <|
    genGC
        {
          transition = genNoMixTransition ( fadeOut, Duration.seconds 1 ) ( fadeIn, Duration.seconds 1 )
        , scene = ( "NextScene", Nothing )
        , filterSOM = True
        }
        Nothing
```

--------------------------------

### REGL/BuiltinPrograms.elm

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/render.md

Example of a REGL command to draw a triangle, showing its type signature.

```elm
triangle : ( Float, Float ) -> ( Float, Float ) -> ( Float, Float ) -> Color -> Renderable
```

--------------------------------

### ComponentBase InitData for Bullet

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Defines the InitData for the Bullet component, including properties for initialization and creation.

```elm
type alias InitData =
    {
        id : Int,
        velocity : Float,
        position : ( Float, Float ),
        color : Color
    }

type alias CreateInitData =
    {
        velocity : Float,
        position : ( Float, Float ),
        color : Color
    }
```

--------------------------------

### Level Model Implementation

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Implements a level by defining initialization data for ship and enemy components, and the scene generation.

```elm
import SceneProtos.Game.Components.Enemy.Model as Enemy
import SceneProtos.Game.Components.Enemy.Init as EnemyInit
import SceneProtos.Game.Components.Ship.Model as Ship
import SceneProtos.Game.Components.Ship.Init as ShipInit
import SceneProtos.Game.Init exposing (InitData)
import SceneProtos.Game.Model exposing (genScene)
...

initData : Env () UserData -> Maybe SceneMsg -> InitData SceneMsg
initData _ _ =
    {
        objects =
            [
                Ship.component (ShipInitMsg <| ShipInit.InitData 0 ( 100, 500 ) 200)
            ,
                Enemy.component (EnemyInitMsg <| EnemyInit.InitData 1 (-1 / 10) ( 1920, 800 ) 120 30 200)
            ]
    , level = "Level1"
    }

init : RawSceneProtoLevelInit UserData SceneMsg (InitData SceneMsg)
init _ env msg =
    Just (initData env msg)

scene : SceneStorage UserData SceneMsg
scene =
    genScene init
```

--------------------------------

### Stop Audio Example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/audio/basics.md

Example of stopping a specific audio piece identified by its channel and name.

```elm
SOMStopAudio <| AudioName 0 "bg"
```

--------------------------------

### Example REGL Program Implementation (JavaScript)

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/custom_programs.md

This JavaScript code demonstrates the implementation of a 'triangle' program using REGL, defining fragment and vertex shaders, attributes, and uniforms.

```javascript
const triangle = () => [
    (x) => x, // This is used to transform the parameters
    regl({
        frag: readFileSync('src/triangle/frag.glsl', 'utf8'),
        vert: readFileSync('src/triangle/vert.glsl', 'utf8'),
        attributes: {
            position: regl.prop('pos')
        },
        uniforms: {
            color: regl.prop('color')
        },
        count: 3
    })]

```

--------------------------------

### Elm triangle program call example

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/custom_programs.md

An example of an Elm function that generates a program call for a triangle, including position and color.

```elm
triangle : ( Float, Float ) -> ( Float, Float ) -> ( Float, Float ) -> Color -> Renderable
triangle ( x1, y1 ) ( x2, y2 ) ( x3, y3 ) color =
    [ ( "_c", Encode.int 0 )
    , ( "_p", Encode.string "triangle" )
    , ( "pos", Encode.list Encode.float [ x1, y1, x2, y2, x3, y3 ] )
    , ( "color", Encode.list Encode.float (toRgbaList color) )
    ]
```

--------------------------------

### Defining Data Resources

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/advanced/config_data.md

Example of how to define plain text data resources using `DataRes` in `src/Lib/Resources.elm`.

```elm
allData : ResourceDefs
allData =
    [ ( "level1", DataRes "assets/data/level1.json" )
    , ( "enemyStats", DataRes "assets/data/enemies.csv" )
    ]
```

--------------------------------

### Elm configuration for custom font

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/text.md

Example of how to include font assets in Elm.

```elm
allFont : ResourceDefs
allFont =
    [ ( "firacode", FontRes "assets/fonts/firacode.png" "assets/fonts/firacode.json" )
    ]
```

--------------------------------

### InitData for Game Scene

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Defines the InitData type for the 'Game' scene, including a list of objects and the level name.

```elm
type alias InitData scenemsg =
    { objects : List (LevelComponentStorage SceneCommonData UserData ComponentTarget ComponentMsg BaseData scenemsg)
    , level : String
    }
```

--------------------------------

### Mixed GC Construction

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/advanced/gc.md

Example of constructing a mixed GC manually for transitions.

```elm
import Messenger.GlobalComponents.Transition.Model exposing (genGC, InitOption)
import Messenger.GlobalComponents.Transition.Base exposing (genNoMixTransition, genMixTransition)

-- Mixed
SOMLoadGC <|
    genGC
        {
          transition = genMixTransition ( fadeMix, Duration.seconds 1 )
        , scene = ( "NextScene", Nothing )
        , filterSOM = True
        }
        Nothing
```

--------------------------------

### Implementing a Custom Single Transition

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/advanced/gc.md

Example of implementing a custom SingleTrans using REGL Compositors.

```elm
import Messenger.GlobalComponents.Transition.Base exposing (SingleTrans)
import REGL.Compositors as Comp

myFade : SingleTrans
myFade r t =
    Comp.linearFade t r (P.clear Color.black)
```

--------------------------------

### Convenience Function - Sequential Transition

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/advanced/gc.md

Example of generating a sequential transition SOM for fade out and fade in.

```elm
genSequentialTransitionSOM
    ( fadeOut, Duration.seconds 1 )
    ( fadeIn, Duration.seconds 1 )
    ( "NextScene", Nothing )
```

--------------------------------

### Bullet Model - View and Matcher Functions

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Defines how the bullet component is rendered and how it matches targets for interaction.

```elm
import REGL.BuiltinPrograms as P
view : ComponentView SceneCommonData UserData Data BaseData
view _ _ data basedata =
    ( P.roundedRect basedata.position ( 20, 10 ) 5 data.color, 0 )

matcher : ComponentMatcher Data BaseData ComponentTarget
matcher _ basedata tar =
    tar == Type basedata.ty || tar == Id basedata.id
```

--------------------------------

### Layer Model - Handle Component Message

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Handles messages from components, including creating new bullets and managing game over state.

```elm
import SceneProtos.Game.Components.Bullet.Model as Bullet
...
handleComponentMsg : Handler Data SceneCommonData UserData LayerTarget (LayerMsg SceneMsg) SceneMsg ComponentMsg
handleComponentMsg runtime env compmsg data =
    case compmsg of
        SOMMsg som ->
            ( data, [ Parent <| SOMMsg som ], env )

        OtherMsg msg ->
            case msg of
                NewBulletMsg initData ->
                    let
                        objs =
                            data.components

                        newBulletInitMsg =
                            BulletInitMsg
                                {
                                  id = genUID objs
                                , position = initData.position
                                , velocity = initData.velocity
                                , color = initData.color
                                }

                        newBullet =
                            Bullet.component newBulletInitMsg runtime env

                        newObjs =
                            newBullet :: objs
                    in
                    ( { data | components = newObjs }, [], env )

                GameOverMsg ->
                    let
                        cd =
                            env.commonData
                    in
                    ( data, [], { env | commonData = { cd | gameOver = True } } )

                _ ->
                    ( data, [], env )
```

--------------------------------

### Convenience Function - Mixed Transition

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/advanced/gc.md

Example of generating a mixed transition SOM for cross-fading.

```elm
genMixedTransitionSOM
    ( fadeMix, Duration.seconds 1 )
    ( "NextScene", Nothing )
```

--------------------------------

### Change FPS

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/opts.md

Example of changing the frame rate to 30 FPS using SOMChangeFPS.

```elm
-- Change to 30 FPS
( data, [ Parent <| SOMMsg <| SOMChangeFPS (REGL.Millisecond 33) ], env )
```

--------------------------------

### Upgrade Messenger libraries in elm.json

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/intro/modules.md

Example of how to update Messenger libraries in the elm.json file.

```json
"linsyking/elm-regl": "10.0.0",
"linsyking/messenger-core": "20.0.0"
```

--------------------------------

### ComponentBase Definitions

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Defines the message types, target types, base data type, and an empty base data value for components.

```elm
import SceneProtos.Game.Components.Bullet.Init as Bullet
import SceneProtos.Game.Components.Enemy.Init as Enemy
import SceneProtos.Game.Components.Ship.Init as Ship

type ComponentMsg
    = NewBulletMsg Bullet.CreateInitData
    | CollisionMsg String
    | GameOverMsg
    | BulletInitMsg Bullet.InitData
    | EnemyInitMsg Enemy.InitData
    | ShipInitMsg Ship.InitData
    | NullComponentMsg

type ComponentTarget
    = Type String
    | Id Int

type alias BaseData =
    {
        id : Int,
        ty : String,
        position : ( Float, Float ),
        velocity : Float,
        collisionBox : ( Float, Float ),
        alive : Bool
    }

emptyBaseData : BaseData
emptyBaseData =
    {
        id = 0,
        position = ( 0, 0 ),
        velocity = 0,
        collisionBox = ( 0, 0 ),
        alive = True,
        ty = ""
    }
```

--------------------------------

### Emit Mixed Transition SOM

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/advanced/gc.md

Example of emitting a mixed transition SOM from an update function.

```elm
Parent <| SOMMsg <| genMixedTransitionSOM ( fadeMix, Duration.seconds 1 ) ( "Home", Nothing )
```

--------------------------------

### GlobalData Type Definition

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/getstart.md

Definition of the GlobalData type in Elm, which stores user-owned data across scenes.

```Elm
type alias GlobalData userdata =
    {
        extraHTML : Maybe (Html WorldEvent)
    , canvasAttributes : List (Html.Attribute WorldEvent)
    , userData : userdata
    , camera : Camera
    }
```

--------------------------------

### Bullet Model - Update Function

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Handles the update logic for the bullet component, specifically moving it on each tick.

```elm
update : ComponentUpdate SceneCommonData Data UserData SceneMsg ComponentTarget ComponentMsg BaseData
update _ env evnt data basedata =
    case evnt of
        Tick dt ->
            let
                newBullet =
                    { basedata | position = ( Tuple.first basedata.position + basedata.velocity * dt, Tuple.second basedata.position ) }
            in
            ( ( data, newBullet ), [], ( env, False ) )

        _ ->
            ( ( data, basedata ), [], ( env, False ) )
```

--------------------------------

### Updating Global Camera Position

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/coordinates.md

An example of how to update the global camera's position using the setCameraPos helper function.

```elm
import Messenger.Coordinate.Camera exposing (setCameraPos)

newEnv =
    { env | globalData = setCameraPos ( 960, 540 ) env.globalData }

```

--------------------------------

### Layer Model - Collision Handler Signature

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Signature for the collision handler function that identifies colliding components.

```elm
judgeCollision : List GameComponent -> List ( ComponentTarget, ComponentMsg )
```

--------------------------------

### Bullet Model - Data Type and Init Function

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Defines the data structure for a bullet component and its initialization logic.

```elm
type alias Data =
    {
      color : Color
    }

init : ComponentInit SceneCommonData UserData ComponentMsg Data BaseData
init _ _ initMsg =
    case initMsg of
        BulletInitMsg msg ->
            ( { color = msg.color }
            , {
              id = msg.id
              , position = msg.position
              , velocity = msg.velocity
              , alive = True
              , collisionBox = ( 20, 10 )
              , ty = "Bullet"
              }
            )

        _ ->
            ( { color = Color.black }, emptyBaseData )
```

--------------------------------

### Getting texture dimensions

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/texture.md

Function to get the dimensions of a texture.

```Elm
textureDim : Runtime -> String -> ( Int, Int )
```

--------------------------------

### Checking component type

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/component/user.md

Provides an example of a function that checks if a component is of type "Enemy" using its `matcher` interface.

```elm
\comp -> (unroll comp).matcher "Enemy"
```

--------------------------------

### Texture API: rectTextureCropped

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/texture.md

Example of a cropped texture API, `rectTextureCropped`, showing how to specify cropped texture coordinates and size.

```Elm
centeredTextureCropped : ( Float, Float ) -> ( Float, Float ) -> Float -> ( Float, Float ) -> ( Float, Float ) -> String -> Renderable
centeredTextureCropped ( x, y ) ( w, h ) angle ( cx, cy ) ( cw, ch ) name =
    ...
```

--------------------------------

### Creating a component with a custom directory

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/advanced/comp.md

This command demonstrates how to create a component and specify a custom directory for its configuration files using the `-cd` or `--cdir` flag.

```bash
# Use -cd Or --cdir
messenger component Home Comp1 -cd CSet1
```

--------------------------------

### Create a New Scene

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/scene_layer.md

Command to create a new layered scene named 'Home' in the 'helloworld' project.

```bash
# Open our project directory
cd helloworld
# Create a new scene
messenger scene Home
```

--------------------------------

### Example Elm Function Call Implementation for 'triangle'

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/custom_programs.md

This Elm code shows how the 'triangle' function is implemented to generate a JSON object representing a call to the underlying REGL program, encoding parameters like position and color.

```elm
{-|
Render a triangle with three vertices and color.
-}
triangle : ( Float, Float ) -> ( Float, Float ) -> ( Float, Float ) -> Color -> Renderable
triangle ( x1, y1 ) ( x2, y2 ) ( x3, y3 ) color =
    [
        ( "_c", Encode.int 0 )
        , ( "_p", Encode.string "triangle" )
        , ( "pos", Encode.list Encode.float [ x1, y1, x2, y2, x3, y3 ] )
        , ( "color", Encode.list Encode.float (toRgbaList color) )
    ]

```

--------------------------------

### Create scene and layers

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/order.md

Commands to create a new scene named 'Game' and two layers named 'A' and 'B' within that scene.

```bash
# Create a new scene
messenger scene Game
# Create new layers
messenger layer Game A
messenger layer Game B
```

--------------------------------

### SOMStopAudio Examples

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/misc/som.md

Examples for stopping a specific audio by name and stopping all audio on a channel.

```elm
-- Stop a specific audio by name
( data, [ Parent <| SOMMsg <| SOMStopAudio (AudioName 0 "bgm") ], env )

-- Stop all audio on a channel
( data, [ Parent <| SOMMsg <| SOMStopAudio (AudioChannel 0) ], env )
```

--------------------------------

### Messenger CLI Arguments for Init File

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/init.md

Command-line arguments to add an initialization file when creating scenes, layers, or components.

```bash
# Use --init or -i
messenger scene ... --init
messenger layer ... --init
messenger component ... --init
```

--------------------------------

### Importing Getters

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/intro/globaldata.md

Shows how to import common getter functions from the Messenger.Base module.

```elm
import Messenger.Base exposing (getSceneStartTime, getMousePos, getPressedKeys)
```

--------------------------------

### Example of applying a Gaussian blur effect

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/effects.md

This example shows how to apply a Gaussian blur effect to a group of renderables. The `gblur` effect is applied to the inner group containing C and D, affecting only them.

```elm
import REGL
import REGL.Effects as E

view = REGL.group [ ] [
    A,
    REGL.group (E.gblur 3) [
        C, D
    ],
    B
]
```

--------------------------------

### audioDuration

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/audio/helpers.md

Get the duration of a loaded audio resource.

```elm
import Messenger.Audio.Audio exposing (audioDuration)

audioDuration runtime "bg"
```

--------------------------------

### Create Scene, Component, and Layer

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/component/user.md

Bash commands to create a new scene named Components, a new Rect component within that scene, and a new layer named A in the Components scene.

```bash
# Create a new scene named Components
messenger scene Components

# Create a new type of component in Components scene
messenger component -i Components Rect

# Create a new layer with components in Components Scene
messenger layer -c Components A
```

--------------------------------

### REGL.elm

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/render.md

Example of the 'group' function for structural drawing, which takes a list of effects and a list of renderables.

```elm
group : List Effect -> List Renderable -> Renderable
```

--------------------------------

### World position to screen position transformation

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/custom_programs.md

Code snippet demonstrating the transformation of world position (wpos) to screen position using camera and view uniforms.

```glsl
if (camera.w == 0.0){
    vec2 pos = (wpos - camera.xy) * camera.z / view;
    gl_Position = vec4(pos, 0, 1);
} else {
    mat2 rotation = mat2(cos(camera.w), -sin(camera.w), sin(camera.w), cos(camera.w));
    vec2 pos = (rotation * (wpos - camera.xy)) * camera.z / view;
    gl_Position = vec4(pos, 0, 1);
}
```

--------------------------------

### Create a new layer

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/scene_layer.md

Command to create a new layer named MainLayer within the Home scene.

```bash
messenger layer Home MainLayer
```

--------------------------------

### GlobalDataInit Type Alias

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/intro/globaldata.md

Defines the initial structure for GlobalData, used during application setup.

```elm
type alias GlobalDataInit userdata =
    {
        camera : Camera
        , volume : Float
        , extraHTML : Maybe (Html WorldEvent)
        , canvasAttributes : List (Html.Attribute WorldEvent)
        , userData : userdata
    }
```

--------------------------------

### Manual font asset creation with msdf-bmfont

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/rendering/text.md

Command to manually create font assets using msdf-bmfont.

```bash
msdf-bmfont --smart-size --pot -d 2 -f json a.ttf
```

--------------------------------

### Bullet Model - Updaterec Function

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/spaceshooter.md

Handles recursive updates for the bullet component, such as disappearing on collision.

```elm
updaterec : ComponentUpdateRec SceneCommonData Data UserData SceneMsg ComponentTarget ComponentMsg BaseData
updaterec _ env msg data basedata =
    case msg of
        CollisionMsg "Bullet" ->
            ( ( data, { basedata | alive = False } ), [], env )

        _ ->
            ( ( data, basedata ), [], env )
```

--------------------------------

### Layer Init Function Signature

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/helloworld/init.md

The signature of the `init` function in a layer, showing its parameters.

```elm
LayerInit SceneCommonData UserData LayerMsg Data
```

```elm
Runtime -> Env SceneCommonData UserData -> LayerMsg -> Data
```

--------------------------------

### Create levels of sceneprotos

Source: https://github.com/elm-messenger/messenger-docs/blob/main/docs/sproto/sproto.md

Command to create a scene added to the Scenes directory and the AllScenes.elm file, based on a SceneProto.

```bash
messenger level <SceneProto Name> <Level Name>
```