[{"name":"PixelEngine","comment":" This module takes care of all the wiring.\r\n\r\n**If you are looking for the main module,\r\nhead over to [PixelEngine.Graphics](PixelEngine-Graphics).**\r\n\r\nPixelEngine needs a lot of wiring in order for it to work as intended.\r\nThats why this module gives different prewired frames.\r\nTo start, copy this example and expand upon it.\r\n\r\n    module ControlsExample exposing (main)\r\n\r\n    import Color\r\n    import Html.Attributes as Attributes\r\n    import PixelEngine exposing (PixelEngine)\r\n    import PixelEngine.Controls as Controls exposing (Input(..))\r\n    import PixelEngine.Graphics as Graphics exposing (Area, Background, Options)\r\n    import PixelEngine.Graphics.Tile as Tile exposing (Tile, Tileset, tile)\r\n\r\n\r\n    windowWidth : Int\r\n    windowWidth =\r\n        16\r\n\r\n\r\n    type alias Model =\r\n        { x : Int\r\n        , y : Int\r\n        }\r\n\r\n\r\n    type Msg\r\n        = Controls Input\r\n\r\n\r\n    view : Model -> { title : String, options : Options Msg, body : List (Area Msg) }\r\n    view ({ x, y } as model) =\r\n        let\r\n            tileSize : Int\r\n            tileSize =\r\n                16\r\n\r\n            width : Float\r\n            width =\r\n                toFloat <| windowWidth * tileSize\r\n\r\n            tileset : Tileset\r\n            tileset =\r\n                { source = \"https://orasund.github.io/pixelengine/DigDigBoom/tileset.png\"\r\n                , spriteWidth = 16\r\n                , spriteHeight = 16\r\n                }\r\n\r\n            background : Background\r\n            background =\r\n                Graphics.colorBackground (Color.rgb255 20 12 28)\r\n\r\n            playerTile : Tile Msg\r\n            playerTile =\r\n                tile ( 12, 12 )\r\n        in\r\n        { title = \"Example\"\r\n        , options = Graphics.options\r\n            { width = width\r\n            , transitionSpeedInSec = 0.2\r\n            }\r\n        , body =\r\n            [ Graphics.tiledArea\r\n                { rows = windowWidth\r\n                , background = background\r\n                , tileset = tileset\r\n                }\r\n                [ ( ( x, y )\r\n                , playerTile\r\n                )\r\n                ]\r\n            ]\r\n        }\r\n\r\n\r\n    init : () -> ( Model, Cmd Msg )\r\n    init _ =\r\n        ( { x = windowWidth // 2, y = windowWidth // 2 }\r\n        , Cmd.none\r\n        )\r\n\r\n\r\n    update : Msg -> Model -> ( Model, Cmd Msg )\r\n    update msg ({ x, y } as model) =\r\n        ( case msg of\r\n            Controls input ->\r\n                case input of\r\n                    InputUp ->\r\n                        { model | y = y - 1 }\r\n\r\n                    InputLeft ->\r\n                        { model | x = x - 1 }\r\n\r\n                    InputDown ->\r\n                        { model | y = y + 1 }\r\n\r\n                    InputRight ->\r\n                        { model | x = x + 1 }\r\n\r\n                    _ ->\r\n                        model\r\n        , Cmd.none\r\n        )\r\n\r\n\r\n    subscriptions : Model -> Sub Msg\r\n    subscriptions _ =\r\n        Sub.none\r\n\r\n\r\n    controls : Input -> Msg\r\n    controls =\r\n        Controls\r\n\r\n\r\n    main : PixelEngine () Model Msg\r\n    main =\r\n        PixelEngine.game\r\n            { init = init\r\n            , update = update\r\n            , subscriptions = subscriptions\r\n            , view = view\r\n            , controls = controls\r\n            }\r\n\r\n@docs PixelEngine, game, gameWithNoControls, gameWithCustomControls\r\n\r\n","unions":[],"aliases":[{"name":"PixelEngine","comment":" An alias for a PixelEngine program.\r\n\r\nYour `main` function will have this type.\r\n\r\n","args":["flag","model","msg"],"type":"Platform.Program flag (PixelEngine.Model model msg) (PixelEngine.Msg msg)"}],"values":[{"name":"game","comment":" A prewired PixelEngine frame.\r\n\r\nUse it just like `document` from [elm/browser](https://package.elm-lang.org/packages/elm/browser/latest/Browser).\r\n\r\n","type":"{ init : flags -> ( model, Platform.Cmd.Cmd msg ), update : msg -> model -> ( model, Platform.Cmd.Cmd msg ), subscriptions : model -> Platform.Sub.Sub msg, view : model -> { title : String.String, options : PixelEngine.Graphics.Options msg, body : List.List (PixelEngine.Graphics.Area msg) }, controls : PixelEngine.Controls.Input -> msg } -> Platform.Program flags (PixelEngine.Model model msg) (PixelEngine.Msg msg)"},{"name":"gameWithCustomControls","comment":" A game using custom controls.\r\n\r\nThe default controls should be enough to start,\r\nbut maybe you want to write a spelling game,\r\nor its nessesary that very specifc keys are used?\r\n\r\n","type":"{ init : flags -> ( model, Platform.Cmd.Cmd msg ), update : msg -> model -> ( model, Platform.Cmd.Cmd msg ), subscriptions : model -> Platform.Sub.Sub msg, view : model -> { title : String.String, options : PixelEngine.Graphics.Options msg, body : List.List (PixelEngine.Graphics.Area msg) }, controls : ( String.String -> PixelEngine.Controls.Input, PixelEngine.Controls.Input -> msg ) } -> Platform.Program flags (PixelEngine.Model model msg) (PixelEngine.Msg msg)"},{"name":"gameWithNoControls","comment":" A game with no controls.\r\n\r\n\r\nUse it just like `document` from [elm/browser](https://package.elm-lang.org/packages/elm/browser/latest/Browser).\r\n\r\n","type":"{ init : flags -> ( model, Platform.Cmd.Cmd msg ), update : msg -> model -> ( model, Platform.Cmd.Cmd msg ), subscriptions : model -> Platform.Sub.Sub msg, view : model -> { title : String.String, options : PixelEngine.Graphics.Options msg, body : List.List (PixelEngine.Graphics.Area msg) } } -> Platform.Program flags (PixelEngine.Model model msg) (PixelEngine.Msg msg)"}],"binops":[]},{"name":"PixelEngine.Controls","comment":" The graphic engine provides a touch-controller for mobile devices.\r\n\r\n## Input\r\n\r\n@docs Input, defaultLayout\r\n\r\n# Advanced\r\nNormally everything is already predefined in [PixelEngine](PixelEngine)\r\n\r\n## Mobile Support\r\n\r\n@docs supportingMobile\r\n\r\n## Subscriptions\r\n\r\n@docs basic, custom\r\n\r\n","unions":[{"name":"Input","comment":" all possible Inputs.\r\n","args":[],"cases":[["InputLeft",[]],["InputRight",[]],["InputUp",[]],["InputDown",[]],["InputA",[]],["InputB",[]],["InputX",[]],["InputY",[]],["InputNone",[]]]}],"aliases":[],"values":[{"name":"basic","comment":" Subscribes to a keypress and sends the corresponding msg. This Function uses the default key layout.\r\n","type":"(PixelEngine.Controls.Input -> msg) -> Platform.Sub.Sub msg"},{"name":"custom","comment":" Subscribes to a keypress using custom key layouts.\r\n\r\nIt uses [key values](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) for the String.\r\nYou can use this [website](http://keycode.info) to find out the key value.\r\n","type":"(String.String -> PixelEngine.Controls.Input) -> (PixelEngine.Controls.Input -> msg) -> Platform.Sub.Sub msg"},{"name":"defaultLayout","comment":" The default layout:\r\n\r\n  - A/ArrowLeft - `InputLeft`\r\n  - W/ArrowUp - `InputUp`\r\n  - D/ArrowRight - `InputRight`\r\n  - S/ArrowDown - `InputDown`\r\n  - Space/Enter - `InputA`\r\n  - X/Backspace/Esc - `InputB`\r\n  - Q - `InputX`\r\n  - E - `InputY`\r\n\r\n","type":"String.String -> PixelEngine.Controls.Input"},{"name":"supportingMobile","comment":" Adds mobile support to the options.\r\nIt needs the window size.\r\n\r\n[PixelEngine](PixelEngine) provides a fully wired program that takes care of everything.\r\n\r\n","type":"{ windowSize : { width : Basics.Float, height : Basics.Float }, controls : PixelEngine.Controls.Input -> msg } -> PixelEngine.Graphics.Options msg -> PixelEngine.Graphics.Options msg"}],"binops":[]},{"name":"PixelEngine.Graphics","comment":" This module takes care of the Graphics.\r\n\r\nYou will want to add [PixelEngine.Graphics.Image](PixelEngine-Graphics-Image)\r\nor [PixelEngine.Graphics.Tile](PixelEngine-Graphics-Tile) to\r\nactually draw something.\r\n\r\n## Area\r\n\r\nThe main idea of this graphic engine is to arrage the content into horizontal stripes,\r\nso called areas.\r\n\r\n@docs Area, tiledArea, imageArea, heightOf\r\n\r\n## Background\r\n\r\n@docs Background, imageBackground, colorBackground\r\n\r\n## Options\r\n\r\n@docs Options, options\r\n\r\n# Advanced\r\n\r\nIf one wants to use just use this module on its own, you can use `render` instead\r\nof the `game` function from the main module.\r\n\r\n## Render\r\n\r\n@docs render\r\n\r\n","unions":[],"aliases":[{"name":"Area","comment":" A horizontal area of the content.\r\nA `Area` defines how the content should be displayed.\r\n\r\n**Note:**  \r\nAn area can only contain elements of the same type.\r\nSo either you have tiles or images.\r\n\r\n![A typical game](https://orasund.github.io/pixelengine/img4.png \"A typical game\")\r\n","args":["msg"],"type":"PixelEngine.Graphics.Data.Area.Area msg"},{"name":"Background","comment":" Every area has a background.\r\n","args":[],"type":"PixelEngine.Graphics.Data.Background"},{"name":"Options","comment":" Options for the render function\r\n","args":["msg"],"type":"PixelEngine.Graphics.Data.Options.Options msg"}],"values":[{"name":"colorBackground","comment":" A single color background.\r\nIt uses [avh4/elm-color](https://package.elm-lang.org/packages/avh4/elm-color/latest).\r\n\r\n```\r\ncolorBackground (Color.rgb255 20 12 28)\r\n```\r\n\r\n","type":"Color.Color -> PixelEngine.Graphics.Background"},{"name":"heightOf","comment":" Returns the height of a list of Areas\r\n\r\nThis can be used to return the height of a `tiledArea`.\r\nFor a `imageArea` this function is trivial. \r\n","type":"List.List (PixelEngine.Graphics.Area msg) -> Basics.Float"},{"name":"imageArea","comment":" An area containing images that can be arranged freely.\r\n\r\nThis is a complete contrast to the way how `tiledArea` is working.\r\nUsefull applications are GUIs, menus or loading screens.\r\n\r\nCheckout [PixelEngine.Graphics.Image](PixelEngine-Graphics-Image) for more information.\r\n\r\nThis area has the following options:\r\n\r\n  - `height` - The height or the `Area` in pixels.\r\n  - `background` - The background of the `Area`.\r\n\r\n","type":"{ height : Basics.Float, background : PixelEngine.Graphics.Background } -> List.List ( ( Basics.Float, Basics.Float ), PixelEngine.Graphics.Image.Image msg ) -> PixelEngine.Graphics.Area msg"},{"name":"imageBackground","comment":" An image that gets repeated.\r\n\r\n```\r\nImage \"groundTile.png\"\r\n```\r\n\r\n","type":"{ source : String.String, width : Basics.Float, height : Basics.Float } -> PixelEngine.Graphics.Background"},{"name":"options","comment":" The engine comes with a set of options:\r\n\r\n  - `width` - Width of the game.  \r\n    **Note:**  \r\n    all spatial values are given in _Pixels_.\r\n\r\n  - `transitionSpeedInSec` - The speed of animations.  \r\n    **Default value:** `0` for no animations\r\n\r\nFor the start use the following settings\r\n\r\n```\r\n{width = 800, transitionSpeedInSec = 0.2}\r\n```\r\n\r\n","type":"{ width : Basics.Float, transitionSpeedInSec : Basics.Float } -> PixelEngine.Graphics.Options msg"},{"name":"render","comment":" Displays content of the game.\r\n\r\n**Note:**  \r\nThe first argument is the scale. Use only power of `2` as scale to ensure crisp\r\npixels.\r\n","type":"Basics.Float -> PixelEngine.Graphics.Options msg -> List.List (PixelEngine.Graphics.Area msg) -> Html.Html msg"},{"name":"tiledArea","comment":" An area for using tilesets.\r\n\r\nIt supports one tileset at a time,\r\nthat means all sprites must be of the same size and stored as a grid in one single file.\r\nThis area is useful for displaying the playing field of a game.\r\n\r\nCheckout [PixelEngine.Graphics.Tile](PixelEngine-Graphics-Image) for more information.\r\n\r\nThis area has the following options:\r\n\r\n  - `rows` - The amount of rows of the grid. This value defines the height of the `Area`.\r\n  - `tileset` - The tileset that will be used for all elements in the `Area`.\r\n  - `background` - The background of the `Area`.\r\n\r\n","type":"{ rows : Basics.Int, tileset : PixelEngine.Graphics.Tile.Tileset, background : PixelEngine.Graphics.Background } -> List.List ( ( Basics.Int, Basics.Int ), PixelEngine.Graphics.Tile.Tile msg ) -> PixelEngine.Graphics.Area msg"}],"binops":[]},{"name":"PixelEngine.Graphics.Image","comment":" This module contains functions for creating images.\r\nThese Images can then be used for the `imageArea` function from the <PixelEngine>\r\n\r\n\r\n## Image\r\n\r\n@docs Image, image, movable, jumping, fromTile, fromText, fromTextWithSpacing, multipleImages, clickable, monochrome, withAttributes\r\n\r\n\r\n## DEPRECATED\r\n\r\n@docs onClick\r\n\r\n","unions":[],"aliases":[{"name":"Image","comment":" A `Image` is actually a very general type: As we will see later,\r\neven tiles are essentially images.\r\nThe following functions are intended to be modular.\r\n","args":["msg"],"type":"PixelEngine.Graphics.Data.Area.ContentElement msg"}],"values":[{"name":"clickable","comment":" Makes an `Image` clickable\r\n\r\nUse this to create the `onClick` event from [Html.Events](https://package.elm-lang.org/packages/elm/html/latest/Html-Events#onClick).\r\n\r\n","type":"msg -> PixelEngine.Graphics.Image.Image msg -> PixelEngine.Graphics.Image.Image msg"},{"name":"fromText","comment":" Created an Image from a text-string and the Tileset of the font.\r\n\r\nIt only supports Ascii characters.\r\n\r\nThis package comes with a [collection of Fonts](https://github.com/Orasund/pixelengine/wiki/Collection-of-Fonts)\r\nthat are free to use.\r\n\r\n","type":"String.String -> PixelEngine.Graphics.Tile.Tileset -> PixelEngine.Graphics.Image.Image msg"},{"name":"fromTextWithSpacing","comment":" Created an Image from a text-string and the Tileset of the font.\r\n\r\nIt only supports Ascii characters.\r\n\r\nThe first argument is the spaceing between letters. Use negative values to place\r\nthe letters nearer to echother.\r\n\r\nThis package comes with a [collection of Fonts](https://github.com/Orasund/pixelengine/wiki/Collection-of-Fonts)\r\nthat are free to use.\r\n\r\n","type":"Basics.Float -> String.String -> PixelEngine.Graphics.Tile.Tileset -> PixelEngine.Graphics.Image.Image msg"},{"name":"fromTile","comment":" `Tiles` are essentially also images,\r\ntherefore this constructor transforms a `Tile` and a `Tileset` into an `Image`.\r\n\r\n    fromTile (tile ( 0, 0 ))\r\n        (tileset\r\n            { source = \"tiles.png\"\r\n            , width = 80\r\n            , height = 80\r\n            }\r\n        )\r\n        == image \"tiles.png\"\r\n\r\n**Note:**\r\n`fromTile` displays only the `width` and `height` of the image, that where given.\r\nThis means setting `width` and `height` to `0` would not display the image at all.\r\n\r\n    fromTile (tile ( 0, 0 ) |> movable \"uniqueId\")\r\n        == fromTile (tile ( 0, 0 ))\r\n        |> movable \"uniqueId\"\r\n\r\n**Note:**\r\nIf you want to animate an `Image` use this function instead.\r\n\r\n","type":"PixelEngine.Graphics.Tile.Tile msg -> PixelEngine.Graphics.Tile.Tileset -> PixelEngine.Graphics.Image.Image msg"},{"name":"image","comment":" The basic image constructor.\r\nThe string contains the url to the image\r\n\r\n    image \"aStone.png\"\r\n\r\n","type":"String.String -> PixelEngine.Graphics.Image.Image msg"},{"name":"jumping","comment":" Pauses a the transition of a `movable` image.\r\n\r\n**Only use in combination with `movable`:**\r\n\r\n    image \"teleportingEnemy.png\" |> movable \"name\" |> jumping\r\n\r\nUse this function if a tile has the `movable`-property, but you would like to\r\nremove it without causing any unwanted side effects.\r\n\r\n","type":"PixelEngine.Graphics.Image.Image msg -> PixelEngine.Graphics.Image.Image msg"},{"name":"monochrome","comment":" Adds a background color.\r\n\r\n\\*\\* This makes the the Image non-transparent \\*\\*\r\n\r\nThis can be used to simulate monochrome sprites or to implement team colors.\r\n\r\n","type":"Color.Color -> PixelEngine.Graphics.Image.Image msg -> PixelEngine.Graphics.Image.Image msg"},{"name":"movable","comment":" Creates a image transition between positions.\r\nThis is useful for images that will change their position during the game.\r\n\r\n    image \"enemy.png\" |> movable \"name\"\r\n\r\n**Note:**\r\nThe string should be unique, if not the transition might fail every now and then.\r\n\r\n**Note:**\r\nThe string will be a id Attribute in a html node, so be careful not to use names that might be already taken.\r\n\r\n","type":"String.String -> PixelEngine.Graphics.Image.Image msg -> PixelEngine.Graphics.Image.Image msg"},{"name":"multipleImages","comment":" It is possible to compose an `Image` from a set of other images.\r\nThe two `Floats` are realtive coordinates.\r\n\r\n    ((100,100),image \"img.png\")\r\n    =\r\n    ((20,50), multipleimages [((80,50),image \"img.png\")])\r\n\r\nSub-images loose the ability to be movable:\r\n\r\n    multipleimages [((x,y),image \"img.png\" |> movable \"id\")]\r\n    =\r\n    multipleimages [((x,y),image \"img.png\")]\r\n\r\nInstead use the following:\r\n\r\n    image \"img.png\" |> movable \"id\"\r\n    =\r\n    multipleimages [((0,0),image \"img.png\")] |> movable \"id\"\r\n\r\n","type":"List.List ( ( Basics.Float, Basics.Float ), PixelEngine.Graphics.Image.Image msg ) -> PixelEngine.Graphics.Image.Image msg"},{"name":"onClick","comment":" [DEPRECATED]\r\n\r\nUse `clickable` instead.\r\n\r\n","type":"msg -> Html.Attribute msg"},{"name":"withAttributes","comment":" Adds custom attributes.\r\n\r\nUse the [Html.Attributes](https://package.elm-lang.org/packages/elm/html/latest/Html-Attributes).\r\n\r\n","type":"List.List (Html.Attribute msg) -> PixelEngine.Graphics.Image.Image msg -> PixelEngine.Graphics.Image.Image msg"}],"binops":[]},{"name":"PixelEngine.Graphics.Tile","comment":" This module contains functions for creating tiles.\r\nTiles are used for the `tiledArea` function from the main module.\r\n\r\n\r\n## Tile\r\n\r\n@docs Tile, tile, fromText, movable, jumping, animated, clickable, monochrome, withAttributes\r\n\r\n\r\n## Tileset\r\n\r\n@docs Tileset, tileset\r\n\r\n\r\n## DEPRECATED\r\n\r\n@docs onClick, backgroundColor\r\n\r\n","unions":[],"aliases":[{"name":"Tile","comment":" A `Tile` defines a sprite in a `Tileset`.\r\nThe following functions are intended to be modular.\r\n\r\nA example for a `tile` could be:\r\n\r\n    tile ( 1, 2 ) |> animated 1 |> movable \"uniqueName\"\r\n\r\n","args":["msg"],"type":"PixelEngine.Graphics.Data.Tile.Tile msg"},{"name":"Tileset","comment":" A Tileset contains the actuall image that a `Tile` can reference.\r\n","args":[],"type":"PixelEngine.Graphics.Data.Tile.Tileset"}],"values":[{"name":"animated","comment":" Adds animations to a `Tile`.\r\nThe sprites of the animation must be arranged horizontally in the `Tileset`.\r\n\r\nThe first argument give the amount of steps of the animation (one less then the number of sprites.)\r\n\r\nThe following code specifies a `Tile` with 3+1 frames\r\n\r\n    tile ( 0, 0 ) |> animated 3\r\n\r\n**Note:**\r\nSetting the steps to `0` describes a tile with no animation.\r\n\r\n    tile ( 0, 0 ) |> animated 0 == tile ( 0, 0 )\r\n\r\n![animation](https://orasund.github.io/pixelengine/img2.png \"animation\")\r\n\r\n**Note:**\r\nNegaive steps are not supported, in this case no animation will be played.\r\n\r\n","type":"Basics.Int -> PixelEngine.Graphics.Tile.Tile msg -> PixelEngine.Graphics.Tile.Tile msg"},{"name":"backgroundColor","comment":" [DEPRECATED]\r\n\r\nUse `monochrome` instead.\r\n\r\n","type":"Color.Color -> Html.Attribute msg"},{"name":"clickable","comment":" Makes an `Tile` clickable\r\n\r\nUse this to create the `onClick` event from [Html.Events](https://package.elm-lang.org/packages/elm/html/latest/Html-Events#onClick).\r\n\r\n","type":"msg -> PixelEngine.Graphics.Tile.Tile msg -> PixelEngine.Graphics.Tile.Tile msg"},{"name":"fromText","comment":" Created a List of Tiles from a String and a Offset.\r\n\r\nIt only supports ASCII characters.\r\n\r\nThe Offset `(Int,Int` should point to the sprite repesenting the space-character.\r\n\r\nThis package comes with a [collection of Fonts](https://github.com/Orasund/pixelengine/wiki/Collection-of-Fonts)\r\nthat are free to use.\r\n","type":"( Basics.Int, Basics.Int ) -> String.String -> List.List (PixelEngine.Graphics.Tile.Tile msg)"},{"name":"jumping","comment":" Pauses the transition of a `movable` tile.\r\n\r\n**Only use in combination with `movable`:**\r\n\r\n    tile ( 0, 0 ) |> movable \"name\" |> jumping\r\n\r\nUse this function if a `Tile` has the `movable`-property and you would like to\r\nremove it temporarily without causing any unwanted side effects.\r\n\r\n","type":"PixelEngine.Graphics.Tile.Tile msg -> PixelEngine.Graphics.Tile.Tile msg"},{"name":"monochrome","comment":" Adds a background color.\r\n\r\n\\*\\* This makes the the Tile non-transparent \\*\\*\r\n\r\nThis can be used to simulate monochrome sprites or to implement team colors.\r\n\r\n","type":"Color.Color -> PixelEngine.Graphics.Tile.Tile msg -> PixelEngine.Graphics.Tile.Tile msg"},{"name":"movable","comment":" Makes a `Tile` transition between positions.\r\nThis is useful for sprites that will change their position during the game.\r\n\r\n    tile ( 0, 0 ) |> movable \"name\"\r\n\r\n**Note:**\r\nOnce a `Tile` has this property, it can **NOT** be removed during the game.\r\n\r\n**Note:**\r\nThe string should be unique,. If not then the transition might fail every now and then.\r\n\r\n**Note:**\r\nThe string will be a id Attribute in a html node, so be careful not to use names that might be already taken.\r\n\r\n","type":"String.String -> PixelEngine.Graphics.Tile.Tile msg -> PixelEngine.Graphics.Tile.Tile msg"},{"name":"onClick","comment":" [DEPRECATED]\r\n\r\nUse `clickable` instead.\r\n\r\n","type":"msg -> Html.Attribute msg"},{"name":"tile","comment":" The basic `Tile` constructor.\r\n\r\nThe first argument is the position of the sprite in the `tileset`.\r\n\r\nAs an example\r\n\r\n    tile ( 3, 2 )\r\n\r\nis the 3 row in the second column of the `Tileset`.\r\n\r\n![a tileset](https://orasund.github.io/pixelengine/img3.png \"a tileset\")\r\n\r\n","type":"( Basics.Int, Basics.Int ) -> PixelEngine.Graphics.Tile.Tile msg"},{"name":"tileset","comment":" The `Tileset` constructor has the following parameters:\r\n\r\n  - `source` - The adress to the file\r\n  - `spriteWidth` - The size of a single sprite in the `Tileset` (in pixels)\r\n  - `spriteHeight` - The height of a single sprite (also in pixels)\r\n\r\nFor the following defines the `Tileset` used in the examples of this module.\r\n\r\n    { width: 16\r\n    , height 16\r\n    , source: \"https://orasund.github.io/pixelengine/tileset.png\"\r\n    }\r\n\r\n","type":"{ source : String.String, spriteWidth : Basics.Int, spriteHeight : Basics.Int } -> PixelEngine.Graphics.Tile.Tileset"},{"name":"withAttributes","comment":" Adds custom attributes.\r\n\r\nuse the [Html.Attributes](https://package.elm-lang.org/packages/elm/html/latest/Html-Attributes).\r\n\r\n","type":"List.List (Html.Attribute msg) -> PixelEngine.Graphics.Tile.Tile msg -> PixelEngine.Graphics.Tile.Tile msg"}],"binops":[]},{"name":"PixelEngine.Graphics.Transition","comment":" Adding a transitions between screens.\r\n\r\nThe information for the transition will be written in the `Option` class from\r\n[PixelEngine.Graphics](PixelEngine-Graphics).\r\n\r\nTo get started, copy the following example:\r\n\r\n    options\r\n        |> Transition.from\r\n            ListOfArea\r\n            (Transition.customTransition\r\n                \"death_transition\"\r\n                [ ( 0, \"opacity:1;filter:grayscale(0%) blur(0px);\" )\r\n                , ( 1, \"opacity:1;filter:grayscale(70%) blur(0px);\" )\r\n                , ( 3, \"opacity:0;filter:grayscale(70%) blur(5px);\" )\r\n            ])\r\n\r\n\r\n## Main Function\r\n\r\n@docs from\r\n\r\n\r\n## Area\r\n\r\n@docs Transition, custom\r\n\r\n","unions":[],"aliases":[{"name":"Transition","comment":" A transition between screens\r\n","args":[],"type":"PixelEngine.Graphics.Data.Transition.Transition"}],"values":[{"name":"custom","comment":" The default constructor for a `Transition`.\r\n\r\nFor the future I have planed to make transitions modular, similar to a `Msg` or a `Sub`.\r\n\r\n    Transition.customTransition\r\n        \"death_transition\"\r\n        [ ( 0, \"opacity:1;filter:grayscale(0%) blur(0px);\" )\r\n        , ( 1, \"opacity:1;filter:grayscale(70%) blur(0px);\" )\r\n        , ( 3, \"opacity:0;filter:grayscale(70%) blur(5px);\" )\r\n        ]\r\n\r\nThe first value is the duration of the effect, the second is the CSS-command at that point in time.\r\nSo the example will compile to something like this:\r\n\r\n    dealth_transition:\r\n    0% {opacity:1;filter:grayscale(0%) blur(0px);}\r\n    25% {opacity:1;filter:grayscale(70%) blur(0px);}\r\n    100% {opacity:0;filter:grayscale(70%) blur(5px);}\r\n\r\n**Note:**  \r\nA screen will be automatically hidden after a transition,\r\nso the example would also work without the opacity-parameter.\r\n","type":"String.String -> List.List ( Basics.Float, String.String ) -> PixelEngine.Graphics.Transition.Transition"},{"name":"from","comment":" adds the `Transition` to the `Options`.\r\n\r\nThe first argument is the List or Areas taken **before** the transition is applied.\r\n(e.g. the last state)\r\n","type":"List.List (PixelEngine.Graphics.Area msg) -> PixelEngine.Graphics.Transition.Transition -> PixelEngine.Graphics.Options msg -> PixelEngine.Graphics.Options msg"}],"binops":[]}]