Archives for posts with tag: art

Hi all! Welcome to the DevBlog for Kana Quest, where I document what I’ve been working for the week, and what I’ve learned along the way.

This week I did something I’ve never really had to do for Kana Quest before, and that is draw people in pixel art using very limited amounts of pixels. So this week we will go through the things I made and what the process for doing so was.

But firstly let me give you some context on what I’m making this for. So each world in Kana Quest has its own unique layered background art that repeats so that I can make use of parallaxing. I’m currently working on world 8 which is a homage to John Brack’s 5pm Collins St.

This slideshow requires JavaScript.

You can see in the original there are two rows of people. I’ve finished the first one, and am up to the second. And this is where this weeks topic comes in. See the people in the second row are going to be much smaller than the ones on the foreground and thus I have way less pixels to work with.

 Each of these people range from 21-39 pixels wide and 61 – 88 pixels tall. In other words they are all way smaller than any of the people at the front. Quick heads up, I’m not going to go over how I arrived at my pallet for these people. I’m going to focus on the drawing aspect for this week.

So where did I start with these? Well I started each with an idea of what the person should look like at the end. I know this sounds silly but just having an idea of what you want them to look like will help. I also made a conscious effort to make sure they would all look different from each other. But once I had an idea of what I wanted I would start with the head.

w8PersonHead

I wouldn’t go for anything super detailed, just a roughly head shaped blob. Then I would figure out what shape the head should be using what I was planning and using reference photos. Always use reference photos, if you are anything like me and have the imagination of a gold fish they will be your best friend. For this blog we are going make a caricature that you will probably recognise from sailor moon: the nerdy schoolboy with massive glasses.

neeeeeerd

Gurio Umino from Sailor Moon

For this character, I figured he would have a pretty large and round head. Which also helped create room for his big glasses. I also gave him a bowl cut to make his head even more ball like. Something that I noticed very quickly making these characters is when you have this few pixels shape is really important. You have to express as much as you can from the rough shape of things. This is why I chose glasses boy here as the example for this blog.

w8PersonHead

Once I had the rough shapes blocked out (the face, hair and glasses) it was just a matter of shading everything to give him depth. Now I am not using hard outlines for these people. You are free to do that for your own pixel art if you like, I’m opting not to because it is not in style for Kana Quest. Another thing to pay attention to while shading is to use your shading to imply shape and texture. For example on the glasses I use shading to show how thick and bulky they are. I also use skin shading to show the curvature of his face.

But of course this is just the face. As I said before, for each of these characters I started with the head and worked my way down. The reason I did this is because by starting with the face I can get a good sense of what sort of personality I want to depict. In the case of this one, I wanted him to be pretty stiff and awkward looking. I also wanted him in the classic Japanese School uniform winter blazer. So what I did is I created a basic shape of his body; in this case a rigid rectangle. Then I placed where the hands and feet would go. It’s always easier to place where you want the hands and feet to be and work back towards the body than the other way round. In this instance the hands and feet were just straight next to his body, so it would have been pretty simple either way. Then I drew in the outline of his blazer and finished with shading. Once again keeping in mind that we need to use shading to help the viewer infer what the shape of everything is.

w8PersonBody

And there we have it! A finished person. Now if you excuse me I have another five of these things to make before I can finish making this world.

Anyway I hope you’ve enjoyed this week’s devblog. I unfortunately wont be uploading a devblog next week as I will be exhibiting Kana Quest at this year’s Animaga in Melbourne. If you are coming, please come find me at in the indie game section, say hello and give the game a shot! But until next time, take care and have a great week!

Advertisements

Hi all, this week I finished illustrating the art for World 7 in Kana Quest. And I’m pretty pleased with the end result. So I thought I would go through each of the “work in progress” images and talk about the things I did.

World7Wip

So here we have stage one. I wanted this world to be based around yellows and reds but then balancing it with light blues as the contrast colours. I also try to centre each world around something different, and I hadn’t done Japanese shops yet so I started with the central theme of the world from there. A couple of small details I put in here is the convenience store says Konbi 2. The word for 2 in Japanese is “ni” and “konbi” doesn’t actually mean anything. But if you add them together to make “konbini”, you get the word for convenience store. And on the billboard above, it says “Wayward Strand Coming 2019”, along with a QR Code to their website. I’m putting in a reference to this game because the Art Director (Goldie Bartlett @GhostTownGoldie) helped me out a bunch when I first started working on Kana Quest, and I wanted to acknowledge the help she gave me beyond the credits. The final little detail here is the drive through restaurant is called Zukina and is blatantly ripping off Sukiya a popular Donburi chain in Japan.

 

World7Wip2

Here’s the next stage. The biggest change here is the massive change of the colour pallet. I mentioned earlier that I wanted to have the yellows and blues contrasting, but the yellows I was previously using were too green, and thus they ended being complimentary with the blue. So I redid the pallet, grounding the shading with a nice warm purple which gives everything a beautiful looking away from a sunset sorta feel. Apart from a couple of small alterations these colours stayed the same until the end. And I feel as though, you should be fine with deciding to change your colour pallet if the current one isn’t working. Every time I’ve done so has resulted in much more striking scenes. Of course if you have too many colours doing so might be a bit tricky, so maybe stick to a few colours to start  with, then change them as needed until you are happy and then use as many intermediary colours as you like.

 

World7Wip3

Once I was happy with the foreground shops, and colour pallet I moved onto making the background buildings. I have a fair bit of trouble with things that are not in the foreground because you need include less detail, but because it’s pixel art, you need enough detail to properly convey what it is. And to be honest I don’t think I’ve mastered this yet. I probably included too much detail on these background buildings. Also a small quirk about how I make these scenes, because each layer is parallaxing (foreground layers scroll faster than background layers) I have to make sure that the art for the background buildings extends to the lowest point in the foreground shops, otherwise there will holes. But the result is a bunch of artwork that just isn’t seen 80% of the time.

 

World7Wip4

Next up was completing the shading on the background buildings. There’s not a whole lot to say about this stage, its just a slightly more developed version of the previous image. Except that in this one, I’ve repeated the background buildings so they take up the whole screen. I do this to get a better idea of how it will look in game.

 

World7Wip5

Next up is the foreground. This is the first time I’ve had an actual person in the foreground. I had people in the stalls in World 5 and some students in World 6. But noting this front and centre. The main reason is lack of courage. I started learning pixel art specifically for Kana Quest. But I finally stopped putting it off and did it. My process was as follows. Create a rough sketch of the outline of the character. Then clean up the lines so everything looks nice and neat. Then block in large areas of colour going over the previously created line art. Finally add in small areas of shading and detailing.

 

World7Wip6

Last one! There are only two main changes here. Firstly I finished the sky to have the same dither effect used in all the other worlds, and then I gave my young boy a baseball cap. What team is it for you ask? Why, it’s a cap for the Hanshin Tigers: the team of choice in my area of Japan. I decided to give him the cap because he looked like a kid who’s a part of the baseball club at school, and thus would totally be all about his local team.

Fun fact about the Hanshin Tigers, they haven’t won in decades and its all because they got cursed by Colonel Sanders. And no, I’m not making this up. When they last won the championship, their supporters threw a Colonel Sanders statue into the river next to the stadium. Why? Because they thought it would be fun to find lookalikes of team members in the crowd, and then throwing them in the river in celebration. But the Hanshin Tigers had one American player. And they couldn’t find another westerner, so they just threw in a Colonel Sanders statue in instead of a fan. But the following years they went from being the champions to 18 years of ending in last or second last place. So years later they went in and pulled up the statue. But they only found the top half, and the Colonel’s hand was missing. But their performance improved a bit. So a few years later they went looking for the other half, and found it. Once again the team’s performance improved again. And they were now one of the better teams but they kept getting unlucky losses towards the end of the season. So there is a huge bounty on finding the missing left hand, but alas they are yet to find it. The found parts of the statue actually now rest inside KFC Japan’s headquarters.

1200px-Curse_of_the_Colonel_DSCN7774_20090921

Look upon the destroyer of Hanshin Tiger’s fan’s hopes and dreams.

 

Anyway, that’s all I got for this week. Until next time take care and have a great week!

Hi all, welcome to this week’s Kana Quest Devblog. This week I started work on World 7 in Kana Quest, and as a result I have been looking at a LOT of reference images. And looking at my references, made me start breaking down the different stylistic patterns I was seeing. Then in turn I started thinking about how those patterns affect the feel of a piece. So today we are going to look at a two different techniques/styles in pixel art, and what feelings they convey.

The first technique I want to talk about is the use of outlines. A lot of character art will have strong lines around the character as well as components of the character it’s self. Compare these two pieces of character art.

They both utilise an anime an anime-esque aesthetic but the end result and feel from the two is massive. And the pattern that I’ve noticed is that the lack of borders make a piece of pixel art feel more mysterious. While the inclusion of borders make the piece more concrete.  The piece that really illustrated this to me though was this one.

I love this piece. The reason this piece is so evocative for me is the incredible use of both bordered and border less pixel art. The silhouettes of all the creatures is clearly defined by the borders but the shading is done without. This creates a wonderful push and pull of between the known and unknown. Of course the use of mono directional dithering (seen in the clouds and the antelope monsters fur) further adds to this feeling.

 

Which brings me to the topic of dithering in general. Depending on how you use dithering it can change the feel of a piece dramatically. In this piece the use of irregular dithering makes the scene even more surreal and mysterious.

 

 

 

 

mossy_robo_by_sky_burial-d9u76yl

Source: https://sky-burial.deviantart.com/art/Mossy-Robo-594919677

And yet, dithering can also cause a piece to be almost “too real”.

db8c9a9259fa221c720fb700c77fcc92

I tried to find the source of this one, but I couldn’t find it. If you know the source please let me know so I can edit it in!

And I think it all comes down to the type of dithering being used, and the extent that its implemented. What I mean by “the type of dithering” is if the dithering follows a consistent linear progression (as seen in the second image) or if its irregular (seen in the first). Also you can see that in the first image, the use of dithering is far more restrained, whereas the second image uses it basically everywhere. When I first started doing my art for Kana Quest I was definitely using dithering way too much. And I’ve come round to the view that your dithering should be used to create the texture of the piece. In the case of the mossy robot the dithering makes the texture feel kinda chunky and bumpy.

Anyway, while writing this I realised that everything I talked about has a consistent theme. Each of these techniques creates a tension between what is “realistic” and what is “abstract”. Using dithering over flat colours; more abstract (usually). Using outlines and borders makes pixel art more abstract, but more easy to define. And I think something that I want to be more conscientious about going forward is how abstract I’m willing to push the art of Kana Quest.

But before I go check out the progress on the art for  World 7 in Kana Quest. Its coming along nicely so far, though there are a few things I think I’ll have to fix up. I’ve also had a blast hiding as many little references into this one as possible. See if you can find them all. There are three so far. Anyway, until next time have a great weekend!

World7Wip

 

 

 

 

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.

World6WIP2

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.World6Pallet2

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.

World6WIP3

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

Hi all, this week on the Kana Quest DevBlog we are going to look at the background art for world 5. And how I went about making it, and what I think works and what I think doesn’t.

World5Gif.gif

So something that I did much more diligently for this world was deciding on a color pallet from the start and sticking to it. A good color pallet is the base of all good pixel art and the fact that I’ve been so lax about it is kind of ridiculous. And I think it worked to mixed success in this piece. The background houses and park look great within the pallet, but the focus of the piece; the market stalls are less than stellar. w5wip.jpg

As you can see with my first work in progress picture, the park scene starts off pretty good. There is a pretty limited use of the pallet and it looks pretty swanky.

w5wip2.jpg

Then I moved onto the houses behind the park and still the color pallet held out and kept looking great. And not just great, I felt this world was shaping up to be one of my best ones yet. But things all went downhill when I added the stalls.

w5wip3

I don’t know what it was but I did and redid the stalls so many times and they never turned out quite right. I was using the “correct” colors in the pallet, so why did they look so out of place? Honestly I don’t know all I know is, if I’m going to keep deciding on a color pallet at the start I’m going to need to be more careful with the colors that I pick and start with the highest detail thing and then work towards the lowest detail thing.

If you have any tips and tricks that you use for nailing your color pallet please leave them in the comments! I really want to get better at constraining my color pallets down!

Anyway, its a bit of a short DevBlog this week. Hope you have a great weekend!

Hi all, welcome to the Kana Quest Devblog. This week I’ve been working on making Kana Quest a new logo. Now I’m not going to show the new logo here until it’s 100% done and its been submitted for its trademark application. But I am going to talk about some of the issues I’ve had with the original logo, why pixel art logos are so hard to make, and some of the visual language I’ve learned this week.

Original Logo Issues:

So, lets have a quick look at the original Kana Quest logo. And go over why I’ve concluded this isn’t a very effective logo.

KanaQuestTitleScreenImg

  1. It doesn’t have a clear and readable silhouette. English speakers are strange as most of our ability to quickly identify words come from a word’s silhouette. Because this does not have a clearly visible shape, it is really hard to read at a distance. Give it a try now, stand back from your computer or phone and try read this logo. You probably can’t it all just appears as a blob of different colors.
  2. It is massive in terms of pixel usage. This logo is not small. and it is not scale-able to smaller sizes. The problem with this is that many store fronts have strict specifications of how big your logo can be. And quite simply, the old logo will not fit those specifications. Not matter how hard I try I will never get this logo to fit into a 231×87 pixel image (the smallest image size used in Steam). Also the fact that the logo is less readable than the “press any key” sign under it is all the more damning seeing as how many more pixels it was given to work with.
  3. You need to speak Japanese to read the full title. Seriously, you would think I would have picked up on that problem when I made this but hey.
  4. Contains very little Japanese visual language elements. I’m not talking about the letters here, I’m talking about the visual features and bits of visual language that are often utilized in Japanese logo making. If I had used these elements then they would infer to the viewer that this game has something to do with Japan even before they see the Japanese written.
  5. Very little contrast to guide the viewers eye. So generally speaking we will focus on the part of an image that has the most contrast in value. If you don’t know “value” is how light or dark a color is.  Look at the greyscale version of the image, there is more contrast in the background that there is on the actual logo. So you spend most of your time looking at the wrong thing.logogreyscale

Things to Do/Not Do When Making Pixel Art Logos:

So, the original logo is bad. Really bad. But if you were thinking making your own Pixel Art Logo what are some things should you do and look out for?

  • This is an obvious one, but I genuinely didn’t do it when I made the first logo; Look at lots of other logos. Find logos with the same the feeling that you want to evoke in your viewer. What are the common elements between those logos? What’s different? How do those differences affect the feeling you get from the logo? Once you’ve done that borrow those common elements and use them in your own work.
  • Draw a bunch of logo’s on paper before you start. I made the first Kana Quest logo going straight into pixel art. This was a mistake. Its really hard to effectively try out ideas when you are drawing within the a constraints of pixel art. Below is a logo I made sketching straight into pixel art within Photoshop. While it is better than the original logo, its honestly half as good as some of the warm up sketches I did in paper this last week. If you find it easier to sketch digitally than physically then do that instead, but do some non-pixel art sketches first.

AnimatedLogo1Gif

  • Beware of overlapping shapes (for example overlapping letters). This is less dire if you have more pixels to work with, but overlapping shapes require a lot of defining so the viewer can easily process what’s on top and what’s underneath. And if you are using pixel art, you might not have the pixels to do this. This isn’t a “avoid at all costs” rule, but it is something to be careful of while you are sketching (Also you might notice that I have overlapping letters in the original logo, and it just makes things harder to read).
  • Check that your logo looks good on many different backgrounds. Its fine to have a background color that makes your logo “pop” the most, but if it looks bad on flat black, white or grey there is a good chance you’ve made a mistake.
  • Don’t go with your first design. Seriously, don’t I don’t know why I decided I thought it was a good idea to do so for the first Kana Quest logo, but it was a terrible idea. Don’t fall into that trap.

 

Japanese Logo Visual Language:

So while I was doing research for my logo this week I wanted to figure out what were  the most commonly used pieces of visual language used in Japanese game logos. And I ended up identifying three common elements (all of which I’ve utilized in my new logo). And of course, not all Japanese game logos use these elements, but a very large amount do. And they use these elements more often than western games.

To this end, look at the Japanese logos for Pokemon Sun and Moon. These logos are great for demonstrating three aspects of design that are common across a large amount of Japanese game logos.

JapaneseGameLogos.jpg

So the common elements are as follows.

  1. Letter Stroke Border:  So most logo’s will have some form of border around the title text of the game. These borders have a large amount of variation depending on the type of game. The width, the roundness/sharpness, the color and shading of the border are all important of communicating the game’s identity. The reason I bring this up as a feature of Japanese visual design is that it is far more common for there to be no border around the letters in a western game’s logo. For example the logo of Skyrim has just the plain text and no border. Or you could look at Dark Souls: A Japanese game that has a deliberately western looking logo by omitting the letter border.
  2. Subheading: While not as commonly used as the letter border, this is a far more commonly used aspect of design than in western games. The most common use of the subheading is to write the name of the game again in a more easily readable text. Often games with a name written in Kanji or English will have the name written out in subheading in Katakana or Hiragana for this very purpose. Another common use is a brief description of the game or as a visual ” : “. The main variations between subheadings are the placement, and font differentiation. Also subheadings are way more likely to forgo a Letter Border than the main logo.
  3. Visual Flourishes:  These are the least distinctive to Japanese logo design when compared to the first two, but they are an important part of the design. These flourishes are often incorporated into the Title’s letters and often use something emblematic of the game (see the pokeball and the Lunala/Solgleo symbol in the Pokemon Sun/Moon logo).

 

Anyway, that’s all there is for this week. I look forward to being able to show you the new logo when its safe for me to do so, but until then have a great week!

 

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.

world4wip1

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.

 

world4wip2

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.

World4Finished.gif

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.

Good morning all. Sorry I missed last week. I was mostly still working on the new logo still and I didn’t want to publish the final finished version until I had bought my trademark for it.

But this week I’ve started work on the next world for Kana Quest. w3WIP2

So this week we are gonna look at some of the techniques I use when making these background, the way I set these things out and the inspiration for this one.

So right off the bat you will notice the biiig blank space in the second half of the picture. why is that there and what am I using it for? Well the backgrounds in Kana Quest have to repeat seamlessly. But they also have to transition nicely from the previous world. So what I’ve done here is I’ve drawn the connective tissue first but leaving a lot of room in the document so I can then draw the repeating part of the art.

Another thing about the setup of this image that you cannot see is the layer structure. Because the backgrounds will be parralaxing I need to choose what part of the background goes on which layer. And then work from the furthest back to the closest. The reason I do this is so that if there are any variations in a foreground layer’s height I can make sure the background layers still have stuff there so we don’t get a big gaping hole.

So now onto the techniques I use to make this a lot faster than hand placing every pixel. Whenever you are doing dithering (the process of creating a dot pattern to create the illusion of shading) in photoshop the paint bucket is your best fried. Let’s say we were going to make a bunch of autumn trees like in the background.

pixelart demo1

The first thing we would do is jut get some flat base colors like this. Looks pretty nasty right? But once we add some shading everything will look great. The only problem is no one wants to sit around and place all those pixels by hand.  So what we are going to do is select the areas we want shaded and use the hue saturation adjustment layer to alter those selected areas. Then we fiddle around till we have a shading color that we like. And we get this.

pixelart demo2

Then we will make a selection were we want the “in-between” of the two tones to be. I like to select the shade color with the magic wand and go to Select –> Modify –> Expand and expand an appropriate amount.

Then once we have that selection I go to my paint bucket and switch the mode from Foreground to Pattern. Also make sure you define a dither pattern beforehand (this is done in basically the same way you define a new paintbrush). Then just fill with your bucket and it will look like…. trash. But that’s ok.

Untitled-1

What we are going to do with this is use it to create a selection that will allow us to immediately fill up the black pixels with the chosen shade color and then delete the white pixels leaving us with a perfect dither pattern. Like so.

pixelart demo4

This is great because we get to have dithering in our piece without having to do any of the laborious pixel by pixel shading. Then for the final step we just repeat the previous steps for the highlights and we get this.

pixelart demo5

Seeing as these are supposed to be trees I would recommend adding some irregularity to the shading. But adding that is much faster when you have a good guide ready to go.

Finally I’m going to talk about the inspiration for the art for world three.

I wanted the first four worlds to follow a full year season cycle to begin with. The world one starts with spring and the world two is summer, so world three is of course autumn. What this means for the art is there needed to have Japan’s stunning autumn colors on display. But I also wanted to shift the perspective of the art. Spring and summer are both warm and optimistic times. Autumn is a shift, so while the color pallet is still very warm but I wanted it to be more introspective by bringing the focus to the foreground. As a result I have the brilliant red of the Japanese Maple trees the closest thing to the player. This way when we transition to world four when the mise en scene is even more cramped it wont be as much of a visual jump.

Anyway, there is still a lot of work to be done on the background before it’s finished but I’m sure I’ll get to show you the finished thing soon!

Till then, take care and have a great day!

Before we get into the meat of this week’s update I just have some big news about Kana Quest. Officially Kana Quest is going to be heading to PAX Aus this year! If you are planning on coming come say hi and give the game a go! I would love to hear your feedback! And if you have any friends going tell them to check Kana Quest out! Anyway with that done, onto the week’s work!

So this week I’ve been working on implementing the second world into Kana Quest. I’ve known for a while that I want to transition between worlds by clicking and dragging the screen. And for the background art to join up seamlessly. So what’s the process of doing this involved?

world2MoreCurrent Step one was making the background art for world two. This was the easy part. All I really needed to watch out for here was to make sure that all the layers are repeatable so I can make the world as long or short as needed.

 

The next step was ensuring that the two worlds can transition into each other. This step will be easier in the future thanks to more planning in the world two art but no such planning was done for the first world’s art. As such the seam is a little abrupt. But its not an immediate shift so its better than nothing.

World1to2

MovingToWorld2

Part three was bringing the assets into unity and getting the camera to move when the player clicked and dragged. One small bug occurred with this though. I made my camera a physics object. Turns out any child object of a physics object loses its ability to know if the player is clicking on it. This caused some of my menus to stop working.

 

World2WithParallax.gif

Once we had the camera moving we had to get the background parallaxing with the camera. This means that the foreground art will move more than the background art to create the illusion of depth. This turned out to be troublesome as I kept being able to make my world two art not line up with the first world art. Thus forcing me to find a way to ensure that the art would always come back to the right position. This took half a day. It was not fun.

So here we have the last part of getting this whole thing working. The transition. This gave me the most trouble out of everything and is what I spent most of this week working on. The reason is for the first world I had used a static overlay that would fade in OVER everything in the scene. This overlay would work fine as long as the overlay was the exact same as the background. But once you add a variable camera position you no longer can guarantee this. So things had to change. So now, what is happening is I have a script that finds all the visible parts of the background, and prevents them from being destroyed when a new scene is loaded, then it moves those objects into the same relative position as they were in the previous scene. This is important as the camera’s position changes scene to scene so if this didn’t happen the art would be misaligned, or not in shot at all. Then would take all other objects in the scene and fade them out. Once the new scene is loaded it would get all the new non-background objects in the scene set the transparency to full and fade the new objects in. The result is what you can see below.

FirstWolrd2Level

 

And that was the process involved in adding the second world to the game. All subsequent worlds will be easier as I won’t have to worry about making the last three steps all over again. It will be set up for me already! Anyway I hope you all enjoyed learning about my process.

Till next week.