Archives for posts with tag: parallax

Hi all, and welcome to the Kana Quest Dev-Blog for this week. This week I am going to show you a small part of Kana Quest’s pipeline. Specifically, the process I have to go through to add new world art onto the previous world. Which, full disclosure, is terrible. When I was making my parallax system I did not consider the fact that someone would have to use said system. And that someone would ultimately be me. How that slipped my mind as a solo game dev, I don’t know but here we are.

With that said, what do I mean specifically when I say I am adding the new world art onto the previous? Well a few weeks ago I talked at length about the process for creating the background art for the 6th world in Kana Quest. Isn’t it nice? But unfortunately I now have to get this art from Photoshop, into Unity.

World6WIP3

Legit, still really chuffed with how this art turned out. I would give myself a pat on the back if it weren’t for the horror I am about to inflict on myself.

And then once into Unity, get it to connect onto the previous world’s art. You would think this is easy. And it should be. But then you know… my coding exists sooo guess we can’t have nice things.

w5wip

I remember when I thought getting this world to connect was going to be easy.

See I can’t make them connect by putting the two finished images side by side and creating some transitional artwork. Because of one thing. All these environments use a parallax effect, so the point in which each part of the world will end in different places. And the only way for me to know exactly where that is, is to make a world’s art, implement it, then figure out where the end of that world will be, and finally create an end point for the art. But then we have to start worrying about the game objects that handle the parallax effect for the art, as well as trying to make the transition seamless by making transitional art. Like I said before, this is not a great pipeline. But on the bright side Franz Kafka is incredibly proud of me.

So let’s look at what everything looks like at the start of this “process”. This is the level select scene before I add any of world 6’s art.

5thWrldScene

As you can see in the first image the foreground images extend way further than the sky does. This is to compensate for the parallax effect moving these images faster than the ones in the background.

World5Gif

As you can see in game, everything lines up and looks nice, unlike how it does in their initial placement. Remember, as long as the player doesn’t see your garbage fire you can just pretend it doesn’t exist.

 

So the first job I need to do is figure out the point that the transitional art will start. This is pretty easily figured out by scrolling to the end of the world and seeing roughly where the camera ends.

5thWrldScene2

The arrow is pointing to the effective end of world 5 because it is the point where the last level button appears to the player. So everything beyond this point will be used to transition to the next world.

So now that we have our end point we have to start making transitional art. I start with the sky because we want it to the first to change. The sky moves the slowest and thus will be the last to finish switching over to the new pallet (even with a head start). Making the transitional art is also really easy as it just involves dithering between the original colours to the new colours, like so. It’s vital to give yourself easy goals to score. This will lull yourself into a false sense of security, and get you thinking “Surely its not as bad as I remember”.

W5SkyEnd

5thWrldScene3

As you can see here, the transitional sky image cuts a little bit into world 5. 

Then we repeat this process for each layer in the world. So for this world we do it for the buildings, the park, the stalls, the lanterns and finally the ground. Each layer should be staggered a little bit so that the final result should look something like this.

5thWrldScene4

You can see how the off screen starting point for the transition art is staggered so that the foreground images start further away. But by the time the player scrolls past they will all line up and look great. Remember, as long as the player doesn’t see your garbage fire you can just pretend it doesn’t exist. 

But this is just for the transitional art. Once we have the transitional art in place we have to position the world 6 art to line up properly. But because the parallax effect is handled by different objects for each world, you can’t line up the images in the inspector and call it a day. I have to figure out where those images have to be so that once moved by the parallax script in game, they line up. But in the scene viewer, the final positions overlap and look pretty awful. This step is the most time consuming and irritating as its like putting together a jigsaw puzzle except all the pieces are moving and you don’t get to see their true position when you want to place a piece. But at least the result is a nice clean transition. Remember, as long as the player doesn’t see your garbage fire you can just pretend it doesn’t exist.World6ImplementedGIF.gif

So how would I improve this pipeline? Well I would start by improving the parallax script. If I had designed the parallax script to handle all the worlds at once, a lot of this irritation would be improved. Because then I could simply place the transition images where they need to be in the Scene Window and not have to switch between running the game to figure out the placement and then back to the Scene Window to position things correctly.

Secondly if I had fixed world lengths for each world I would be able to standardise the interval between each world’s images and thus be able to immediately place new world images by entering that interval into the Transform component’s X value.

Thirdly I could make the parallax script run in editor so that wherever the Scene window is looking at, the script will get that X value and parallax as if the camera was in that position. But once again this relies on there only object that handles the parallaxing.

Anyway I hope this this been an “fun” look at Kana Quest’s pipeline and hopefully it inspires you think about your pipeline and the inefficiencies built within it before you start production. Because that is one of the biggest mistakes I’ve made with Kana Quest. Ensuring quick and easy implementation of things is something worth spending a fair amount of time to work out. If you don’t get it sorted it can and will cost you days, weeks and even months of development time. And if you are really careless, you could end up writing a Dev-Blog about “The World’s Most Irritating Jigsaw”.

Until next time, have a great week.

Advertisements

Hi, sorry for missing last week’s devblog. Was just working on stuff that wasn’t very interesting to show off, so I decided to leave it be. But this week we have some fun stuff to look at!

First up is World 3 is in the game!World3Animated.gifWell, at least the art assets are in the game. Getting the art in can be a bit arduous. First thing I have to do is position all the sprites so that they line up with the previous world’s sprites, then I have to create a new parallax manager for this world. All this does is it manages the different layers and makes sure they move the right amount. Then I have enter in all the sprites into the correct layer and set the movement modifier for each layer. Its just one of those things that isn’t complicated but just takes more time than you think.

Speaking of things that aren’t complicated but are time consuming: Pallet Swapping. So something I do for each world is I create new color variations on my UI. This is so my UI matches the color of whatever world the player is in.

This is not a complex task, but boy is it ever mundane. Open file, select color, replace color with new color, repeat for remaining colors, save, repeat for the next 80 something UI elements. Doing all the UI recolors took me about 75% of a full day to finish. The evening that I finished doing them I was talking to a friend and realized that if it took me most of a day to do the recolors if I had to repeat that process 15-20 more times that would take up most of a month to do. Not great. So I had an idea, I’m going to spend a day or two making a unity plugin that automates the process for me. You just give Unity all the files you want it to modify, each of the colors in the original sprite, each of the new replacement colors, where everything should be saved, and what naming convention it should apply. And when all is said and done I should even be able to sell it on the Unity Asset Store for a buck or two.

Finally I got the bare-bones of the next mechanic into the game. OneDirectionTilesVer1GIF

These are One Direction Kana. They can only move in one direction… also they love Harry Styles. They are “functionally” complete in that you can’t make any invalid moves with them but the game currently lets drag the Kana in the direction of an invalid move, it just then pops it back to where it began because it was an invalid move. I’m also not completely sold on the visuals of the mechanic yet, but hey its a placeholder so it will change soon enough. Anyway I decided to make this mechanic the next mechanic because its a pretty simple mechanic for the player, and it doesn’t have a requirement of learning more Kana to make the mechanic work (unlike the Mystery Kana). This is important as the start of Kana Quest has a really high learning curve, and I need to give the player a breather and some time to revise the Kana they’ve seen.

So before I head off, next week (23rd/24th) will be the LAST Dev Blog for 2017 (as the following Saturday will be my birthday and the day after that is new year’s). So what we’re going to do is, take a look at what’s changed with Kana Quest since I’ve been working on it full time. Just to see how far we’ve come.

Anyway, until then, Have a great weekend and Happy Holidays!

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.