Technical art questions and discussions

[Andail]

This is the collective thread for all your questions and discussions regarding
graphics
* programs
* perspective issues
* resolution/colour depth
* animation
* 3D
* techniques
* material, tools
etc
music
* programs
* Harmonies, chords, notes
* MIDI
* MP3 vs OGG
* recording
* instruments
etc
writing
* script writing
* grammar
* language
* style/genres
etc

So if you want to chat about any of these areas, but don't have anything to show, this is the thread for you.

[Jade]

Hi...
I was taking a look in the tutorial thread to find a good site that show how to make a good walking animation for my character......my problem is that i cant find one that teach how to make the front, back, and diagonal view...

Any help would be appreciated! 

[skw]

Good idea with this thread, Andail.

Ok, I also have a problem, this time I need some perspective issues. I can't explain it by words (due to my poor English*), so I've drawn a schematic picture with a simple room on it and the one reference point. That window and the cube no. 1 were easy to draw, but when I had started drawing next cube with -probably- another perspective point, the trouble appeared.

So let's face it...



The cube no. 1 is parallel to no. 2, the same for the edges. The "top view" box illustrates the relations between both cubes and room's walls. The question is following: how to draw the cube no. 2?

Hope it's clear to you.


*One of the reasons, why I've decided to sing-in and join this community is to improving my English skills, so... If you have a time and alacrity, please correct my utterances (as quotes, or post-edits), where it's necessary. I wish you do that with every post, that I will write, but it's probably impossible.

Anyway, I don't want impose this upon you, so I count only on your good will. C ya!

[Ubel]

You asked for it Skurwy:

One of the reasons, why I've decided to sing-in and join this community is to improving my English skills

Here's the first correction. It's "sign in".

Also your problem is kinda tricky for me. I'm not very good at perspectives or boxes or cube number 22's.

[skw]

Also your problem is kinda tricky for me.

Dammit! To put it simple:



I need to draw that as a 3d room with a correct perspective.


Tip for Jade: Hey, we already 've a "Tutorials" thread on Critics Longue board. I'm sure you'll find something interesing there.

[veryweirdguy]

I'm gonna try & explain this simply, but in the best way I can. Please ask if you don't understand anything. I came up with this:



I've used a technique called "crating". Basically, you draw a box in your original perspective (that is, on the same planes) and fit your new shape into it. The red box is the construction lines, in which I have put a normal cube. You'll notice that I have put little blue lines in on the top surface a little from each corner - these are my starting points for the second box, the slanted box.

From there you can join these four points to create the top surface of the slanted box, which I have done in black. Then you can take vertical lines down from these top corners until they reach the corresponding bottom edges on the red construction box.

That should give you the simple wireframe for the shape you want (which I have in black)

That picture looks a little confusing I'll admit, so I removed all the construction lines and gave it a (VERY) simple renderng to give you an idea of what I think the shape should look like:



This is just how I would do it, there may be other ways.

Hope that helps

[skw]

Thanx veryweird, I didn't have any bigger troubles with understanding it. Certainly this 's the good direction, but it didn't resolve my problem at all... [...]

EDIT: Damn, I suck...

http://www2.evansville.edu/studiochalkboard/draw.html.

Sorry!

[Andail]

Oh, I haven't been paying attention to my own thread!

A quick answer to Skurwy (without having really read through his post thoroughly) would be that in a central perspective system, with only one perspective point, you cannot recreate cubes and squares perfectly. There is simply not such way. You can make two of the sides incline properly, but there's no telling how deep you should draw them.

I have planned to make a comprehensive tutorial on perspective for a long time, and I might come back in some weeks with some first steps. Perspective is a fun area, but darn difficult sometimes!

[skw]

Okay, thanks! ...and sorry for this whole confusion.

I have planned to make a comprehensive tutorial on perspective for a long time, and I might come back in some weeks with some first steps. Perspective is a fun area, but darn difficult sometimes!

It would be great to see some comprehensive perspective tutorials for beginners / intermediates. Well, hope you make it someday!

[Ubel]

I just started practicing isometric pixel art. I drew this brick wall for practice:

1x2x

Now, I sense there's something wrong with the shading but I can't spot what exactly. Any advices for the shading would help me with my future works.

[Babar]

the top part of the wall seems wider than the lower part. Probably because the lower has 3 - lines with the top black and the lower highlit, but the top part has 4 (or 5) distinguishable black -'s

[Ubel]

I'd appreciate if you could explain that with pictures or make a paintover of some sort, Babar, because I don't really understand what you mean.

[Stickieee]

So if you want to chat about any of these areas, but don't have anything to show, this is the thread for you.

In another attempt of integrating into this AGS-cult, I just a few minutes ago thought: "Let me pour some of my plot writing excellence into these projects of yours" and started to go through the critics lounge. I tried to find a story that I could read and enjoy and give some ideas about. But I couldn't find anything but vague ideas of how the intro cutscene would look like and what'd be the protagonists goal.

Something like: "A guy in a medieval setting realises he has to save the kingdom from an evil dragon! In the end he manages to do this with great intelligence and everyone thinks he is a gret hero." Where's the story in that?

Don't people write down specific details? Describe the characters and the twists? Include the whole three-act structure? Or are people too afraid of publishing this sort of detailed information, because it would ruin their games or something? I'd love to read and criticise a good story, there's just no possibilities.

[Rui 'Trovatore' Pires]

Well, if this is a good place for it, I *can* go on about a recent story I've come up with - and whose progress is very sluggy because I lack the ability of turning it into a game. Puzzle design has never been my forte, and when I try to envision it I just get stuck either not being able to imagine something or imagining too much, waaaay too much, and thinking about all the l337 thing that«s make the game the BETS GAEM EVAH, if you receive my meaning. So I suppose I could use some help in that regard.

I guess I might as well. Is this a good place for it, then? I was actually under the impression that "just the stories with nothing to show for them" didn't really belong anywhere in the forum...

[flamingdog]

Hi all...

I'm working (slowly) on my first five-room puzzle, which will act as the prelude (I hope) to a longer adventure in future. I've been busily working on a 'shooting script' (which defines room hotspots, inventory movements and character interactions between them), and a bit of concept art. I was thinking vaguely of ways to create the graphics, and was wondering what the community's thoughts on Blender 3D as a tool for creating environments and characters?

I don't know much about the program or 3D modelling in general, but I had the vague idea of using it to pre-render my backgrounds, and possibly my character animations.

Thoughts?

And:

Puzzle design has never been my forte, and when I try to envision it I just get stuck either not being able to imagine something or imagining too much, waaaay too much, and thinking about all the l337 thing that«s make the game the BETS GAEM EVAH, if you receive my meaning. So I suppose I could use some help in that regard.

I think puzzle design ought to arise as naturally as possible from the obstacles of your plot, otherwise you're just throwing problems at your character for the sake of it. I mean, in a sense, all plot design is coming up with obstacles for your characters to overcome. In my view, all you need to do to apply that to an adventure game is make your plot's existing problems solvable by the player's actions. Look at Fate of Atlantis, for instance. That's one of the very few adventure games I managed to complete without ever consulting a walkthrough/hint. To my mind, it was because the puzzles were natural to the plot, and the solutions were never overwrought, even on the wits path.

There's an article on Old Man Murray about a puzzle in one of the Gabriel Knight games that was stupidly overwrought (the cat hair/maple syrup puzzle). You need to beware of that too, I think. Link: http://www.oldmanmurray.com/features/77.html

[Ishmael]

Since the boring lot on #ags refused to answer me anything, I'm putting this here. I was working on graphics for my game's GUI, and started wondering what would suit as the icons for save and load instead of the usual old floppy discs or floppy disc and an open folder? One option is just buttons with the text on them, and that's what I'm using right now, while I'm trying to come up with something original.

[Theme]

If I do a character sprite from a side view
and then do a bg with the camera looking from the upper corner to center of a room
then I have to remake the character sprite? 

o/

[Venus]

If I do a character sprite from a side view
and then do a bg with the camera looking from the upper corner to center of a room
then I have to remake the character sprite? 

o/

I guess it depends. This is a screenie from a discworld game. Don't know which or where I got it as I've never played it, but just came across that screenie on the net, liked the graphics style and saved it one my hd to study it a bit more.
Screenie 1
Screenie 2
Screenie 3

I guess you are aiming for a perspective like that. As you can see, they just used the normal side-view and it really looks acceptable imho. Of course, if you look at it closer, you'll soon recognise that there is something not quite right about the character's perspective, but hey, they didn't even do an extra perspective for the character in this professional commercial game which had at least three screens featuring such a perspective. Why should you bother if not even people do who earn money with their games?  . I'd say just use the normal side-view.

[Meglet]

I'm having difficulty understanding bit depth.Ã,  I know games can be 8-bit and 16-bit and all the graphics I have made so far have been in the standard 256 pallette - not a lot of colors there.Ã,  I haven't really tried taking advantage of room-dependant colors yet with 8-bit, though the more I think about it the more I like that option.

The program I use, Paint Shop Pro 7, doesn't have 16-bit listed as a color depth option.Ã,  I've tried out a free trial of PSPX where it's an option, but if I open up a picture that I thought was more like 24-bit, it has '8-bit' checked and 16-bit is a higher color option.Ã,  If I go ahead and change it to 16-bit, I see no difference.Ã,  If I save the revised file as a .pcx, it warns me that the colors will be bumped to 24-bit.Ã,  If I save as a .bmp, it warns that the colors will be bumped to 8-bit, or 256.

I've been really impressed by the graphics done in 16-bit, but I don't think I'm accurately understanding how this system works and how to use it effectively.Ã,  Any help you can give is greatly appreciated.

[Gilbert]

When you use 16-bit mode for graphics just save your graphic files as 24-bit, and AGSedit will automatically downgrade them to 16-bit while importing, afterall, I think even if your graphics programme can save an image as 16-bit, AGSedit probably can't import it correctly anyway.

[Meglet]

I gave that a try and it seems to work pretty well.  There's a few spots I need to be cautious about when coloring, but overall it's what I was looking for.  Thanks!

[Drawken]

I was wondering if someone could explain this to me. I found this page at http://www.fineart.sk/show.php?w=183


In the drawing above the following problem is worked out.
Draw a room 18 by 27 by 12ft. at normal eyelevel, with two figures standing 25 ft. apart, in single-point perspective.
Solution: Establish a vertical scale on a horizontal scale. Mark these off in floor units to be equal on both scales. Set the horizon at slightly less than 6 vertical feet. Set vanishing point of intersection of horizon and vertical scale. Connect horizontal units to VP. Establish depth at first square foot. Draw diagonal to horizon. This establishes VP of the diagonals for all receding units and also creates a unit 9 by 9ft. Repeat this unit with diagonals as shown.

Everything makes sense to me except for "Establish depth at first square foot." How am I suppose to do that accurately? If I put the line too high or too low it will turn out to be a rectangle.

If there is a way to do this accurately, how would you use this formula in 2-point perspective?

[esper]

I was wondering if anyone could point me to an old english font that uses "f" for "s" like alot of early printing used to use...

[Drawken]

What was the process of coloring images for CMI?
I've been trying to duplicate this image to test my coloring.
I can't figure out how there are so many areas with bunches of colors that don't even seem to go together.
One of those yellow knobs alone contains 50 colors.
Was this done by hand?
How were the outlines rendered without going outside the color palette?
--------
What is the process of creating a background and coloring it in this style while using a limited palette?
--------

[homeworld]

Everything makes sense to me except for "Establish depth at first square foot." How am I suppose to do that accurately? If I put the line too high or too low it will turn out to be a rectangle.

Thank you for posting this, that picture helped me understand perspective better! Initially, i was about to say that there's no precise way to calculate the square sizes, my teacher taught me always to estimate the square's depth, but then i figured out what the artist meant. From what i can tell, the diagonal vanishing point is needed.
http://i17.photobucket.com/albums/b66/homeworld4/squares.jpg
After you have the diagonal, you can just put the horizontal lines through each intersection, the way the artist shows. Of course, my squares are very distorted, especially to the bottom, i'm not sure why they came out like that. Probably because the original artist put his diagonal vp farther to the left than me. I have no idea how to incorporate this into two-point perspective, though.

[Play_Pretend]

I know with my own personal problems with perspective drawing accurately, I find it much easier to trace my own new vector art over a scanned photograph for my backgrounds.  I was curious about the AGS community's feelings on this...is it generally frowned upon to essentially trace over, even though your art is technically original?

[Ali]

What was the process of coloring images for CMI?
I've been trying to duplicate this image to test my coloring.
I can't figure out how there are so many areas with bunches of colors that don't even seem to go together.
One of those yellow knobs alone contains 50 colors.
Was this done by hand?
How were the outlines rendered without going outside the color palette?
--------
What is the process of creating a background and coloring it in this style while using a limited palette?
--------

I can't say for certain, but I'd guess that the backdrops for CMI weren't painted with a limited pallete. I imagine they'd have been produced with millions of colours and then limited to under 256 with dithering to keep gradients looking smooth.

is it generally frowned upon to essentially trace over, even though your art is technically original?

Lots of AGSers trace images. Prince of Persia used tracing. Snow White and the Seven Dwarfs used tracing! Lots of people trace, I don't think you should worry about it.

[Scummbuddy]

What was the process of coloring images for CMI?
I've been trying to duplicate this image to test my coloring.
I can't figure out how there are so many areas with bunches of colors that don't even seem to go together.
One of those yellow knobs alone contains 50 colors.
Was this done by hand?
How were the outlines rendered without going outside the color palette?
--------
What is the process of creating a background and coloring it in this style while using a limited palette?
--------

What you can do, is draw you backgrounds in pencil on a sheet of paper. Ink the final outlines, and scan that into your computer. Use that layer as a top layer in photoshop, or your favorite drawing program, and draw below it in new layers. I would suggest to "color in" the base flat colors of all the shapes outlined. For instance, the wall at the bottom of the image.... All the wall would first be colored the same color of tan/beige. Then after adding more layers of more colors on top, you would begin to see your shading and highlights. When you are happy, you can flatten your image and import it into AGS.

[Dan_N]

Hello. I know this might, no, will sound silly, but how do you post images?  :'(

[scotch]

Just above where you write a message it says "How do I post images, smileys and formatting?"
Click that.

[Dan_N]

 :o Oh, I see it... 
Thanks...

[Cookieswithmilk]

This is a little complicated, so it was hard to figure out where to put this...

I've hand drawn some sketches and would like to put them on the computer. I haven't colored them yet and was planning to do it on the computer.

Because the drawings were in pencil, there are all kinds of shades of grey on them. I'd really like to make it just a black and white drawing to make things simple. Is there a program that can do this for me? Revert the dark grey to black and make everything else white? I know I could make two layers and have the sketch in the background and go over it in black on the top layer, but I'm simply terrible at drawing with a mouse...

Any ideas?

[GarageGothic]

Try playing around with the contrast/brightness controls to make the darks black and the light grays white. Pretty much any drawing/photo editing program more sophisticated than Paint is able to do this.
If you're using an advanced program like Photoshop you can adjust the contrast curves manually for better control of the result.

[boojiboy]

Hey, a question for the more experienced artists.
I want to buy a graphic tablet. Can anyone recommend a good one? Or a good cheap one preferably. Something I can get from amazon or ebay?

[MashPotato]

Perhaps this thread might help for some general info ^_^: http://www.adventuregamestudio.co.uk/yabb/index.php?topic=27494.0

[Elric]

To answer two of the questions posted during the last millenium ( Still, I think it's valuable info for anyone )

This is the way Bill Tiller painted the CMI backgrounds :
[Quoting from an interview in www.scummbar.com]

"The Project Leaders would give me a written description of a room or a small rough sketch and then I would make five or six sketches, in rough form, to show them and get feedback. I would then scan the rough drawing in to Photoshop and make all the changes the PLs wanted there. This rough scanned in sketch also went to the programmers and was used as temporary art so that they had some thing besides programmer art to work with. I would then print the scanned rough sketch out on a black and white laser printer. The printer paper was too small, 8” and a half by 11”. I would then blow up the printed sketch with a photocopy machine till it was about 11” by 14”. That was the size of the marker paper I would use, and I used marker paper because we had a ton of it lying around, thanks to Peter Chan, and the pencil went on it more smoothly than sketch paper.

I did all this scanning and photocopying to keep the proportion of the small rough sketch correct, because it was what the PLs approved and I wanted it to be accurate. I would then slip the photocopy under a piece of marker paper and sketch over it with blue pencil. The marker paper was almost as transparent as tracing paper but it was stronger and scanned well. I used the blue pencil because it is very light and I could sketch the layout without worrying about any mistakes because it wasn’t the final drawing anyway. The final step was to take the blue sketch that I just finished and put that under another sheet of marker paper and with pencil, draw the final line drawing. This was the final image so it had to be sharp and clean.

I would then scan it back in to the computer. In Photoshop, I would paint in some rough colors for my background painters to use. This was painted under the finished line drawing on a digital layer below the line drawing.

Next I would either do the final painting myself, if I had time, or I would hand the color rough over to Maria Bowen or Kathy Hseih for them to do the final painting. The last step required me to reduce the colors down to 245 from eight million. For this step I used DeBabbleizer, a program that specializes in just this sort of thing. The game could use 256 colors but the backgrounds only had 245. The rest went to the interface, inventory and to Guybrush’s palette."

And a tutorial on how to transform colored images to b/w ones and how to get rid of all the grays in a b/w image using the levels function :

http://www.gimp.org/tutorials/Sketch_Effect/

[joelphilippage]

How did they do the sprites for the curse of monkey island? The animation looks very smooth.

[Elric]

http://www.scummbar.com/resources/articles/index.php?newssniffer=readarticle&article=1013&page=2

[zewb]

Ah yes, DeluxePaint was (and still is) a fine program for sprites and animation. Look for it in the "List of Paint Programs" thread. The DOS version has a built-in animation system.

[joelphilippage]

Ive got another question I really like the graphics for Malcolm's Revenge but im not sure how they did them. Some part's look 3d and some parts look painted.

[TheJBurger]

I have some technical/artistical questions about certain aspects of drawing, and if anyone has the answers for me, that'd be great.

Lighting:
Light beams - When to, and when not to use them.

I've frequently been experimenting in lighting in a lot of the backgrounds I draw, and particularly with concentrated light sources. Sometimes I use "light beams" that come from an opening to create a dramatic effect, but I really have no idea about the technical aspect of when they really exist, and when to use them.

E.g.
Case 1:
This one was made for the background blitz awhile ago. I'd seen similiar pictures with light beams in a similiar enviroment, so I just copied the idea. I don't know if this really exists in nature though.

Case 2:
This was a sketch I made a little while back. It's supposed to be a run down room on a second story with one window on the side. I originally used a very strong beam of light coming from the window but I toned it down so now you can't tell too much that the beam exists, or if it's just lighting on the walls.

So my question is, when is it ok to use strong light beams? Or should you even use them at all?

Bounce light
So I've been reading about this thing called bounce light that causes the opposite side of an object to illuminate with another color. I guess this would generally be the color of the opposing light source. In outdoor scenes, should there always be a bounce light then? And would this be a blue bounce light?
Most backgrounds in A Tale of Two Kingdoms have blue bounce light on outdoor objects like trees (sorry, I couldn't find a good screenshot at the moment). Is this correct to do from an technical perspective?

General lighting
(Without having any professional knowledge) My guess is to light all objects with a hue of color from the light sources and a lesser hue from the bounce light. Would that always be a brightish yellow white for the front lighting and a blueish bounce light for outdoor scenes?

[Azaron]

First off, the light beams: These occur naturally, but only when there is some sort of particulate in the air. You only perceive light if it hits something, so in order to see a beam of light, there must be some sort of dust or water vapor or other gas in the air for it to bounce off of. Otherwise it is invisible to you. Now, the more dense the concentration of particulate, the brighter and more defined the beam will be... TO A POINT. If there is too much particulate, it will scatter the light and wash out your field of vision. Walk outside during an early morning heavy fog, and you will see this effect. Or turn on the high beams in a car in a misty area. It will literally make it impossible to see anything beyond the vapor in the air.

So, I would say as far as using beams in your art, they can be used to affect the mood of a piece, but keep in mind that using them will give the piece a sense of heaviness in the air, as well as allowing you to draw focus to something. ie: in your forest piece there, the beams draw my attention to the opening in the rock face, but also give the impression that the area is very humid (which, judging by the look of the foliage, it is. Good work ), or very dirty (lots of pollen in the air, although if there was enough there to effect beams like that you wouldn't be able to breathe ). I also get the impression that the scene takes place early in the day, because that is the time that moisture tends to "burn off" of evaporate into the air.
For the room, a light beam coming through the window would definitely give the impression of a lot of dust hanging in the air, but it would also be a little harsh to look at if it was too bright and may wash out important details behind it. In some cases it can make a room look smaller too.

Bounce light is just that: light that bounces. Objects reflect their color and absorb other light, so any light being reflected off of an object will be the same color as the reflecting object. You also have to take the object's surface into account. A rough surface will diffuse the light to the point that it will be negligible, but a shiny or smooth object may actually reflect a great deal of light. The reflected light will lose some of it's intensity, however, so no reflected light will ever be as strong as the initial light source unless it's reflecting off of a mirror.
Loominus just posted an EXCELLENT tutorial about light in one of Hillbilly's threads in the CL, so take a look. It's good stuff.

[ZayanM]

Regarding cast shadows in backgrounds:
How does one know what type of shadow to draw? Sometimes the shadows are blurred and at other times quite distinct. It gets more complicated when the shadow falls on irregular shaped objects. Also, how can you figure out the angle and length of the shadow?
I've been looking this up online, but I still cannot figure how to implement it in a game background.

Help would be appreciated. Thanks.

[scotch]

Bounced light:

As Azaron pointed out, there's no reason for bounced light to become the opposite hue to the lightsource. Bounced light takes on the apparent colour of what it bounced off (which is why you see things that colour in the first place). There's currently a lot of green light pouring upwards through my window, because of the way the sunlight is on the grass here in the morning. People do often backlight things with a complementary colour though. It's common in the real world (diffuse blue sky light vs yellow sunlight) and creates a contrast. It's not bounced light so much as ambient light in that case.

Shadow hardness:

The hardness of a shadow is defined by the distance the shadow is from the shadow casting edge, and the size and distance of the light source. A perfect point light would only make hard edged shadows (directly), but real world lights generally have some noticable area. Essentially it's about how much of a light source's area is obscured at a particular point on the surface. Imagine you are looking at the light from that position on the surface. What percentage of the light's area is blocked? As you walk into the shadow, more of the light source is becoming invisible to you, so it gets gradually darker. The smaller the light source the faster this happens, and the harder the shadow is.



Obviously as the shadow casting edge gets closer to the surface it's casting onto, the shadow becomes harder and harder.

You can construct the shape of the shadow with perspective rules, but luckily in most cases you should be able to eyeball it. Lower lightsources equal longer shadows of course...

[radiowaves]

Shadows depend on light strength and material the light is directed. Sharp shadows, distinguishable shapes are caused usually by direct light. Usually the edges of the shadow shapes blend a little when the material is soft or there is something else reflecting the light (a bright surface).
When light is indirect, shadows are blended so that their shape becomes almost indistinguishable. This is because of the physics that light particles have. When light ends, in an unreachable point, the rays still bounce forfard, causing the effect of fading shadows and light reflections on surrounding objects. Therefore scotch's picture is not 100% true. His sunrays would still produce quite sharp edges, but not complete fading.

If you take a cube for example and put it under direct light from one side, you see that the shadow it has is actually lighter in the inner section when its closer to the cube, same goes with the shadow on the cube that is closer to the floor surface. That is caused because of the light beams reflect and bounce from different surfaces to another.

Some examples:



And this famous Edward Hoppers painting:


Notice how the closest wall in a shadow is actually greenish-yellow instead of blue. That is due to a colour reflection. Remember, shadows aren't black and white, they are actually coloured. Usually the rule is that warm colours have cold shadows and vice versa. And in cold colours, reflection of warm colours pops out. But that is not always 100% true, still, it would be enough for you I think.

Also remember, that those reflections in shadow, the bouncing light etc, are not just light, its actually colour of different surfaces that shine and reflect on each other with light. So, when you have a blue cube on yellow surface for example, some of the bright yellow is reflected on the cube. Always remember that brighter colour reflects more on darker colour and all bright areas reflect light.
If you look at some pictures, where perspectively and what-so-ever all seems to be correct, objects have shadows etc, but still parts of the image look weird and unnatural, know that usually the problem lies in missing colour reflections. I always try to lend colours of different objects onto the surfaces of others when doing my pictures, so the whole piece would feel like a whole where everything is fitted together and not scattered floating pieces. That is also the reason why most of the pixelartists try using lesser colours, it can be taken as a practice in lightning and colour composition.

But what can be really mind puzzling are the reflections and shadows on different shapes. For that, I've actually collected a few tutorials which can be found on a sidearm of my homepage: http://www.clicksandbleeps.com/tuts.html

Thats all! I am not smart and diligent enough to continue writing on this topic, so I end thi here for now, hope it helped


As with sunbeams, most of the above was true, but lets not forget that sunbeams cannot come from clear sky in an open area. Thick beams of light need a dark area with sharp light source (a hole in the ceiling). And on some occasions, when the light is very very strong and due to a structure of source, beams can appear in non-thick air too. And the main rule is that area needs to be darker than usual so the beams can shine out.

[scotch]

My picture isn't of the sun, it's of nearby light sources of various sizes. Sorry if it's not clear enough from the shape of the shadow that the light is fairly close to the object, and not a 150 million miles away. The sun does occupy a relatively small area in the sky, so its shadows are indeed quite sharp. Usually between the first and second images in a typical scene.

[ZayanM]

Hey thanks for the replies, plenty of useful information (including the link)  . I didn't think shadows would be for me the tricky part of the backgrounds but they turned out to be so. Still implementing shadows in a game background is proving slightly perplexing, which more practice should fix.

[Oliwerko]

Hello there guys.

I am working on a BG and it's giving me a hard time.
It's a garage, and I want a vehicle in it. But everytime I try it turns out that it sucks. I'm not posting the BG here, because I would probably in depths of my mind copy somebody's repaint. 

All I want to know is: How do you people draw vehicles ? What are your techniques ?

[Oddysseus]

I find a picture of a car from the right angle on Google Images.  Then I scale down the image so it fits in the background, and save that version of the picture.  After that, I usually trace over the outline of the smaller image, and use the bigger image as a reference for the highlights/shadows/etc.

Some people would consider tracing over a scaled-down image "cheating," but I prefer the precision of that method.

[Oliwerko]

Wow, that's pretty difficult, because of the perspective and so on. Don't you have problems finding a suitable image ?

[zabnat]

I would probably start with box or boxes as boxes are easy to draw in any perspective. Then refine the car shape inside the boxes maybe using some car blueprints and photos for reference.

Something similiar to technique used for making a 3d model of a car. See www.suurland.com for blueprints and tutorial for making a 3d model of the car.

I'm not sure if you understand anything from my explanation but it's pretty hard to explain. But you can take some important dots/corners/points from the blueprints (like the corner of the door) and then place it on the faces of your box (which is drawn in perspective), place it in the side face of your box and the top face and then draw lines to the same place on the other side of the box (for the top face draw the line from the dot from the top face to the similiar position on the bottom face) and then you find the correct place for that dot in the intersection of the lines. Add more dots and then draw lines between them and you have a picture of a car in perspective.

This is hard work, but if you have a good understanding of perspective you can cut some corners here. This is just one technique, I'm sure there are better ones...

[Oliwerko]

Yeah, i thing i've got it now. Started with boxes and developing it in layers on top of it in many steps. It's turning out nicer and nicer.

Thanks for tips boys 

[Luke Lockhart]

Here's my question, which is a bit more basic than most here, but it's somewhat important for me: how do I make my sprites look like each other from different angles? In other words, if I have a character and I draw her facing the screen, how do I make a new sprite of her facing to the side or away from the screen and have the drawing look as if it's the same person facing a different way, instead of an entirely different character?

[zabnat]

To make it look like same character from different angles you should first create a character and then make a sprite of character. Sketch the character first and think about what basic geometric shapes it is composed of (think 3D). Then you can sketch it in different angles. After that you can start making a sprite.

Also this tutorial by ProgZmax at cgempire will be most helpful.

[TheJBurger]

2 Questions:

What is the golden ratio, and how does one use it in composition?
All I know about the golden ratio is that it is equal to 1.61803399 and it can be used in composition to achieve certain results. The only real info I've picked up on it is here.

So, how often should you apply the golden ratio to a picture, what uses does it have, and should you always put the focal point on it?

What elements can be used to strengthen a composition?
Off the top of my head, I can only guess
- Perspective: lead the eye to the focal point. What if you dont have/know what your focal point is?
- Lighting: Draw the eye to the focal point with darkness and brightness.
- Golden Ratio? Put objects in certain places on the backdrop?
- Foreground Elements/Overlapping objects: Create depth in the picture.

[rock_chick]

I'm not sure if this is the correct place to ask this but I've been looking all over for textures that are appropriate for games, mainly things like tiling for kitchens and bathrooms and carpet textures. The ones I have come across are a bit too realistic for my game(as in they are basically real pictures, even though my game using hi res graphics). Also most 3D design.
So does anyone know of a source or program(besides GIMP or maybe some links to plugins or whatnot for it that could be added to the program for these textures) for this sort of thing and also I need to make sure I can understand the credit and conditions of using them, mainly on websites are a bit unclear or want links back on a website(so they're designed for websites).

[Oliwerko]

I don't know if I get correctly what you want, but I think the best thing is to make everything by yourself. It takes away much of the rewarding feeling when you use someone else's work. If you can't draw something in sufficient detail, go for less detail, but for your own work.

I don't know for sure how it is in high res though. I make low res graphics for now, and things like tilings and so on can be easily made. Anyway, I would always go for my own work...

[rock_chick]

Again this may not be the correct place to ask but I've looked at all the tutorials in the tutorial section in the Critics Lounge and few explain for newbie's on computer drawing(not sketching on paper and then scanning it and such) how to learn how to draw simple stuff and maybe then harder stuff but in a sort of step by step guide. I want to learn how to draw but few tutorials give you an idea of how to use the tools in even simple programs like MS Paint(most are based on Adobe products) to really help newbies at this grasp an understanding of how to draw properly in simpler programs, the bare basic is what I'm getting at.

[Oliwerko]

Do you want to know how I started?

Well, I have read Eric's tutorials a few times, looked at Trilby a lot (and I mean a lot, 5DAS running in background) and then just popped up PS and tried to do the same thing. Then I got disappointed with results and half a year I have done nothing. But then I collected all my patience, and tried once more. I tried to draw a background, and it did not turn out very bad, actually.
One VERY important thing is to choose a good paint program that you feel comfortable in. I personally use ImageReady for animation, ArtGem for BGs and GraphicsGale for sprites. Start basic. Basic furniture like shelves, sofas, TVs, square things. Squares are easy.

But I guess all of these I have covered in my tutorial you have already probably read. In case not, do it, it is in the Tutorial thread in CL.

[Trihan]

I'm not sure if it's appropriate to post in this thread this long after the last reply, but given that it's a sticky and I won't be bumping it I guess it's not a problem.

Anyway, I have more or less the same problem as rock_chick. I used to be a fairly decent artist but through lack of practice I can't even draw a circle any more, let alone do a proper sketch on paper. Does anyone know of a way to practice and improve pixel art skills when you lack the basic tools of the trade and can't really afford them? Pixelling on a budget, if you will. There are loads of tutorials out there but none of them really give you a true step-by-step "do this along with me!" approach, which I think would be immensely useful.

[Oliwerko]

Hey there, it's ok to post here anytime.

I guess there are no tutorials that go "step-by-step", 'cause it's always based on your own skill and patience. There will be always these steps you can't understand. Everyone knows that the only "true" way to improve is to accept the boring hours of unsuccessfull practicing and hordes of scraped attempts, but try to avoid that by any means, everyone does that.

I've already explained my approach: choose a program (go for something free in your case, it does not have to be as comlicated as PS or such. Go for GraphicsGale or ArtGem, they are simple yet powerful.) and get a hang of it. There isn't much to explain on the program tools.

At least for me, the only way to practice and improve after having selected a proper program was practice. Practice, practice, practice. Do you know any "step-by-step" guides to basketball? I do not. You just have to try and practice, and you will improve. Things are not B/W though. There are tons of tuts that can help you, but only to some extent. It always comes to the practice part, which is difficult in the beginning, but will eventually become entertaining.

Read a bit, the tutorials that are here in Critics Lounge.
I have learned a lot on Eric's (MrColossal) tutorials. They are the most step-by-step I could imagine. Totally recommended. Take a look on the others as well.
When you've read enough, just put your favourite CD in your player, fire up your favourite graphics program and start practicing. There's no way around.

If there is, let me know. 

All of the best luck to you.

[abstauber]

Okay, I admit, I really like tools   But this one is actually quite useful with working on perspective. At least it helped me speed things up.

Anyone else using this fine tool?



(btw. it's a vertical scrolling background with 3-point at the bottom and 1 point on the upper side.)

[Layabout]

That tool looks mighty fine.

Don't friggin tease me with something that looks so friggin awesome and not link me to further information on said tool!!!

Tell me more!

//edit

Ok, so I found it a minute later.

http://www.iconico.com/protractor/

I wish I had sweet sweet money to splash out on a mighty fine tool like this.

[abstauber]

Oh, sorry about the link. But yes, that tool is incredibly expensive. There's still a trial, but I don't know, how feature limited it is...

Too bad, I'm just a php/javascript guy, so I can't recode that tool for free. Though it can't really be that hard to write such an application...

[InCreator]

Oh, sorry about the link. But yes, that tool is incredibly expensive. There's still a trial, but I don't know, how feature limited it is...

Too bad, I'm just a php/javascript guy, so I can't recode that tool for free. Though it can't really be that hard to write such an application...

This tool is clearly overpriced. You can make your own protractor using something vector-based, thus accurate, such as Illustrator or CAD software or... hell, even drawing angled lines in PS and keeping it as template on separate layer.

Such template might not have all the features, but does the thing, I think.

Actually, it gave me an idea. I'm using ArtiosCAD for my work, how would it benefit in making a room outlines, and then exporting vectors to Photoshop?

[abstauber]

This tool is clearly overpriced. You can make your own protractor using something vector-based, thus accurate, such as Illustrator or CAD software or... hell, even drawing angled lines in PS and keeping it as template on separate layer.

Sure, but it's so much faster with the protractor

Actually, it gave me an idea. I'm using ArtiosCAD for my work, how would it benefit in making a room outlines, and then exporting vectors to Photoshop?

You mean, like creating a wireframe room in your CAD proggie and then exporting it to PS?
For people knowing how to use CAD programs, it might work. But those stuff you've posted earlier already looks very nice so I don't really see the need.

Also:
Maybe recoding that app for free is a call for the Scottish Super Hero

[cat]

Wow, this looks useful. And I don't think, that it is really THAT expensive (at least if you compare it with the price of photoshop  :)

[CommonGround]

Im trying to upgrade and make more backgrounds for my game, i was wandering if anyone could lead me towards something nice. Paint doesnt seem to give great backgrounds.

[Domino]

Hello CommonGround, check this link below.

http://www.adventuregamestudio.co.uk/yabb/index.php?topic=32234.0

Happy Drawing. 

[Layabout]

Hey commonground, you should try the Gimp, a free alternative to photoshop. I hear Paint.net is good as well, but I've never tried it.

And remember, even though MSPain is clumsy and a rather useless bitmap editor (although some people can make good art in MSPain, look at spooks by Ivy, all art, bg's and animations were done in MSPain), you need to have some inkling of artistic talent, or at least a cheat for making decent looking scenes, like Crowshaw used in Trilby's notes.

And if you need help, ask for it. Post your wip's in this forum and let the crew give you pointers and suggestions. The tutorial thread in this forum has some great.. uh... tutorials.

Happy Backgrounding.

[auriond]

Here's a freeware screen protractor. Not sure if it will measure up (pun intended) to the commercial protractor program though:

http://www.markus-bader.de/MB-Ruler/

[abstauber]

Hey, awsome find. I think the basic version would do it in the most situations.

And that guy sells the pro version for only 199 $ ... coding protactors is a money-spinner

[abstauber]

Another art related thing...

how do you conveniently texture big structures like a cobblestone road. I think there was a tutorial around, but I can't find it anymore.

Oh and yes, pixel art hints are preffered

[Ghost]

A simple method in P'shop is to create a brush with a jagged, zick-zack look. A few lines and dots, nothing too complicated. Then you mask your road area and fill it with one solid base colour- and then you dot the area with the brush, using two or three variants of the base colour, and setting the transparency to something between 60 and 90%. The result is nice and random and works well for cobbles, trodden earth and suchlike. If you stick to a sharp pen tool, it *can* be called pixel art 

[abstauber]

Cool, thanks a lot! As of today I've only used custom patterns and filled them - lets see, how this brush thing works

As for the tutorial, I was looking for. It was something cobble stone related with seamless tiles. I think the author was filling the road in front of the scumm bar with it, but I'm not sure.

[abstauber]

Nevermind, I've found it here:
http://kafkaskoffee.com/tutorials/gradients2.shtml

Thanks anyway and also thanks for that Screenshot, Ghost.

[IndieBoy]

I wish Ghost just goes ahead and post his BG tutorial.

[abstauber]

If you work with layers and lock your transparent pixels before shading, it's not too hard.
His rim light is pretty neat though

[lostbuthappy]

Hi guys,

I'd like to know how you apply textures to a surface that is not parallel to the "camera", like the walls to the left and to the right of a simple room for instance (see mockup). I'm using the gimp and found a neat little feature that actually allows you to squeeze a texture to fit in any three- or four-sided polygon (used on the left wall in the picture). The problem with this appraoch is that the result is quite blurry - for no apparent reason. Beside that it does not help with more complex surfaces like pillars or bent, comic-like architecture.

So how do you do it? Is there a little specialized tool that helps with this?
Thanks in advance!

[Ghost]

So how do you do it? Is there a little specialized tool that helps with this?

Depending on how complex your texture is, you're often better off when you do it by hand. There are some simple tricks, though- the one where you do the "perspective skewer" (as described by you) is one of them.

For pillars you can, piece by piece, move a strip of the texture up/down. If the strip is two pixels wide, you move it one pixel up. That way you can get a roughly okay-looking box, or even a smooth pillar (where you go up until you have half the pillar, and after that move down).

Frikkin technical explanation, but I think it's not too hard.

[zabnat]

Since you are using Gimp this might not be much help, but Photoshop has this nice mesh distort which is probably pretty much the same as you described, but it has more control points. So it is suitable also for pillars etc. And you can control the blurriness a bit by setting the program to use different interpolation techniques. Nearest neighbour will give crisp but jagged look and others give variying amount of blurriness.

[lostbuthappy]

Thanks for your help guys. The Gimp's perspective tool also has some options to control the blurriness, I simply didn't see it. Doing stuff by hand that is even remotely repetitive is one of the three things I truly hate (you should have a look at my kitchen), but I guess I'll have to make an exception this time.

[Misj']

I wrote this a while back, maybe it's useful to someone. It's my general approach to drawing backgrounds (and characters for non-animated media). Some additional steps or limitations occur when animation is taken into account.

Software used:
- Corel Painter X
- Adobe PhotoShop CS3
- (for animation (not part of this tutorial) I use Digicel Flipbook 5)
There are many other options, but I prefer these, so I bought them (fortunately I could get PhotoShop quite cheap via my work).



A part not mentioned was me trying different colours to figure out the best results for the character. This step is usually somewhere between the flats and the final shading (a little shading is often helpful to determine the final colour; and for animation I have a very limited shading, so colours are largely determined for the flats).





The right skin and clothing colours really help define a character. Of course in this piece I had a fantasy setting which meant that the skin-colour was a little more open to debate than in a more down-to-earth setting. To ensure that my Archivist isn't confused with for example Yoda, I decided that I should steer away from a green skin-colour.

So here's the final piece (next to the black-and-white ink-only version). I generally draw the art three times the final size. It's what I feel comfortable with.



Misj'

Ps. Another note: when inking for screen I use much thinner lines than when inking for print. This piece would have been intended for print.
Pps. I happen to like black outines...but it's easy to colour them.

Edit: Added a larger version of the ink-only version to compare it to the final rendered version, and the Pps.

[Ghost]

Now that is the sort of tutorial worth checking out! Thanks for sharing, Misj!

[nihilyst]

Just a quick overview on how I assembled some photos to a new image and further edited them to be the cover of an upcoming project of mine.
CLICK

I know it's not perfect at all, and to a professional it might look like shit, but I thought it might give some people an idea of how several pictures can be combined. Done in Photoshop.

If it would be useful to someone, I could try to go into a little more detail regarding the later steps, i.e. the adjustment of colours etc.

The text reads: 1: Assemble pictures; 2: Define lightsource and block in shadows; 3: Adjust brightness, contrast, colours, sharpness and hue.

[Mr Flibble]

Does anyone know of a graphica program where I could

1. Select all of a certain colour on a sprite
2. Adjust sliders for RBG values between 0-255
3. See that colour being changed on the sprite in real time?

I use Paintshop Pro but its previews come up in a window with only the current selection visible, so you can't see what you're actually doing on the sprite itself.

[zabnat]

Well, in Photoshop you can select the color and adjust it accrodingly in RGB mode using the normal color adjustments. But what you want to do is to use paletted colorspace and adjust colors in palette. This you can do in Photoshop and Graphics Gale and probably in most of the drawing programs.

[Celsius]

Does anyone have advice on how to keep characters and backgrounds in consistent scale?  That is, not having a character too small for one background, and too big for another, or vice-versa for the backgrounds.  Besides just sticking an image of the character on the canvas while you're working, I mean.  Or is that the best way?

[Oliwerko]

Worked for me so far.

I usually draw a black rectangle representing the character's maximum dimensions in a separate layer and keep moving it around to check what needs re-scaling. (That of course doesn't mean I often end up with totally wrong scaling of the rooms, it takes practice).

Also, know what the dimensions are. For 320*240, the characters are usually around 20*60 or 30*70. Stick to the character dimension when drawing doors, and they can help you with the rest of the room.

Still, it takes practice as I said, mistakes will occur.

[Shane 'ProgZmax' Stevens]

Design your player character first always.  Once you have the character designed, decide whether or not you will have characters of varying height.  This is important because you may have a character taller than the player character at some point, so you'll want to determine the maximum height you intend to make a normal character and then design all entryways and furniture to match.

[Wreck]

Quick question regarding resolutions:

What sort of aspect ratio is recommended these days?

I am pondering having a play with ags in my spare time (never used it before), and before I start planning anything it occurred to me that although I will probably go with a fairly low res (640*480) kind of size, is that the right approach to take with monitors these days often being wide screen (my new one is). I don't want to go any higher as I am well aware of the time sink that would create for assets.

Would 640*480 distort horribly on such a screen? or when ags puts the thing into full screen does it maintain aspect ratio and 'block out' the borders, so perhaps something like 640*400 would work better (if that is even a valid resolution).

Any advice apreciated, thanks in advance.

[Snarky]

OK, let's leave off whether ProgZ's initial post was reasonable and temperate, and consider the use of green as a completent to pink skin color in art.

Then we could point out that pale skin often does look slightly green, especially in the transition from light to shade (you can see it in the original photo under the eyes, or by her cheek bone), and that painters have often used green shades to emphasize this effect, either subtly (1 - also has some good references joel might want to have a look at in general, 2, 3) or not-so-subtly (1, 2, 3).

Perhaps the attempt in Mad's and joelphilippage's edits isn't entirely successful, and you could argue that having abandoned the CGA-style palette of the first version, a lower saturation might work better. But as experimentation go, it strikes me as pretty tame, and an attempt to implement quite valid techniques.

[Andail]

Your point is quite valid, but let's take into account a couple of facts:
1. Virtually all colours can be found in portraits by famous artists, if you look hard enough. A painting which seems to depict a perfectly natural skin colour can turn out all blue when compared to another portrait, painted in a different light. Finding the right colour is seldom about identifying a native pigment - it's always a combination of light reflections and refractions.
2. However, saying "why can't I have green in my portrait when Cezanne can (or whoever)?" is a bit like saying "why can't I paint a perfectly square face when Picasso can?" Because you don't have a valid reason to do so, you just claim it's your right to, and expect that it will somehow magically be appealing.
3. This particular piece looked better without the green. Why? Because the green parts weren't applied in a way that made sense. They didn't improve the face. They didn't accentuate anything.
4. Does this mean it's always wrong to add green in your portraits? Hell no. Look at any recent pixelated portrait by Helm - like this one:

Lots of green. But there is a method to it. It's not like he just threw green pixels at the canvas and hoped for the best. This scene called for the green. It made sense here.
Or why not this one:

Lots of weirds shapes and colours, but Helm had a reason to make it that way, an agenda. It doesn't mean anyone can add lots of purple triangles to their portrait and hope for success.
Why not?
For the same reason you shouldn't begin practising writing by mimicing Finnegan's Wake. It's just no use. Start simple. When you know the basics, start pushing the boundaries. When you can control basic perspective, move on to have a go at DOTT graphics. Etc, etc.

[Mr Flibble]

When I was in 3rd year my art teacher said my portrait needed some green in it, which she liberally applied. After she left I sat back in shock because she'd really badly ruined it, and everyone agreed.

[Shane 'ProgZmax' Stevens]

I'm moving this into Tech Art Q&D where it belongs.

[.M.M.]

Hi, I need music for my game - I'd like to make this game on my own, but I lack any experience with creating music. Can you suggest me an easy-to-use program? Also, I've got another problem - my game takes place on Wild West, so I need country music, and as I was searching for some program suitable for me, I realised that propably no one thought somebody would  try to use these programmes for creating country music.

[Gabarts]

I have MUSIC suggestion for who like composing Midi style Music:

-If you use Logic 8 on Mac Osx, like me, with a mute keyboard controller you can see that pulling something out from the internal DSL Music Device (quicktime synth) is very hard.

-I've found a very good GM soundfont ---> FluidR3 GM.Sf2    search it on google

Basically if you don't have a Midi masterkeyboard recording with DSL Apple device is hard. You can load FluidR3 samplers with ESX24 and is lot easier.

[Lasca]

Hey everybody!

I'm working on a tower room and would really likes some tips in how to make it work perspectivly. I think I've got a grip on one point and two point perspective generally, but i'm not really sure how to work it in a room with no corners. Anyways, any tips are welcome!

/Lasca

[tinyhippo]

Hey there!

So, we've started working on game art recently, but we've ran into a problem while drawing character's face. It's really hard to draw an expressive face in 320x240. Here's the model and a sketch for the character:
[imgzoom]http://s20.postimg.org/4sr9xxuwt/image.png[/imgzoom]
[imgzoom]http://s20.postimg.org/4vb5krykd/image.jpg[/imgzoom]

Can anyone suggest how we can draw a proper face? Anything will be appreciated, thanks.

[HanaIndiana]

Hmm the last post here was in 2013, so there's a chance I'm in the wrong place...

I'm interested in creating music for my games. I'm guessing there are small keyboards (aka piano) I can plug into my PC/laptop/what have you, and record music using different software. MIDI keyboards perhaps? Does anyone have suggestions for a simple keyboard setup?

[LimpingFish]

I'm guessing there are small keyboards (aka piano) I can plug into my PC/laptop/what have you, and record music using different software. MIDI keyboards perhaps? Does anyone have suggestions for a simple keyboard setup?

This is the one that I use when I'm at my PC and I want to quickly get something down. It's small enough to fit on a crowded desk, and it does the job well enough. Plus, you can usually pick it up for less than it's RRP.

As for software, something like StageLight is a good (free) starting point.

[HanaIndiana]

Thanks LimpingFish! The Akaipro looks perfect, and I've never heard of Stagelight before, it seems pretty powerful. Even the "unlock" price isn't too bad.

[fernewelten]

Hey folks,

Say hello to Linkattus, a brash adventurer that is about to rescue an imprisoned beautiful lady.


He lives in an entry for MAGS May, which I am currently upgrading with superior animations as a first step to creating a non-MAGS version.

So, Linkattus will have to:

• reach for the soft soap bottle on the cabinet behind him,
• take it,
• turn facing downstage,
• shake the bottle
• remark that the bottle is empty
• turn facing the cabinet
• and then put it back.

I know the guy's a little short, but he intends to stand on his toes and stretch a little.

So, this has a technical (practical) and an artistic side.

For the technical side, both Linkattus and the surroundings are originally vector (.svg) drawings. They have been converted to .png for the AGS sprites import. The bottle is an object.

• What would be a good program to do the animation in? I've done the walking cycles in Synfig, which can import .svg files in a broken kind of way that usually ruins the scaling of some body parts. Also, Synfig is fairly unstable and needs constant saving in order to guard against crashes. On the other hand, Synfig can work with vectors "natively", and it knows bones animation (you can attach a group of vector shapes to a "bone", and when you move or distort the bone, the vectors will follow suit). I'm not really happy with Synfig, but I don't know alternatives.
• What do I need to do on the AGS side to pull this off? Note that the bottle is already standing there when Linkattus arrives. So Linkattus will probably need to be at a very exact position when the animation starts so his hands are exactly aligned when grabbing the bottle. Then, the bottle needs to "disappear" at the same time that a copy of the bottle that is part of the animation sequence shows up.
• I think I will need to have the background available in the animation program in order to get the positioning just right. But the background must not be part of the animation images, or it might interfere with the graphics that AGS presents in realtime.

Watch Kathy Rain going to the sofa and taking a seat there. Kathy lives in a commercial AGS adventure (that is very worthwhile, BTW.). I assume that AGS turns her, then she uses a standard walkcycle animation which she fluidly changes to a "sitting down" animation on arriving at the sofa. (The jerkiness in the GIF is due to its low frame rate; there is no jerkiness whatsoever in the live game).  Note that Kathy is in seamless action throughout the sequence.



So there must be a way of doing these kinds of animations.

[Mandle]

One hint I would give is to figure out what your largest sprite's height and width will be and then make all your sprites this size whether they need to be or not.

If you have sprites of different sizes in the same view the character will jump around as AGS recenters each frame.

Sorry if this is obvious info.

[VampireWombat]

I made graphics using Inkscape last month and animated them with Spriter pro. The free version probably can do what you want.
It exports either as individual pngs or a sheet. I don't think it supports svgs, so you'd have to make pngs of the different body parts.
It supports guide images and uses bones.
I know nothing about using Synfig so I don't know how the two compare. But Spriter is at least stable from what I've seen so far.
As for the AGS side... One way you could do it is that when he grabs the bottle it changes views to be an animation. You would need to line him up with the bottle properly, but that shouldn't be too hard. You'll probably need to split the animations up since you want him to talk after shaking it.

[Joseph DiPerla]

A new sprite animator was released on Itch that is pretty cool. I think it would work great with AGS games and is very reminiscent of the Character Animator that was created for AGS years ago. Try it out: https://misterm.itch.io/mr-easy-sprite-animation
It is called Mr Easy Sprite Animation.

[Joseph DiPerla]

One more tool. Blit Paint. Great for making backgrounds:
https://pixelburner.itch.io/blitpaint-beta/devlog/149435/blit-paint-v042