Feature proposal - vector eraser that erases strokes up to intersections

Very often when cleaning an ink drawing, the artist will need to clean up line overshoots. A good example of this is hair, but it applies to many places in a drawing.
In vector software, we tend to favor line overshoots, because that way we know for sure that our shapes will be closed off and ready for the bucket tool.
The first time I see this idea applied in an open source project is in  OpenToonz - the 'Remove Vector Overflow' command. This is where this command is supposed to come in and save the day.

It however hardly works. Very often it does noting at all.In fact almost 80% of the time when you select two overshooting individual lines, nothing happens, or it erases parts of the lines you want to keep.

My suggestion here is to add two new modes to the eraser tool - when you are using it on a vector level. These two modes can already be found in other software such as toonboom, clip paint studio and last but not least - inkscape:

A. Erase up to intersection - This can be found in both Toonboom and clip paint studio. What it does is it erases the lines up to the intersection point - where they intersect with another line. Clip paint studio has it as an eraser tool mode and it works excellently.

Toonboom has two strategies to deal with this. One is the one clip paint uses. But as a second strategy - there is an option in the brush tool - to always create a new node where the stroke you drew overlapped another stroke. From there on it is easy to erase all the nodes exactly to that point and you dont need to move nodes around to get them to overlap. Another strategy with the brush tool is to automatically snap the beginning and end of a line to a closeby node of another line or the line itself (toonboom). Inkscape allows you to continue previously drawn lines - but unfortunately works at the end points of lines and is very limited.

B. Object mode eraser- very often the artist would require to erase entire strokes of a drawing - every stroke is a vector object. Right now in OT you have to go to the select tool, select the strokes and hit delete, then go back to the eraser tool to continue working. In inkscape the eraser tool can also erase entire strokes like this:

The implementation in OT almost never works in practice. It works when you draw a simple square, but when you draw a character and start trying it out - the one in clip paint does the job , while vector overflow in open toonz fails

I wonder how clip paint does it. It's the best one I've seen so far. Strokes there dont create nodes at intersections - so they must be somehow figuring out where the intersecting points are:

Here is my theory

--when the stylus starts a stroke in vector eraser mode:
1. Vector erase stroke collects a list of lines (like inkscape does in example B.) that you touched during the stroke.

--On release the following happens:
2. Instead of deleting the entire lines (which is an option also), it splits them all up at intersections points (cache result)
3. Using the result from step 2 , It marks the parts of the lines that your stroke has touched and deletes them
4. The lines that were split up (in step 2) are connected again
5. All the lines in the list of lines from step one are deleted and in their place are created the lines created by this operation.

To the user it looks like lines were deleted up to the intersection - just like it happens in the gif of example A .

Anyways, if i knew c++ i would have tried to figure out a way to make this. Hopefully a more experienced programmer will be interested.

So in order to implement a vector eraser mode that deletes lines up to intersections, you will first need to implement a mode in which it can collect a list of all the lines that it has touched.

You get two awesome vector erase modes in one!

Inkscape developers are much closer at achieving this tool, as they posses the main elements.
The default eraser tool mode already collects a list of lines that the stroke has touched.
The 'Cut Path' command can split a line where another overlapped it, it however deletes the line that overlapped it - which is something we do not want in this case!

Krita Developers - Are actually currently trying to collect funding via kickstarter to improve the vector tools in it. There is no statement made in the campaign that they are planning on adding such a mode to the vector eraser. It is not a stretch goal either. But in any case, I found out that some of them are quite aware of this tool in Clip Paint Studio. Whether we see it in Krita or not - only time will tell. It currently needs an entire rewrite of the vector system, but for that to happen they need your help:

If you haven't seen krita yet, feel free to give it a try. Downloads to the latest version are available at the kickstarter campaign page.

OpenToonz - The development of opentoonz is active as I write this, we will see if in the future they improve this feature. In any case, I filed it here #287 in their bug tracker.

Creating all the 3d graphics for a Kinect game - to teach kids how to cross the road

 A few months ago I just finished working on a game with Tri-soft.  It was created in Unity and was using Kinect for input.  The Goal of the game was to be a part of a larger event that is aiming to teach kids about road safety in a safe environment. The game came out and it even got some media coverage. Seeing as to how kinder-gardens and schools are using it now, I would class it as a successful project. You can watch the media coverage here (more pictures and video)

The deadline for it was tough. I had a month and a half to create ALL the 3d graphics in the game. The entire pipeline - including animations on three kids - one on a bicycle.

When we first started, the game was planned to be photo-realistic. It had no art style guide. So what I did was make one and offer it to the client - before doing any concept art or even modelling.  

I had to make sure that I know that they know what they want and I know what they want! :)
I offered them a short presentation of two styles - a cartoony one and a realistic one. Then left them to decide which one fits the target audience (little kids) more. The choice was obvious.

It was great that they went with the cartoony style, because it was much faster to produce (not requiring any normal maps) and it worked with the limitation of the old computers they have at the schools.
The target device handicap also forced the team to use Unity instead of Unreal engine.

 I couldn't get the game to look as good as I wanted to, due to the deadline. But I am somewhat happy that it is at least out there. Of course, I had to make some changes along the way to meet the client's demands. Also those ground textures were not my job.
For the characters:  After submitting a quick concept art drawing, I didn't get any reply so everything seemed fine. However when I got to the stage where the models of both kids were ready and textured, the client asked me to change the girl's dress completely, give her pigtails, change the boy's hair color and give him a red cap. In these cases, stuff like that always happens, but it is better to have something already made and easy to alter, instead of keep waiting for the client- halting the production. It's best to have something to give to the programmer to play with early on.The changes were in part with the issue of having the game displayed with a digital projector. The colors were getting washed out and it was not easy enough to see on the screen in which direction the kid's head is looking- looking at it from behind. I had to use very bright colors. On why they wanted both kids to be blond - I have no idea :D

I had to use my time wisely. In order to meet the deadline and leave some extra time for unexpected issues and client demands (which of course there were some) - I planned the assets in a way in which I can reuse things. Even at the stage of the concept art, I designed all three kids very similarily - where shapes deform - so as to be able to reuse the geometry of the first one to create the other two. This also allowed me to partially reuse textures (instead of starting from scratch), reuse skin weights, the rig and partially even animations!

The kid on the bicycle was a bit more complicated. Due to the bicycle being partially controlled by player input, I had to create a rig for it in a very specific way. That required a lot of back and forth communication with the main programmer. Thankfully he was a great guy and helped out a lot technically.

Finally the last dynamic object in the game that had to be designed was the car! For the car I wanted something that looks like a toy. The programmer asked me kindly to use more realistic proportions for the car in terms of distance between the tires. This wasn't too big of a problem anyway. Both the car and the bicycle were made in a way that would allow him to control their steering and speed dynamically with code. That part I didnt have to animate at least. For the bicycle I did all the animations, in a way that would still leave him with some control.

After all that concept art and planning, it was time to do the actual models! Even when you look at their screenshot, you can really tell that they have the same base mesh (which probably is not a good thing, but time was not on my side)!

 For the buildings: A big part of the work was done in blender. The excellent modifier and instancing system allowed me to create a big number of assets very quickly and save a lot of time in UV unwrapping. 

 Before modelling anything, I went out with my camera and took reference images of real places and things. The school is based on a school that I used to go to. The kindergarden is the one I grew up in. Even the ugly Eastern European communist style Blocks in the game are based on one that I used to live in.

 Each model of a building was planned in advance - so as to pack textures in the most efficient way and use the smallest amount of geometry possible. In terms of UV unwrapping/texturing, it was important to take note in advance which were the repeating elements in a building and what Islands I can overlap or even flip in order to save uv space - giving each building texture more resolution if the client wants more detail later on.

There were quite a lot of buildings to make. Some of them had more than one different variations- In texture and in number of storeys. On storey variations I simply used the array modifier. There was also quite a lot of mesh instancing used and snapping.  When modelling all the assets, I kept them all in a single blend file that (at least in theory) had the correct units set to export and also had some consistency in art style.

Finally here is a trailer of the first version:

Most of all I am glad that the game was made for a good cause. I hope that none of these kids ever gets run over when crossing the street. Would be nice if they liked playing the game too of course. :)

Speaking of good causes...

I used Krita for texturing. It's vector layers and color adjustment layers made my life very easy. It even has ALOT of amazing features that photoshop does not have and probably wont get anytime soon. Things like brush stabilizing, more than one brush engines, layer instancing, wrap-around view mode (great for tiling texture painting), a vastly superior to the bucket tool  fill algorithm (via gmic), and many more are completely missing in photoshop at the moment. Krita is free and open source - unlike Photoshop it doesnt require monthly subscriptions and is available on Linux too!

They currently have a cool kickstarter campaign to fund development and bring more features. Most of all the campaign is to get krita to run faster than photoshop and to become a dedicated 2d Animation application as well - meaning a complete animation system - unlike the one in photoshop!

You can download it right now and start playing with it. The funding campaign comes with some great goodies- such as an awesome learning dvd course for example.

Some hired work from the 2011 - graphics and mockups for tablet games

Back in 2011, I had the pleasure of signing up for a part time job with Cogworks studios  -as artist/animator . I made graphics and mockups for a bunch of iOS games/Apps. There was an opportunity to go full time, however I was in the middle of my second year at the University of Bradford - there were a lot of assignments stopping me from doing that. Also UK students are not allowed to work for more than 20 hours per week.


We used toggl to track my time each month. Sadly university took a lot of it and as you can see from one of my reports- I wasnt able to spend too much on concepts.

There was of course a non disclosure agreement with the job. Those type of agreements usually have a period of time - in this case 3 years - in which I am not allowed to release any information or show any of my work publicly. Well since 4 years passed I said to myself - What the heck, Let's do it. I am going to share with you some of the more fun ones. :)

Please note that some of these were quickly made sprites - used to put together a prototype for a few games. They were in no shape or form the final product. The names I am giving the games are not the final product names.

One of the projects was to do a game in a frame concept for Team 17. The deadline was very tight, so it's not very polished. I am not going to go into detail about the game ideas or design, since none of that was my work.

There was another ongoing project for a Jenga-like game where you stock blocks ontop of each other. I made a title screen, two backgrounds and animated sprites for the blocks. Each block had a face with a different character. Doing the backgrounds was really fun, since they were vertically very tall. We had a level where you stack blocks all the way into space, another one which started deep underwater and kept going until reaching the surface and so on. I had to use illustrator on that one, since it had better export tools.

There was a Bird in a factory game project where I made a number of bird concepts for. Then when we picked one of them - I made a fully playable animated sprite for the bird- run, idle, death, etc.
Some of the background elements also had to be animated - smoke, saw, travolator, etc etc. Those were simple enough to just do in Inkskape. I had set up for myself a script in linux that exports the svg layers as an image sequence. And another one which makes a gif file from the image sequence  (for presentation purposes). That saved a lot of time.

 I made an entire spritesheet in inkscape. There was no premade concept art, but the guys at Cogworks gave me some direction as to what animations they are going to need and some of the specific gameplay event items. I had some creative freedom in coming up with various hazards for the little bird though.

Overall these were fun projects for me and working with Cogworks was a real pleasure!
I do hope that they get to complete/release some of these games some day. Looking at my work from 4 years ago, I can't say that I am completely pleased with it. Surely it can do with a lot more polish! If these games ever get on production schedule, I would be more than happy to work on them full time.

d4i- Low poly stuff and using vectors to texture again

There is really no point in doing sculpting and retopology when the characters are really really low poly.

There is quite a lot I could get away with topology-wise, given that the shader is  to be shadeless and wouldnt have any normal maps - the only thing that has to work is the silhouette and the deformations.
The game engine triangulates the mesh, so I am allowed to use as many tris as I want to.
in order to preserve verts.
Instead of making uniform meshes, I would split a mesh into shells - to save on faces.

It took a few hours to get them from scratch to UV unwrapped stage. A nice thing about the mirror modifier in Blender is that it folds all symetric UV islands that its mirroring automatically when you apply it - one half over the other whilst putting the left side islands on top of their right side counterparts. This is not good if your model will use normal maps (as noted in a previous post in this blog), but its incredibly useful when you want to save UV space for obvious reasons. If you unwrap(again) after applying the mirror modifier, blender unfolds them in completely symetrical islands that are normal map friendlier. It's still very easy to later flip one half over the other if need be.

The shells are all uniform and no stretching for as long as you mark the seams right. Doing this is Maya is a hassle (without $$plugins??). Autodesk, please be more competitive and improve your uv unwrapper. :P

For the UV seams, I like placing those where I know a different colour/material of the character will begin. For example the snail's shell and skin would be on sepparate islands. This makes texturing easier later. I like cutting seams on the side of the character where I know the camera won't be looking.

Priority was given to UV islands that are going to have transparent sprites (bee wings, hedgehog spikes).
Islands that are on areas nobody will ever see (the mouth interior of the hedgehog or the bottom of the snail) I scaled down as much as possible - gave them very little uv space.
On top of that I used the snapping options to overlap identical uv islands (the bee's knees, legs,etc).

Next step , I exported the UV layouts and got them in inkscape, to be vectorised.

This splits the island shapes that were bleeding into each other. From there its a matter of Path>difference. 

This then gave me a nice and easy base colour for each island (picked it straight from the concept art).

Using vectors allows me to export it to any resolution, while having it small. Just as I did with the concept art, I decided to keep all of the enemy textures in one file, so it's easy to track if they are consistent in style, polish and execution. I used masking, clipping and other tools. New feature in inkscape 4.9 called "select same" allows you to select all objects with same fill colour, line colour, style, etc automagically. Useful when used with "union" to merge shapes, saves loads of time when colouring.

The three models can share the same material and therefore UV space. In total they are 685 faces (as you can see in the pic). I might have to add a few extra edgeloops on the snail's neck, might take out some geometry...

my vector graphics workflow

I thought that the time is right to take a break from all this 3d business and talk about vector graphics.

So what is the deal with vector graphics and how do artists generally feel about it?

Vector graphics technology is used in industry alot, because of its infinite-resolution nature. Printing, animation, design, websites, etc etc. The data of the illustration is stored in mathematical (geometric?) equations. A lot like 3d technology (vertices), shapes are rendered with points (nodes). Every line is made out of nodes and every node contains spline data. The splines dictate what the line between the two nodes will be. In 3d technology, I guess when comparing it to the splines, you can say that vertex normals are kind of like that, because they dictate how the surface is going to be rendered inside the silhouette of the character.

vertices-->edges-->polygons--> a 3d character(mesh)
Nodes-->lines-->shapes/fills-->a 2d character/object

Read in more detail Here.

While different software has different advantages, the basic tools for doing vector art remain the same and in this article , I am going to share my workflow with you.



This picture took me about 3 hours

Why Inkscape and not illustrator?

Since I dont own a copy of illustrator on my laptop, I had to use inkscape, which is much like what gimp is to photoshop..


My work process:

1. Draw a rough sketch with the tablet:


So in this part, I just plugin my tablet and make a rough sketch of my robots. Vector graphics software has pressure sensitivity, but since it makes the lines as fills, its almost useless further on.




2. trace the lineart-


Then the next step for me would be to lock the sketch layer , create a new layer and start working on it. In order to see better, I make the sketch layer semi transparent. My fills are by default empty (no color), so whenever I close a shape, it doesnt cover the sketch with some color.

As you can see from the picture, I first put my nodes at the right places, while knowing exactly where nodes are needed. Then To get the shape right, I adjust their splines or just drag-bend the lines. It's very important not too put unneeded nodes, because that would slow down your work.
In many cases, some fills will have roughly the same shape and number of nodes as others, so I usually just duplicate whatever is possible and readjust the splines so it fits.

When Modelling characters or inking them, It's always good to be economical- use just the right amount of nodes/vertices.


3.Put some colors in the fills-

Next on, selecting all fills that will have the same color, I would give them color. Since I hate the dullness of the lines in vector graphics, I tend to keep them either very thin, or completely get rid of them. In this picture example, you will notice that the guy in the car has some lines, while the female robot has almost no lines. I did it this way, just to compare the two styles and think about how to get around the lack of lines. To me lines are just a way to define shape. But when the shape has color, we dont always need the lines. We need to add some shadows here and there to fill the gaps - her neck had to be separated from the head (as a shape), so I added a shadow gradient.Without the shadow, the head and neck both look very flat. One big disadvantage of not having lines is when your foreground object/character does not stand out from the background, which in some cases might have the same/close color. It does look kind of nice though.


So the way I add soft shadows and put some blending between colors in vector art, is by using either BLUR or GRADIENTs.
Blurring does make the file a bit heavier.

Certain colors go well with certain other colors. Colors can be used to set the mood of the picture, to lead the viewer's eye to something. It's generally a good idea to avoid having too many different hues in a picture- it gets too colorful, too distracting.

=================================
So what are the disadvantages for artists and why is it usually a bigger task to make something in vector, than it is to just sketch it?

If you look at it, vector technology is so much better than bitmap (pixels) because of the infinite quality pictures you get out of it. Why is it not used more than bitmap by artists? Well, the answer to that question lies within the process of how that is achieved and in the complexity of the task of vectorizing something like say a photograph of your granny.

In order to get a nice, smooth and polished picture, inside a file that is throughly well structured (easy to edit and reuse for other purposes) you need to do a lot more than just sketch it and then brush in some colors.

To structure it well, you need to build it out of closed fills and define their lines as well. Some of them can contain a pattern or a gradient. They can also be blurred or made transparent.
The more nodes you have on a fill, the more time you need to edit them in order to get the right shape.

One drawback that I believe has always kept artists from vector graphics for cartoon style is the lack of line thickness data type in the nodes. So lines in vector graphics dont have varied thickness. A line is as thick in the end, as it was in the start and the middle. In order to get that natural flow effect, and when drawing with a tablet in flash or illustrator, instead of lines the software creates fills for you. So your brush strokes are being stored as closed shapes instead of lines. That dramatically increases the complexity of your drawing- it makes it harder to edit. It kind of kills the usefulness of a tablet to ink a drawing in vector graphics.

Of course, you can simplify the shapes with a keyboard shortcut in the matter of seconds. All vector packages have a "smooth" command that will clean up some nodes.But that doesnt change the fact that lines are being turned into fills when you use a pressure sensitive tablet.

That has always kept me away from inking my own art in a vector package. The only times I have used Illustrator,inkscape or flash and need it to be in vector format was:
1.when doing design of Icons/software graphics on Vector linux (inkscape)
2. Building character libraries (flash/illustrator) for Scoyo(well, I did some) and my own short flash film from last year :D

There is also the vectorizing software, that would try and do all the tracing work for you. In most cases it does its job, though not perfectly. I would use an automated vectorisation only on clean black and white sketches. The best application for this task seems to be Vector Magic.