How to make (simple) sprites

It's been a while, but here we are again!

Today I will tell you how to cheat draw simple sprites. At least, the way I do it. I don't know what exactly I'll do for the Locus Magici sprites yet, but it won't be the same. Might do a post on that later, but these following sprites are meant to be done quickly.

So in short, I'll tell you how I made this:

Cecile

What I used
I mostly used Paint Tool SAI, but also used Photoshop for colour adjustments and aligning the sprites. Since they both open .psd files, it's a nice combination. 

Step 1 - Concept and sketch

First of all, I make a rough concept of the character, which usually becomes a pose later on. For Cecile I made a different pose first, so her concept looked like this.

The reason why it's good to do this, is because:
1) You can test it on a background to see how it looks in the VN!
2) You can define the general personality well with this concept.
3) You can decide on the lighting and the general colours (which is great if you work with a team who needs to OK it).
4) You can still make big adjustments easily, should you need them. 

Besides, you will need to make a good sketch for the sprites anyway. Just remember to keep the sketch and rough colouring on two separate layers or it will be a pain to ink over later.

Step 2 - Inking

Inking means it's time to get all the fun details added in. Create a new layer above and below the sketch layer. Turn down the opacity of the sketch layer and fill the bottom layer with a nice colour. Ink on the top layer.

I used a dark brown colour for the lines, to make them a bit more natural, but you could also use black, lock the transparency of the layer and colour over it with your desired colour once you're done.

For these sprites I was experimenting with the lines a little, since the last time I drew lines I noticed how sharp they were. To get a bit of a softer look I used these settings (SAI):
- Brush tool at size 8.0 ~ 10.0
- min size 0%
- density 100%
- colour blending ~30, opacity mix ~20, persistence ~80

You should really experiment with these settings (and the advanced settings) to get the look you want. I will be doing that as well, since I'm not yet satisfied with how the lines look; I want something between the sharpness of the pen tool and the smudginess of the brush tool, and thinner lines might work better.

Important:

Please keep in mind that the expression should be on a different layer! You can leave the nose if you  want, but the mouth, eyebrows and eyes shouldn't be on the same layer as the rest of the lineart. You should also colour the eyes and such on separate layers, not on the main/body colour layers.

Step 3 - Flat colouring

I am very, very lazy with this. You know those people who make one layer for each colour? I'm not one of them. All my flat colours are on one layer, because it saves me time and keeps things simpler.

Using the magic wand is the key in this process if you want to get it done quickly. Simply select your line-art layer, pick the magic wand tool and click on the areas you want to be a certain colour. Now, because I am even more lazy, I made a hotkey for the bucket tool.

Go back to your colour layer and smash your hotkey or use the bucket tool to fill the selected area with your current colour. Check if you missed any spots (you will, trust me) by using convenient background colours and filling these spots up with the pen tool.

Also, if you want to add details on the flat colours (such as lines on the uniform) creating a layer on top of it and colouring on that should do the trick. Just call it 'details' and voilà.

Step 4 - Shading

Again, we'll be using one layer, but this time it has a little trick to it. You see, we're going to set this layer to 'multiply'. It's an option you can find somewhere close above the layers window in both SAI and PS.

Now, take the brush tool, increase the size, pick a nice colour. I used Salmon-ish pink for this to give it a warm feel, but blue and other colours work fine too. Whatever you do, don't use some kind of grey colour; it makes your sprite look dull and dead.

Then shade that baby while keeping the direction of the light source in mind. You can use the water tool to soften the shading on the skin and get a nice hard-soft shading balance.

You can also lock the transparency of the shading layer and then use the airbrush or brush tool to make slight variations in the shading colours. For example, I wanted some parts of the shirt to be more blue-ish, so I went over it with a colder pink.

Step 5 - Lighting

This is much like the shading step, except with a different layer mode. You will set the layer to 'overlay' this time and then use a nice fitting colour (for example pale yellow or light blue, experiment!) to add light.

I also like adding just a little bit of light on the opposite side (where the shading is) because it gives the drawing more depth.

For Cecile I even made an additional layer to light her hair better (I wanted the light to be more blue), and just lowered the opacity of that layer to prevent it from becoming too bright.

Step 6 - Poses and finishing touches
I prefer sketching all poses at once and colouring them all at once for the sake of consistency. You can make a rough sketch on top of the first pose and then check if proportions are all right by dragging it to the side (which is why I prefer using a bigger canvas than I would need).

In the end you can save each finished sprite, make one big psd file with all the finished sprites in it and then align these in Photoshop to make sure they're on the same spot. You can also then do colour adjustments, by messing with the levels (image -> adjustments -> levels, or ctrl+L). I like adjusting the individual levels manually. Same goes for contrast and what not, just have fun trying things out.

---

And that's all! To keep it short, I might have skipped over a few things here and there. Cecile is one of the public domain sprites I made for this project by the way, so go ahead and use the two of them if you want.

~Anna

Animations in visual novels

As you may know, we've been thinking about adding animations to our projects, like sprite animations. So, with Cinders being released this week, we thought it would be a good opportunity to talk about animations in visual novels~

Where would you add animations? What kinds of animations are there? What should you watch out for? Let's take a look! I'll pick a few of the most interesting and/or common ones and discuss them here.

1. Blinking animations
You know them, where the poor souls on screen need to blink every few seconds to remind us of it. Or blink so little that people forget they're blinking at all. So, for starters, blinking is hard to do right. But there are more reasons why I avoid adding this.

While reading, these sudden movements (especially if the eyes are big) distract my attention from the text. I guess this is because unlike looping animations which you see constantly (rain, snow), blinking has short periods of animations after a period of no animation. Furthermore, when the eyes of an otherwise static character sprite blink, it just makes me more aware of how static the sprite is.

The only times I can remember when they didn't bother me, were when the timing of the blinking was just right or when the eyes of a character weren't all that big. The bigger, the more I notice it.

2. Mouth flaps
If you ignore what she says, this is kinda cool. However, like with blinking, it's hard to get right.

Setting aside the fact that some visual novels don't use voice acting, so matching the lips to the words is harder and a little awkward, it's actually also a lot of work for little gain. To make it look good, you have to use the right frequency and enough frames, or it will just look off.

Having the right frequency prevents it from looking extremely slow or hyperactive, but it's not easy getting it right. Shira Oka, for example, in which the characters were often moving their mouths at incredible speeds they could match my Greek mom. Of course, the other extreme would be characters whose mouths move so slowly they should only be able to say two words per sentence.

As for frames, like for any kind of animation, you need to draw enough of them. If you only use a frame for mouth-closed and mouth-open, it will look really... silly.

3. Sprite animations
When I say sprite animations, I mean sprites which don't just change poses, but are fully animated as they change poses. This is a really cool addition to a visual novel and a step further than mouth flaps or blinking eyes, but the rose has some nasty thorns as well.

Let's look at uguu-san below for an example.

I will never exist, sir!

Uguu-san took me about 10 minutes to doodle. This may not seem much, but keep in mind I was rushing, abused ctrl+C, didn't care for the character and knew that the sooner she was done the sooner I could finish this post and be lazy the rest of the eve-- well you get the point; I wanted to get it done quickly and didn't care.

So, while it may be cool, decent looking and animated sprites will take a lot of work, and that probably means cutting poses in return.

The other reason why you may reconsider using this, is what convinced us of discarding the idea of sprite animations in our current project. Since your characters will be animated, their colouring and lines may become a lot less detailed and refined. As animation quality depends on the consistency of the sprites, it's very hard to use epic highlights, cool shading, layer effects and what not to keep the quality up.

As it's very tough and time-consuming to get it right, most animated characters end up looking more simplistic than a character which wasn't animated at all.

4. Movement of background elements
The fun thing about moving background elements is that it is relatively simple to do, compared to the other examples, and that there are a lot of ways to utilize this one.

For example, translation. Moving clouds from A to B and then starting at A again to loop it, which is not that hard. Add multiple layers with clouds with different sizes and speeds, and you can create depth. Or make use of rotation to let wheels turn around and let grass sway in the wind. However, the moving background items should be drawn onto a different layer, so plan them out in advance.

5. Pans and zooms
Use this. Seriously. Pans are another gem of an easy animation method which makes your visual novel much more dynamic just by moving the camera. You will have to use backgrounds which are broader or higher than your VN's resolution is, but in our opinion it's totally worth it.

The same goes for zooms; you could have one CG for a battle and still make it an epic scene by just throwing in some sound effects and focusing on different parts of the CG, matching the current text (hi there, Fate/Stay Night).

6. Particle effects!
I love this one! Particle effects are simulations of otherwise hard-to-create phenomena by creating many simplistic images; it's commonly used for rain and snow. It's a little trickier than pans and zooms or moving stuff, but these are awesome mood-setting animations.

---

Well, these are the main ones we wanted to discuss. I think we'll mostly use the last three ourselves, but there are many techniques I haven't covered here (blur, depth of field, etc.). It's a lot of fun to look around and see what you can do to make your visual novel even prettier.

Explore and experiment, I'm sure you'll create some lovely effects!

~Anna

Locus Magici WIP page added (+ twitter)

As promised, this post will (mainly) focus on our newest work in progress, Locus Magici! We have a few things to show and tell, so let's get to it~

Character Sketches and Profiles

Alex's ogling is totally in character.

You might have seen Lloyd, Lina and Sirus before (although we changed Lina's hair colour to mesh better with the rest), but we added the other important characters as well now. Note that these are still sketches, since university is taking most of our time right now, and we're still finalizing the script with 1000 words a day. Though in a week or two, we'll really be able to put our all into this.

Since we're slowly getting more and more information to show off, all of it will be summarized on the Locus Magici Work In Progress page. Right now, we've added the above sketches, the logo, and character profiles in it, so please check it out! Plus...

Unlockable Content
No, we're not talking about DLC.

You might have seen the new tab at the top on our blog. Once we get to certain milestones with our progress (as indicated in the progress bars on our site), we'll give you a sneak peak of our work. We'll mention it when they'll be unlocked, so stay tuned.

Twitter
Another new addition can seen at the lower right of this blog. That's right, we're going to spam Tweets from now. You asked for it, you got it, so please follow us~

That's all for today, but I hope you enjoyed the update!

~Anna

We won an award, hurrah~

Something not visual novel related?... le gasp!

First, for the non-Dutchies; We regularly visit some conventions in the Netherlands to sell our stuff. Last week we were at Animecon, which also organizes the annual Dutch Manga Awards. These are basically awards which can be won by amateur manga artists who self-publish their stories.

As you can see from title of this post, we happened to win in the category original story with our book The Lost Angel Arianna. This resulted in us getting a cool, shiny, super professional(ly handmade) trophy and some moneyz!

Hell yeah.

Actually, we didn't think we would win. It's not that we're not confident about our work, but more the fact that two of the three jury members had a great interest and history in western styled comics.

Yeah, that didn't reassure us much; since people like that usually show a clear preference to a more western style, and our style is totally shoujo. What didn't help either was that another person was nominated in this category with a story using a pure western comic style, and that one of the jury members said he didn't like manga.

As you can imagine, we prepared ourselves to not be butt-hurt after that guy won, only... he didn't. The importance of style did turn out to be an huge discussion point among the jury members, so at least our fears were justified. Also, now I can complain without looking bad~

Anyway, enough gossip about behind-the-scenes Dutch mangaka politics (man, what a sentence). As for the actual convention experience, it was a little different this time. Unlike conventions in America and such, Dutch conventions never had an Artist Alley (or as they say Avenue) before. Instead they just put the artists between the real dealers and shopkeepers.

However, this year they did separate the groups and thus we got our own Avenue. Yes I find it amusing writing this. As expected, sales went down and what didn't help either was that it was placed after the dealerroom. You know, the place where people spend money? Still, it wasn't that bad and if they make sure people realize we're there, then I think it will work out more smoothly.

At the very least, we had lots of cool conversations with our neighbours into the wee hours of the night. Please, accompany us again next time, we still have to convince you to make more visual novels <3.

So, that was our con-report. We had a lot of fun there and will now resume pushing our trophy into people's faces. I'm off! /o/

Next post will really be about Locus Magici, I swear!

~Anna

Resource management

It's already been a month since NaNoRenO, so that's enough time to recover and pick up our work on our latest project; Locus Magici. However, since we haven't done anything else yet save for writing more of the story (Anna is working hard on that one), today's post will instead be the return of the tips section! Brought to you by me, the ever mysterious K-chan.

First, let us move back to 2010, when I was putting Firefly together. Not planning ahead on how to handle my resources, I pretty much threw everything together in one image folder with a few exceptions for stuff like the title screen images. The result?

Yeah... I kind of regretted that one. Some problems that arose thanks to this:

• Obviously, it was harder to find specific images.
• It was harder to get an overview: How much sprites characters had, which background had handmade evening/night versions and which could go without, etc.
• More descriptive names were needed to be able to find them, result in longer names to type out.
• All of these problems were tenfold once I hadn't memorized the locations and character's names  anymore.

When it was time for Nanolife, I decided to turn things around:

There, much better. Characters, backgrounds, fades, and various parts of the system all get their own folder now, making it much easier to work for me. Also, the names used in Nanolife were rather short, but otherwise I could have also worked with three-letter abbreviations (like kee/smi.png for the image path, instead of keeffe/smile.png)

I talked mostly about images now, but the same goes for scripts. Instead of putting everything in one master document, I like to split it up in multiple scenes, sorted by number. For example, '1.lvn' or '1-description of scene.lvn'. Like images, it is easier to find and edit a specific scene, or see whether a scene is too long in comparison or not.

This seems like a pretty simple concept, but it saves quite a bit of time, at least in my case. At the very least, it's enjoyable to see oneself developing tricks like these. Well, until next time, where hopefully we'll have something to show related to Locus Magici :).

~K-chan

Nanolife promo video

To be more specific, a Nanolife promo video with commentary done by us! Yes, really, it's as horrible as it sounds.

So, why commentary? Well, we had some problems with recording ingame audio for a promotional video (like the one we made for Firefly), so we decided to fix the problem creatively.

Whether that was a good choice or not I still don't know, but at the very least I got the privilege of hearing K-chan's Kiki's awesome Denglish. Being Dutch is fun during times like these :D~

That's all for now, I'm afraid. See you next time!

~Anna

Nanolife released!

Synopsis

A boy has recently found a great MMORPG in the depths of the internet. Excited, he stays up behind his computer late at night, while a thunderstorm is roaring outside. However, just as he completed his character creation - thunder strikes!

All electricity and thus also his computer shut down at once, leaving him in the dark. Though sad, he has no choice but to wait for now. However, in the game, his character has already begun playing without him...

Specifications

• three routes with one ending each
• unlockable extra and choices
• 1920x1080 resolution
• ~20.000 words
• very tiny, but cute, animations

Age Rating: 3+

Beware! Brush your teeth before and after playing!

Download
Installer -- Windows XP/Vista/7

Application bundle -- Mac OSX

Zip file -- all platforms

Warning

Because of the very tight deadline we haven't tested thoroughly on all systems, so please let us know if you find a bug.

System requirements
You will need Java version 6 or higher, which can be downloaded here.

---------------------------------------------------------------------------------------------------------------

Yes! Yes! Oh hell yeah~ we made it!

That was the most horrifying month we have had in a long time. Next time, we're definitely making something simpler haha. We didn't even have the time to sleep or update this blog properly.

All right so what did we do?

Art

We made a lot of art for the graphical user interface, but the minimap has been simplified to only show the area's name and a small picture for it, since it just didn't work well with the 2D atmosphere we created.

Nevertheless, this was my first time doing such a big and strange GUI, so I'm satisfied with the results, especially since Firefly only needed a simple black transparent text box. It took a looong time to do though.

Story

Me and K-chan discussed the story and made an outline and flow charts before the writing even began. After that it was a matter of me typing at the speed of light and her and me doing a lot of proofreading afterwards.

Still, the script turned out to be double the size of what we originally planned – oops ^^;. I had a lot of fun writing it though, since it was a very novel way of telling a story for me.

Scripting

From what I heard and asked of her to do, scripting was hell for K-chan, but that's probably because I gave her the final pieces of art and sprites so late ahaha... I have to admit though, she had to do a LOT of new things for this project too, from flying people to changing title-screens to little animations and what not.

However, she can't fool me that it was 100% bad. I bet you she was secretly smiling with glee when mistakes made the characters rotate through the air while looking smug. Definitely.

Music

OK, the music was downright hell :'D! I was struggling with another deadline last night and only had this day left to do the music. Then, I OVERSLEPT. K-chan called me awake at 12:00. Why thank you, body! Couldn't you hang on for a couple more hours? Dammit.

In the end I managed to make 1 simple track while I stole some from our other work to fill most of the gaps. We finally added 3 other creative commons tracks after looking around for a good couple of hours too.

Music on the last day? Never again man.

And that's about it. We hope you enjoy it! Now please excuse us while we go sleep, game, eat and blissfully do nothing at all. Aah bed, I missed you too <3<3<3~

~Anna