Demos, CGs, GUI, oh my!


Hi everyone!

This blog post is going to be a bit of a mixture of things so please bear with me! There are a couple things I want to go over this month~

Spirit Parade

Fisrt things first, Lore and Rins are creating a new otome game called Spirit Parade and they have just released a demo!

Spirit Parade is a commercial otome game with Asian mythological themes currently in development by Lettuce Waltz, aka the duo of artist Rins and writer/programmer Lore. The game will retail for $15 when it’s released, but pre-orders are open at a discounted price of $10. The game will have 3 routes/capturable characters and more than 20 different endings. Please follow our production diary for the latest updates!

The demo covers the entirety of the common route and should take about 20 minutes to an hour to read, depending on your reading speed.

The story centers on Nara (her name can be set by the player), a cynical 17-year-old girl who mostly shut herself off from the world after contracting spinal polio at a young age and becoming unable to walk. One night, a festival is going on in town. Instead of going with her family, Nara wanders off alone, not wanting to slow them down. As she goes through the various stalls, things become hazier and gradually Nara finds herself surrounded by people with ears, tails, and horns…then suddenly her clothes and wheelchair disappear! After a run-in with a rambunctious kitsune named Hayato and a scary-looking dragon officer of death namedShuye, Nara finds out that her soul has left her body and been transported to the Spirit World, where all the demons and spirits are celebrating a month-long festival. Until the end of this festival, she won’t be able to return home… Will Nara survive long enough in the Spirit World to go back in one piece? Will she be able to get over her bitterness borne from the past, or will she be engulfed in hatred and lose sight of what’s truly important?

You can get the demo and make pre-orders here! Go check it out!



On the 6th of January Lore finished the draft for BCM! This was extremely exciting and the draft has now been sent off to be edited by the wonderful Shadow. As such I have also resumed work on the CGs. We still have a fair bit of work to do but we are getting closer every week. I can’t show much about them obviously but they are looking much better than they were, that’s for sure.



I will be working on these as much as I can so I can get the game done and out the door. I’m really excited to finally have it playable for everyone, and also so I can move on to other interesting things.


In 2012 I was originally starting on BCM’s CGs and I was generally confused about what I should be doing. How do you pick the right moment, how do you plan them, how do they fit together collectively? You can see the original question I asked and the answers I got here.

Fast forward a couple years and I feel like I have a much better grasp on what I was asking originally. Experience is an excellent teacher! However I would like to try and share what I’ve felt I’ve learnt for anyone that is finding themselves asking the same questions.

– How do I pick what moment to draw?
This was a massive problem for me and still is. I read the scene and it plays visually in my mind so beautifully I want to draw ALL the things. Occasionally a scene would have a really obvious moment, but most of the time I just ended up really confused. Times were I’ve had the easiest time drawing CGs is when I hadn’t read the scene yet, times like Nanoreno where I only had a short description of the scene. There, that’s the thing I had to draw. I still get to decide how I draw the moment, but the what is solved for me.

The writer should also be on board with this when writing so CGs aren’t just a tacked on element cause visual novels have to have CGs. They should be thinking about the CG moments as they write and so should be able to distill each key scene into one action orientated moment. I say action orientated because seeing (and drawing) a VN full of people talking isn’t going to be super exciting, the CGs ideally should be interesting to look at and different from one another which is easiest to do when something is actually happening and the characters are doing something other than talking. Talking can be left for the sprites.

– How do I design the CG?
Again one of the key problems I had was figuring out how to make the moment look dynamic and interesting and honestly I think this comes down to experience. I know I’ve improved a lot over the time I have been doing them. One thing I do a lot of is research. For instance I’ve been pretty heavily influenced by Amnesia CGs. I know almost nothing about the game, but the use of lighting and colour were very inspirational. I have also bought quite a few art books from Japan focused on individual VNs over there like Hakuouki, Dramatical Murder, Starry Sky, Wands of Fortune and Diabolik Lovers. I’ve only actually played one of those games, but the art itself is useful to me. It means I have a library of images to draw from. If I’m struggling with a scene I can go check how others have handled something similar before me. Did their work? Why, why not? What can I take from it? It does get easier as you go.

– What should I focus on in the CG?
Apart from the obvious goal of depicting something that you can’t show with the sprites technically, like them fighting or kissing, I think it’s also important as an artist to use more of your visual language then you could with sprites. Sprites are rather limiting, you can’t really have things like lighting or extreme emotions and poses. Since CGs are static one off images that are used for that particular moment I personally think it’s important to really tailor it to that moment. Use lighting, use colour, use dynamic poses, use everything you can’t with the sprites. CGs should help the characters seem more alive then their sprites make them appear and really bring home why this scene in particular was important. Focus on the emotion you want the viewer to feel looking at it, whether it’s happy, sad, fearful, whatever. Your goal as an artist is to help them feel that emotion in relation to the story.

What is with all the Dutch angles???
So a Dutch angle is basically when someone has tilted the horizon line so everything is at an angle and they are everywhere is CGs. And honestly for good reason, especially as we have moved towards wide screen formats.

Basically as an artist you have the struggle of trying to fit mostly vertical objects, aka people, into a long horizontal format. Add to that the fact the bottom 1/4 to 1/3 of the image often has a text box covering it and the fact you probably want the faces up in that top bit and fairly close up and viola you get a dutch angle to make it fit, especially if more than one character is involved. Unless you are planning on having all your characters lying down or something.


I use them a fair bit, though I try not to over do it. Dutch angles can also convey unease or action so it’s best not to just chuck them in willy nilly if you can help it. I usually sketch the scene fairly upright and then rotate until it fits within the scene nicely. This mostly comes down to instinct since I haven’t studied composition a great deal. Knowing what to crop, what to focus on, what to have off center, all these things effect how visually appealing an image is. There are a lot of rules you can look up in this regard, including the golden mean and the rule of thirds which can really help. I find some of these useful link link link


I was recently asked about mobile GUI for visual novels and before I say anything I should point out I have never designed a GUI for mobile, I’ve never seen mine in action or gotten feedback so take everything I’m about to say with a pinch of salt.

– Starting with Desktop or Mobile?
One thing I recently got asked is whether someone should start with the mobile design or the desktop design if they are planning to do both. In my personal opinion you should build for desktop BUT keep mobile in mind when designing. It’s easiest to build  for desktop especially if you aren’t working exclusively in vectors because of scaleability. Remember you can scale bitmap images down okay, but not up. You obviously have a lot more room so I feel like this is a good place to experiment and figure out what your look is going to be without also adding in the complication of itty bitty screen space. That said you should ALWAYS keep mobile in mind because what you are designing WILL need to be scaled down. Keep things simple, do not create complicated designs that you won’t be able to shrink, designs people won’t be able to to use their fingers with. Apart of being a good designer is making sure your design is flexible, so make sure you keep it in mind.

– Screen sizes?
Apple products generally aren’t too bad for screen sizes, they are fairly standard over their range and the retina displays basically have double the pixels in the same screen space. Android on the the other hand covers a whole slew of different brands and products and so it’s pretty impossible to design for each and everyone of them. All you can do is pick some of the most popular sizes and fit perfectly for them and hope for the best with the rest when the GUI resizes. That sounds incredibly imprecise, and it definitely is, but it’s honestly the best you can do. If you did your desktop design before-hand you should be able to handle these different sizes okay, as well as some potential future changes. The mobile world is pretty all over the place. I’ve found this article to be very enlightening on mobile UI design, they know a lot more than I do.

– What do I have on screen?
As little as possible. Not only is your screen space severely limited in a lot of cases, people are also going to be playing with their fingers, not a cursor. It needs to be simple, clean and touch-friendly. You won’t be able to have half a dozen buttons on a mobile screen. I  think you only really need one button, a menu button, that you can lock all the other features behind like save, load, settings etc.

But what about the features that you want the player to have easy access to? The ones they would usually use a mouse or keyboard to do? This is where touch screens speciality comes into play. I think we need to have set touch command conventions for people to use. I’ve already talked to Py’Tom and he recently implemented left to right swipe to equal rollback. This is fantastic! There are a lot of touch screen unique motions we can use like that. Hold can be skip, swipe down can bring up the save menu, double tap can be screenshot for example.


I think if you do use something like this it would also be pretty important to give you players a heads up and provide a short tutorial on the actions that they can also access through a help section in the menu in case they forget. Try not to do anything too crazy. You want to work with people’s expectations so the actions feel natural. I’ve found myself try to use left to right to go back before for instance, it felt like what would be the natural action to perform that function. Look out for those moments so that you can create a UI that feels intuitive to the player.

And as always, research to check out what other people are doing! Ask questions of their design, whether you think it is good, bad, does it work, could you use that? They will help you make a good design for your visual novel.


That rounds off the most random blog post I have ever written. As always, if you have any questions let me know! I hope you are all having an excellent 2015 this year. Are you looking forward to Nanoreno?


Leave a Reply

Your email address will not be published / Required fields are marked *