[ { "name": "PixelEngine.ScreenTransition", "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 apply\n\n\n## Area\n\n@docs Transition,customTransition\n\n", "unions": [ { "name": "Transition", "comment": " a Transition between screens\n", "args": [], "cases": [] } ], "aliases": [], "values": [ { "name": "apply", "comment": " applys a transition to two screen.\n\nIt has the same options as Graphics.render, so this is a more advanced version of render.\n\n apply options {from: ListOfAreas,to:ListOfAreas} {name: \"\",[(0,\"\")]}\n =\n render options ListOfAreas\n\n", "type": "{ width : Float, scale : Float, transitionSpeedInSec : Float } -> { from : List (Area msg), to : List (Area msg) } -> Transition -> Html msg" }, { "name": "customTransition", "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 -> List ( Float, String ) -> Transition" } ], "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 scale : Float\n scale =\n 2\n\n width : Float\n width =\n (toFloat <| windowWidth * tileSize) * scale\n\n tileset : Tileset\n tileset =\n { source = \"https://orasund.github.io/pixelengine/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 { width = width\n , transitionSpeedInSec = 0.2\n , scale = scale\n }\n [ Graphics.tiledArea\n { rows = 4\n , cols = windowWidth\n , tileset = tileset\n , background = background\n }\n [ ( ( 6, 2 ), goblin )\n , ( ( 7, 2 ), letter_h )\n , ( ( 8, 2 ), letter_i )\n , ( ( 9, 2 ), heart )\n ]\n , Graphics.imageArea\n { height = scale * (toFloat <| tileSize * 12)\n , background = background\n }\n [ ( ( width / 2 - 80 * scale, 0 )\n , image \"https://orasund.github.io/pixelengine/pixelengine-logo.png\"\n )\n ]\n ]\n |> toUnstyled\n\n\n## Main Function\n\n@docs render\n\n\n## Area\n\n@docs Area,tiledArea,imageArea\n\n\n## Background\n\n@docs Background,imageBackground,colorBackground\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": "Area msg" }, { "name": "Background", "comment": " Every area has a background.\n", "args": [], "type": "Background" } ], "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": "Color -> Background" }, { "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 : Float, background : Background } -> List ( ( Float, Float ), Image msg ) -> Area msg" }, { "name": "imageBackground", "comment": " An image that gets repeated.\n\n```\nImage \"groundTile.png\"\n```\n\n", "type": "{ source : String, width : Float, height : Float } -> Background" }, { "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\nThe 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 : Float, scale : Float, transitionSpeedInSec : Float } -> List (Area msg) -> 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 : Int, tileset : Tileset, background : Background } -> List ( ( Int, Int ), Tile msg ) -> Area 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": "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": "Tile msg -> Tileset -> 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 -> 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 -> Image msg -> 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 ( ( Float, Float ), Image msg ) -> 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 (Attribute msg) -> Image msg -> 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, withAttributes\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": "Tile msg" }, { "name": "Tileset", "comment": " A Tileset contains the actuall image that a tile can reference.\n", "args": [], "type": "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": "Int -> Tile msg -> Tile 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 -> Tile msg -> Tile 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": "( Int, Int ) -> 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, spriteWidth : Int, spriteHeight : Int } -> Tileset" }, { "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 (Attribute msg) -> Tile msg -> Tile msg" } ], "binops": [] } ]