[{"name":"PixelEngine","comment":" The Libary may support more then just simple rendering. This module exists to take care of everything else.\nIt provides a program that is already set up.\n\n@docs PixelEngine, program, programWithCustomControls\n\n","unions":[],"aliases":[{"name":"PixelEngine","comment":" an alias for the program\n","args":["flag","model","msg"],"type":"Platform.Program flag (PixelEngine.Model model msg) (PixelEngine.Msg msg)"}],"values":[{"name":"program","comment":" use this function as usual\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":"programWithCustomControls","comment":" uses custom controls\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)"}],"binops":[]},{"name":"PixelEngine.Controls","comment":" The graphic engine provides a touch-controller for mobile devices. The controllers has 8 buttons:\nLeft (a key), Right (d key), Up (w key), Down (s key), A(Spacebar), B(x key), X(q key), Y(e key)\n\n\n## Main Function\n\n@docs supportingMobile\n\n\n## Input\n\n@docs Input, defaultLayout\n\n\n## Subscriptions\n\n@docs basic, custom\n\n","unions":[{"name":"Input","comment":" all possible Inputs\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.\n","type":"(PixelEngine.Controls.Input -> msg) -> Platform.Sub.Sub msg"},{"name":"custom","comment":" subscribes to a keypress using custom key layouts\nit uses [key values](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) for the String.\nYou can use this [website](http://keycode.info/) to find out the key value.\n","type":"(String.String -> PixelEngine.Controls.Input) -> (PixelEngine.Controls.Input -> msg) -> Platform.Sub.Sub msg"},{"name":"defaultLayout","comment":" the default layout:\n\n  - A/ArrowLeft - InputLeft\n  - W/ArrowUp - InputUp\n  - D/ArrowRight - InputRight\n  - S/ArrowDown - InputDown\n  - Space/Enter - InputA\n  - X/Backspace/Esc - InputB\n  - Q - InputX\n  - E - InputY\n\n","type":"String.String -> PixelEngine.Controls.Input"},{"name":"supportingMobile","comment":" adds mobile support to the options.\nIt needs the window size.\n\n[PixelEngine](https://package.elm-lang.org/packages/Orasund/pixelengine/latest/PixelEngine) provides a fully wired program that takes care of everything.\n\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":" A graphic engine for turn-based pixel games.\n\nTo get started, copy the following example:\n\n    module TilesetExample exposing (main)\n\n    import Css\n    import Html.Styled exposing (toUnstyled)\n    import PixelEngine.Graphics as Graphics exposing (Background)\n    import PixelEngine.Graphics.Image exposing (image)\n    import PixelEngine.Graphics.Tile as Tile\n        exposing\n            ( Tileset\n            , tile\n            )\n\n\n    main =\n        let\n            tileSize : Int\n            tileSize =\n                16\n\n            windowWidth : Int\n            windowWidth =\n                16\n\n            width : Float\n            width =\n                toFloat <| windowWidth * tileSize\n\n            tileset : Tileset\n            tileset =\n                { source = \"https://orasund.github.io/pixelengine/DigDigBoom/tileset.png\"\n                , spriteWidth = tileSize\n                , spriteHeight = tileSize\n                }\n\n            background : Background\n            background =\n                Graphics.colorBackground (Css.rgb 20 12 28)\n\n            goblin =\n                tile ( 2, 8 ) |> Tile.animated 1\n\n            letter_h =\n                tile ( 1, 15 )\n\n            letter_i =\n                tile ( 2, 12 )\n\n            heart =\n                tile ( 4, 8 )\n        in\n        Graphics.render\n            (Graphics.options\n                { width = width\n                , transitionSpeedInSec = 0.2\n                }\n                |> Graphics.usingScale 2\n            )\n            [ Graphics.tiledArea\n                { rows = 4\n                , tileset = tileset\n                , background = background\n                }\n                [ ( ( 6, 2 ), goblin |> Tile.withAttributes [ Tile.backgroundColor (Css.rgb 170 57 57) ] )\n                , ( ( 7, 2 ), letter_h |> Tile.withAttributes [ Tile.backgroundColor (Css.rgb 97 81 146) ] )\n                , ( ( 8, 2 ), letter_i |> Tile.withAttributes [ Tile.backgroundColor (Css.rgb 170 151 57) ] )\n                , ( ( 9, 2 ), heart |> Tile.withAttributes [ Tile.backgroundColor (Css.rgb 45 134 51) ] )\n                ]\n            , Graphics.imageArea\n                { height = toFloat <| tileSize * 12\n                , background = background\n                }\n                [ ( ( width / 2 - 80, 0 )\n                , image \"https://orasund.github.io/pixelengine/pixelengine-logo.png\"\n                )\n                ]\n            ]\n\n\n## Main Function\n\n@docs Options, options, render\n\n\n## Area\n\n@docs Area, tiledArea, imageArea, heightOf\n\n\n## Background\n\n@docs Background, imageBackground, colorBackground\n\n\n## Advanced\n\n@docs usingScale\n\n","unions":[],"aliases":[{"name":"Area","comment":" A horizontal area of the content.\nA area defines how the content should be displayed.\n\n**Note:** An area can only contain elements that are supported by the type of that area.\nYou can find more information about the valid elements in the curresponding modules.\n\n","args":["msg"],"type":"PixelEngine.Graphics.Abstract.Area msg"},{"name":"Background","comment":" Every area has a background.\n","args":[],"type":"PixelEngine.Graphics.Abstract.Background"},{"name":"Options","comment":" Options for the render function\n","args":["msg"],"type":"PixelEngine.Graphics.Abstract.Options msg"}],"values":[{"name":"colorBackground","comment":" A single color using the [elm-css colors](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Css#rgb)\n\n```\nColor (Css.rgb 20 12 28)\n```\n\n","type":"Css.Color -> PixelEngine.Graphics.Background"},{"name":"heightOf","comment":" returns the height of a list of Areas\n","type":"List.List (PixelEngine.Graphics.Area msg) -> Basics.Float"},{"name":"imageArea","comment":" An area containing images that can be arranged freely.\nThis is a complete contrast to the way how tiledArea is working.\nusefull applications are GUIs, menus or loading screens.\n\nThis area has the following options:\n\n  - height - the height or the area in pixels\n  - background - the background of the area\n\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.\n\n```\nImage \"groundTile.png\"\n```\n\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:\n\n  - width - Width of the game.\n    **Note:** all spatial values are given in _Pixels_.\n\n  - scale - This value scales up all content of the game.\n    **Default value:** 1 for original sized images\n\n  - transitionSpeedInSec - The speed of animations.\n    **Default value:** 0 for no animations\n\nFor the start use the following settings\n\n```\n{scale = 2,width = 800, transitionSpeedInSec = 0.2}\n```\n\n","type":"{ width : Basics.Float, transitionSpeedInSec : Basics.Float } -> PixelEngine.Graphics.Options msg"},{"name":"render","comment":" This functions displays the content of the game.\nIt returns [elm-css Html](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Html-Styled#Html).\n\nThe main idea of this graphic engine is to arrage the content into so called _Areas_.\nThese Areas are then displayed vertically on top of eachother.\n\n","type":"PixelEngine.Graphics.Options msg -> List.List (PixelEngine.Graphics.Area msg) -> Html.Html msg"},{"name":"tiledArea","comment":" An area for using tilesets. It supports one tileset at a time,\nthat means all sprites must be of the same size and stored as a grid in one single file.\nThis area is useful for displaying the playing field of a game.\n\nThis area has the following options:\n\n  - rows - The amount of rows of the grid. This value defines the height of the area.\n  - tileset - The tileset that will be used for all elements in the area.\n  - background - The background of the area.\n\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"},{"name":"usingScale","comment":" scale up EVERYTHING.\nit can not be used with PixelEngine.program.\n","type":"Basics.Float -> PixelEngine.Graphics.Options msg -> PixelEngine.Graphics.Options msg"}],"binops":[]},{"name":"PixelEngine.Graphics.Image","comment":" This module contains functions for creating images.\nThese Images can then be used for the _imageArea_ function from the main module\n\n@docs Image, image, movable, fromTile, multipleImages, withAttributes\n\n","unions":[],"aliases":[{"name":"Image","comment":" A image is a very general object: as we will see later,\neven tiles are essentially images.\nThe following functions are intended to be modular.\n\nA example of a image could be:\n\n```\nimage \"img.png\" |> movable \"uniqueName\"\n```\n\n","args":["msg"],"type":"PixelEngine.Graphics.Abstract.ContentElement msg"}],"values":[{"name":"fromTile","comment":" Tiles are essentially also images,\ntherefore this constructor transforms a tile and a tileset into an image.\n\n```\nfromTile (tile (0,0))\n    (tileset {source:\"https://orasund.github.io/pixelengine/pixelengine-logo.png\",width:80,height:80})\n==\nimage \"https://orasund.github.io/pixelengine/pixelengine-logo.png\"\n```\n\n**Note:** fromTile displays only the width and height of the image, that where given.\nThis means setting width and height to 0 would not display the image at all.\n\n```\nfromTile (tile (0,0) |> movable \"uniqueId\")\n==\nfromTile (tile (0,0)) |> movable \"uniqueId\"\n```\n\n**Note:** If you want to animate an image use this function instead\n\n","type":"PixelEngine.Graphics.Tile.Tile msg -> PixelEngine.Graphics.Tile.Tileset -> PixelEngine.Graphics.Image.Image msg"},{"name":"image","comment":" The basic image constructor.\nthe string contains the url to the image\n\n```\nimage \"https://orasund.github.io/pixelengine/pixelengine-logo.png\"\n```\n\n","type":"String.String -> PixelEngine.Graphics.Image.Image msg"},{"name":"movable","comment":" Makes a image transition between positions.\nThis is useful for images that will change their position during the game.\n\n**Note:** The string should be unique, if not the transition might fail every now and then.\n\n**Note:** The string will be a id Attribute in a html node, so be careful not to use names that might be already taken.\n\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.\nthe two Floats are realtive coordinates so\n\n```\n((100,100),image \"img.png\")\n=\n((20,50), multipleimages [((80,50),image \"img.png\")])\n```\n\nsub-images loose the ability to be movable:\n\n```\nmultipleimages [((x,y),image \"img.png\" |> movable \"id\")]\n=\nmultipleimages [((x,y),image \"img.png\")]\n```\n\ninstead use the following:\n\n```\nimage \"img.png\" |> movable \"id\"\n=\nmultipleimages [((0,0),image \"img.png\")] |> movable \"id\"\n```\n\n","type":"List.List ( ( Basics.Float, Basics.Float ), PixelEngine.Graphics.Image.Image msg ) -> PixelEngine.Graphics.Image.Image msg"},{"name":"withAttributes","comment":" Adds custom attributes. use the [elm-css Attributes](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Svg-Styled-Attributes).\n\nThe motivation for this function was so that one can create [onClick](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Html-Styled-Events#onClick) events.\n\n","type":"List.List (Html.Styled.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.\nThese tiles are used for the _tiledArea_ function from the main module.\n\n\n## Tile\n\n@docs Tile, tile, movable, animated\n\n\n## Attributes\n\n@docs withAttributes, onClick, backgroundColor\n\n\n## Tileset\n\n@docs Tileset, tileset\n\n","unions":[],"aliases":[{"name":"Tile","comment":" A tile defines a sprite in a tileset.\nThe following functions are intended to be modular.\n\nA example for a tile could be:\n\n```\ntile (1,2) |> animated 1 |> movable \"uniqueName\"\n```\n\n","args":["msg"],"type":"PixelEngine.Graphics.Abstract.Tile msg"},{"name":"Tileset","comment":" A Tileset contains the actuall image that a tile can reference.\n","args":[],"type":"PixelEngine.Graphics.Abstract.Tileset"}],"values":[{"name":"animated","comment":" Adds animations to a tile.\nThe sprites of the animation must be arranged horizontally in the tileset.\n\n  - steps - Steps of the animation (one less then the number of sprites.)\n\nThe following code specifies a tile with 3+1 frames\n\n```\ntile (0,0) |> animated 3\n```\n\n**Note:** Setting the steps to 0 describes a tile with no animation.\n\n```\ntile (0,0) |> animated 0 == tile (0,0)\n```\n\n**Note:** Negaive steps are not supported, in this case no animation will be played.\n\n","type":"Basics.Int -> PixelEngine.Graphics.Tile.Tile msg -> PixelEngine.Graphics.Tile.Tile msg"},{"name":"backgroundColor","comment":" Adds a background color.\n\nThis can be used to simulate monochrome sprites or to implement team colors.\n\n```\nwithAttributes [css [Css.backgroundColor <| Css.rgb 255 0 0]]\n=\nwithAttributes [ backgroundColor <| Css.rgb 255 0 0]\n```\n\n","type":"Css.Color -> Html.Styled.Attribute msg"},{"name":"movable","comment":" Makes a Tile transition between positions.\nThis is useful for sprites that will change their position during the game.\n\n**Note:** The string should be unique, if not the transition might fail every now and then.\n\n**Note:** The string will be a id Attribute in a html node, so be careful not to use names that might be already taken.\n\n","type":"String.String -> PixelEngine.Graphics.Tile.Tile msg -> PixelEngine.Graphics.Tile.Tile msg"},{"name":"onClick","comment":" returns a Msg when it has been clicked.\n\n```\nwithAttributes [Events.onClick msg]\n=\nwithAttributes [ onClick msg]\n```\n\n","type":"msg -> Html.Styled.Attribute msg"},{"name":"tile","comment":" The basic tile constructor.\nThe two arguments is the position of the sprite in the tileset.\n\nAs an example\n\n```\ntile (4,2)\n```\n\nis the 4 row in the second column of the tileset.\n\n","type":"( Basics.Int, Basics.Int ) -> PixelEngine.Graphics.Tile.Tile msg"},{"name":"tileset","comment":" The tileset constructor has the following parameters:\n\n  - source - The adress to the file\n  - spriteWidth - The size of a single sprite in the tileset (in pixels)\n  - spriteHeight - The height of a single sprite (also in pixels)\n\nFor example the following defines the tileset that is used in the example.\n\n```\n{width: 16, height 16,source: \"https://orasund.github.io/pixelengine/tileset.png\"}\n```\n\n","type":"{ source : String.String, spriteWidth : Basics.Int, spriteHeight : Basics.Int } -> PixelEngine.Graphics.Tile.Tileset"},{"name":"withAttributes","comment":" Adds custom attributes. use the [elm-css Attributes](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Html-Styled-Attributes).\n","type":"List.List (Html.Styled.Attribute msg) -> PixelEngine.Graphics.Tile.Tile msg -> PixelEngine.Graphics.Tile.Tile msg"}],"binops":[]},{"name":"PixelEngine.Graphics.Transition","comment":" adding Transitions between Screens.\n\nthis module replaces Graphics.render with ScreenTransition.apply.\n\nTo get started, copy the following example:\n\n    Transition.customTransition\n        \"death_transition\"\n        [ ( 0, \"opacity:1;filter:grayscale(0%) blur(0px);\" )\n        , ( 1, \"opacity:1;filter:grayscale(70%) blur(0px);\" )\n        , ( 3, \"opacity:0;filter:grayscale(70%) blur(5px);\" )\n        ]\n    |> Transition.apply\n        options\n        { from = ListOfArea\n        , to = AnotherListOfArea\n        }\n\n\n## Main Function\n\n@docs from\n\n\n## Area\n\n@docs Transition, custom\n\n","unions":[],"aliases":[{"name":"Transition","comment":" a Transition between screens\n","args":[],"type":"PixelEngine.Graphics.Abstract.Transition"}],"values":[{"name":"custom","comment":" the default constructor for a Transition.\n\nFor the future i have planed to make transitions modular, similar to a Msg or a Sub.\n\n    Transition.customTransition\n        \"death_transition\"\n        [ ( 0, \"opacity:1;filter:grayscale(0%) blur(0px);\" )\n        , ( 1, \"opacity:1;filter:grayscale(70%) blur(0px);\" )\n        , ( 3, \"opacity:0;filter:grayscale(70%) blur(5px);\" )\n        ]\n\nThe first value is the duration of the effect, the second is the Css-command at that point in time.\nSo the example will compile to something like this:\n\n    dealth_transition:\n    0% {opacity:1;filter:grayscale(0%) blur(0px);}\n    25% {opacity:1;filter:grayscale(70%) blur(0px);}\n    100% {opacity:0;filter:grayscale(70%) blur(5px);}\n\n**Note:**\n\nA screen will be automatically hidden after a transition, so the example would also work without the opacity-parameter.\n\n","type":"String.String -> List.List ( Basics.Float, String.String ) -> PixelEngine.Graphics.Transition.Transition"},{"name":"from","comment":" adds the transition to the options\n","type":"List.List (PixelEngine.Graphics.Area msg) -> PixelEngine.Graphics.Transition.Transition -> PixelEngine.Graphics.Options msg -> PixelEngine.Graphics.Options msg"}],"binops":[]}]