In this blog I talk about some of the personal programming I do as a hobby. By trade I'm a Java and database developer but I've dabbled in Haskell, front-end development, etc. I'm currently working as an architect but still enjoy getting my fingers dirty in code!

Saturday, December 08, 2018

A little RPG in React Native

I
built a little role-playing game in React Native. I tried to build the type of
game I like playing, with quests and interactions with non-playing characters,
while learning some mobile UI programming tricks.These are some of the main points that I took
away:

The initial setup was a bit
involved, probably because I'm not used to develop JavaScript
applications. Getting the right code to properly do the plumbing between
React, Redux,React Navigation,
tests, etc. was a bit of a hassle. Obviously this has to be done once and
then you can concentrate on writing the functional code. As I noted
recently, then upgrading to newer versions of your dependencies can be a
hassle!

I was happy with my
declarative approach to the game world. I don't think it would be
manageable to do otherwise.I
define as JavaScript structures the world itself: the different places and
how they communicate, the items they contain, etc., the non-playing
characters and the possible interactions you can have with them, items and
their characteristics, monsters and spells. This gives me an immutable
representation of the start world, and the state of an actual game just
has to store the modifications from that initial state

This of course could mean
that I (or somebody else) could reuse the game mechanics for a totally
different adventure!

I of course used of Redux to
manage state. The state is only modified by Redux reducers, so everything
the player does in the UI just becomes actions, not explicit state
management operations. I combine several reducers, each reducer being
responsible for modifying one section of the global state, which makes
each reducer simpler, but fragment the code. For example when the player
takes an item from a room, one reducer adds the item to the inventory,
another removes the item from the room, so maybe there's some potential
for bugs there

I found the integration
between React and Redux easy to use: you simply define the mapping between
the state and components properties, and between component interactions
and Redux actions.

I abused a little bit Redux
to implement combat: combat holds a kind a mini state for each fighting
round, and then the result of a fighting round both is represented in the
UI ("the rats bite you for 2 damage"), and impacts the global
world.

I didn't spend too much time
on the UI, just using basic React Native components. I found some of the
layout hard to do correctly, and styling components is not intuitive when
you're not a CSS expert. Maybe I should take a CSS/Design course, because
you can tell from my UI designs that I'm a programmer :-)

All in all, writing in modern
JavaScript was nicer than expected, even though I think using a stronger
typed language would be better. If I had to do another similar project I
would probably try to use Typescript. I liked especially the object spreads to update parts of structures and the use of consts.

I used Expo to test on a
tablet, I didn't try to actually generate a final application outside of
Expo, I haven't looked at all on how to distribute the game as an app.

All in all, if was an enjoyable experience, but of course designing a full game instead of just a prologue you can do in 5 minutes would be a different type of endeavor...