2 in 1: developer + designer = artist?

ar2rsawseen · December 2012

Followed after inspiring post by @Mells http://www.giderosmobile.com/forum/discussion/comment/16464#Comment_16464
I decided to systematically learn the craft of designers myself to create graphics for my own use. Being quite artistic soul myself, starting fro music to coding/developing, thought that it would not be so difficult. Only thing is that I hated drawing since I was a kid, but thanks to technology creating graphics is not so much drawing as it used to be, so in this craft I will try to think more as a developer and let's see what will happen.

So my first attempt was to create a bomb character, which can explode any time. I wanted to create this emotion, that bomb itself is afraid that it could explode, but emotion is exactly what gives me most problem, so how would you suggest changing eyes, eyebrows mouth etc, to maximally represent fear, nervousness and unstability.
Here is what I have for now:

But it's still is not good enough for me to use it. As I said, the emotion is not exactly the same I want to represent.
So any comments are welcome

gorkem · December 2012

Very fast comments

- I think someone punched on the left eye of the bomb.
- Left eye can be a bit open and surrounding gray color can be a bit lightened.
- Left and right lightings (in orange) could be more gray-ish.
- Do not let the rope touch the bomb, it seems they are sticked together.
- One star can easily represent the fire (no need for additional circles).
- Generally face looks symmetric, but fuse is not on the very top of the bomb.

2c

MikeHart · December 2012

Maybe have a look here:

http://2dgameartforprogrammers.blogspot.de/2012/09/this-tutorial-started-out-with-some.html

OZApps · December 2012

- I think someone punched on the left eye of the bomb.

That could be a wonderful game, punch the bombs in the face till they knock out

maybe call it whack-a-bomb

@arturs, There you go, a wonderful idea for a game

on the critics corner,
It is a good attempt. However the suggestions made by Gorkem can be useful to better enhance it. The Mouth gets obscured and the teeth just look like a white line. The expression could do with a little more surprise / fear which could add a slightly larger mouth (preferably open). If you are looking for the anytime explosion, the fuse has to be shorter and preferably facing upwards than down.

Mells · December 2012

Hi @ar2rsawseen

@gorkem already gave you very good suggestions.

Quick answer before I take my train :

First of all I think the execution of the drawing is encouraging, clearly using the tools won't be a problem for you.
Now how to "make it work" (please again understand that I'm not in a position to teach, I'm still a learner and actually I am color blind).

Fear
When you experience fear, you do everything you can to move away from the source of danger.
Or you are paralyzed, both expressions could work.

In the first case, I think it works better if you put the face elements away from the flame (unless you want to keep the face elements central for a reason).

Talking about lighting (airbrush style)
Applying lighting is making a statement : there is a light source somewhere and you want us to know about it.
It could be ambient lighting, or source (directional, multi directional) lighting.
The image you provided shows uniform lighting (ambient) but with orange color (which means the ambient light is orange for example in a Lava level).
Is that what you had in mind?

Grey is neutral. Orange is giving a clear direction which means there is a reasoning behind.
(don't misunderstand : there is also a clear reasoning behind the fact of chosing grey).

So is the light orange everywhere around the bomb (lava level) or is it coming only from the flame on his head?
In the second case, you should use orange only from the side that is lighted by the flame, the other side should be more neutral or even cold (blue/greenish).
This contrast gives the flame a higher role in your composition.

Using black
I would advise you to use dark grey instead of dark to fill the bomb.
Why? Because you never know when you will need black to add more shadows, or emphasize some lines.
(Same goes for pure white).

What is the white on top left?
Is that reflection on the bomb?
In this case that means you have a lot of specular on your bomb and the light coming form the flame should appear on the bomb also.

Or is the bomb sweating because of fear?
If that's the case, make it easier to identify.

Give the illusion of life
You should define : Fear of what? Exploding soon? Not knowing when it will explode?
If you want to give a higher sense of danger and give the illusion of movement, put the sparks where it was x frames before.
Little distance between sparks = low speed
bigger distance = higher speed
The star + circles don't work well in my opinion. You should find something different.

Around the eyes
Make it work without the grey area first so you can focus your work on the eyes.
That's the core of your expression here.
Then you will improve by incrementation until you notice that adding things make the image less easier to understand.

Mouth
The one you showed was almost smiling.
Find a mirror and practice the expression in front of it (tell your wife not to laugh

Feel what your muscles are doing, where is it contracting, and you will understand what happens and what you should show on your image.
What happens to the side of your mouth?
What happens to your nose? Your forehead?
I don't imply that you should draw each of those details, but keep in mind that it's here.
Often what you don't draw, what is suggested, takes a very important role in your composition.

Resources

Check the content of those books and buy the one(s) that fit your requirements (skip the first pages if you are not interested in animation background).
Those books are considered as solid references in the animation industry.
Why "animation" while you will create still images? Because studying animation is the best way to give the illusion of life to your pictures.

I wanted to give you a suggestion but I would like to see how you interpret my advices

***Warning*** here is my suggestion but only look at it when you have tried yourself many times. -> *. I have no time, it would need some polish but hopefully you get the idea.
Sparks are made roughly, just put stars on it.

I hope it helps, like you helped me with lua&Gideros

zvardin · December 2012

As suggested by some of the links Mells provided at the end, I saw this earlier and was thinking when it comes to expressing things or making something come to life, you're more in the realm of animation which many people associate with drawing but are two very different things (although knowing both certainly can help). I'm not much of an artist when it comes to drawing, but I've done some 3D animation and Flash animations and always loved animating in general, but I'm really interested in trying some of these examples to maybe at least be able to do some drawings myself as well.

ar2rsawseen · December 2012

Awesome guys, that's just awesome. Thank you so much for all these response, will have my second attempt soon and post the result here

@zvardin actually my goal in the end probably will be an animation (something that I will have to learn too), but from the start I need to define the concept of couple (about 7) this style of characters

ar2rsawseen · December 2012

By the way @Mells, what if image is used let's say for a box2d body as a ball. It will be randomly jumping, rotating, etc.
Does it mean that in this case it is better not to use lightnings and reflections at all? Because light source is usually a static and lighting would only rotate together with the body.
But in this case wouldn't the character be too, I don't know, bold, unnatural?

How this situation should be solved?

zvardin · December 2012

That's a good point. If I had to guess, I think you have 2 good options... only show the reflection/lighting from the fuse, so it rotating with it would make more sense, or create a layer on top of the bomb (so even if the bomb rotates the light/shine would stay still relative on it) for ambient light sources that would cause a reflection on it. The layer wouldn't be perfect though.

zvardin · December 2012

Oh, your other option might actually be to create shading/reflection as if you had a lamp at the stage from the screen's perspective, so theoretically it wouldn't change as much, at least with symmetrical shapes like that.

ar2rsawseen · December 2012

@zvardin I'm even thinking implementing addshadow into GiderosCodingEasy Box2d wrapper, to provide object that would follow the body with provided offset and without rotation

Mells · December 2012

Hey Arturs,

there is "how you want to do" and "what the market has validated".

Let's take the shortcut :

From the top of the list, check the 5 apps in the top grossing apps that use a style similar to what you have in mind (for example Angry Birds?).
Look at how they are doing it (lighting, shadows).
Apply

About "addShadow" I think the best would be to create a blob shadow from a Mesh.
No need for anything more complicated.
Don't forget that if the object jumps, you have to project the shadow on the object below which makes the implementation more complex.

But if you look well, very few 2D games in the top grossing apps use shadows.

Which makes me wonder : @atilim are there any plans to provide an adaptation for Gideros of this rayCast/rayCastTo Class in the future?

plamen · December 2012

Does it mean that in this case it is better not to use lightnings and reflections at all? Because light source is usually a static and lighting would only rotate together with the body.
But in this case wouldn't the character be too, I don't know, bold, unnatural?

How this situation should be solved?

You can check this issue with the sample i posted.

All my objects have lights and shadows but only the main shadows are correct. The static objects have shadows incorporated in their bitmaps and the ships shadows are separated bitmaps set by the code. Intra-actor shadows have the issues you are talking about, but i think its not big deal.

techdojo · December 2012

I think if the (game / experience) is (good / fun) enough nobody is really going to get too picky over the graphics. Generally slamming the graphics is a sign that the player wasn't engaged enough with the game.

Just my $0.02 - BTW Love the bomb graphic, personally I think it's quite cute and when scaled down to iPhone res will look a lot better than a lot of games I've seen!

OZApps · December 2012

This is no where to the standard and elegance of the video by @plamen, but this is a first try with creating a shadow for a sprite, what do you think? I had to spin him around just to get an overall feel for the shadow.

The character is from the Double Fine's game Middle Management.

plamen · December 2012

@OZApps : Thanks and this is exactly what Arturs is troubled. You have to rotate the shadow with your character but the position should be same absolute coordinates as your main toon with slight offset by x and y. This gives you the feeling where light source is.
it should be something like this:

local posx,posy = 100,200
toon:setPosition(posx,posy)
shadow:setPosition(posx+10,posy+10)
shadow:setRotation(toon:getRotation())

I hope i managed to show the idea. Every time you move your toon you set coordinates of the shadow same as toon but with constant offset which shows us where light source is.

plamen · December 2012

@ar2rsawseen There is a trick you can do in the Bomb example. It needs a bit more experience but its not that hard to master. Because of the bomb shape you can do the bomb in separate layer and in another one exactly round you make general light gradient and some reflections and speculars. Now the second layer needs to be exactly round covering the bomb except the part where fuse is going in. It should be another png file positioned over the bomb but not rotated. Screen mode of blending will be enough to fake the light sourcing and reflections. So when you move the bomb you move and rotate the colored image with the physical body but the second layer you only move without rotating. Not sure if i explained it good enough.

OZApps · December 2012

@plamen, adding the two images to a sprite container makes it easier to then rotate the container without having to bother about keeping them in synch.

In the video while rotating I was trying to achieve the effect of depth, but obviously it does not convey that very well. I tried another bit that gives the feeling of the superhero take off and the shadow softens.

plamen · December 2012

OZApps : The problem is that for rotation they have to be synced but for translation - not. Can you try to rotate them in your last example and see what will happen. That's why parenting doesn't work with shadows. I haven't seen framework that address the issue. I mean they have same rotation but the position should be moved with same number of pixels when you move them.

zvardin · December 2012

If you used a parent you could use a function to set the shadow layer rotation to the rotation multiplied by -1 right? Either overriding setRotation or using a new function.

OZApps · December 2012

OZApps : The problem is that for rotation they have to be synced but for translation - not. Can you try to rotate them in your last example and see what will happen. That's why parenting doesn't work with shadows. I haven't seen framework that address the issue. I mean they have same rotation but the position should be moved with same number of pixels when you move them.

Aaah, I get what you are trying to say, my example was more so about softening the shadow.

What you are suggesting is that if the light source is 10 o' clock then the shadow would be at about 4 o' clock and even as the object rotates, the shadow still would be at 4 o' clock. Where as if the container is rotated the shadow rotates too.

While that was not what I was after, if I was to create that realism and retain the shadow, I would calculate the offset based on the angle of rotation.

ar2rsawseen · December 2012

wow, it's really great to see such an enthusiasm from many of you guys

What @OZApps meant that if a light source is static, then while body is moving away from the light source, shadow should not only follow, but also grow bigger, longer in opposite direction, also expand and alpha out a bit.

Also might be an overkill, but it actually sounds like an interesting effect, how did you exactly achieve it @OZApps?

@plamen yes I understand that, @zvardin also suggested something similar. But of course I'm not after such detalization level, especially when working on a cartoonish games, I was just curious how far would you guys go

So there are actually two things to consider lightning and shadowing. Eh wish there was just a magical lamp that could be put in some corner and all reflections and shadowing happened automatically

plamen · December 2012

@ar2rsawseen: It is possible to create it automatically in some cases. Define where is your light and then its not hard to calculate where needs to be the shadow, then make an instance of your sprite to use it for shadow and setColorTransoform(0,0,0,0.3) and there you go :-) But i know you are talking about shadows inside the image of your toon and this is possible when 3D framework is used. Still there are more than 1000 ways to flay a cat.

Mells · December 2012

@ar2rsawseen
I'm playing the devil's advocate

I would repeat my advice again :

If your goal is to release apps, be careful not to enjoy 'overcoming challenges' (improving your artistic skills, coding visual effects) more than your end goal. This is a major issue (same for me when I learned how to program).
From your bomb illustration, I would say that you don't need lighting and shadows.

Let's take the shortcut :

From the top of the list, check the 5 apps in the top grossing apps that use a style similar to what you have in mind (for example Angry Birds?).
Look at how they are doing it (lighting, shadows).
Apply

This is what I would do.

tkhnoman · December 2012

@Mells That shortcut made me feels like de-javu...
But that what i always tried to do, not to top 5 apps, but to what apps i feels like it good.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

2 in 1: developer + designer = artist?

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

2 in 1: developer + designer = artist?

Comments