Once upon a time, there was a young man who really likes to play Project Diva. He was obsessed of how the game design allows the chart to be more "free" and how the notes "fly" freely into the screen.

One day, he was playing the game in the Vita. He thought,

What if I took this concept and made it a mobile game? Instead of pressing buttons, one can directly touch the note to play! Must be really fun!

This is a long journey of a rhythm game player, who dreamt to be a rhythm game developer.

Proof-of-Concept

I started conceptualizing the game. Notes fly into the screen, onto the target in which the player have to interact with it by tapping, holding, or swiping the screen.

In the core, the game has four type of notes.

1. "Hit" note. It's the most basic one. The player simply have to hit the note when it landed on the "target" area.

2. "Hold" note. Player have to hit and hold the note when it landed until it disappears.

3. "Special" (or "Surprise") note. It behaves exactly like "Hit" note, except that the timing window for the perfect judgment is extremely wide.

4. And lastly, "Glide" note. The player can glide their finger when the note landed.

Notes in the game

By design, I wanted the game to be themed around old steampunk-like age, with the glossy looks of the notes that will "shatter" when the player touched the note correctly. I thought the name "Chronobeat" as the game's title, since it's fitting the theme and the concept of the notes that can be arranged in the manner of a ticking clock.

A few days later, I finished the POC. It was pretty amusing to see what you've imagined finally come into a real piece. But when I tried to play it in a real device, things went awry...

It was barely playable.

Not because of how bad the POC looks-wise (yeah, it was preeeetty bad), but how the game design played out on mobile.

Realization

One thing that I didn't take into account when I was creating the proof-of-concept was how different games play on a console when compared to mobile.

On most console games, the player interacts with the game via a controller, so any input from the player won't block the view of the game.

On modern mobile games, the player have to interact with touch screen instead, so there will be a portion of the screen that's blocked by the player when interacting with the game elements.

That is what I felt when playing the POC hands-on. I realized that the game was very hard to sightread.

Most of the time, I missed the notes because I just couldn't see it coming. When I did, I also couldn't figure out which note came first because the play field is zoomed in (to compensate the note to be more easily tap-able on mobile devices) and couldn't time it right.

Well, I could memorize the entire chart, but I felt that the game would play better if the player didn't have to watch the chart repeatedly and just enjoy the chart from the get-go.

There is another problem... I was not experienced enough to create a complex graphic design and animations... so the "steampunk-like" theme that I imagined early, was going to be very time consuming to create and therefore it was scrapped.

"There gotta be another way."

Revision Time!

Quick Fix

The first action that I took after examining the game (and of course asking my friends on Facebook) was to limit the chart design so the notes can only be spawned on a predetermined position on one time.

The result was... enough?

It was an easy workaround; I could just put the notes so it's "easy" to read, placed in a way so the notes lined up all the time. Sure it works, but it makes the note placement... too monotone. Also it plays like a traditional falling-down-notes rhythm game with occasional fall direction change gimmick.

As for the theme design, I quickly headed into my comfort zone; flat design with lots of geometric shapes. It was simpler to create, and looks more elegant (and also saves resources, too!).

Note design iterations

Slide Note

At this point, the game looks like it had an identity crisis. There’s something needed to make the game looks more "distinct" than the one already existing in the mobile app store.

To spice things up and make the chart design more unique, I then decided to add the fifth type of note, "Slide". The idea is when the note landed, the player have to slide their finger across the path that appeared, in line with the note. It's much like maimai and osu slider in a way.

Slide note in action, with the very early design

Initially, the slide track can only strictly be a straight line. In later iteration, the slides can have curves and multiple straight lines in a note. This adds the complexity of where the player's finger should move to, and makes the gameplay feel more exciting (albeit it would make player frustrated if the chart is not designed well enough).

Note Behaviour

After feeling much better with the current implementation, I've yet to solve the actual problem that the current game design had. How to both make sightreading easier and enable various note placement at the same time?

After tinkering with the game design for about a week, I realized something really important. I realized that the game is going to diverge from the actual Project Diva mechanic due to how the chart design is implemented, how the note flow differs, and how I failed once more to notice it in the first place.

The way Project Diva charting works is that the player only had to focus to where the notes should land. The notes target are arranged in a way so that it is grouped together and spaced evenly to the timing, so the player could intuitively time the button presses correctly just by looking at the note target spacing.

Project Diva gameplay example

Now in current Project Pentjet, there's not much consistency going on in the charting scene. In one part, the player put focus to the note landing point. In another part, the player put more focus on the moving note since multiple notes could land in the same spot. And the worse of it all, there's no spacing to denote the timing when the notes would land!

The lesson learned is, we can't just rely on the landing point alone if the chart design is not going to be like Project Diva's. Note spacing can affect note placement and thus could impact in how comfortable it played in mobile (especially if you are playing with just thumbs). So it's safe to say it's not the best choice to stick with Project Diva mechanism.

Coming back to Project Pentjet, modification had to be made to make the chart easier to read. As I had mentioned before, both the spawning point and the landing point of a note plays an equally important role, and it helps to determine the note order.

And so, I modified the behavior of the notes entry so that it is much shorter for the notes to travel to the target. This is done so player can (hopefully) notice where the note spawns, no matter where it is placed on the screen. To alleviate the shorter travel, each notes will briefly "grow" so that the player have enough time to react.

The result is pretty good! At some parts, the chart become more readable, and many pattern can be combined now without making the notes "collide" to each other (back then, placing notes on far left and far right on the same Y-axis will cause them to "collide", make them harder to read).

Game Layout and Chart Design

Designing a chart is always be a difficult part of developing Project Pentjet, because it is the core of the game. It is crucial to create a rule of how the chart should be designed so it’s fun to play. Before delving deeper into the chart design consideration, let’s talk about the gameplay layout first.

In the beginning of the development, I decided to use 16:9 aspect ratio as the base layout so it could fit well to a variety of mobile phone screen. (well… the majority of mobile phones nowadays are a tad bit wider, but I stick to 16:9 as it would work better on tablet screen, too.)

By default in Unity, the camera is set up so that the vertical space has the height of exactly 10 units. By using the aforementioned aspect ratio, we get the horizontal space of roughly ~17.77 units. Of course we can’t use the space near the screen’s edge, as it would be needed for system navigation and UI for the game.

So, I cut off some of the space near the border, and after dealing with some careful calculation, found 12 by 6 units to be the perfect layout for the gameplay.

The game layout

It was a pretty nice number, actually! It is symmetrical and has an aspect ratio of 2:1.

For a long time, there was no specific predetermined patterns that the chart designer could use. The best bet would be to stick to just the edge segments of the playfield. It’s easier for the chart designer to lay out the notes, and it’s easier for the player to read. But it could make chart designs to go stale if there’s no variation or other pattern combination.

There were attempts to create new note pattern, but most of the time it didn’t work because the pattern didn’t combine well with other note pattern, or it simply could be easily blocked by hand.

After realising the change of the note behaviour, I noticed that this 2:1 aspect ratio of the playfield has a special property. See, if a square can fit an entire circle, a 2:1 box (which is basically half a square) can fit an entire half-circle! Moreover, we can fit both the upper-half and lower-half of the circle to the playfield!

Since the note spawn behaviour had changed, notes placed in the half-circle arc will spawn from the center so it wouldn’t be easily blocked by hand. In addition, it is also very thumb friendly! It became a no brainer to implement this pattern into the game.

As the two aforementioned arc actually complements the top and bottom edge segment, I added two more arc of the same circle with the same radius to the side, so that it pairs well with both the left and right edge segment.

The game layout with new arc segments

This way, it enables the chart designer to make unique chart pattern by utilizing the arc segments, and combining them with the already established edge segments.

Aftermath

Phew, that was quite a long journey! There’s also some small things that I didn’t mention in the blog, but you’ll notice it anyway ~~if you watch all my showcase video in YouTube ;)~~.

In the end, the game looks like a mish-mash of many popular rhythm game. Some said that it looks like Dynamix, some said it's maimai, and even School Idol Festival! But I can say, all those elements combined makes the game unique on its own.

Of course, as the game is on the development stage, the game design is still not final and subject to change in the future. Later, there might be some point that the game design need to be enhanced once again, in which I'll keep you notified here with a new blog post!

Also, there's a comment section available right below the blog posts, so anyone can respond and I’ll try my best to reply to each of your suggestion.

See you later!