We’ve spent the last 2 years working on Merek’s Market, a game about running a medieval shop and I thought it might be fun to do a deep dive on the development of the haggling mechanic and how that mechanic changed over the course of development. We’ll be looking at it from a design perspective so don’t worry, this won’t get too technical.
This post is also available in video format here:
Let’s look at haggling from a high level. What should this mechanic be? It should start with an introductory chat with a customer. There should be an element of reading the customer, either what they’ve said or what they’re wearing before you pick a price. It would be fun to get strong responses too. Perhaps a customer starts shouting if you try to overcharge them before they counter with a lower offer.
And if we convert this into some sort of rule set we’d get:
- A customer comes in and requests an item. Either directly or by talking some silly mumbo jumbo around the topic.
- You decide what item to pick for them and tell them the price you want.
- The customer can accept your price or counter offer.
- The longer a negotiation keeps going, the more upset a customer gets and they will eventually storm out.
- Once you agree on a price, the customer hands over the money and everyone is happy.
Little disclaimer: The below videos are development footage. You may see things which offend your eyes.
Version 1
We started with this basic but clunky set up. There’s a log of what the customer has said on the left, a menu for picking different items and a slider to set a price.
It works, it’s a good start but there’s so much information on screen at once it’s hard to tell what you should be looking at. There’s also a lot of clicks to get through and menus to open. On the whole, we can do better.
To Do:
- Camerawork. A static camera shot of the customer is drab, we can frame Merek and the customer better.
- Lead the player through the negotiation. Focus on what is happening at the minute and make it obvious what to do next.
- At the moment this is obviously PC only. There’s far too many menus and things to click on. Let’s look at trying to make it controller friendly.
Version 2
Straight away you can notice the difference with dialogue displayed as speech bubbles at the top of the screen. A lot of the UI that’s not needed when chatting has been stripped away leaving just the element we want the player to focus on. Something we deliberated on was only showing the current spoken dialogue and not everything the customer had ever said. It was the right choice to keep the UI clean and gameplay focused.
We’ve also pulled out the camera to frame Merek and the customer. This gives a little more context to what is happening letting the user know we’re haggling.
Selecting an item for the customer is now automatically brought up as part of the flow. It’s highlighted by removing other UI and shown in a simple layout that’s easily navigated with a controller.
The final big change here was to remove the ability to explicitly set a cash price and instead choose from a number of predefined options. It’s another step towards simplification and gives the player an impression of what’s a cheap price and an expensive price so much better. As a piece of UI it’s also using the width of the screen much better.
Once the customer comes back to you with a counter offer you’re given the opportunity to accept it or reject it. Everything is nicely laid out with your offer and the customers are shown clearly.
So that’s a lot of improvements. We’ve made a nice multi stage flow to shepherd the player through haggling but there’s still a lot we can improve on.
To Do:
- More camerawork! We can see Merek and the customer but it’s still quite static and underwhelming.
- Who’s Talking? Can it be made more obvious? A name and an arrow in the bubble aren’t the most revealing.
- At the moment item selection is just floating bits of UI. How can we improve this?
- The current set up shows price and separately profit. Let’s combine these, keep it simple and only give the player 1 figure to think about.
- It’s slow to decide whether to accept or reject after each round of negotiation. It takes the player out of the action. Let’s see what we can do about the offer confirm screen.
Before we look at the next round of improvements, I’ve fished this video out of the archives. This is a mock up our artist put together. The cuts between customer and Merek are great to show who’s currently negotiating. That’s definitely going in version 3!
Version 3
Aside from the lighting looking as if it was powered by a single candle, we made a lot of improvements here.
When someone is talking, there’s a nice live image of their face on the UI. This was a bit of a trick, there’s a copy of the customer floating in space with nice lighting and a camera stuck in front of their face. This gets rendered onto a render texture and used here. Anyway….
This next section is a little work in progress, the items should be on the shelves in the background but the camera zoom is a nice effect to show how it will look and tie into the environment nicely.
The UI on the whole is starting to look in keeping with the theme but the coin in particular is nicely contextual. It implies you’re setting a price without having to put a label saying ‘price’. The multiple numbers for price and profit have also disappeared leaving one easy to understand value.
Continuing with our theme of relentlessly stripping out and streamlining, the offer confirm screen has been merged into price selection. There’s no explicit additional step, you can choose to accept the price or keep negotiating from the same screen. Nice.
A huge leap since last time but as development went on, we kept seeing rough edges to smooth over and more things we thought we could improve upon.
To Do:
- You can charge 1000 crowns for a pencil and the customer keeps a straight face. Merek is also stood staring into space. Not quite the expert salesman you’d expect. We can improve these areas with animation..
- Cutting to the customer shows the shop from an angle we never intended. We might have to think a way around that.
At this point I got distracted and started to play with adding a little animation of Merek lifting an item onto the counter to show what they’re haggling over. Anyway, on to version 4.
Version 4
How shiny! When haggling Merek now has a set of conversation anims that give a little bit of polish and energy to a negotiation. The customer plays an anim based on how upset they are at your ludicrous prices. At this stage, our customer anims are a free asset store asset until the artist can build out our own set.
And the elephant in the room, the beautiful environment. We chose to create a custom environment that is loaded just for haggling. That meant we could optimize it to look great from the angles we know are going to be used. This was around the time we were starting to create different shops for Merek to own. Using the same haggling environment cuts the design complexity when building a new shop. We aren’t restricted by having to include haggling elements in all environments.
At this point, it’s starting to look really good and close to what we wanted.
To Do:
- Show the mood of the customer in a smarter way. Having an emoji to represent mood feels like a missed opportunity.
Version 5
We’ve now got custom facial animations for the live image to represent mood. This tidies up the UI but is also so much more visually pleasing.
The style of the UI has also been overhauled one last time. Once the designs had stabilized we got a specialist UI artist to spruce up the haggling flow.
We can’t see it here but there’s also a heap of quality of life improvements behind the scenes like the ability to fast forward or skip lines of dialogue.
A huge feature that I really really wanted was voice acting. It’s not something that many indie games have but a chatting and haggling mechanic benefits hugely from it. We sourced some great actors for the main and recurring customers and had about 20 voice actors who worked on the game in total. There’s lots of talent on Fivver and it doesn’t have to break the bank. Voice recording really helps bring this feature and the game as a whole to life.
Aaand that’s how we reached the final result. There’s no way we’d have been able to jump to version 5 on the first try. It took a lot of trial and error to find out what worked nicely and what areas needed to be improved.
If you want to see this mechanic in action, consider buying Merek’s Market:
See you next time!
Comments
There are no comments yet. Be the first!