Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

DarkBASIC Discussion / Yodaman Jer's Cartoon Shading Example

Author
Message
Yodaman Jer
User Banned
Posted: 1st Jun 2009 22:23 Edited at: 1st Jun 2009 22:25
Link
Introduction

Recently, I became curious about games that use cartoon shading. Cartoon shading is a very unique effect and can give your game(s) polish. Professional games that use cartoon shading (such as The Legend of Zelda: The Wind Waker and Phantom Hourglass) are fun to play and to look at. I wanted to use cartoon shading in my next game, so I began researching the technique. I knew it was possible after seeing some of Bizar Guy's work on Dream, so I did a few searches and read up on the technique. I'm going to share my findings with the DBC community, because I know some of you probably want to use cartoon shading in your next game. The final result will look like this:



The Process

Cartoon shading is surprisingly easy to achieve in DBC. All you must do is duplicate an object, scale it into the negative range and color the duplicated object black, like so:


Attached to this post is an .EXE file. Run it to see the effect in action! Here's the entire code I used to create it:



I hope this is useful!


"If you want lots of people to play your game make it simple; lots of people are simple." -Obese87

Attachments

Login to view attachments
Back to top
Profile
Caleb1994
16
Years of Service
User Offline
Joined: 10th Oct 2008
Location: The Internet you idiot!
Posted: 2nd Jun 2009 01:00 Edited at: 2nd Jun 2009 01:05
Link
Sweet!

Is that because from any angle you are seeing the inside of it?(which has the texture because it's negative) and on the edge you seeing what is supposed to be the outside?

New Site! Check it out \/
Back to top
Profile PM Website
Yodaman Jer
User Banned
Posted: 2nd Jun 2009 01:16 Edited at: 2nd Jun 2009 01:45
Link
When you negatively scale an object, it flips the faces so that they face inward. If you then color that object black (or texture it black), it gives the appearance that it's a cartoon-shaded object. So on the edge you're seeing the inside of the flipped object.

It's a really cool effect! I tried using it in my game, but I encountered some problems (easily fixed, I'm just giving a heads-up).

The first was that the 'shaded' lines intersect when the objects are too close, like so:



The way to fix it is to make sure the lines aren't overly big (like the ones in my example!).

The second was merely that this technique increases your polygon count by quite a bit, depending on how many objects you have on-screen. If you use low-polygon models however, you can avoid detrimental speed issues.

Also, a somewhat better way to do this effect is to model your objects in Blender (or AC3D), texture it, copy the model, flip the normals of the model, color the copy black and save it as an .x file. This prevents you from having to create separate objects just to add a black border around each object.


"If you want lots of people to play your game make it simple; lots of people are simple." -Obese87
Back to top
Profile
Libervurto
18
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 2nd Jun 2009 02:02 Edited at: 2nd Jun 2009 02:05
Link
That's pretty cool.
Have you thought of how to give cartoon shading to the whole object like this [href = http://files.gauge3d.org/109146699/Cartoon%20Shading%20Demo.png?token=47406EE36C601D6B29D4]cartoon shaded spaceship[/href].

I bet it's possible somehow. Maybe by playing around with the normals and what not in a memblock.

[edit]
sorry about the link, I seem to remember % or ? causes errors on apollo, how do I make it work?

There is an eight letter word. You can insert a letter into it or remove a letter from it without changing its meaning. Answer
Back to top
Profile PM Email
Yodaman Jer
User Banned
Posted: 2nd Jun 2009 03:22
Link
The way to fix the intersecting edges is definitely to keep them thin, and maybe to position each object .2 units away from the next, like so:



@Obese:

I tried accessing that link by copy>pasting it into my browse, but it said 'File Access Forbidden' in big, not-so-friendly letters. Ah well.


"If you want lots of people to play your game make it simple; lots of people are simple." -Obese87
Back to top
Profile
Yodaman Jer
User Banned
Posted: 2nd Jun 2009 04:30 Edited at: 2nd Jun 2009 04:31
Link
I updated the small example program a bit. It's possible to get rid of the intersecting lines like I described in my last post. I've attached the updated example to this post.

In the example I also experimented with camera movements to establish a level. I liked it, so I left it in.

[EDIT]

Forgot to give y'all the code...




"If you want lots of people to play your game make it simple; lots of people are simple." -Obese87

Attachments

Login to view attachments
Back to top
Profile
Latch
18
Years of Service
User Offline
Joined: 23rd Jul 2006
Location:
Posted: 2nd Jun 2009 04:31
Link
@yodaman jer
Wow, what a great idea! Good work. I gotta try this out building a model in a 3d app.

Enjoy your day.
Back to top
Profile PM
Yodaman Jer
User Banned
Posted: 2nd Jun 2009 04:44
Link
Thanks Latch! It isn't my idea though, I read up on the technique from a thread that was created in 2003, and was inspired by Bizar Guy's game Dream. I couldn't find any code examples though, so I thought I'd post it here (along with an example program) so that people could benefit from it.


"If you want lots of people to play your game make it simple; lots of people are simple." -Obese87
Back to top
Profile
Libervurto
18
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 2nd Jun 2009 04:49
Link
@Jer
I like your textures but I think the platforms would look better if the "grass" came down the brown sides a bit to give it depth.

There is an eight letter word. You can insert a letter into it or remove a letter from it without changing its meaning. Answer
Back to top
Profile PM Email
Yodaman Jer
User Banned
Posted: 2nd Jun 2009 04:50
Link
Yeah, that screenshot is from the game I am making. I'll probably change the textures with something a bit different, and do what you suggested.


"If you want lots of people to play your game make it simple; lots of people are simple." -Obese87
Back to top
Profile
Yodaman Jer
User Banned
Posted: 2nd Jun 2009 19:48 Edited at: 2nd Jun 2009 20:18
Link
I've done a bit more to this program, but I'm not going to post it just yet. I've made the sphere moveable, but for some reason it won't jump. I'll get it sorted out.

I've added a bit of code that changes the textures of the objects once every second or so. The screen shot doesn't show this however, but here it is anyway.



The textures were designed by me inside of GIMP.

I've started messing around with this project so much that I may turn it into a demo later on, after I do some optimization and some more development. Either that, or I'll turn it into a small game. Probably the latter!

Once I get the jumping to work I'll post the new .EXE file.

[EDIT]

Got the jumping to work. I forgot that local variables can't be passed to and from a function, so...yeah. It's working now!

The new program is attached, and it's the last one I'll post before the demo (or game) is completed. For those who are curious, here's the code I used to change the textures periodically.
Before the main loop, set the variable counter to 0. The rest is easy as pie and goes in the main loop:



Now run the program! It's small, but it works.


"If you want lots of people to play your game make it simple; lots of people are simple." -Obese87

Attachments

Login to view attachments
Back to top
Profile
Libervurto
18
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 2nd Jun 2009 21:52 Edited at: 2nd Jun 2009 21:56
Link
@Jer
You could change the textures like a switch...

Just giving more options.

I think the ball should be bigger, it looks a bit pea-like there.
Great looking outlines though.
Have you played Kula World? This reminds me of that.

I found a good cartoon shading image.

I wonder if it is possible to get that inner shading in DBC.
I'm sure Dream had it.

There is an eight letter word. You can insert a letter into it or remove a letter from it without changing its meaning. Answer
Back to top
Profile PM Email
Yodaman Jer
User Banned
Posted: 2nd Jun 2009 22:08
Link
I've never played Kula World. Honestly, the game I'm working on was thought up after seeing Pac-Man, although it really doesn't have any inspiration from it at all. The reason all of my games use spheres is because I have no idea how to animate characters and load them into my games. If I can learn how, I will do that in the future.

Right now this program is undergoing a massive overhaul so that it becomes an actual game. I'm planning on 4 worlds, with 2 levels each (it may become more if I have the time).

I like your idea on changing the textures! I was also thinking about making the ball bigger, but I don't want it too big so that it feels like there's hardly any room to wander around in.

Once this game is complete I'll post it in the Program Announcement board. This is basically a continuation of the game I was working on for NaGaCreMo '09, but with a lot more features and maybe even a time limit for the levels! Speaking of which...

How do you calculate how much time has gone in a level? Also, how do you set the limit for 2 minutes to collect all (or most) of the objects in a game? I have the basic idea sorted out, like so:



I'm just not sure how to tell the player how long they've got left and how to print it to the screen. A few days ago I came across an example of how to do this, but I can't remember for the life of me where it was. Can anyone point me in the right direction?


"If you want lots of people to play your game make it simple; lots of people are simple." -Obese87
Back to top
Profile
Libervurto
18
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 2nd Jun 2009 22:25 Edited at: 2nd Jun 2009 22:29
Link
I'd do this.


Oops, that should be a while loop because we don't want the code to run through if there's -1 seconds remaining.
You might say we could just change the <0 to <=0 but since time_remain is an integer the loop would exit at the start of the final second when it rounds 0.9 down to 0; which would be annoying.

I've left it in because I think it's a good illustration of when to use either loop.

There is an eight letter word. You can insert a letter into it or remove a letter from it without changing its meaning. Answer
Back to top
Profile PM Email
Yodaman Jer
User Banned
Posted: 2nd Jun 2009 22:39
Link
Isn't there a way to just increase another counter and have it count the seconds going by? The only way I can figure out is to tell the program to increase the time variable like so in the main do..loop:



Like so until it totals to two minutes. However, that would be quite a nuisance to code, unless there's a way to work around it. Your technique is just a little hard to make work (if I put the repeat-until loop in my main loop it crashes, and I can't figure out how to modify it accordingly) in my program. Is there an easier way?


Click to go to our website!
Back to top
Profile
Libervurto
18
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 3rd Jun 2009 03:09
Link
It crashes?? What's it running into after the loop?
You could write a function to convert milliseconds to seconds and minutes like this...


If you want to count up you have to store timer() when the clock starts and have a constant for the maximum time allowed (if there is one), then subtracting timer() from the start time gives you the time elapsed.

There is an eight letter word. You can insert a letter into it or remove a letter from it without changing its meaning. Answer
Back to top
Profile PM Email
AndrewT
18
Years of Service
User Offline
Joined: 11th Feb 2007
Location: MI, USA
Posted: 3rd Jun 2009 04:05 Edited at: 3rd Jun 2009 04:05
Link
This isn't cartoon shading, this is simply outlining your objects in black. Cartoon shading actually affects the shading of the model in addition to outlining the model in black.

Example:



Also this method won't work with objects that are non-convex, for instance if you have a torus then the middle won't be outlined. In order to solve that problem you'd need to create a scaling function which scales an object along the normals of its vertices.

i like orange
Back to top
Profile PM
Yodaman Jer
User Banned
Posted: 3rd Jun 2009 05:02
Link
@OBese:

Sorry, bad English on my part. It doesn't crash, it just slows my program to a crawl. I'll try the function you wrote and report back.

@AndrewT:

Fair point. You're right about the torus shapes and everything. This is just a cheap way to make your games look more cartoonish. I think DBPro has an actual cartoon shading command, but I'm not sure.


Click to go to our website!
Back to top
Profile
RYD
17
Years of Service
User Offline
Joined: 29th Apr 2008
Location: realspace
Posted: 2nd Jul 2009 21:42 Edited at: 2nd Jul 2009 21:51
Link
hello anyone i have a little problem here its that when i use the shading technique that is here my object ".X" is all black
Quote: " and for ANDREW T i think if you fade the object on a high number you can get something like the shadows in the object.... i think.... just to say..."


ARM YOURSELF WITH KNOLEGE
Back to top
Profile PM Email
Yodaman Jer
User Banned
Posted: 2nd Jul 2009 22:35
Link
Quote: "my object ".X" is all black"


What you have to do for this technique to work is copy your model, invert the copy (that means to flip the normals) and then color the copy black. Then scale the copy until the line is thin and export your model. Load it into DarkBASIC and it should work!


Click to go to our website!
Back to top
Profile
Dark Dragon
17
Years of Service
User Offline
Joined: 22nd Jun 2007
Location: In the ring, Kickin\' *donkeybutt*.
Posted: 3rd Jul 2009 01:16 Edited at: 3rd Jul 2009 01:41
Link
Whoa. Take that DBP!
Awsomeness Yoda! Awsome, just Awsome.....

Edit)

About using a custom object....
Would I Use a the same object for shading, or would i use the sphere?

Your signature has been erased by a mod because it was too big.CHANGE IT OR DIE!!!!!
Back to top
Profile PM
Yodaman Jer
User Banned
Posted: 9th Jul 2009 00:44
Link
Sorry DD, I didn't see that you posted again.

If you're using a custom object, what you want to do is (in your 3D editor) copy the model, invert the faces and color them black, then scale the copy until it appears that there's a small, black line around your object.


Click to go to our website!
Back to top
Profile
Dark Dragon
17
Years of Service
User Offline
Joined: 22nd Jun 2007
Location: In the ring, Kickin\' *donkeybutt*.
Posted: 9th Jul 2009 23:25
Link
Oh. kk. This is pretty cool, it works just great now.
Good job, man!

Your signature has been erased by a mod because it was too big.CHANGE IT OR DIE!!!!!
Back to top
Profile PM
Yodaman Jer
User Banned
Posted: 10th Jul 2009 03:54
Link
I'm glad this was useful to you Dark Dragon.


Click to go to our website!
Back to top
Profile
Back to top

Login to post a reply

Server time is: 2025-05-17 00:31:34
Your offset time is: 2025-05-17 00:31:34