Making a game with Elm and Lamdera by Martin Stewart

September 13, 2023

In the presentation Making a game with Elm and Lamdera, Martin Stewart discusses his experience creating a multiplayer Town building game called Town collab using Elm and Lamdara. He shares how Elm’s functional programming language and Lamdara’s framework helped him solve issues related to game logic and front-end and back-end development. Martin also talks about handling conflicts, trains, and cursors in the game development process, and the benefits of using Elm for game development, particularly for webGL and rendering. Throughout the video, he emphasizes the importance of low latency and full control over the UI using webGL. However, he also acknowledges the challenges of working with webGL, such as loading assets and accounting for device pixels.

Making a game with Elm and Lamdera: A comprehensive overview

Martin Stewart presented Making a Game with Elm and Lamdera, where he shared his experience developing a multiplayer town-building game named Town Collab. Inspired by the classic children’s game Lego Loco, Town Collab allows players to construct buildings, plant trees, and lay down roads on an infinite canvas. Leveraging Elm, a functional programming language, and Lamdera, a framework utilizing Elm for both front-end and back-end development, Martin has created a seamless and interactive gaming experience. Here’s a detailed look at the key takeaways from his presentation.

 

Introduction to Elm and Lamdera

Martin began by introducing Elm and Lamdera, highlighting their significance in the development of Town Collab. Elm is renowned for its simplicity and strong type system, making it an ideal choice for functional programming. Lamdera, on the other hand, facilitates a unified approach to development by using Elm for both the front-end and back-end, thereby solving the problem of rewriting game logic in different languages. This unified approach enhances efficiency and consistency in game development.

 

Handling conflicts and synchronization

Drawing an analogy to Git, Martin explained how Town Collab handles conflicts. Each change in the game, such as placing tiles or committing code, is treated like a commit. When a conflict arises, local changes are rebased on the latest main commit, allowing players to see their changes immediately while waiting for server confirmation. This method ensures a race condition-free environment, providing a smooth and reliable multiplayer experience.

 

Managing game elements with Functional Programming

Martin delved into the specifics of handling various game elements like trains and cursors. In functional programming, which Elm excels at, the order of messages causing different versions of tiles to move is irrelevant. Only the latest position of a cursor or train is important. This characteristic simplifies the development process, eliminating the need for complex race condition handling.

 

Advantages of Elm’s WebGL package

One of the standout features of Elm in game development is its Elm Explorations WebGL package. Martin highlighted its advantages over direct browser API calls for WebGL, including type safety and better error messages. This package allows developers to define rendering declaratively, with efficient flag management handled by the package itself. In Town Collab, rendering is optimized using 16 by 16 tiles for performance, with quads used for drawing various images. A texture atlas consolidates all sprites, and a WebGL shader enables color customization, enhancing the game’s visual flexibility.

 

UI development with WebGL

Martin also discussed the pros and cons of using WebGL for both graphics and the user interface (UI). By achieving a “zero DOM experience,” he gained full control over the game’s look and feel. However, this approach also posed challenges such as limited accessibility for users with screen readers and slower throughput due to JavaScript reliance for DOM-related computations. Despite these drawbacks, the control over the UI provided by WebGL proved beneficial.

 

Achieving low latency and interactive gameplay

Low latency is crucial in game development, and WebGL plays a significant role in achieving it. Martin showcased the user interface of Town Collab, demonstrating features like tile placement, color changes, and structure building. The game includes a settings page, an invite system, and a mail system for user interaction. Although using WebGL requires more initial setup than traditional methods, it simplifies long-term development, particularly for text rendering.

 

Overcoming technical challenges

Martin shared insights into the technical challenges encountered, such as handling device pixels in WebGL and aligning textures correctly. Unlike traditional web development, WebGL requires consideration of actual device pixels, ensuring textures are not stretched or blurry. He acknowledged the limitations of the Elm Explorations WebGL package but highlighted its ability to load textures and meshes on demand.

 

Conclusion and future prospects

Martin Stewart’s presentation offers a comprehensive view of developing a multiplayer town-building game using Elm and Lamdera. By integrating these technologies, he achieved a seamless, interactive, and visually appealing game. Town Collab exemplifies the potential of functional programming in game development, promising a future where developers can create sophisticated and reliable web applications. Martin’s work underscores the growing importance of functional programming languages like Elm in the tech industry, hinting at a promising future for functional programmers.

 

Additional resources

Check out more from the MeetUp Func Prog Sweden. Func Prog Sweden is the community for anyone interested in functional programming. At the MeetUps the community explore different functional languages like Erlang, Elixir, Haskell, Scala, Clojure, OCaml, F# and more.