Hello,
I’m trying to develop a board game in Purescript, running in the browser. I already developed the game logic and game state in Purescript, I’m quite happy with it.
Regarding the UI, what technologies would you advice to use?
All the assets will be in SVG (board background, tiles).
My tiles look like this:
I need to:
- rotate it,
- change the tile color,
- change the number in it.
How would you go with this?
I also need to be able to “select” a tile and move it with the mouse.
I started out using Halogen. I can load the SVG assets using image:
import Halogen.HTML
import Halogen.Svg.Elements
import Halogen.Svg.Attributes
tile :: forall w i. HTML w i
tile = image [x 0.0, y 0.0, width 36.0, height 36.0, href "assets/my_tile.svg"]
I can load them one by one and position them precisely in layers one on top of the other.
Is it a good approach?
2 Likes
I think you will be happier if you put your complete board into a SVG element (positioning much nicer/saner compared to using absolute (pixel-)values on normal elements.
Depending on how complicated your SVGs are I’d put those directly into PureScript-SVG elements (you can easily translate those - I do this on occasion when I have a small number of FontAwesome icons I want to use) - if not the parser (you mentioned on Reddit I think) might be a good way to go too.
2 Likes
I didn’t understand your comment: do you mean using svg instead of image?
Also, I didn’t like to use pixels positions all over, it looks tedious. I’d prefer to use my own coordinate system for tile positions (e.g. for a chess board it would be a 8*8 coordinate system)
Yes, I tried to use Purescript SVG elements to create the tiles from scratch. The icon in my post is simple enough, it could be created with some path or some rect. But I didn’t really liked this solution: in the future the tiles will become more sophisticated, probably hand-drawn.
My idea was to have the board be a <svg viewport....> element itself - this can have other SVGs as children and you can transform (translate, rotate, …) those relative to the parent-svg (the board) - this way you can basically have the board-svg be all of the space you want, use viewport to get into a nice coordinate-system for your game-board and place your tiles inside.
If you only need a grid you could use flexbox or grid too but IMHO it’s more complicated to move stuff around.
(EDIT thought I had a good example but forgot I used a Canvas there)
Svg can very quickly get laggy if you involve continuous updates (for stuff like drag and drop). Although a bit harder to work with from Purescript, I’ve had better experiences drawing to a canvas in the past. Might have to take this into account depending on the game you’re making.
1 Like
Yes - that’s why I did a few clones (Tetris, 2048,…) using canvas - but if you’ve got your tiles in svg already and there is few animations SVG is usually fine.
1 Like
Yes I considered canvas as well, but I found its interface quite horrible (very imperative, global variables…). I found SVG much better: it looks like HTML, it’s declarative, it can be styled with CSS and it can even be modified directly in the browser (via “inspect”).