Dev Blog 5/22/2020

Green Box Conundrum

Welcome back to the Little Squid Dev Blog!

This week at Little Squid, we:

  • spent some time applying to another convention
  • experimented with some background and character art
  • adjusted the project's file structure and tweaked some other back-end engineering stuff to help going forward
  • business stuff: i.e., calculating things like our burn rate, A/B testing our hooks, drafting some promo materials, and a few legal items 
  • got office chairs (our backs were hurting)

That about covers it for an update this week. But after doing a short update last week, we figured this week could be a good opportunity for something a bit more in depth. This dev blog is going to look at one of B-Side's design challenges that has prompted a bunch of feedback and suggestions from playtesters.

It's definitely a long one, but it has neat pictures, gifs, and even a small look at some past B-Side footage! We hope you’ll find the thought processes behind some of the game’s design interesting 😊. Don’t forget to let us know what you think in the comments!

What's the topic?

For those who didn’t have the chance to playtest the game, here’s a quick look at what we’ll be talking about.

Do you see that green box on the screen moving “with” the player?

Many people from the first playtest (40% to be exact) said that the green box should be removed and they would have liked it more if it wasn’t there. The biggest reasoning being that the box made it too easy to progress. However, as we’ve said before, this box and the problems that it either causes or solves is the root of the gameplay in B-Side and represents one of the biggest design challenges that we’ve had to deal with. I wish it was as simple as just removing it, but alas, we don’t think it is. And now I'm going to talk a little bit about why!

KEEP IN MIND that I’m far from an expert on game design. Everything I'm going to be discussing is just my view on the design of B-Side in particular. Some people may have different opinions on the design or might not agree with my thoughts on it all and that’s totally okay. There are concrete design principles out there but so much of game design is subjective and people who have fresh eyes and aren't developing this game surely will have different ideas than those who are in development and are looking at this stuff all day every day.

But anyway...seriously, this has been my nemesis throughout all of development. There’s so much work that happened and a ton of iterations to get to the point of just having a green box that it may be rather surprising to many people. But why has this been such an issue? Let’s break it down a little bit...

What is the gameplay in B-Side?

It’s essentially a maze, with some extra puzzle mechanics layered on top of it. But instead of being able to freely move anywhere in the maze, the paths are “broken” and the player needs to figure out how to move into the correct positions so that when they flip the world they land in a "safe spot” and can continue moving. That’s the single most important part of the game – being able to tell when it’s safe to flip and continue moving. There’s also obviously obstacles and hazards that are in your way when you’re trying to move to those “safe spots” - that’s where the extra puzzle mechanics come in.

What happens, then, if the minimalistic art direction you’re going for makes it difficult to tell where exactly you’re going to end up? When do you make that ever so important flip? In my internal experience testing it everyday, it gets reeeeally hard to progress unless you already know the correct way through the level and exactly where to position yourself for each flip. There’s just very little to reference when looking at the level to nail down what your position actually is. This could probably be solved, or at least remedied a bit, by some more specific art direction and skill - i.e., more distinct landmarks throughout the level to reference your position to. Or it could be solved by just adding a grid to the background, or perhaps grid coordinates.

Past attempts

Here’s an older build of the game from almost a year ago. This ‘orient the player’ issue had been present for a while and I had gone through a few iterations of attempted fixes. In this build I’m using a few different things to try to orient the player, or at least let them know where it’s safe to flip. Can you spot all of them?

Looking back at this, it’s pretty bad overall but I like some of it.  

First, there’s the red line in the center that’s obviously just to show where the center of the screen is – this is okay but ultimately made the level look a little busy and looked out of place. Maybe it was just the red color?

Second, there’s a grid in the background but only around where the player is and on the opposite side of where they are. It looks weird and doesn’t help all that much. A grid with double the amount of lines (so that it lines up with the grid that the levels are actually on) looked even worse, trust me.  

Third, there are check marks that appear on the opposite side of the screen after a flip. These were meant to show the player where they were in the previous path when they executed the flip so that they have a reference point when moving around. “Oh, I was at the tip of that path when I flipped and made it safely here so keep that in mind." I personally liked these check marks but they didn’t really help in the long run - you just weren’t looking at or for them.

Lastly, and in my opinion most importantly, there’s a little green outline around the areas of the path where it’s safe for the player to flip the world. It might be a little hard to see because of that ugly grid in the background, but it’s there. And it’s only there when the player is getting closer to the safe spot.

Green outlines

I liked this green outline showing the ‘safe spots’ for a long time. It accomplished a couple of things. It gave players an idea of what to expect when flipping the level and forced them to explore around. “Green = good, so I need to find more green." Unfortunately, I think this led to too much mindlessness within a level. There was never any reason to look at the opposite side of the screen (which I’ll get into why I think that’s bad). As long as you were in a green outline you were safe, so you might as well flip and keep moving. There was no strategy in the way of looking at where the flip would lead and if that was the way you ultimately wanted to go. I wanted a way for the player to understand that they could safely flip the level but ALSO be able to look at if it was worth flipping in that particular spot.

For me, that meant that the player would HAVE to look at the other side of the screen. This would mean they’d see the whole level and start lining it up in their head and have a better idea of where to go. There was a little bit of this in the check marks and the grid with its corresponding opposite position, but those weren’t really causing the player to look at the other side of the screen as much as they should. That’s where this green box came in.

How do I look at levels in B-Side?

It may be beneficial to see how I look at levels in the game to understand why I think looking at the opposite side of the screen is so important, so here’s a picture I whipped up real quick of a simple level to demonstrate it.

When I load into a level I’m able to take a quick scan and mentally line up where the connections in the level are if it was to be flipped – you can see those connections where the blue outline overlaps with the black path. It requires me to look at the whole screen.  

Side note: this picture showcases some other fun concepts about levels in B-Side, like the impact that “safe spot” placement has on difficulty. Can you guess what I mean there? A topic for another time...

I recognize that visualizing how something looks when it’s flipped is not an easy thing to do for everyone and the fact that I’m making all of these levels is probably why I look at them this way. But it’s very helpful for me to be able to see what the “critical path” is.

Let’s look at this level as it would be seen normally.

If you forget about those outlines you already saw, can you tell exactly what to do and where to go when you look at the picture? What about if we move down to the first branching of the path?

Do you know right away which way to go? Or would you need to go down one of those paths and start experimenting? If you have to start experimenting, that’s totally cool and encouraged but when the levels get more complicated there will be a LOT of experimenting. It would probably be overwhelming.

0_0 this one seems hard (it is, but more so for the concept I briefly mentioned in the side note above)

What if we go back to that point in the easier level where we have a choice of direction and add the green box that marks your position?

It’s likely now (I hope) that it’s a bit clearer where you should go to progress successfully. Or at the very least, you can see roughly how far in each direction you’d need to go to get to a “safe spot." My assumption was that if a player could do that, after a while they would start to consciously (or unconsciously) line up the levels in a similar way that I do – by seeing where “safe spots” were and piecing together which string of “safe spots” would lead to the end.

Well you know what they say about assuming...don’t do it.

It turns out that, yes, the green box encourages looking at the other side of the screen and promotes better spatial awareness by knowing where you’ll end up after a flip and how that translates into where to go afterwards. But in reality, you barely ever have to look at your playable character again. You can just look at the green box and move around that way.  

It also led to a similar result that those green outlines from way back when did, just not quite as badly. Players can mindlessly move around and see where the green box lines up with a path, flip, and keep going without the need to think whether it’s the right way to go or not. As long as they’re going to be safe, who cares?

What do we do now?

That is the question isn’t it...well there’s always things to try.

We could remove the green box and not replace it with anything. Maybe this isn’t as big of an issue as I’ve been fearing and players are able to orient themselves just fine without a marker or anything.

We could set the green box to toggleable so that players who need the extra help would have it but players who want to figure out the level without any aid would have that choice.

Then there’s extremes – how does only a set number of flips per level sound? That would certainly discourage mindlessly going to “safe spots” a bit.

Maybe we could give the player the ability to see outlines similar to the blue outlines in the picture above. Maybe limit it to a few uses within a level, or give that ability a long cooldown.

As mentioned before, it could be a matter of art direction and skill holding back the readability of a level.

Regardless of what direction this ends up going in, more testing would need to be done to see what works.


The bottom line is, I don’t think there’s a simple answer or even a correct answer that solves this issue. I hope I’m wrong and it can be figured out, but time will tell. A delicate balance needs to be reached either way – the player should have an idea of how to solve the puzzle (move through the level) but it should still require some trial and error as they test their idea. Too much of either side of that and the player would either feel frustrated that it’s all trial and error or the game would feel too easy because it’s always clear how to move through the level.

What do you guys think of it all?
If you made it through this monster, thanks for reading! See you next week!

- 🦑

B-Side Arrives 2021
Follow our Indie Journey with us! @LittleSquidStudios
wishlist b-side
© Little Squid Studios 2020