Skip to content

Commit

Permalink
added multipleImages
Browse files Browse the repository at this point in the history
  • Loading branch information
@Orasund
Orasund committed Aug 12, 2018
1 parent 8b1635e commit 5db4977
Show file tree
Hide file tree
Showing 6 changed files with 222 additions and 30 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Expand Up @@ -3,15 +3,15 @@ A graphic engine for rendering turn-based pixel games.

When to use it:

* The game is turned based. (Board Games, Rogue-likes games, Puzzle games, Turn based stragety games)
* The game has an idle state. (Farming games, Jump 'n' Run games with no enemies, J-RPG games like Pokemon)
* The game is turned based. (Board Games, Rogue-likes games, Puzzle games, Turn based strategy games)
* The game has an idle state. (Farming games, Jump 'n' Run games, J-RPG games like Pokemon)
* The game is tile based. (Tetris,Pack-man)

When not to use it:

* The game is about speed or accuracy. (Racing games)
* The game is physics based. (Flappy Birds)
* The game has a continues gameloop. (Jump 'n' Run games with enemies, western RPGs like Zelda)
* The game has a continues gameloop. (Platformers, western RPGs like Zelda)

**Games made with this Engine**

Expand Down
2 changes: 1 addition & 1 deletion elm-package.json
View file
@@ -1,5 +1,5 @@
{
"version": "2.1.0",
"version": "2.2.0",
"summary": "Graphic engine for turn based pixel games.",
"repository": "https://github.com/Orasund/pixelengine.git",
"license": "BSD3",
Expand Down
9 changes: 6 additions & 3 deletions examples/Tileset.elm
View file
Expand Up @@ -3,7 +3,7 @@ module TilesetExample exposing (main)
import Css
import Html.Styled exposing (toUnstyled)
import PixelEngine.Graphics as Graphics exposing (Background)
import PixelEngine.Graphics.Image exposing (image)
import PixelEngine.Graphics.Image exposing (image, multipleImages)
import PixelEngine.Graphics.Tile as Tile
exposing
( Tileset
Expand Down Expand Up @@ -54,7 +54,6 @@ main =
{ width = width, transitionSpeedInSec = 0.2, scale = scale }
[ Graphics.tiledArea
{ rows = 4
, cols = windowWidth
, tileset = tileset
, background = background
}
Expand All @@ -67,7 +66,11 @@ main =
{ height = scale * (toFloat <| tileSize * 12)
, background = background
}
[ ( ( width / 2 - 80 * scale, 0 ), image "pixelengine-logo.png" )
[ ( ( 0, 0 )
, multipleImages
[ ( ( width / 2 - 80 * scale, 0 ), image "pixelengine-logo.png" )
]
)
]
]
|> toUnstyled
8 changes: 4 additions & 4 deletions src/PixelEngine/Graphics.elm
View file
Expand Up @@ -120,7 +120,7 @@ type alias Area msg =
Abstract.Area msg


{-| Ever area has a background.
{-| Every area has a background.
-}
type alias Background =
Abstract.Background
Expand Down Expand Up @@ -196,18 +196,18 @@ It returns [elm-css Html](http://package.elm-lang.org/packages/rtfeldman/elm-css
The main idea of this graphic engine is to arrage the content into so called _Areas_.
These Areas are then displayed vertically on top of eachother.
the engine comes with a set of options:
The engine comes with a set of options:
- width - Width of the game.
**Note:** all spatial values are given in _Pixels_.
- scale - This value scales up all content of the game.
**Default value:** 1 for original sized images
- transitionSpeedInSec - the speed of animations.
- transitionSpeedInSec - The speed of animations.
**Default value:** 0 for no animations
for the start use the following settings
For the start use the following settings
```
{scale = 2,width = 800, transitionSpeedInSec = 0.2}
Expand Down
153 changes: 145 additions & 8 deletions src/PixelEngine/Graphics/Abstract.elm
View file
Expand Up @@ -64,13 +64,22 @@ type alias SingleImage =
String


type ElementSource
type alias MultipleSources =
List ( Position, SingleSource )


type SingleSource
= TileSource TileWithTileset
| ImageSource SingleImage


type ElementType
= SingleSource SingleSource
| MultipleSources MultipleSources


type alias ContentElement msg =
{ elementSource : ElementSource
{ elementType : ElementType
, customAttributes : List (Attribute msg)
, uniqueId : Maybe String
}
Expand Down Expand Up @@ -243,17 +252,145 @@ cssPositions { left, top } =


displayElement : Options {} -> ( ( Float, Float ), ContentElement msg ) -> ( String, Html msg )
displayElement options ( ( left, top ), { elementSource, uniqueId, customAttributes } ) =
displayElement options ( ( left, top ), { elementType, uniqueId, customAttributes } ) =
let
position =
{ left = left, top = top }
in
case elementSource of
TileSource tileSource ->
displayTile options ( position, tileSource ) uniqueId customAttributes
case elementType of
{- SingleSource (TileSource tileSource) ->
displayTile options ( position, tileSource ) uniqueId customAttributes
SingleSource (ImageSource imageSource) ->
displayImage options ( position, imageSource ) uniqueId customAttributes
-}
SingleSource singleSource ->
displayMultiple options ( position, [ ( { top = 0, left = 0 }, singleSource ) ] ) uniqueId customAttributes

MultipleSources multipleSources ->
displayMultiple options ( position, multipleSources ) uniqueId customAttributes

ImageSource imageSource ->
displayImage options ( position, imageSource ) uniqueId customAttributes

displayMultiple : Options {} -> ( Position, MultipleSources ) -> Maybe String -> List (Attribute msg) -> ( String, Html msg )
displayMultiple { scale, transitionSpeedInSec } ( rootPosition, multipleSources ) transitionId attributes =
( transitionId |> Maybe.withDefault ""
, div []
(multipleSources
|> List.map
(\( position, source ) ->
let
pos =
{ top = rootPosition.top + position.top
, left = rootPosition.left + position.left
}
in
case source of
ImageSource imageSource ->
img
([ src imageSource
, css
((if transitionId == Nothing then
[]
else
[ Css.property "transition" ("left " ++ toString transitionSpeedInSec ++ "s,top " ++ toString transitionSpeedInSec ++ "s;")
]
)
|> List.append
[ Css.position Css.absolute
, Css.property "image-rendering" "pixelated"
, Css.property "transform-origin" "top left"
, Css.transform <| Css.scale2 scale scale
]
|> List.append
[ Css.left (Css.px <| pos.left)
, Css.top (Css.px <| pos.top)
]
)
]
|> List.append attributes
)
[]

TileSource { left, top, steps, tileset } ->
let
( i, j ) =
( left, top )

{ spriteWidth, spriteHeight, source } =
tileset
in
if steps == 0 then
img
([ src source
, css
((if transitionId == Nothing then
[]
else
[ Css.property "transition" ("left " ++ toString transitionSpeedInSec ++ "s,top " ++ toString transitionSpeedInSec ++ "s;")
]
)
|> List.append
[ Css.property "object-fit" "none"
, Css.property
"object-position"
(toString (-1 * spriteWidth * i) ++ "px " ++ toString (-1 * spriteHeight * j) ++ "px")
, Css.width <| px <| toFloat <| spriteWidth
, Css.height <| px <| toFloat <| spriteHeight
, Css.position Css.absolute
, Css.top <| px <| pos.top --+ (toFloat <| spriteHeight // 2)
, Css.left <| px <| pos.left --+ (toFloat <| spriteWidth // 2)
, Css.property "image-rendering" "pixelated"
, Css.property "transform-origin" "top left"
, Css.transform <| Css.scale2 scale scale
]
)
]
|> List.append attributes
)
[]
else
div
([ css
((if transitionId == Nothing then
[]
else
[ Css.property "transition" ("left " ++ toString transitionSpeedInSec ++ "s,top " ++ toString transitionSpeedInSec ++ "s;")
]
)
|> List.append
[ Css.position Css.absolute
, Css.top <| px <| pos.top
, Css.left <| px <| pos.left
, Css.width <| px <| scale * (toFloat <| spriteWidth)
, Css.height <| px <| scale * (toFloat <| spriteHeight)
, Css.overflow Css.hidden
]
)
]
|> List.append attributes
)
[ img
[ src source
, css
[ Css.property "object-fit" "none"
, Css.property
"object-position"
(toString (-1 * spriteWidth * (i - 1)) ++ "px " ++ toString (-1 * spriteHeight * j) ++ "px")
, Css.width <| px <| toFloat <| spriteWidth * (steps + 2)
, Css.height <| px <| toFloat <| spriteHeight
, Css.position Css.relative
, Css.right <| px <| scale * (toFloat <| spriteWidth * (steps + 1))
, Css.property "image-rendering" "pixelated"
, Css.property "animation" ("pixelengine_graphics_basic " ++ toString (steps + 1) ++ ".0s steps(" ++ toString (steps + 1) ++ ") infinite")
, Css.property "transform-origin" "top left"
, Css.transform <| Css.scale2 scale scale
]
]
[]
]
)
)
)


displayImage : Options {} -> ( Position, SingleImage ) -> Maybe String -> List (Attribute msg) -> ( String, Html msg )
Expand Down
74 changes: 63 additions & 11 deletions src/PixelEngine/Graphics/Image.elm
View file
@@ -1,9 +1,9 @@
module PixelEngine.Graphics.Image exposing (Image, fromTile, image, movable, withAttributes)
module PixelEngine.Graphics.Image exposing (Image, fromTile, image, movable, multipleImages, withAttributes)

{-| This module contains functions for creating images.
These Images can then be used for the _imageArea_ function from the main module
@docs Image,image,movable,fromTile,withAttributes
@docs Image,image,movable,fromTile,multipleImages,withAttributes
-}

Expand Down Expand Up @@ -37,8 +37,9 @@ image "https://orasund.github.io/pixelengine/pixelengine-logo.png"
-}
image : String -> Image msg
image source =
{ elementSource =
Abstract.ImageSource source
{ elementType =
Abstract.SingleSource <|
Abstract.ImageSource source
, customAttributes = []
, uniqueId = Nothing
}
Expand Down Expand Up @@ -87,13 +88,14 @@ fromTile { info, uniqueId, customAttributes } tileset =
{ top, left, steps } =
info
in
{ elementSource =
Abstract.TileSource
{ left = left
, top = top
, steps = steps
, tileset = tileset
}
{ elementType =
Abstract.SingleSource <|
Abstract.TileSource
{ left = left
, top = top
, steps = steps
, tileset = tileset
}
, customAttributes = customAttributes
, uniqueId = uniqueId
}
Expand All @@ -109,3 +111,53 @@ withAttributes attributes image =
{ image
| customAttributes = attributes
}


{-| it is possible to compose an image from a set of other images.
the two Floats are realtive coordinates so
```
((100,100),image "img.png")
=
((20,50), multipleimages [((80,50),image "img.png")])
```
sub-images loose the ability to be movable:
```
multipleimages [((x,y),image "img.png" |> movable "id")]
=
multipleimages [((x,y),image "img.png")]
```
instead use the following:
```
image "img.png" |> movable "id"
=
multipleimages [((0,0),image "img.png")] |> movable "id"
```
-}
multipleImages : List ( ( Float, Float ), Image msg ) -> Image msg
multipleImages list =
let
images : Abstract.MultipleSources
images =
list
|> List.foldl
(\( ( left, top ), contentElement ) ->
case contentElement.elementType of
Abstract.SingleSource singleSource ->
(::) ( { left = left, top = top }, singleSource )

Abstract.MultipleSources _ ->
identity
)
[]
in
{ elementType =
Abstract.MultipleSources images
, customAttributes = []
, uniqueId = Nothing
}

0 comments on commit 5db4977

Please sign in to comment.