Published on:
Review of what I last did
I finished the work I set out to do in my last update. I am happy with the decision I made to my approach to how I was organizing things on the front end. Creating another page that handled creating users and characters made dealing with bugs and add new feature much easier on the Multiplayer Test Page.
I was able to have my backend app running and then with two different browsers test the multiplayer functionality of the game. When I did an action that would trigger a websocket message in one browser, I could see the change happening caused by receiving the websocket message.
First images created
I made my own SVG images for this chunk of work. Originally I was going to use free assets that are online that you can use with permission. However I tried a few of those and I found getting them to a state where they were ready to use in my app was slow and they did not exactly match what I had in mind.
I made a few simple assets in Figma. I have used Figma before professionally, but more to plan the UI of a website that to create an asset.
I have not yet made system wide decisions on how I will handle image widths, heights, and aspect ratios, so things will look a little squashed.
Here are the characters I made:
What's next
Next I want to go deeper on what a user sees and what a users is able to interact with as the battle is going on.
Here are some ideas I came up with:
-
Items on map that characters can pick up
-
Calculate a characters movement speed and show how far a character can move in a turn
-
Selectable abilities for characters
-
Different visual states for which character is selected (player character vs. someone else's character vs. npc)
-
(Maybe) multi-room maps
-
Turn tracking for battles
-
(Maybe) logic for starting battles.
More planning needed
I think I will break these items across multiple chunks of work (at least 2). If I have smaller, well defined chunks of work, that makes it easier to work on this project consistently and efficiently. So I am going to do some more thinking about what items I want work on next, and what the best way to organize those items into chunks of work are.
Making a UI mockup
I also used figma to make a UI mock of what this could look like. It helps me visualize what the browser will need to render on the screen, and where I will need to add interactivity to the page.
Here is what I have so far:
