Archives for posts with tag: digitalart

Hi all, I’m Theo, the lead designer of Kana Quest. I’d like to introduce/reintroduce you to the Kana Quest DevBlog.

Why do I say “introduce/reintroduce”? Well the answer is this is the first Devblog I’ve done for Kana Quest in a while. And Secondly this will be the first Devblog that I will be sending it to everyone who has signed up to the Kana Quest mailing list. Which is something I am going to be doing from now on. And because I am going to be sending these blogs out on the mailing list, I am going to be making a few changes. Mostly being that I am not going to be posting these weekly like I used to. I don’t want to spam the inbox’s of people, and doing one a week was too much for me. So from now on, there will be a new Kana Quest devblog on the second Saturday of each month.

So for those who are new here, what can you expect in these devblogs? You can expect updates on how the game is coming along. Bits of news, interesting things that I’ve learned from making this thing, new features, and my general process.

So I’d like to start with the news. Lets get the bad news done with first, unfortunately Kana Quest will not be exhibiting at PAX Aus this year. Which to be honest is really bumming me out. What happened was that I was waiting for an inflow of cash before I booked a booth this year. And by the time the money came in, all the spots had been taken. If any of you were looking forward to playing the game there, I’m so sorry to have let you down.

But with the bad must come the good! And the good is that Kana Quest is no longer a solo project! I have my team member to come onto the project and I couldn’t be happier. As of this week the wonderful Reuben Covington is now the lead programmer for Kana Quest.

IMG_0277

Here’s Reuben helping me set up for AVCon (Anime Vid Con in Adelaide) earlier this year.

Reuben is an incredibly talented designer and programmer whospecialises in Collectable Card Game designs (and is also currently working on Infinity Heroes which you can check out here –> https://www.kickstarter.com/projects/elphie/infinity-heroes-competitive-card-game-for-mobile-p ). The reason why I think was my choice was because he has an incredible knack for bottom up design work. This is the sort of design that starts with a mechanic and iterates onto it to create great gameplay for the player. Whereas I am a Top Down designer. I start with a desired end goal and create mechanics to achieve the desired end goal (e.g. Wanting a puzzle game that teaches Hiragana/Katakana without any rote learning or pop quizzes). Both of these approaches I believe are super important, but they both have their drawbacks and strengths. Because of this, I am certain Kana Quest will be a better game with Reuben’s input. And hopefully, with his help, Kana Quest will hopefully be finished far sooner than later.

Speaking of Kana Quest being finished, when is that going to be? Well I know at PAX Aus last year I said that it would be in 2018. Sorry that’s not going to happen. But I wasn’t far off. The plan is to essentially finish the game in the first quarter of 2019. And now with Reuben’s help, I’m more than confident we can bring the game to you then!

What makes me so sure I hear you ask? Well for one thing, in terms of art assets, the game is a little over 80% complete! And for me, the most time consuming art assets to produce are by far the world art that go behind the puzzles. As of this week I have finished 11 out of 13. At my current estimates I am planning to have finished all the art by the end of October, or by early November at the latest. Speaking of art, here’s the world art for worlds 8-11.

World8pogoCat.gif

This one, was inspired by John Brack’s Collins St, 5pm. And you know… rush hour in Japanese train stations.

World8-9Transition.gif

Oh and this one is of the main street in Akihabara (The nerd capital in Japan). Along with some not so subtle Vaporwave jokes.

world10.gif

This one I mostly wanted to capture the feel of how lights reflect at night in big Japanese cities.

world11.gif

And this one is the obligatory reference to Hokusai. Fun fact, all games set in Japan by law legally have to include some reference to the Great Wave. *previously stated “fun fact” is in fact a fabrication*

I’m really proud of all the art that I’ve made for Kana Quest so far and I feel like I’ve come a LONG way as a pixel artist since I started. And I can’t wait to show you all the last two worlds. I am going all out for them.

But speaking of my pixel art coming along a long way since I started. For some of you who might have seen Kana Quest at PAX last year you might not have seen that I have changed the logo. Why is this? To those of you who’ve seen the game at an event this year, this will be the same logo that you’re used to. And if that’s the case, no I’m not going to upload the old logo because I don’t like it, and I like this new one much more.

KanaQuestLogoGifBorder

See, isn’t it pretty? I know I should be humble, but this logo was a lot of work and revision and I’m still kinda amazed I made something this cool.

This basically all I wanted to share with you all today. If you have a question about anything to do with the development of Kana Quest, please feel free to ask about it. I’d love to answer your questions. If you’d like to see more regular updates, you can follow the development on these social media channels:

Until next time, take care and have a wonderful day.

 

Advertisements

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!

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, 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!

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!

Page 6 of Bogan Bots is done. I decided that I wasn’t executing on the color well enough so for now Bogan Bots will be drawn in black and white. But now this gives me more time to polish my line work a bunch more.

BoganBots6.jpg

So this piece needs a little bit of explanation. My girlfriend wanted to get my dad a uniqlo tshirt for Christmas which is of Mike and Sully made of ivy. My dad’s favorite movie of all time is Monsters Inc and he loves gardening. One problem that shirt is only available for women. So we decided to do a joint present where I would draw a similar piece except with native Australian plants and my girlfriend would pay to get it printed on a shirt. The trees in the piece are a Jacaranda, Morton Bay Fig and a miniature Ghost Gum.

dadtshirt