Also, we are going to be adding text explanations under all of our tutorial videos so you don’t always have to sit through an entire video just to get a bit of information.  This makeover of all the tutorials will take a couple of weeks to complete and we will be continuing to add the rest of the videos soon after that.  So keep all that in mind as you surf around and learn to program, Instinct style!

The timetable we are looking for to have both of these up as open source is six months.  So keep a look out for more news on this in the coming months.  In the mean time, we will keep updating and adding new video tutorials on here so you can keep on learning!  Keep on coding!

The Instinct Graphics Package

The Instinct Graphics Package is an easy to use and free 2D graphics programming framework for C++.  It can be used simply to output something to a screen or as a package for making 2D games.  It is completely free to use whether it is for personal use or for educational purposes. For educational use or for general questions, feel free to contact us ratadero@predatorinteractive.com

Tutorials and Videos

For videos and tutorials on installing and using the Instinct Graphics package, click here.

Instinct Graphics Package Resources

Reference Sheet
All the major objects and functions you can use in the Instinct Graphics Package.

Instinct Graphics Package Project Folder
Any new Instinct Graphics Package program should start with this.

Coming Soon!

Everything you need to know to learn 2D gaming programming in no time. We offer free to use graphics packages that allow you to display shapes, color, images, as well as get real time input from the user.

What do I need to know?

All you need is at least a little bit of C++ knowledge to start using one of our amazing graphics packages. No graphics programming knowledge is required.

So where should I start here?

There are three main places you can start at:

• Instinct Graphics Package (Introductory)
• Instinct Engine (Intermediate)
• Game Programming Tricks

Instinct Graphics Package

Suggested User: Beginning C++ Programmer or Beginning Game Programmer

The first is the Instinct Graphics Package. If you have limited to intermediate knowledge of C++, have had no experience with graphics programming, or would just like to try something easy to start off with, we definitely suggest this. Don’t be fooled though, this is still a powerful package that can do lots of interesting programs. For more info on the Instinct Graphics Package, check out our video tutorials on that here.

Instinct Engine

Suggested User: Intermediate to Advanced C++ Programmer

The second place you can start at is the Instinct Engine. This requires a stronger knowledge of C++ including classes and pointers. If you have this level of knowledge and possibly want a little more control over everything, then this can be the place to start for you. Has the ability to make commercial quality 2D games.  For more info on the Instinct Engine, check out our video tutorials on that here.

2D Game Programming Tricks

Suggested User: Have knowledge and experience with either of the above packages or some other game programming package.

The last place to start is at our 2D game programming tricks. If you already know one of these two APIs (Instinct Graphics Package or Instinct Engine) or you have a different graphics API you are already using, then here is where you would want to learn to put those skills to use. For more info on our 2D game programming tricks, check out our video tutorials on that there here.

We hope that you will find everything you need here to transcend from noob to 2D game programming master.

Basic Animation and Timers

Prior to actually getting into the animation code, let’s take a quick look at timers.

Timers

To create a timer which has a time value of zero, simply type: “Timer name_of_timer;“
Example:

• Timer animation_timer;
• Timer stopwatch;

The basic functions of timers are as follow:

• timer.start(); //Makes the timer starting ticking.
  
• timer.stop(); //Stops the timer from ticking.
• timer.reset(); //Resets the time value of the timer to zero regardless if it is running or not.

To get the number of milliseconds on the timer, use the member function: “timer.get_time();“
Example:

• int milliseconds = timer.get_time();
• win << Message(Point(5, 5), timer.get_time());
• if(timer.get_time() > 1000)

To add time to the timer use the “timer.add_time(double milliseconds);“ member function.
Example:

• timer.add_time(20000);
• timer.add_time(penalty_time);

To check if the time has passed some number of milliseconds use: “bool timer.has_passed(double milliseconds);“
Example:

• if(timer.has_passed(15000));
• bool passed = timer.has_passed(10500);

Wait for

You can also use the “wait_for(double milliseconds)“ function which makes the program wait for the passed in number of milliseconds.
Example:

• wait_for(10000); //The program will wait here for 10 seconds.
• wait_for(delay_time); //The program will wait here for delay_time milliseconds.

Remember, there are 1000 milliseconds in 1 second.

Animation

To better understand animation, here is a general definition: Seeing a series of rapid pictures that gives the illusion of movement.

Frames

We are going to call these individual pictures that create this illusion of movement frames. So for example here are a series of four frames:

Now if we show each of these frames one after another with a small pause in between, we will see what looks like a ball moving. This illusion is the basis behind animation!

Now that we hopefully have a better understanding of how animation works, we can but it to use with the Instinct Graphics Package.

Coding Animation

Well we could code the above example by simply drawing a ball, moving it and redrawing it.  If we did that four times in our code with a wait_for(100); in between each of those to cause a slight pause, we could reproduce the moving blue ball easily.
Example:

Circle circ = Circle(Point(1, 5), 1, BLUE, true);

//Frame 1
win << circ;
win.output_buffer();

//Frame 2
wait_for(100);
circ.move(1, 0);
win.clear_buffer();
win << circ;
win.output_buffer();

//Frame 3
wait_for(100);
circ.move(1, 0);
win.clear_buffer();
win << circ;
win.output_buffer();

//Frame 4
wait_for(100);
circ.move(1, 0);
win.clear_buffer();
win << circ;
win.output_buffer();

As you can see above, the frames 2-4 become very much the same. If we wanted more frames we would have to continue copying and pasting the same code for each frame.

Using loops

However, if we use a loop that moves everything and redraws it each time, we could have as many frames as we want without having to continuously add code for each frame.
Example:

win << circ;
win.output_buffer();

while(true)
{
    wait_for(100);
    circ.move(1, 0);
    win.clear_buffer();
    win << circ;
    win.output_buffer();
}

With the while(true), the program will continuously run that loop until we close the program.  So now the loop will continously do frame after frame of moving the ball and redrawing it.

Frame Rate

As you can see above, we were using a value of 100 as the number of milliseconds to wait in between each frame.  This is practice is not a nice number to use since that only allows us to have around 10 frames per second (FPS), which is not a good number.  Generally speaking, a good frame rate for animated programs is usually in between 60 and 30 frames per second.  Because of that, I would suggest using a wait_for amount of 20 milliseconds, which in turn creates a frame rate of around 50 FPS.

• wait_for(20);

Just keep in mind that this wait_for(20); by itself is not the best way to do timing for animation, but it is the simplest.  Later we will go over better and more advanced forms of doing timing for animation loops.

Sectioning the Animation Loop

The last bit of advice I would suggest is to always split up the animation loop into two sections to make sure it is done right:

while(true)
{
    wait_for(20);

    ///////////////////
    // Handle Logic
    ///////////////////
    circ.move(1, 0);

    ///////////////////
    // Draw Everything
    ///////////////////
    win.clear_buffer();
    win << circ;
    win.output_buffer();
}

There should be two distinct sections, the section that handles all the logic of the animation (moving objects, doing collision detection, changing colors of objects, etc), and a section that simply draws everything that needs to be drawn.  So what does this mean?  There should be NO drawing of objects in the Handle Logic section, and only code that deals with the drawing of objects in the Draw Everything section.  If you code is sectioned properly and done correctly, your animation should come out nice and smooth and work perfectly with no flickering.

What Now?

Now the rest is up to you in terms of what you want to do in this animation loop.  You don’t have to have a ball that moves around solely in the X direction.  This was merely an example. You can use Rects, Circles, Images, etc. to make anything you can think of.