Sponsored By

Reworking Piczle Lines DX from mobile platforms to Nintendo Switch

Creating a Nintendo Switch version of a mobile game logic-puzzler using Unreal Engine 4

James Kay, Blogger

August 16, 2017

9 Min Read
Game Developer logo in a gray background | Game Developer

I am James Kay, founder and CEO of Score Studios and designer on Piczle Lines DX. Several lifetimes ago I wrote the blog Japanmanship about working in the Japanese game industry which is now available as a book. Before starting Score Studios I worked at Japanese companies like Genki, Taito and Marvelous Entertainment. I've lived and worked in Tokyo, Japan for over 16 years now and really should be a lot better at Japanese than I am.

The original

In 2010 a still young Score Studios released Piczle Lines on iOS devices. Originally started as a different nonogram project, the still somewhat new iOS device made me reevaluate the game and switch it over to another logic puzzle style better suited for the small touch screen, where the puzzle’s clues and the puzzles themselves occupied the same space. Difficult to explain but easy to grasp, Piczle Lines was a real addictive puzzler that grabbed a lot of people’s attention; connect dots on a grid to other dots of the same colour, covering the exact number of grid squares shown in those dots would upon completion show a colourful image. With no penalties or time pressure, it was a relaxing time waster that also exercised the brain. 

The fate of Score Studios veered in wild and unpredictable ways; we worked with some big Japanese studios on some major games (most notably writing the PS4 engine and tools that run The Last Guardian on PS4) but our own portfolio of titles dwindled. Even though Piczle Lines was never updated past its iPhone3G roots people continued to play it and purchase puzzle bundles. I would regularly receive emails from fans asking for more puzzles, saying they had reset and restarted all current offerings several times already. 

When time and budget finally allowed for it I pulled together a small team to start work on a follow-up.

Img.: The original Piczle Lines as it appeared on iOS devices in 2010. The story mode unlocked items in a scene as puzzles were completed.

Choosing Unreal Engine 4

Whereas the original was created with bespoke tools and a home-made engine, the new Piczle Lines should not become a single platform game and would have more people working on it. As the company had been focusing on Epic’s Unreal Engine to allow for more contract work in Japan as more and more developers were starting to use it and needed some guidance, it seemed a natural decision to create Piczle Lines DX in UE4 as well. The artists were well-versed in its toolset and it opened up the possibilities of releasing the game on more platforms than just iOs and Android at some future date. 

The biggest hurdle was to create the puzzle board and input, which ended up being coded specifically in C++, and due to the continuous development of UE4, some features we hoped to use weren’t functional yet, prompting some more engine modifications on our end. Most specifically it was important for me to add a colourblind mode, as I had received many comments from Piczle Lines players who had issues discerning certain colours. 

The game’s basic structure and front-end were all created using UE4’s tools, which allowed the artists to create, implement and test their art by themselves without coder-intervention, leaving the project’s single coder to focus on his own tasks. 

While focusing on continued optimisation of the puzzle board code we decided to released three interim version of Piczle Lines, called Piczle Lines Jr., which stripped away much of its front-end and focused the experience directly at younger players. But finally, in February 2017 we released Piczle Lines DX on iOS and Android devices.

Img.: Screens from Piczle Lines DX on mobile devices. An animated comic explains the story. See also the menu option for the various types of colourblind modes.

Going for Nintendo Switch

Fortuitously Nintendo was about to release their much anticipated new console the Switch just a month later. With its touch-screen input Piczle Lines DX seemed a good candidate to port to the console. 

I reached out to Rainy Frog, a Tokyo-based publisher with a history of releasing title on Nintendo platforms. With their help we quickly managed to register the game and get a couple of development kits fairly early. 

The artists in no time at all managed to rejig the graphics and front-end to fit the landscape orientation of the Switch as opposed the portrait orientation of the mobile version, and we got to work on adding a new control scheme for Joy-Con input.

The basics were ported in a matter of a couple of weeks, in large part thanks to Unreal’s platform agnostic approach to its toolset. Of course, no project is ever as easy as it looks, and Piczle Lines DX for Switch too ran into a couple of snags.

From touch-screen to controller input

As a title that requires precise input, creating a control scheme that makes using the Joy-Con controllers easy was a challenge. Of course navigation on a grid is fairly easy with the D-pad, but I also wanted a smoother control using the thumbstick. 

Rather than create a pointer I created an area cursor that would latch onto the nearest hint node when the player pressed down on the draw button. This worked very well as it allowed the player to be less precise while still making the cursor act exactly as intended. The end result is a hoop cursor that is far wider than it needs to be, but which shrinks down to the hint node it mostly encompasses. Once the node is grabbed moving the stick will draw the line.

Img.: An example of a cursor imprecisely positioned over a hint node and then contracting to that node when the player holds down the draw button.

Ironing out the issues

One of Piczle Lines DX’s new features over the original was the inclusion of a preview pane, that showed the whole puzzle as it progressed, and could be used for quick navigation around larger puzzles. Writing to textures was a slight issue with Switch’s texture formats, but was fairly easily solved. 

Rainy Frog went to work creating localisations for 9 languages. Though Unreal’s localisation dashboard makes localisation fairly easy, its text rendering created a lot of bugs with letters being cut off and requiring being placed within scale boxes with very wide margins. With 9 languages testing and fixing these bugs was one of the larger tasks of this project.

The new control scheme took a little tweaking too. As a logic-puzzle fanatic and a gamer it was very important for me to visualise being able to slouch on my sofa playing the game without stressing my joints. We made it so you can even play with just one Joy-Con and one hand. To make this feel right took several iterations, but I think we got there in the end. Luckily the Switch’s touch-screen is extremely responsive and making the game feel right with touch input was no work at all.

Img.: Scenes from the trailer, showing TV play and landscape-oriented layout changes.

On using Unreal Engine 4

I’ve had some, shall we say, lively discussions with fellow developers on the merits or demerits of using an engine like UE4 for what is mostly a 2D puzzle game. A lot of people seem to get hung up on the “5%”. 

From my perspective the biggest cost in game development is staff costs; wages, insurances, overheads, etc. By using UE4 we managed to create the game for iOS, Android, Nintendo Switch (and perhaps more in the future) with just a single coder. This saved us a tonne of money on extra coding staff that may have been required using other engines or writing our own. On top of that UE4 is free to use until you make a certain threshold of income from your project, at which point you pay only 5%, which to me at least seems entirely reasonable. The way we could avoid paying that 5% was to avoid using UE4 but with a significantly larger time and money investment up front, which in turn creates a greater risk. 

UE4’s tools were also a boon to the project. Our artists were trained quickly in using those parts relevant for their work and allowed them to take full responsibility over creation and implementation of their art. 

As an engine in development, of course, there are issues and niggles, but it was a risk we happily took, and it paid off for us. Of course not every project can benefit from using UE4 but ours did. 


Conclusions

In the end the mobile game was created with a team of just 4 (2 artists, 1 coder, 1 designer, though with some support) and the Switch version took only 2 orso months for only part of that team, mostly because we used UE4. Though of course the talent and dedication of the team was a huge part of this lean development too! 

The Good

  • A very small but focused team meant development didn’t cost a huge amount.

  • Having our team members learn to use the UE4 toolset meant quick implementation and testing. From creation to implementation each team member was responsible for their own work.

  • The right publisher can give the right support. Rainy Frog in this case was instrumental in us receiving our development kits in a timely manner and their work on localisation was invaluable.

The Bad

  • Though we’re a little too smug with ourselves about the name (a contraction of “PICture puzZLE”, it hasn’t been a help with visibility. It’s a name that needs to be spelled out a little too much to be entirely memorable.

  • Unreal’s widgets are a powerful tool with a lot of little niggles. Testing and fixing localisation text rendering issues took a lot of work.

The Can’t Be Helped

  • Being fairly early on a platform with a huge engine did bring about a few bugs that were very difficult to fix or even track down. Support and knowledge is still sparse in these early days. 

  • The Switch's continued supply issues made it difficult to find hardware, like the Pro Controller, to properly test the game with. We got lucky in the end but it was a little stressful.

Piczle Lines DX will be released on Nintendo Switch on August 24th, 2017, world-wide. It is developed by Score Studios and published by Rainy Frog. The mobile version is available from the Appstore or Google Play. Check Club Piczle for more information. 

Read more about:

Featured Blogs

About the Author

Daily news, dev blogs, and stories from Game Developer straight to your inbox

You May Also Like