Archives for posts with tag: mountains

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!

Advertisements

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.

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.FamitrackerScreenshot.png

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.Options Screen Demo

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!MovingToWorld2.gif

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.

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!ParralaxTest2GIF.gif

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.

 

So been a while since I was on here.  So what have I been doing?

Basically since I last posted I have decided to dedicate all my time to making my game Kana Quest. I’ve just been forgetting to upload updates to this blog cos I’m good at the social of the medias. Speaking of the social media, I’ve been trying real hard to get twitter working for me. So if you want more immediate updates on Kana Quest follow me @notdeaddesigner .

So Anyway. Have some images and gifs of Kana Quest’s progress.

Kq4

This one is showing off the new background for Kana Quest. The final game with have a background with the same level of polish for each world.

CuteKanaAllWell for some reason it lets me have this gif. Whatever. This shows of me redesign of the Kana tiles to give them all a bit of personality, as well as a backdrop for the puzzles so its easy to see the puzzles with the new background.

NewLevelLayoutIn this one I have added a new UI above the puzzle to improve visibility, changed the formerly red tiles (non moving tiles) to be stone tiles, and I’ve changed the beat level anim to be more instantaneous.

NewRestartButtonGif

In this one I’ve changed to UI ontop of the puzzle as playtesters wanted a restart button and an undo button.

NewEnglishBacks

In this one I updated the backs of the Kana tiles to match the front. As you can see though the back of the stone tiles still don’t match up. Another big change in this one that might not be immediately noticeable is that I no longer have my pixels bunching and stretching so in other words from here on in we are pixel perfect 😀 😀

TutorialScriptTransitions

This one is showing off my new tutorial system. Some one who goes back to last year might remember that I spent a large amount of time making a tutorial script. I was basically forced to retire that script because it was hella inefficient. This one is way more efficient and elegant. Anyway I’ll have a lot more control over this script that the old one had.

And that’s about it. I will probably do updates once a week on Saturdays from now on and will go a lot more in depth of what I’ve been doing. What I want to do the coming week, problems I’ve been having and how I solved old problems.

Anyway take care all.