Signed in as:
filler@godaddy.com
Top Down Adventure Game Builder
I've dabbled in games for Power Apps pretty much for as long as I've developed serious business apps in it, but there's something exciting about doing something a little more complex than chess, or battleships. That's not to say chess is simple, but we can render an 8x8 board and some pieces fairly easily in Power Apps. Hell, we can even use Wingdings to use text characters as chess pieces!
Thinking about designing a game in the exploration or role-playing genre, it was clear this would be a very different undertaking. Whereas, as we've mentioned, chess takes place entirely on a small grid, and has fixed rules that are written for us, this game would be entirely down to me. Game world, graphics, mechanics, objectives, UI, audio, these are a lot to consider. And yet, this seemed like the natural thing to do to really challenge myself.
As I built, one thing became apparent. I needed a game engine. Something that I could inject some data in, and get a segment of playable game out the other end. Well, that is just like any other app we build!
The Engine
The game takes place on a single screen. On that screen, we have enough objects already placed that cover all points of interaction that could exist in any given game screen. The objects include clickable points of interest, lines linking those points (showing routes that can be taken), and popups that show details and actions that can be taken for a selected point.
This means 8 points of interest and 49 lines are placed on the canvas! The lines exist for every point of interest to all other points of interest. Lines are actually HTML text controls that draw a simple SVG line inside them. Based on the relative position of the two points, the line is drawn in different directions.
In our datasource, we can store both X and Y positions (as % to handle dynamic screen dimensions), and Pre and Post dependencies. The dependencies drive the visibility of connecting lines.
During play, we store a variable with the current player position in the current screen. As there are 8 points of interest, this number is between 1 and 8. Encounters that are before or on the current position are highlighted as open for interaction, and their connecting lines are opaque. Other points and lines are translucent to help guide the player's eye.
Components
The app makes uses of several components to minimise the duplication of work. Notably, the popup that shows when encounters are selected is a common component that can be reshaped, resized and restyled to fit the selection.
The component has behaviour properties configured so custom events can be fired depending on the context.