orasund / pixelengine

a graphic engine for elm

PixelEngine

PixelEngine is a graphic engine for rendering turn-based pixel games.

Games can either be stand-alone documents or imbedded in a website

Tutorials

• Tic Tac Toe Beginner Tutorial, uses clickable Tiles.
• Slot Machine Beginner Tutorial, uses animations.
• Snake Beginner Tutorial, uses keyboard controls.
• Space Invaders Advanced Tutorial, uses a bordered Grid.

Games made with this Engine

• Asteroid Miner - Factory Game (src) A Factorio-like mini games. Playable only with a mouse.

• Dig Dig Boom - Rogue-like Game (src) The project that started everything. Mainly focusing on Tilesets

• Mini World War - Card Game (src) A Risc-inspired fast card game. Its a 2-Player online game written purely in Elm. (Use the Mouse to play)

• Cult Simulator - Idle Game (src) A not so intended usecase that tryed to figure out the edges of this library. It only uses the MultipleImages Type. (Use the Mouse to play)

• Ruin Jump - Platformer Game (src) I wanted to have a plaformer with a jumping mechanic. I also intentionally made it a bit janky. (Use the Arrow keys as well as SPACE to play)

• hennydamonk/elm-wack-a-mole (src)

If you have created a game with this engine, please let me know.

Should I use this Package?

This package follows a few philosophies:

• Let CSS handle all animations - I feel like functional programming should describe reactions to some events. Animations are normally running all the time and not a reaction. Addionally by getting rid of an infinite game loop, we can use the time-travel debugger.
• Pixel games first - There are a few optimizations to ensure crips pixels as well as good old low-frame animations.
• Demand driven features - There is no roadmap. I intend to use this engine for all my games. If I feel like I can't make a game, because my engine is missing a feature, I will add it. (Please feel free to ask if you are missing a feature.)

When to use it:

• The game is turned based. (Board Games, Rogue-likes games, Puzzle games, Turn based strategy games)
• The game has an idle state. (Farming 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 game loop. (Platformers, western RPGs like Zelda)

Motivation

I had just watched a talk about the time-travel debugger of Elm. So I wanted to test it out for my next project: A little game.

The graphics engines that I could choose from where

• elm-2d-game
• elmo-8 (currently outdated)

Both used a loop to draw animations and therefore did not support time travelling and besides elmo-8 couldn't even render pixel graphics properly.

So I decided to try something different and to use HTML and CSS instead of WebGL. This way I could let CSS handle the animations. I knew that my little project was not a universal game engine, but for very specific games it might be just right.

Upcoming Features

• Console - It would be great if all games written with this engine would have a common way how the interface looks like. I am mainly thinking of a PICO-8-like style, but i would like to provide a few different GUIs and start screen.
• Modular Transitions - For now I do not expect this will ever be done, just because its a very complex problem.
• Particles - Maybe using BrianHicks/elm-particle?

Upgrading

• To 6.0.0
  • Moved Location and Grid to Orasund/elm-game-essentials
• To 5.0.0
  • Please follow the changelogs.
• To 4.0.0
  • program and programWithCustomControls are now renamed to game and gameWithCustomControls.
  • This package now uses avh4/elm-color for colors.
  • For styling use Html.Attributes.style.
  • renderToScale replaced usingScale, but normally Graphics.program is the better option.
• To 3.0.0
  • First follow the error messages of the compiler
  • Next set the scale of your game to 1. In the new version the scale feature scales the entire game.
  • If you want keyboard support use Graphics.program. It will also take care of the new way scaling works.

pixelengine's Issues

Similar framework

I wrote a 2D Elm game framework called Messenger and it has many nice features.

Our team developed a game called Reweave based on this framework.

I think Messenger are more flexible and you can use it to design almost any game (modularized, object-oriented).

I would appreciate if you could let me add a link to my project in your Readme. I hope that more people can see my framework :)

Hope you like our framework & game!

Converting tiles to images loses custom attributes

I Wanted to be able to layer tiles, so I implemented my own tilesArea as shown below.
But in this case, custom attributes (such as those added with .monochrome) are not rendered.

tiledArea :
    { rows : Int, tileset : Tileset, background : Background, rowsPerTile : Int }
    -> List ( ( Int, Int ), Tile msg )
    -> Area msg
tiledArea params list =
    PixelEngine.imageArea
        { height = toFloat <| params.rows * params.tileset.spriteHeight // params.rowsPerTile
        , background = params.background
        }
        (list
            |> List.map
                (\( ( col, row ), tile ) ->
                    ( ( toFloat (col * params.tileset.spriteWidth // params.rowsPerTile)
                      , toFloat (row * params.tileset.spriteHeight // params.rowsPerTile)
                      )
                    , PixelEngine.Image.fromTile tile params.tileset
                    )
                )
        )