Main Menu


Sponsored Links

  


  
  
Web Cartoon Maker: a Fun Way to Learn C++ Contents Previous Next

A Complete Cartoon

We now know enough to make a simple but completed cartoon. Let's choose a simple story like this one:

Girl is walking with a boy through the park. She says : "If we get married, I want to share all your worries, troubles and lighten your burden". Boy replies: "It is very kind of you, darling, but I do not have any worries or troubles". Girl replies: "Well, that is because we aren't married yet".

Let's follow a plan when making cartoons:

  1. Decide what kind of scenes you want to have in cartoons. It looks like there is only one scene in this simple story. But we may want to have a couple more for the beginning and ending titles. Lets have 3 scenes then

  2. Decide what kind of background images are you going to use. We can use plain black screen for titles and "backgrounds/forest.svg" image fro Web Cartoon Maker's library as a park image. You can probably find a better background image on your hard drive

  3. Decide what kind of music and other sounds you want to use. You can play some music from your hard drive. We are not going to play any music. But we'll play a laugh sound at the end similarly to some TV shows.

  4. Decide which characters you are going to use. We'll use Boy and Girl characters.

This plan can now be expressed in pseudo code:

  1. Beginning title appears

  2. Forest background and main characters (boy and girl) appear

  3. Boy and girl have conversation while walking through the park

  4. Ending title appears

Note that we now have the basic cartoon flow completely independent of WCM. The script can be expanded, for example by including the titles text and the actual conversations, and various plot options examined without worrying about coding syntax, etc. In fact, at this level we could also go to Tales Animator or one of the many other animation tools available from very simple ones for animated GIF cartoons to professional level 3D animation tools such as 3D Max. But this book is about WCM and C++, so let's start coding by including characters' files:

#include <boy.h>

#include <girl.h>

Then create the beginning title

void Scene1 ()

{

Text Title ( "In the Park" );

Title.SetColor ( "3e6ba6" );

Title.SetFont ( "Comic Sans MS" );

Title.SetStyle ( "B" );

Title.SetSize ( 90 );

Title.SetVisible ( true );


Title.SetTransparency ( 1 );

Title.ChangeTransparency ( 0, 1 );


Sleep ( 1 );

}

Then create the main scene. Let's just make the characters walking first:

void Scene2 ()

{

Image Back ( "backgrounds/forest.svg" );

Back.SetVisible ( true );

Boy Max;

Girl Mary;


Max.SetVisible ( true );

Mary.SetVisible ( true );

// let's remember the beginning time for later

double dStartTime = GetTime ();


Max.SetPos ( 280, 140 );

Mary.SetPos ( 350, 160 );


Max.GoesTo ( 0, 300 , 8 );


SetTime ( dStartTime ); // happens at the same time

Mary.GoesTo ( 70, 320 , 8 );

}

We used functions SetTime and GetTime to synchronize the Boy's and Girl's walking actions. There is an easier way to synchronize them. There are two special macros defined in WCM C++ THIS_TIME and SAME_TIME for this. We'll learn more about macros later. But here is how to use them. If some of the actions happen at the same time you can use word THIS_TIME before the first action and SAME_TIME before other actions happening at the same time. We can rewrite the above example using these new macros:

void Scene2 ()

{

Image Back ( "backgrounds/forest.svg" );

Back.SetVisible ( true );

Boy Max;

Girl Mary;


Max.SetVisible ( true );

Mary.SetVisible ( true );


Max.SetPos ( 280, 140 );

Mary.SetPos ( 350, 160 );


THIS_TIME Max.GoesTo ( 0, 300, 8 );

SAME_TIME Mary.GoesTo ( 70, 320, 8 );

}

Let's add some more walking:

void Scene2 ()

{

Image Back ( "backgrounds/forest.svg" );

Back.SetVisible ( true );

Boy Max;

Girl Mary;


Max.SetVisible ( true );

Mary.SetVisible ( true );


Max.SetPos ( 280, 140 );

Mary.SetPos ( 350, 160 );


THIS_TIME Max.GoesTo ( 0, 300, 8 );

SAME_TIME Mary.GoesTo ( 70, 320, 8 );


THIS_TIME Max.GoesTo ( - 350, 300, 8 );

SAME_TIME Mary.GoesTo ( - 280, 320, 8 );

}

Now let's add some talking , winking and laughing at the end

void Scene2 ()

{

Image Back ( "backgrounds/forest.svg" );

Back.SetVisible ( true );

Boy Max;

Girl Mary;


Max.SetVisible ( true );

Mary.SetVisible ( true );


Max.SetPos ( 280, 140 );

Mary.SetPos ( 350, 160 );


THIS_TIME Max.GoesTo ( 0, 300, 8 );

SAME_TIME Mary.GoesTo ( 70, 320, 8 );


THIS_TIME Max.GoesTo ( - 350, 300, 8 );

SAME_TIME Mary.GoesTo ( - 280, 320, 8 );


SetTime ( 0.5 );

Mary.Says ( "If we get married, I want to share all your worries, troubles and lighten your burden" );


SetTime ( 5.5 );

Max.Says ( " It is very kind of you, darling, but I do not have any worries or troubles" );


SetTime ( 10.5 );

Mary.Says ( "Well, that is because we aren't married yet" );


SetTime ( 4 );

Mary.Winks ();

Max.Winks ();


SetTime ( 8 );

Mary.Winks ();

Max.Winks ();


SetTime ( 12 );

Mary.Winks ();

Max.Winks ();


SetTime ( 13.5 );

Play ( "people/laugh.wav" );

}

Now we are ready to add the ending title:

void Scene3 ()

{

Text Title ( "The End" );

Title.SetColor ( "3e6ba6" );

Title.SetFont ( "Comic Sans MS" );

Title.SetStyle ( "B" );

Title.SetSize ( 90 );

Title.SetVisible ( true );


Title.SetTransparency ( 1 );

Title.ChangeTransparency ( 0, 1 );


Sleep ( 1 );

}

Now this looks like our first complete cartoon! Let's merge all the code together, compile and preview it!

#include <boy.h>

#include <girl.h>


void Scene1 ()

{

Text Title ( "In the Park" );

Title.SetColor ( "3e6ba6" );

Title.SetFont ( "Comic Sans MS" );

Title.SetStyle ( "B" );

Title.SetSize ( 90 );

Title.SetVisible ( true );


Title.SetTransparency ( 1 );

Title.ChangeTransparency ( 0, 1 );


Sleep ( 1 );

}

void Scene2 ()

{

Image Back ( "backgrounds/forest.svg" );

Back.SetVisible ( true );

Boy Max;

Girl Mary;


Max.SetVisible ( true );

Mary.SetVisible ( true );


Max.SetPos ( 280, 140 );

Mary.SetPos ( 350, 160 );


THIS_TIME Max.GoesTo ( 0, 300, 8 );

SAME_TIME Mary.GoesTo ( 70, 320, 8 );


THIS_TIME Max.GoesTo ( - 350, 300, 8 );

SAME_TIME Mary.GoesTo ( - 280, 320, 8 );


SetTime ( 0.5 );

Mary.Says ( "If we get married, I want to share all your worries, troubles and lighten your burden" );


SetTime ( 5.5 );

Max.Says ( " It is very kind of you, darling, but I do not have any worries or troubles" );


SetTime ( 10.5 );

Mary.Says ( "Well, that is because we aren't married yet" );


SetTime ( 4 );

Mary.Winks ();

Max.Winks ();


SetTime ( 8 );

Mary.Winks ();

Max.Winks ();


SetTime ( 12 );

Mary.Winks ();

Max.Winks ();


SetTime ( 13.5 );

Play ( "people/laugh.wav" );

}

void Scene3 ()

{

Text Title ( "The End" );

Title.SetColor ( "3e6ba6" );

Title.SetFont ( "Comic Sans MS" );

Title.SetStyle ( "B" );

Title.SetSize ( 90 );

Title.SetVisible ( true );


Title.SetTransparency ( 1 );

Title.ChangeTransparency ( 0, 1 );


Sleep ( 1 );

}

Here are some screenshots of our first complete cartoon:


Contents Previous Next
  
News

New Tales Animator Video by Alan Sturgess

Alan Sturgess shared an excellent video he made using Tales Animator! You can still download Tales Animator here. Unfortunately it is only available for Wi

...

Simple Online Character Designer

There is a prototype of simple online character designer available HERE. It is only a prototype, it does not contain many pieces yet but it can already generat

...

Book is updated

Now our book "Web Cartoon Maker: A Fun Way to Learn C++" is fully in synch with WCM 1.5! It is available for download and online reading HERE.

...

Web Cartoon Maker 1.5 is here!

Web Cartoon Maker 1.5 is finally here! You can download it HERE! Here is what was updated in version 1.5: Web Cartoon Maker Desktop Edition is now fully standal

...

read more news...


Poll