Options tweak different aspects of your program.
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);" )
])
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)
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.
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