Hands: Monetisation and the Shop

 One of my major tasks on Hands was the creation of a monetisation system and shop. This involved connecting to both the company backend and the Meta one, all the way through to hooking up the UI and widgets and the gameplay too.

The finished shop

• The requirements:

There were four different things we wanted to sell in the shop; three types of cosmetics (skins, trails and slap effects) and toys, which can be spawned in once they've been purchased. There also needed to be a screen for special offers (the top icon on the right). We also needed the player to be able to actually use the skins and items they purchased, so after some discussion I suggested to the UI artist that the shop also double as the inventory itself - owned items would have a button to equip them if they were selected. This made the UI simple from a visual perspective, as well as ensuring players would be able to see (and hopefully buy!) the other skins in the shop while they switched what they had equipped. This also means that the defaults can be in the same menus, and the screenshot above shows the default hand.

This left the requirements for the feature as follows:

1. Players can see and select skins and other cosmetics, as well as scroll through the options
2. When an item is selected, it can either be purchased or equipped(/spawned in the case of toys), depending on if it is owned
3. Players can buy soft currency either directly, or be prompted to if they attempt a purchase without enough
4. There is a special offers screen, showing bundles available for purchase. Items on the special offers screen should not show in the other menus until they have been purchased, as the only way to purchase them is as part of the bundle (this was a hard requirement due to it being possible to purchase bundles outside of the game, to prevent the players from buying the same item twice, once from the bundle and once outside of it)
5. Upon buying an item, the player should be prompted to equip/spawn it

• Backend hookup:

I was already familiar with the company backend, but I'd not worked on the monetisation side of things before. I was very interested to learn how external purchases actually connected to the game. The system for this turned out to be using skus; a sku is just a short code (in this case effectively a string) identifying the purchase. This sku is used both to request the purchase from the Meta API (taking the player out of the game and opening their purchase flow), and to tell the game backend that a purchase has taken place, at which point the player is given their item and it can be handled in gameplay code.

• The UI: 

To coordinate with the UI artist, this was done in widget blueprints. Still, just because this was being done in blueprint rather than C++ didn't stop me from ensuring that the logic was easy to read and understand. One of principles I had for this was that all core logic should take place in the base shop blueprint. While obviously functions which only affect sub-widgets should be in the sub-widget, I made sure they were all clearly named when that was necessary; the rationale being that someone else looking at the blueprint should be able to understand the entire flow from the base widget, without having to open sub-widgets. As well as this, I made sure that the actual blueprint made sense, with only clearly named events in the event graph laid out vertically and any more complex functionality in functions.

• The result:

The video above shows the basic shop flow, including moving between the tabs, scrolling, selecting items, buying an item, buying currency and equipping the items. I actually really enjoyed creating this feature, I think mostly because of how it allowed me to work closely with a UI artist, and really bounce ideas off each other and have some really constructive discussions about how to organise things. It was great implementing the cool polish features they provided to me such as hover states on the buttons and an animated second colour highlight for the higher rarity items!

• And also... a bit of design work

One other part of this feature I really enjoyed was something a little outside a coder's normal wheelhouse, but I really enjoyed it. Basically, our design had space for a description of each icon and we hadn't chosen player facing names for the items before the shop was completed. It being a small team on the project, it fell to me to do the first pass of adding fun names and descriptions to each item. While a couple of them didn't work that well and were improved in a subsequent pass, there were a few good ones - for example the radioactive skin ("Of course it's safe! That clicking noise? Oh, it's probably just my watch..."), the skeleton skin ("I'd make a bone joke about this but it's not humerus...") and the tiger skin ("Tiger, Tiger, burning bright, Except now you're a hand, alright?"). I was really pleased when the lead designer said he was genuinely laughing at some of the descriptions!