Improving Color Pallet Technique With Pixel Art: Kana Quest Devblog 12th May 2018

Hi all, hope you’ve had a good week. Sorry for missing last week’s post but I was out of town and I had mostly been working on funding submissions and trademark registrations. So you know I didn’t have the most exciting content to talk about.

Anyway this week I finished the background art for world 6. And I had a bit of a personal level up moment when it came to the color pallet. See, for world 5 I spent ages trying to settle on a color pallet that I liked. But ultimately I was pretty unhappy with the result.

 

So here is the color pallet I used, and here is the finished result as implemented into the game. This color pallet worked well until it really didn’t. It worked well until I had to draw the food stalls in the foreground and then everything started falling apart. And while I was making the art for world 6 I finally understood why.

So I started work on world 6 much the same way I started world 5. I made a pallet and started drawing from within that pallet’s constraints.

 

This worked great for the little bushes up the front of the scene, but I kept getting the feeling that the dirt and the sky just weren’t working. But still I persisted and stuck with my current course.

But as I added more and more detail I found things just weren’t adding up. Things weren’t as pretty or as appealing as I hoped them to be. And so I found myself questioning the pallet I made. And I didn’t understand why my pallets just weren’t working. But then I realized that the pallets that I had been using had two major problems.

Firstly they don’t allow me to see the colors effectively in context. And secondly once all I had finished blending colors together, despite having 15-20 colors the viewer would only effective perceive all those as three or four distinct colors (Which often didn’t look good next to each other). And so after some extensive research of different color pallets that I thought would work for the scene on Pintrest, I landed on this configuration.

So, lets dissect what I was trying to do with this pallet. I wanted to be able to see the 4-7 main colors that would define the scene, much like a traditional color pallet. But I wanted to be able to see what colors would be used as the highlight and shading colors for those main colors. This was so that I could get a better idea of how things would look once shaded. Another nice feature I found out while working with this pallet is that I could quickly see how color groups would look together by covering the colors I wasn’t interested in seeing with a finger.

Now there are some draw backs to this system. This system I think works really well for pallets focus on one color with maybe a complimentary color thrown in (for example mostly green and then some yellow). I don’t know how well this system will work for pallets that utilize a lot of contrasting colors. But I guess I will find that one out as I draw later worlds!

Anyway, once I had my new pallet figured out, I went about replacing the old colors with the new and we ended up with this. Which is so much nicer that if I had just stuck with the old pallet.

Anyway, I will hopefully see you all next week. But until then, have a great weekend!

Kana Quest Dev Blog 24th March 2018

Hi all, welcome to the Kana Quest Dev Blog, after two weeks of forgetting that this is something I do I’m back. Truly I am the most consistent of self marketers.

Self deprecation aside, what are we talking about today? We are going to talk about the background art for world 4 got made, and what I learned along the way.

So before I started work on Kana Quest I had never worked with Pixel Art before. Not because I didn’t like it, just because I’d never given it a go. As you can expect this caused me to have quite the learning curve. I didn’t know about many of the common techniques, hell I didn’t even realize you were only supposed to use as few colors as possible (The first world is really bad for breaking this rule). But each world I’ve done, I’ve gotten a little bit better at it.

So what did I do differently for this world? Well for a start I used much fewer colors in sky. All previous worlds I had five colors making up the sky colors (most of which I would not reuse). This time I condensed that down to three (not including the purple at the top there as that has to stay consistent between worlds now for GUI reasons). And all three of those colors would be reused in the rest of the scene.

At this point this image only contains 8 colors, much fewer than my previous worlds.

Here you can see me start to reuse the colors already, the city buildings used the fuchsia at the bottom of the sky, and the roofs of the foreground buildings used the icy blue from the top of the sky. Speaking of reusing things, I got to reuse those foreground buildings. Copy pasted straight from world 2, scaled down, and recolored.

 

And with the station, the number of colors total is 14.

For the train station I used a lot of reference photos of other pixel artists to help get the effect I wanted. I know its nothing to be ashamed of (using reference photos) but I always try to do it without even when I shouldn’t. This is more for me than anyone else but, Always use reference photos, it makes life so much easier.

A couple of small details to look out for in the train station. The train shelter has my name written on it (テオ = Teo, basically the closest you’ll get to “Theo” in Japanese). The vending machine says うまい (umai) which means yummy, and the train station says 竹田 (Takeda). Which is the name of one of the towns in the area of Japan that I lived. I would have put down 朝来 (Asago, which is the name of the area I lived) or 和田山 (Wadayama the town I actually lived in), but I couldn’t write either with the number of pixels I had available.

The finished background art. Total of 16 colors.

The final thing I added was some more frost on the train tracks and some clouds. I added one new color for the shading of the clouds and let that color have a pretty high contrast to the rest of the clouds. Something I’m still getting the hang of with pixel art is the need for higher amounts of contrast in the area I want people to focus on. I know its a pretty basic compositional thing to forget, but its something I frequently forget to do. So from now on I’m going to try keep it in mind more often.

Anyway, that’s all for this week. Making this background was a bit of a level up moment for me, so if you’ve had any level up moments in pixel art, design or anything really I’d love to hear them! Until then, take care.

Kana Quest Devblog 12th Aug 2017

Another week another Devblog.

This was an ok week for productivity. Some stuff got done but not as much as I know I can get done (I spent most of Wednesday practically falling asleep). But three big things were done this week!

The first thing is that I have officially started working on Kana Quest’s audio. Well more like the background music for the game. Now when I knew I was going to have pixel art for the visuals of Kana Quest I knew that chip tunes were going to be used for the music. So this week I did my research of what were the best programs for making chip tunes and landed on FamiTracker (the visual fustercluck you see below). Then I spent a little bit figuring out how to use the thing. Thankfully there were some really well made tutorials on youtube that sped up the process. Now that I’m used to the software its not so bad to work with. Although if you look below you can see that I kinda ended up with a piece of music which has 5 frames to a crotchet for some reason. This is great if I want to you know have quavers (sarcasm). Regardless, progress on the theme song for Kana Quest is progressing nicely.

The second major achievement for this week was the implementation of an options screen. Last week I talked about how the player can now switch between Hiragana and Katakana. The options screen is how the player is going to do that, so it is pretty important that I get the options screen working. I haven’t got all the controls on it working yet but we will get there soon enough. At the very least its really nice not to have one grayed out button on my main menu screen.

Finally, saving the best till last, we finally have world 2 implemented into the game! So the way you get to the world 2 is by click and drag the screen to move over. I’ve put a ridgidbody2D onto the camera so that when the player lets go of the camera will continue moving for a moment. It just feels a nicer to do doing it this way. Another thing to notice is that the menu button changes color when we move to world 2. One of the things that is a big part of making the art for a new world is making sure the colors of the UI matches the new setting. So, although you can’t see the extent of this in the gif below, a large part of putting this into the game was recoloring all the UI. One last small detail in this gif is the title screen. I’ve changed the image used for the stars in the background. I’m much happier with where they are now and the new stars look great!

Anyway. That’s all the major and interesting stuff I got done this week. I’ll see you next week where hopefully we will be able to show off some levels for the second world! Until then, take care.

Kana Quest Update 28/07/2017

Another week another update. This week has been kinda slow. This is partly because I’m still slightly recovering from AVCon. The other reason is this week I’m working from home and I always find a way to goof off when I’m at home. (This would be why people have work studios).

That said I do have some fun stuff to show off. The first thing which I am personally most excited for is the background art of the second world!

So I am super happy with how this turned out. The biggest thing that is different between this art and the tutorial background is that this has been designed to not be a static image. I drew each part of this background on nine separate layers that will repeat. The reason I have done this is because for each world I want to be able to add as many levels as I want without needing to redraw the art. This was a problem I noticed vary quickly from the first background: that it was drawn for a specific number of levels. If I need to change that number later on, making my backgrounds this way will allow me to do so. So now onto some of the artistic decisions with the piece. So this piece is set in summer following on from the last background that was set in spring. The rice in the foreground is a dead giveaway for this. A couple of other fun things about this piece is that it was inspired by the town I used to live in (Asago in Hyogo Prefecture). Lots of stunning mountains, rice fields everywhere, and ever so slightly worn down buildings. A couple of small details on the buildings is on the announcement board I wrote “テオドの” which basically means “This is Theodor’s”. Yes I am capable of being that vain.

Next up is Katakana. Katakana is one of the three writing systems in Japanese. All the gifs and images shown previously have been of Hiragana. Hiragana and Katakana (mostly) produce the same sounds, but Hiragana is used for native worlds whereas Katakana is used for foreign words. I have planned to have Katakana in the game for a while. The reason is that mechanically they will operate the same as Hiragana and A LOT of people forget their Katakana. So usually what happens is folk spend a lot of time learning Hiragana, then they get to Katakana and are just sick of rote learning letters. So it was simply a matter of when I found the time to implement it. Its not particularly hard to put in, just time consuming. But the first step is getting the Katakana sprites done.

 

Well as of this week I have all the Katakana versions of the normal and slime tiles ready to go. Not gonna put them all up in the blog post because that just takes up space for no real reason. Haven’t got them working in game yet, but the sprites are done so that is one big step to implementing it.

The way it will work in game once implemented is the player will choose Hiragana or Katakana from the options menu. Then all puzzles will appear as they normally would with the selected letters. This way the player can practice the one they want freely.

Ok. That’s me for the week. I’ll see you all next week. Take care.