Framing the Fight: The Evolution of Beatdown City’s Camera

NuchallengerDevlog

I talked about focusing on clarity of visuals in the last dev log, and as anyone who has worked on a camera, or seen a really bad camera can attest to, camera can play a big part in how you enjoy a thing. (I had shouting fits at Super Mario Sunshine)

PREVIEW_SCREENSHOT2_84782
To that end, we wanted to add flair to our visuals because we have these cool tactical elements, so we might as well highlight them. To do that we decided very early on to to implement camera zoom to show off the coolness of the attacks being done, which has become the payoff of big supers in fighting games, like Street Fighter V, and has been the payoff in 3D Tactics games, like Fallout. 

fallout

This is even very prevalent in Guy Ritchie’s Sherlock Holmes, where the movie visually shows how Sherlock plans out his combos before performing them. 

sherlock

Here is the first teaser I showed off for Treachery in Beatdown City:

It was a high level concept of what we wanted to do with the game, animated in Flash with in game assets. The teaser ended up on PS Vitas all over the country, which was awesome! This was back when we were releasing on Playstation Mobile.

I really love how incomprehensible the zoom from the trailer gets by the end, but that was obviously something that would not work in game. Still, it highlighted a concept I really wanted to do. Making the game’s camera zoom during fights has been a goal for literally years. And yet it was never a priority – getting the game’s main systems down has been the highest priority, because they were so complicated and nuanced. So instead of even rigging up something remotely workable, we kept going with the camera in a stationary position.

(Please note that all GIFS below are running at about or slightly below 30-ish FPS because that’s how GIFCAM rolls, and are not indicative of the smooth 60FPS that TiBC runs in. Also, OBS sometimes drops frames, which looks real weird! I have recaptured where I can)

Below is a clip from January 2017, before we had camera movement.

nozoom

This is what TiBC has looked like for the entirety of development. The game worked real well mechanically when all of the systems interacted together. But the game lacked a certain OOMPH. 

In 2017 we released an Alpha with our first iteration of the Camera Zoom. 

alhazoom

Immediately you can see a huge difference! But ultimately it was just an initial idea, and didn’t take into account a lot of edge cases. In fact it basically only zoomed “in” and had no direction to it, so if you were in the corner, the zoom would still focus on the center obscuring the action.

A lot of work went into

  • Separating focus for the camera from players and enemies.
  • Defining how the camera traveled to highlight the attacker.
  • Defining when the camera should zoom in more.
  • Adding screen shake on larger zoom ins.

The below is the result of a lot of work.

zoomnow

The difference is again night and day – this new focus really made the game feel fresh, and less static, and added that OOMPH we needed to the fights.

Still, we had some issues. At this point the camera was cutting off player/enemy feet when doing grapples, and also obscuring vital information, like the status effects.

This lead to more iteration on the camera. This includes:

  • How the camera zooms in/out, adjusting height and zoom amount accordingly to avoid cutting off of feet.
  • Where the camera lands when it initially zooms in, leaving enough space for status effects to be readily apparent.
  • Changing when Status effect labels are added to players/enemies to avoid too much UI clutter.

The below are some examples of the most current camera zoom.

lisapunchin

And here’s some bonus wrestling moves courtesy of Brad to show off how much work we had to put into making sure that attacks stayed on screen while maintaining that all important clarity.

piledriver

punchbrain

These last gifs represent the camera at about 99%! We still have a bit of polish to go, but we are VERY HAPPY with the progress. However, I never would have thought it would take so long to get this camera down. 

A lot of how it works seems really like a “duh” moment, but we just didn’t think of it that way initially, and that was a mistake.

And there you have it! This is how the camera has evolved in Treachery in Beatdown City. 

If you liked this post, and want to keep up on our progress as we work to launch this game, please follow us here.  And possibly sign up for our mailing list.