Shadows of Mice and Men


Another month down, and a crazy one at that. For those who don't know this is purely a spare time project for me and this month my day job got a bit busy again. I didn't feel like I got very much done this month at all - I'll try and write out what I can below. If you haven't tried Tales of Yore already...

Go Play Tales of Yore

Reference Material 

This month I've become kinda obsessed with getting reference books on monsters and creatures from fantasy worlds. I figure if I'm going to be building for a while I'm going to want to consult the experts in the field. This has lead me to have a slight obsession with eBay and finding old RPG books.


They really are quite wonderful, especially as a source of inspiration for the world. Being able to pull a book down, open to a random page, and find out about something entirely new is really great. Even if its not monsters being defined, but places and locations, these books are fantastic at taking you to another place to explore in your head.

In more office news, I used Patreon pledges this month to buy myself a white board. I've always been used to working with them and having everything in front of me really helps. I even managed to put it on the wall myself - which for me is quite something.


Trading

One of the big additions this month is trading between players. They can now swap items for gold between themselves and theres already a roaring trade going on. This along with more additions to harvesting and crafting has lead to many players cornering the market in trout :)


Implementing trading also meant providing some way of interacting player to player. This took a lot of back and forth since there were immediately opportunities for griefing. After a round of testing with the regular players I feel like we have a nice balance of interaction without abuse. The plus side was adding this menu for player to player interactions allow me to make "party" an easier option along with a nice option to follow another players. The regular players spend a lot of time guiding the new ones around the world, so following another player is really useful.

Dark Forest Update

I said I'd try and make a content update each month, and this is no exception. Though this time I have struggled to get it done in the month. The current update is named "Dark Forest" and expands the world a bit more - along with adding more monsters, npcs, items and quests. I'm about half way through so hopefully it'll be released in the next week.


I'm not going to say a lot more about it since theres a few nice discoverable bits in this update. I really hope I can get it pushed out very soon now.

Steam

The big ask was completed this month, the game is now on Steam although not quite released yet. It's slowly building up some wishlists and followers there. Releasing a web based on steam wrapped in Electron isn't really that tricky. Making it interact with the Steam API without a native library is a bit more difficult.


If you find yourself in the same boat there are essentially two things you need. 

  1. To have login with Steam via the web (https://github.com/SmItH197/SteamAuthentication)
  2. To have access to the Steam Web API (https://partner.steamgames.com/doc/webapi)

Outside of logging in, pretty much everything is provided by the (rather odd) web API. It's not some nice standard but it all seems to work.

You can check out Tales of Yore on Steam below, don't forget to to wish list!

Tales of Yore on Steam - Wishlist me!

Shadows and Reflections

I've been looking at ways to make the game look nicer and more solid. Reflections have been the in game for a while and I've been meaning to tackle shadows for quite a while. I gave myself some leeway to experiment this month and the results were pretty good. 


I was asked to explain how these things worked, so here we go. First everything is really done the same way with a slight tweak. 

The game actors/npcs/players/monsters etc are all rendered as whole sprites - that is the complete character is in one image. This is good for reflections and shadows since we know where the top and the bottom of the sprite are. However, for things in the world - like the lamppost above - it's all rendered in 8x8 tiles, from a tile map perspective the game doesn't know where the lamppost starts and end, it just sees a series of tiles. 

So - first thing, if you're rendering this way you'll need a way when drawing to know that you've reached a shadow caster - and what size (probably in tiles it is). In Tales of instance the lamppost top left tile is identified with a width of 2 and height of 3. This means that the shadow caster sprite can now been identified and the tile map can be treated like the rest of the sprites.

The next step is generating the reflection and shadow sprites and rendering them in the right layering. Bear in mind that Tales doesn't use anything other than the HTML Canvas, so it doesn't do anything with WebGL let alone shaders, it's just pure sprite drawing.  The layering looks sort of like this:


We start with the shadow caster/reflection sprite - in this case the little wizard. First we draw any reflective layer there is (water in this case). Next flip the sprite over and draw it at half alpha (half transparency). This merges the reflection nicely into the reflective layer so it appears that we're in the water. Next draw the land and world sprites (the green grass and coast in this case). At this point if we don't want shadows we could just draw the main sprite and we're set, but let's look at shadows.

Shadows are created by rendering the sprite in black (just replace any non-transparent pixel with black). Then scale it 50% vertically to make it appear on the ground. I also skew the sprite every 8 pixels by one pixel to the left to make it spread. This is really only relevant to tall sprites though. The key after scaling is rescale the sprite so its pixels still match the original pixel size, my initial attempts scaled and ended up with half size pixels which really made my pixel art skin crawl. Once you've got that image, render it one at 25% transparency, offset it by one pixel and render it again at 25% transparency. This gives the little softness around the edge. 

Finally combine that the land/world sprites rendering previously and stick the player sprite on top. Ta da! Reflections and shadows. The nice thing about the reflections is since they're on a different layer they disappear appropriately as the player moves around. Even with an extremely low resolution shadow as it is above the effect of dynamic shadows is quite extraordinary - take off your hat, and your shadow changes! 

The Big Map

After the busy month I felt the need to relax a little so added some pixel art to my work list. One of the players has suggested a world map on the website that would show the location of the players online at any given time. I loved this idea but didn't want to give too much about the game world along the way.


The discussion became about how many landmarks or place signs to show on the map and it was rather heated! Where I am right now as shown above is there are paths and land marks shown but no place name. If you're a player that has explored the world, you'll know where things are. If you're new to the game it's just a big open world.

Moderating Internationally 

Final thing this month was an unexpected rush of players that weren't english speaking. Of course, like any sensible person, I have no problem with anyone playing my game - be they a different colour, have different abilities or speak a different language. Everyone should be welcome but it did pose a problem, how can I moderate my family friendly game if I can't understand whats being entered into chat. 

Initially I started cutting and pasting into Google Translate but this got quite painful, so the game is now integrated with DeepL which is a really good translation engine. All messages are passed through the translation engine and before they're sent to moderation on discord chat they're changed to English. This really is a great feature that is a nice cross over from what I do for my day job. 

I'm probably going to make the translations available in game too - but due to cost you'll possibly only have the option of translating everything in chat to English. It really would be great to have some people make friends without having to speak the same language (assuming of course they can get by reading English)


And that, was February, onwards into March where I get to become a year older in integer values and hopefully get this next content push out. After that - well, we'll see - details for the future shared on patreon! :)

Files

tales-of-yore-html.zip Play in browser
Version 127 Apr 01, 2022
tales-of-yore-html.zip Play in browser
Version 40 Mar 02, 2022

Leave a comment

Log in with itch.io to leave a comment.