I have little knowledge of Tekken, so when I was unprepared for how overwhelmed I would feel when I was hit with the technical jargon from videos and Reddit threads.
Does the above mean anything to you? Probably not, unless you play Tekken. This is notation on how to input buttons for some of Josie’s (a character you can play in Tekken) moves.
Whenever I start a project, I will think about what to visualize. And it’s impossible to come up with a good answer until I’ve developed some domain knowledge. Usually, people who visualize very specialized topics partner with domain experts. Science publications would be a good example of this, designers would create visualizations based on the story the author is laying out. You wouldn’t expect the designer to have the domain expertise, but they would need to have some grasp of basic concepts to create effective visuals.
For me, I am at the phase where I need to develop basic concepts so I can begin consuming all the content that experienced players of Tekken have published.
And there’s no easy way to learn everything. A good start is to keep track of all the resources I come across. Below is the madness of all the Tekken research I’ve compiled so far. I haven’t organized any of it yet, but I start here when I need to pull links to learn more about something.
I find these resources as I do research, often by accident. My initial research was focused on finding sources for frame rate data. I knew that was the most basic thing I needed to do this project. But, when I was working through frame rate data, I had no idea how to read them.
So I would Google everything I didn’t understand.
Let’s look at the third row of data. I had to start looking up the definitions of all the column headers and button input notation. Here’s what the data means:
- Command: the button that need to be hit on the game controller. In this case, 1 means left arm.
- Active frame: the number of frames when the character is hitting the opponent.
- Block frame: the number of frames you have more than the opponent if the opponent blocks this move. In this case, if your opponent blocks your left arm jab, then you will be one more frame ahead of your opponent to execute your next move. This is your frame advantage.
- Hit level: does the move strike the high, medium or low? In this case, h = high, which means the move will hit near the opponent’s head if they are standing.
- Damage: the amount of damage the hit will deal (I believe if the hit is not blocked).
- Hit frame: if the move hits the opponent and they don’t block, you will be 8 frames ahead of your opponent.
- Counter hit frame: if you use this move to hit your opponent during their start-up (which is before their hit lands on you), you can effective stop their attack and counter it. By countering it, you can gain frame advantage. In this case, you will be 8 frames ahead of your opponent.
I learned all this from various videos, threads, and articles. Information is scattered and it’s not all in one place. And this is just very basic. But, the data is a lot more nuanced than that.
Some moves have outcomes where it launches the opponent into the air, leaving them vulnerable for you to follow-up with combos. Other attacks can knock your opponent out where they lay flat on the ground (KND). There’s a lot more to the notation than meets the eye. There’s a glossary for Tekken nomenclature which is very helpful.
I also want to add that it’s extremely frustrating when websites provide the frame rate data but do an extremely poor job explaining how to read the data. When I go to these sites, it’s just a huge table of data. There isn’t a legend or a notes section to define the notation. Not to mention different sites have slightly different way of using terms for the same thing.
Where to start?
I’ve come to learn that the best way to make progress on projects like these is to make small prototypes as early as possible. Since I have this idea to visualize frame rate data, maybe I can try it for a very basic move.
I came across this Reddit thread that listed top moves for Josie.
This was a very helpful guide and it was a definite list I could work through.
I thought it would be a good idea to start here. I organized these moves on an excel sheet and pulled all the data for each move from rbnorway. I made a lot of sketches to try out various ideas.
I had a short list of attributes I wanted to show for each move:
- Command input
- Start-up frame
- Hit level
- Frame on hit, block, and counterhit
I started to think about how we read. We tend to read from left to right. So, I thought to take a logical approach where we execute moves in an orderly fashion. For every move we execute, this is what happens.
- Before we execute a move, we need to determine how close we are to the opponent. If we are at the right range that can ensure a hit, then we begin to input the buttons for the move.
- The move’s start-up animation begins. This has a defined set of frames before the move actually hits the opponent. This phase is also crucial in determining the speed of a move.
- Once the animation is complete, the move could successful hit the opponent. For every move, they have a defined amount of damage.
There are generally three types of outcome once a move has been successfully executed and has made contact with the opponent.
- It could hit the opponent and deal damage (hit)
- It could be blocked by the opponent (block)
- It could hit while the opponent is in the middle of a start-up animation (counterhit)
In each of these scenarios, the player could have a frame advantage or frame disadvantage. Say if you hit an opponent with a left punch, you would get +1 on hit and this means when you are 1 frame ahead for your next move. Some moves have minus frames which means they carry certain risks.
Here is the first sketch. I initially included “active frames” when I thought this data existed. Turns out it doesn’t.
I iterated a lot and explored a lot of shapes.
I was obsessed with triangles because I wanted to connect the three outcomes somehow (hit, block, counterhit). I didn’t want to do a simple bar chart. But, I realized that it was very important to compare them across moves. So, I made a compromise with this and used triangles instead of bars.
A very rough sketch of version 1 I made in Illustrator. It took some time to figure out the spacing and sizes, but this was close to what I thought was best at the time. I often design my work in black and white because colour is a very important variable to control attention. I am very careful with how I apply colour and I always make sure I am using it to add value to my work. It’s not meant to be an embellishment. Colour has a significant purpose in data visualization and I work hard to make sure that you can still understand the work without relying on colour. It’s a good practice to ensure accessibility for those with colour deficiencies.
I shared this version on Reddit and had a lot of helpful feedback. To be honest, I am the perfectionist type and often give more weight to negative than positive feedback. It’s a fault I struggle with and I work hard to filter out negativity. Despite my efforts, I felt like I got torn apart by the feedback. It was a bit hard to digest the feedback since it was my first time engaging with the community outside of my peer dataviz community.
I’d suggest you clarify for yourself what it is you’re trying to communicate to readers. Are you trying to present the set of most-used moves for a character in an easily digestible format, like a cheat sheet? There are existing guides used both to pick-up a character (Cheat sheets for each character, Lei stance transition chart) and to counter a character (Armor King throw guide, King throw chart, Nina throw chart). Beginners IMO wouldn’t benefit from a cheat sheet like this, and instead would benefit from a set of moves to use along with a gameplan to follow. Intermediates who are picking up an additional character might benefit from this (although the value of restating the same data is questionable). I think everyone can benefit from a character counter cheat sheet (since more people will be looking to counter a character than play one).
In your original post, you mentioned that you wanted to help players understand the game mechanics better. Consider focusing on this idea, since “cheat sheets” already exist. A novel way to teach players something about Tekken would be much more interesting to see.
Useful mechanics I think you could try tackling are –
Frames (which you mentioned in your original post)
Spacing/Effective range of characters (which I’d suggested earlier)
Risk/Reward for common mix-up situations (e.g. Kazuya’s vortex, Anna’s FC, Marduk wake-up etc.)
I think the data viz is really well-made and cleverly presented, especially given you’ve just started Tekken and started figuring out the mechanics. Rethinking what you’re trying to communicate to readers would help make something novel and useful, I think.
Consider asking specific questions to gain a better understanding of how players generally use this sort of data, or how they think of certain mechanics (e.g. how do players make use of frame data, how do players think of spacing, how do players use references for moves). It might help you better figure out how to present your data.
Some things I worked out what they meant and others I wouldn’t have known without your explanation. I’ll be honest man, I think it might be over complicated for beginners to use. But with some colour and reorganisation it may become useful.
As a reference, I found this cheat sheet by u/Halfdan_Pisket immensely useful. It tells me what I need to know with some property notes and really sped things up for me.https://www.reddit.com/r/Tekken/comments/eahmc3/ganryu_cheat_sheet_finished_version/
but in order for that to be useful you already needed to know notations and abbreviations, but already knowing that I didn’t have to read anything else so I got the information quickly. I guess this guide could be the same given time with the consistent use of colours etc where you know what they mean already so you can look at multiple characters and understand immediately.
I think the bars can be improved in terms of visualisation of speed. You put the number above the bar because you don’t want us to be counting squares but there’s nothing to really compare it to except the moves above/under it. An idea might be to use what is Josie’s slowest move (26 frames?) and colour in how many frames the current move takes. That way there’s a comparison and the bars going down are consistent. And as you add colours you can make this bar more complex but easy to read by using a different colour to show if it’s punishable by faster moves (that way people can use it as a potential guide on how to fight against and not just how to use this character). Just an idea.
Is it possible to merge sections 1 and 4 together? I like that it tells you if it’s a high, mid, or low. With colours it could indicate which ones you can safely duck.No one is going to be counting corners on those stars I don’t think. 15 corners may as well be 20. I just look at it at go it’s a lot of corners. The numbers are more useful. I think that maybe a rule of thumb, if just looking at the number is more useful then the visualisation maybe defeated.
I had no idea what section 2 and what some of 5 was. Once again the number is more useful than how high or low the triangles are. I think that bit needs a redesign perhaps.Your section 2 explanation of the range is better than the diamond indentation to be honest. If you shrunk that down it would probably be more useful. The less explaining you have to do the better.
This is gonna be a lot of work since there are so many moves, but once you get your design down it should be much easier and I think it’s a good start. Could be very useful if you nail it.
Ther is really no need to visualize any of this. We can just look up moves and their properties on any frame website or even ingame and that’s all the info we need. I don’t see how this could ever be useful when all you need to do is learn that h means high, m means mid, l means low and then just know your frames.
I don’t need some confusing graphics to tell me that a move that’s 15 frames fast, +1 on hit and only -10 on block and is a low is an amazing move.
The only useful part about this is the range indication but even then, if you were to just put that on some frame website it would still be easier to read.
Just having a small explanation of frames and then listing frames is infinitely more understandable than any kind of graphics you could possibly come up with here.
Also combos only somewhat depend on frames. You do your launcher and you’re + a certain amount but that doesn’t mean that any move inside that speed will connect, it just means that anything slower is impossible to connect.
I also felt awful because I felt as though I missed the mark. I thought I was onto something. I took a good hard look at what I made and decided it was lacking a problem to solve. I didn’t have a clear definition or goal of what I wanted to do. As someone without much background in Tekken, I felt maybe I was too arrogant to walk into this community and declare I was going to add onto the already existing resources to help players learn the game.
I was starting to talk myself out of this and was feeling like I wasted my time. But, I wasn’t satisfied with what I made to call it quits. In my eyes, this version was step 1 out of 100. It was no where near a place I thought was ‘good’. I knew I could do better. I went back to square one and decided to listen more closely to the community.
To be continued.