Orasund / pixelengine / PixelEngine.Options

Options tweak different aspects of your program.

Transitions

Adding a transitions between screens.

The information for the transition will be written in the Option class from PixelEngine.Graphics.

To get started, copy the following example:

options
    |> Transition.withTransitionFrom
        ListOfArea
        (Transition.customTransition
            "death_transition"
            [ ( 0, "opacity:1;filter:grayscale(0%) blur(0px);" )
            , ( 1, "opacity:1;filter:grayscale(70%) blur(0px);" )
            , ( 3, "opacity:0;filter:grayscale(70%) blur(5px);" )
        ])

Main Function

withTransitionFrom : List (PixelEngine.Graphics.Data.Area.Area msg) -> Transition -> Options msg -> Options msg

adds the Transition to the Options.

The first argument is the List or Areas taken before the transition is applied. (e.g. the last state)

Area


type alias Transition =
PixelEngine.Graphics.Data.Transition.Transition

A transition between screens

transition : String -> { start : String, keyFrames : List (Maybe String), end : String } -> Transition

The default constructor for a Transition.

For the future I have planed to make transitions modular, similar to a Msg or a Sub.

Transition.transition
    "death_transition"
    [ ( 0, "opacity:1;filter:grayscale(0%) blur(0px);" )
    , ( 1, "opacity:1;filter:grayscale(70%) blur(0px);" )
    , ( 3, "opacity:0;filter:grayscale(70%) blur(5px);" )
    ]

The first value is the duration of the effect, the second is the CSS-command at that point in time. So the example will compile to something like this:

dealth_transition:
0% {opacity:1;filter:grayscale(0%) blur(0px);}
25% {opacity:1;filter:grayscale(70%) blur(0px);}
100% {opacity:0;filter:grayscale(70%) blur(5px);}

Note: A screen will be automatically hidden after a transition, so the example would also work without the opacity-parameter.

Options


type alias Options msg =
PixelEngine.Graphics.Data.Options.Options msg

Options for the render function

default : Options msg

Defines the width of the game.

withAnimationFPS : Basics.Float -> Options msg -> Options msg

Sets the Frames per Seconds for Animations.

Value must be positv or else the function will be ignored.

Default value: 1

withMovementSpeed : Basics.Float -> Options msg -> Options msg

The speed of movement in seconds.

Default value: 0.2

withScale : Basics.Int -> Options msg -> Options msg

Scales up everything.

Use only power of 2 as scale to ensure crisp pixels.

Default value: 1