August 3, 2020

---

This post is based on a completed project.

---

Inspiration from Final Fantasy

Early 2020, I was watching the demo gameplay of Final Fantasy 7 remake for the PS4. I remember looking at the fight scenes and being amazed at how complex it all was. As I watched the fighting sequences, I was fascinated. Then, an idea popped up:

Could I visualize the fighting mechanics of a game?

In February 2020, I was focusing intensely on exploring a new direction for my work. I made weekly Instagram carousels. One of them was about a fantastic game called God of War (2018 version). I never played this game, but I’ve seen the playthrough and the story is deeply emotional, it explores the relationship between a father and his son. I decided to visualize some of the attacks in this game. I was deeply inspired by a helpful resource by The Game Maker’s Toolkit that explained combat systems in video games. It revealed the mechanics of games in a new light for me.

I learned that in combat design, there are three phases in every attack and each have a set of frames associated with it.

1. Anticipation: this is the moment before an attack lands on the enemy. It is the startup animation. Usually, higher number of frames during this phase means it is riskier to execute because you are vulnerable to being attacked while you gear up for an attack.
2. Contact: the moment when contact is made with the enemy and dictates the amount of damage dealt.
3. Recovery: after damage is dealt, the phase when the character returns to its neutral state.

For every attack a character makes, the speed relies heavily on the anticipation phase. In the video here, the Freezing Burst has a longer anticipation phase than Freezing Throw. This subtle difference is what we have to consider when it comes to battle tactics. I show the anticipation phase via frame count.

Female pro-gamers in Tekken

Sometime in April 2020, I accidentally came upon a series of YouTube videos that document women who compete professional in fighting games. One video was Yuyu, a player from the team UYU, giving a tutorial on how to play Tekken 7. This video revealed to me that fighting games was a lot more than just button mashing. There is a lot of knowledge, experience, and work required to play one character well competitively. You need to memorize their moves, understand when to execute them and when to link them into combos for the win. It’s a very complex skill to master.

This video resonated with my value of having more female representation in male-dominated domains. I didn’t think much about this video until several months later in June 2020. I just finished a small project exploring dataviz in board games.

I felt ready to explore game mechanics in video games. I remembered the video by Yuyu and thought maybe I should start exploring dataviz with Tekken 7. I wondered if I could break down certain moves to help players learn them and assess which ones were risky and which ones were safe. The ultimate goal is to provide a guide to help beginners learn the game and develop their own tactics to win.

Validating a user need

I had very little domain knowledge of Tekken. I’ve never played it before and needed a starting point. I decided the best place to get help was from experienced players. There is a very active community in the Tekken subreddit. I wrote a post there to ask for some ideas and suggestions.

A lot of people offered their thoughts and were extremely helpful. One user offered insight into what I could design that would be valuable to the community. Which was looking at effective range. This is a rudimentary concept that applies to all fighting games. Some moves are effective at close range and others are effective at far range. This information isn’t listed in the game and it’s something you just have to learn as you develop experience playing the game.

“As for things to present, I have an idea I’d like to share. An important concept in Tekken (and in all fighting games) is spacing – maintaining an effective distance from your opponent so as to nullify a portion of their moveset, thus reducing the guesses you have to make. Additionally, you can also space for offensive advantage, ensuring your own attacks have a greater chance of connecting. Looking at the Knee (Kazuya) vs Daddyking (Steve) set really drove this point home for me. Knee kept backdashing into duck, moving from range 0, where Steve is deadliest, into range 1, where he doesn’t have too many fast attacks. Daddyking kept using a -i13 low which Knee could block (due to backdash into duck) and launch.

How about trying to create a visualization to describe the “effective range” of each character? It could describe the high, mid and low moves which are effective at various ranges, and include the speed of the move as well. Such a visualization would help players develop better counterplay against other characters. If I’m a Kat main up against Steve, I would know to keep my distance due to the fast, powerful moves at range 0, and instead operate at range 1 or 2, where I have the better moves. Against someone like Gigas or Jack, I should probably be going in, since they have faster moves at range 1 which Kat cannot counter effectively.

Describing how each character controls space in this manner could also inform general movement strategies which might be effective against each character, such as backdash into duck, backdash into sidestep, staying at range 0 etc.

Later on, perhaps one could factor in special movement options available to certain characters, such as wavedash.”

-Tekken player from the Tekken subreddit

Another user recommended I start with a character called Josie because her mechanics are simple and fairly straightforward. If you try to read their comment, it’s filled with jargon. Don’t worry if it goes over your head. The nomenclature for Tekken is complicated.

“Josie is the easiest character for offensive mechanics. Her d/f4, d34, 124 and 24 lead into her switch stance. look at the situations created from this stance and it’s the core of offense in the game.

The basics are rushdown into frame trap, rushdown into mixup, and rushdown into rushdown. Josie has access to all of these options from this stance. Basically you would use frame data to create these situations regardless of your character but josie makes it easy.”

-Tekken player from the Tekken subreddit

With the inputs from these two users, I had a great start on something that people would want to use. It was fascinating to talk to the community and validate my idea. This was the first time I did something like this. I’ve always made visualizations one-sided, and never considered the public community. I’ve come to realize as a designer that there’s no point in making something if the community doesn’t want it. This is a big problem in product design where designers aren’t always user-centric. It’s important to make something people actually need, and not make something we as designers perceive they might want.

Identifying and deciphering unknowns

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.

• d/f+4
• 3
• 1,2
• f+1+2

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.

I needed to develop basic concepts so I can begin consuming all the content that experienced players of Tekken have published. There isn’t a 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. I Googled 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 health the opponent would lose the hit lands on them (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.

Starting small

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 Damage 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). It was hard to make it work, and this idea was later discarded.

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.”

-Tekken player from the Tekken subreddit

“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.

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.”

-Tekken player from the Tekken subreddit

“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.”

-Tekken player from the Tekken subreddit

I felt awful because I felt as though I missed the mark. 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.

Starting over and clarifying my goals

I got some feedback from the community and I needed to rethink how I am approaching this visualization. I felt lost, confused, and insecure. I wasn’t sure if I needed to give up or keep trying. I decided to give this one more shot. I was too early to make a judgement on my process.

My first step was to clarify my goals. I needed to understand the problem I am trying to solve. I looked through a beginner’s thread and looked at the kind of questions being asked.

I don’t have a lot of experience or knowledge of how do user research. I thought the best thing to do was to go through the forum and for every question I come across, I’d record it on a sticky note. I made an effort to not skip any comments, no matter how trivial they were. If I skipped comments, that’s incorporating bias into this process.

I had about 10-15 questions noted. The next step was to synthesize. I clustered similar sticky notes together and named each cluster based on their shared similarities. I noticed a trend: all the questions varied on a spectrum of specificity. Questions ranged from being very vague (looking for direction on how to start learning), or, very specific (need help with technical aspects of the game).

I also noticed a trend where people questions are usually more specific correlates to time the player have spent playing the game. If a player is completely new, then they will ask very vague questions. Players who have chosen to specialize in a character would ask technical questions.

I finally felt secure in this crazy process. I felt like I was headed in a direction that made sense. I finally felt some sense of clarity and understanding. I knew I could back up my claims and I could stand my ground explaining my project. A strong foundation always starts with solving real problems. It is questionable that I only looked at about 15 comments, it’s a tiny sample size. But, for my project and my purposes, it’s a good start.

When we got specific and into gameplay, there are two types of questions, the first are question that are high level. How to put together a game plan on what to do in a game. The second are very technical. How to input moves that carry out the game plan. A lot of players had a hard time timing the buttons correctly to execute a move.

I had so many questions on how I should move forward. I had a broad overview of the type of things users need.

How can I teach fundamentals?

Do I approach this and try and target a broad audience? Where I am very general and have information that is applicable to many situations? Or, do I specialize and make a huge impact on a smaller community, perhaps targeting one specific character.

Ultimately, I want to make something useful, but does not yet exist. It’s not good enough to just do a copy and paste of a tables, when players can reference the information in tables. It has to be a tool that not only acts as a reference, but allows people to discover new things.

I can look at this like teaching language. Everyone starts off learning the alphabet. That is the most basic building block of learning English. Once the alphabets are mastered, we string letters together to learn words. We build our vocabulary. From here, the words are formed into sentences. We learn to read and understand what is being written. At a higher level, we can start writing essays, poems, scripts, articles, and so on. At this point, we are creating something that does not yet exist, we are improvising something new. It’s similar to music. We can only create something new once we have the fundamentals down. It’s not possible to write an essay until we have mastered the alphabet.

Now, my question is what is the alphabet equivalent in fighting games? What are the basic building blocks? No matter which character you play.

I still had a lot of questions, but no direction. I was going in circles at this point and I felt hopeless.

From previous rounds of feedback, I had a lot of suggestions on how to move forward. I listed out all the categories I identified from my sticky notes in my notebook and re-framed them as problems.

Having them all written out helped me see it at a bigger picture and helped me narrow down what to target.

I went with the approach of showing players the fundamentals via a specific character. A helpful suggestion I got was to focus on a gameplan and a set of moves for beginners. I don’t know if this direction makes sense, or if it’s right. But, I had to move forward and take a chance. I can’t work on this project forever and I need to move on. With this plan to move forward, I did more research. I found a YouTube video that teaches the gameplan and has a series of good moves to learn from Josie.

I have a better way to move forward with my project and I am back on Illustrator. I decided to use cards because I think of cards as a way to compartmentalize information. Cards are tangible objects that we can move around to learn something new with.

Iterating, iterating, iterating

Here is version 2. It’s still bare bones but it’s a good start. Each card represents one move that Josie Rizal can use in the game.

Below are changes I made in version 2 compared to version 1 based on feedback I got.

---

“Move names are not really paid attention to. Consider not devoting so much space to it. The command is usually more important.”

-Tekken player from the Tekken subreddit

---

“The range information occupies very little space as compared to the frame data, which I think is given too much space. Consider having the range data being front and centre, and the scale normalized across all moves (i.e. all of them are centered around the same axis)”

-Tekken player from the Tekken subreddit

“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.”

-Tekken player from the Tekken subreddit

---

“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.”

-Tekken player from the Tekken subreddit

---

“I think the idea of labeling movelists with situations to use that move in is the single best idea in the entire viz. Depending on the character and the player, different moves might be used in different ways, but I’m sure there are enough generalizable patterns in how they’re used to communicate to beginners.”

-Tekken player from the Tekken subreddit

---

“…on first glance everything after the frame bar seems confusing as hell to me (and looking at the guide to read, man, that even is more text!). maybe try colors or more obvious symbols like minus and plus signs that change in sizes? and the launch symbol should be more oomph imo. so yeah can‘t say its intuitive…”

-Tekken player from the Tekken subreddit

---

I didn’t want to create a new public post on Reddit to get feedback for this version, so I decided to ask one user who has been giving me constructive feedback since the very beginning. I sent them a DM and asked them if they could provide me feedback. To my surprise, they generously said yes. And the feedback I got was hopeful for me.

“I feel the problem you’ve identified is extremely pertinent and thoughtful. You’re quite right in that most guides simply show top moves/punishers without explaining the utility of those moves in the context of a broader gameplan (mix-up heavy, poking, keep-out). The situations in which to use moves outside of punishers is usually missing.

I really like the viz of the questions asked on the Beginner Megathread. It makes a lot of sense to analyze the questions asked there to figure out the biggest pain points for beginners, although I would suggest filtering out questions flaired ‘Help’ on the subreddit as well, since posting on the Megathread is not as common as I’d like.

The video you’ve chosen to base your viz on is sadly one of the rarer ones, in that they do explain a complete gameplan for the character along with the moves to use in various situations. Many of the character guides linked in the Beginner Resources wiki exhibit the patterns I described earlier – talking about punishers and specific moves without the context of a broader gameplan.

The idea of using cards is growing on me. I can see the utility in being to compare between characters using these cards, by comparing character cards for moves with the same function e.g. Josie’s approach tool vs Dragunov’s approach tool. It might help to quickly pick up a character for players who already know how they want to play a character, and are looking for the moves to use in those situations.

The way you’ve represented the data is clever and neat. That still stands out. I’m wondering if the annotations at the bottom, the ones which describe which situations to use these moves in, could be further clarified. For example, many of the SWS moves are simply labeled as Switch stance, which doesn’t really describe their utility. Instead, maybe describing them as SWS mixup (low/mid) would be more useful?

Lastly, and this is a bit speculative, I wonder if there are enough general move situations to justify breaking down movelists in this way for every character. I don’t have enough experience with all characters in this game, and for the ones I do know, I can safely say that this labeling would work. However, some characters like Yoshimitsu have very unorthodox and situational moves that I’m not sure would fit it.

I think the idea of labeling movelists with situations to use that move in is the single best idea in the entire viz. Depending on the character and the player, different moves might be used in different ways, but I’m sure there are enough generalizable patterns in how they’re used to communicate to beginners.”

-Tekken player from the Tekken subreddit

Their feedback helped me gain some confidence and strength to see this project through one more iteration. The final step now was to add flavour. Add personality and beauty. Create something that expressed personality and customization.

Adding colour and flavour

I start with the concept and understanding what Josie means, what she represents. I found an awesome concept image of Josie from Tekken’s facebook page:

I learned about the sumpa-kita, it’s a Philippine jasmine flower. Her clothes are embellished with the design of these flowers. I started to sketch out shapes and colours related to Josie in my notebook. It becomes a reference for me to look back to. You might wonder why bother drawing it out when I can just look at an image of her. Drawing is a process to understand and observe. I have to look carefully at what I am drawing and I see things that would go unnoticed if I was just looking at it. Drawing isn’t only meant to communicate what we want to convey, it’s important to help us learn and understand.

I was really struggling with how to show start-up frames. I tried to figure out the appropriate shape. Initially, I had stacks of boxes to show start-up frames. They were spread out vertically and horizontally, which in hindsight wasn’t smart. As I was trying to read the dataviz, I was struggling with the two direction of reading start-up frame. I decided to change that and only allow you to read in one direction. The best way for this to fit was to only fill it up vertically.

So I explored some ways to do that.

I settled on something circular since it was most efficient with space. I didn’t like the shapes I had so far and I was stuck. I looked back at my notebook and noticed the flowers I drew. An idea struck and I thought to use the Sumpa-kita as start-up frame. Once again, a lot of trial and error here.

The colours used in her character design take inspiration from the Philippine flag: blue, red, yellow, and white.

I made a palette out of these colours as a starting point in Illustrator. I use the eyedropper tool and pick out colours from her concept image.

To determine how to combine and place colour on the cards, it’s a lot of trial and error.

I was still not satisfied with how the damage section looked. It was still very hard to distinguish the differences between the various damage levels. If you look below, it’s not immediately obvious how they differ, especially if you view them individually. In addition, I think if you have a hard time naming them, then it becomes hard to comprehend. What would you call these, would you struggle talking about it if you were explaining this legend to a friend? I did and I needed to change the shapes.

I tried to convey the idea of more with quantity, in this case the number of corners.

So, I thought why not try using a circle in the background? That might work. Maybe I can keep playing with quantity as a variable.

I chose to use circles because when you land a hit on someone in Tekken, there’s a nice circle effect that appears on impact.

I reflected on how to express ‘more’, and realized that I could also play with space and intensity (e.g. something like colour where darker colours show more).

I tried to play with space using a circle as a background. I used various radii to convey the three different damage categories. The larger the radius, the more damage it had. I also tried out gaussian blur effect, which looked……very bad.

I still wasn’t very happy with what I made. All the versions I tried out looked weird, and it was hard to tell the difference between small and medium damage.

Once again, I was back to my notebook.

I started sketching ideas and one idea looked interesting.

I thought this was interesting. Using small bubbles to represent damage. Here, I can play on space and quantity to convey ‘more’.

I settled to use these bubbles and have come up with size, quantity, and space to convey more. If there’s more damage, the bubbles are larger, there’s more of them, and they take up more space. In addition, more of these bubbles would be filled in. As a bonus, I have these bubbles concentrating around the hit level of the move, so it helps focus your attention.

Moving forward

I shared the latest version with the Tekken subreddit community. I got lots of feedback, but declared I was done with the project and wasn’t going to make any more changes.

I felt the most recent version expresses Josie Rizal as a character. It shows her origins through the Philippine jasmine flower and the colours used represent the national flag. The ultimate goal was for these cards to feel that they belong to her. If you held these cards, you wouldn’t think they represented any other character.

I had a lot of challenges dealing with the data for this project. Most of the data I collected come from Rbnorway, but the data collection method isn’t documented and I have no idea how accurate the data is. I have found some mistakes when I was going through it. I can’t complain, I don’t have access to the proper resources to collect anything that is better than Rbnorway. I limited the time I have to complete this project so I could get it out quickly. I was more interested in testing out an idea to visualize the data, whether or not the data is accurate or complete is an entirely different issue. I wanted to present a novel way for people to learn Tekken with data visualization. I was lucky that I had the Tekken Reddit community I could tap into.

One of the moderators of the Tekken Reddit has been giving me feedback since version 1. He said something interesting about what I was doing for this project:

“I’ve not seen anyone with your skill set take an interest in Tekken. I’m excited to see the end product. Hopefully, it’ll inspire others to do something similar.”

-Moderator from the Tekken subreddit

There’s so much data out there that could be visualized, and there’s so many communities who could use our skills. Tekken isn’t something people might think about visualizing. Maybe people might look into player statistics and that’s about it. I took a different angle of integrating dataviz into a process to teach others the game. This comes back to the theme of work I want to keep exploring, ‘viz the world’. Are there places where a dataviz person has never stepped into, but once they do, they could present a novel solution to a particular communication challenge.

If I was ever to come back to this project, I would want to collaborate with a domain expert who could help me check the quality of the data.

“…Another thing. The frame data for the transition moves look wrong. Looks like the frame data is for the move without the cd transition. 3,2~f can definitely be launch punished”

-Tekken player from the Tekken subreddit

For this version, another feedback I got was that it was important to consider medium. The categories of the moves only makes sense when viewed in video format. This is true. I ripped the information from a video and inserted it into a print medium, which doesn’t make sense. Perhaps more context is required and this is something out of my control. I lack the expertise to provide the appropriate information.

“For the descriptions, like “Punish Whiff/Range” … Sure, that’s what the video had, but imagine the video wasn’t there and you just had description. It doesn’t make sense without a visual example (which the cards do not provide). But if you reworded that to “Long Range Poke” then suddenly it makes a ton of sense. Overall I think the descriptions would need a big rework just because the media has changed so much.”

-Tekken player from the Tekken subreddit

Finally, the ideal outcome for this project is to create these cards for every single character. I wouldn’t be interested in showing all the moves, rather, it would be a selected series of moves. Each move labelled based on how to respond to certain situations.

On a final note, the work I created here only makes sense for static work. I give it value that an interactive piece cannot achieve. A physical card you can move around to make comparisons while learning how to play a character in Tekken. I’ve been more thoughtful recently about how to create projects that only make sense in static format. I might have a bit of a complex where I feel that my industry demands so much from interactive and digital work, yet it’s something I can’t provide. I never liked focusing on what I can’t do, I always believed in betting on what I can do well. I bet my time and energy on specializing and doing it so well that it’s something you won’t find anywhere else.

Regardless if I find opportunities in this way or not, being useful and novel has its place in this world. I am focusing more on creating things that solve problems and reduce pains. If I can get better and identifying these opportunities and ways to address them, I think there’s a chance for me to do something interesting in the dataviz space.

---

This post is based on a completed project.