SVG game at 60fps

[xarvh]

I wanted to see if I could write a feature rich game in a purely functional language.
Multiplayer requires gamepads.

https://xarvh.github.io/herzog-drei/#fps=1

I am not very good with graphics, so I decided to use SVG, and was really surprised that it easily reaches 60 fps on Chrome/ium. Firefox seems to be much slower, but I hope to improve it with some optimization, particularly of the background render and the pathfinding algorithm.
I don’t think I could have done this in React. =D

[gampleman]

Very cool and so far my favorite Elm game!

Would be nice to have some instructions though. I had to read a fair bit of source code before I figured out how to play effectively (and I still don’t understand everything, for example what are the Vampires?).

So how was it writing such a complex game in Elm?

[xarvh]

Wow, thanks. =)

Thanks for the feedback, I’ll definitely add an “how to play” button.

“vampire” is just the normal attack of the Blimp mech when flying: it steals life from nearby enemies.

Writing the game was a lot of trial and error. Elm has a lot of documentation about TEA which is a very hierarchical architecture (things interact with their parent and children only), but I wanted a structure more similar to Unity’s, where all entities belong to a flat hierarchy and everything can interact with everything else in any way.

I ended up using the architecture described by Carmack http://functionaltalks.org/2013/08/26/john-carmack-thoughts-on-haskell/ and unfortunately some optimizations he talks about are not available because of limits in Elm’s types.
The TL;DR version is “use partially applied functions to describe game state changes” and I am amazed by how easy is to prototype stuff and add weird effects to the game mechanics, which is something I struggled with my previous game.
Now I can definitely see FP being really good for games.

[gampleman]

Also a small piece of feedback on the graphics: I think adding a shadow underneath the flying units would make it a lot more obvious when they are flying and when not.

[xarvh]

It is a good idea, thank you. I will make a few experiments.

[kevinyank]

Really impressive! Nice work, @xarvh!

[dirkbj]

Very fun! Great work! I am working on doing games with SVG as well.

I noticed that the faster the rendering is, the faster things seem to move. Adding a speed normalizer would help the game keep a consistent feel independent of frame rate.

Seems that no matter the browser, though, it really uses a lot of CPU, especially as the game progresses.

[xarvh]

Thanks Kevin!

@dirkbj This is strange. The game should integrate properly on the time delta according to requestAnimationFrame. What browser are you using?
The main CPU hog is the pathfinding, unfortunately Elm Dict is a bit slow (the same implementation in pure js is about 10 times faster).
I have plans for caching it, or use the js version via a Port, but it will have to wait a while.

[dirkbj]

If you are using a time delta, then it wasn’t your code, but was probably my CPU being overloaded. I was just sharing an initial observation.

Looking forward to the next version.

[system]

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.