A few months ago I played The World Ends With You (I'll be referring it as TWEWY) out of a recommendation from a friend. Its one of the most interesting games on the DS, but one aspect of it absolutely intrigues me - it’s touch only control scheme. The main problem this control scheme needed to solve was the ability to parse touch input data and translate it into different attack commands, and do it quickly while feeling tight and responsive, as it is an action RPG. So I decided to reverse engineer TWEWY’s battle system controls as an exercise.
A quick disclaimer: Ideally this would be built for mobile, but for the sake of quick testing I built this demo using mouse input.
My first task was to create a system that records mouse positions when the left mouse button is being held down and deciphers what action the player is trying to perform. When the mouse button is pressed down, the InputLoop function identifies it as an Undecided attack, then depending on when/if the mouse button gets released, an AttackType gets assigned and the respective attack script gets executed.
Once I had that, I started making the first attack command, Slash. In TWEWY, Slash is activated by quickly swiping the screen over an enemy in a straight line and quickly letting go afterwards.
To implement this, I had to ensure it was straight and that the motion was fast enough, so I took the distance between each point I recorded in the swipe, and compared that value to the total distance between the oldest and newest point recorded by my CursorManager.
(Sprites and background taken from the original game, they aren’t mine)
The deviation formula ended up being very helpful when implementing more attack commands. Namely, another command called Scratch causes an earthquake damaging all enemies on screen if you swipe back and forth quickly over a small distance, as if you’re scratching the screen. All I needed to do here was use my deviation formula and set a deviation requirement variable, as scratching the screen resulted in a high deviation value.
The most challenging command to create was definitely the “drag in a circle” command. This, as it sounds, involved drawing a circle around an enemy. My solution was to create two circle triggers, one at the oldest point of the trail, and one at the newest, and when they collide I ran three checks; one for deviation, another for total length of the trail, and one more to ensure that the trail’s highest and lowest X and Y coordinates were far enough away to prevent detecting a circle from simply dragging the mouse back and forth really fast.
Other commands were implemented as well, such as slowly dragging your cursor across the screen creating a trail of fire, or tapping the screen firing projectiles, but these were much simpler to implement.
I also ported over the player movement mechanics and animations. Pressing and holding in a small radius from the player character causes him to start moving towards the cursor’s location, but notably, moving the cursor with enough velocity triggers a dash maneuver. This was fun to implement as I went frame by frame in a gameplay video of the original game to dissect how exactly the dash moved, with its startup lag of a few frames, followed by very swift movement towards the cursor, and having some ending lag after stopping.
Overall, this was a fun exercise to dive into. If I ever revisit this project, I'll likely just recreate the entire battle system as faithfully as possible since I learned just how much I enjoy reverse engineering games.
Comments