Programming and Web Development Tutorials

wxWidgets Part III: Creating a Notepad application in C++ Tutorials

gabehabe — Fri, 10 Oct 2008 11:55:38 -0600

wxWidgets Part III
Creating a notepad

In this tutorial, we're going to take quite a big step~ but one that I think is manageable. It's possible to make a notepad application in just 74 lines, with plenty of line spacing. We're going to look at:

Event handling
Creating a menu bar
- The wxMenuBar class
- The wxMenu class
The wxTextCtrl class

Before I start, I'd like to say that I know it's best to split classes across seperate files. But I'm putting all of this in one file so that it's more concise, and easier to read.

So, let's get started on our program!

First off, let's include the main wx header: [code=cpp]#include <wx/wx.h>[/code]

Designing the class
Next, we need to start writing our Notepad class~ It's going to inherit a wxFrame. I've commented it plenty so that you can see what's going on: [code=cpp]class Notepad : public wxFrame {
public:
Notepad(); // our default constructor

private:
wxMenuBar *menu; // the menu bar
wxMenu *file; // the file menu (keep this simple
wxTextCtrl *text; // the main text area
void OnSave(wxCommandEvent &event); // the click event for "save"
void OnOpen(wxCommandEvent &event); // the click event for "open"
void OnExit(wxCommandEvent &event); // the click event for "close"
// declare some ID values for our menu items
// these can be anything, but I personally tend to start from 1,000
enum MenuControls {
idSave = 1000,
idOpen, idExit
};
// this bit's important~
// it's a macro, which is basically saying we want to define some events
// (events such as clicking menu items in the menu)
DECLARE_EVENT_TABLE()
};[/code]
Clear? It should be. Basically, we've only got one thing which is public, and that's the constructor for our notepad. Next, we have some private objects, the menu bar, the menu, and the text area. This should be pretty simple at the minute, there's no new syntax up until that last line... what's this? [il]DECLARE_EVENT_TABLE()[/il]
A macro. By doing this, we're basically saying that our application should have some event handlers, which we define in something called an event table in a moment.

Defining an event table
This bit's new. It's a great way to assign event handlers when you get used to it. An event table is basically where we assign functions to specific events using those IDs we created earlier. Basically, by passing a number and a method name, we assign that method name a value, or a key. This key is then assigned to items later (in this case, menu items) as the event handler. Don't worry if this doesn't make sense right now, it will become clear later on. [code=cpp]BEGIN_EVENT_TABLE(Notepad, wxFrame) // begin the event table for our Notepad class, which inherits wxFrame
EVT_MENU(idSave, Notepad::OnSave) // set an event for our idSave, and the function OnSave
EVT_MENU(idOpen, Notepad::OnOpen) // set an event for open
EVT_MENU(idExit, Notepad::OnExit) // set an event for exit
END_EVENT_TABLE() // end the event table[/code]

The constructor
As with any OOP program that you've written in the past, we need to set up our object in the constructor. In the constructor for our notepad application, we need to add some menu items to the menu, add the menu to the menu bar, and add the text area to the main frame. Sounds like a lot, but it's actually quite simple.
Our constructor is actually going to do a default operation to the wxFrame constructor. We do this like so: [code=cpp]Notepad::Notepad() : wxFrame(NULL, wxID_ANY, wxT("wxNotepad"), wxDefaultPosition, wxSize(650,500)) {[/code] I know, I know~ it's long. But once this class is done, we don't have to do anything to it, other than show it.

Next, we need to instantiate our menu and our menu bar: [code=cpp] this->menu = new wxMenuBar(); // instantiate our menu bar
this->file = new wxMenu(); // instantiate our file menu for our menu bar[/code]
That was simple!

Now it's time to [il]Append()[/il] an item to our menu. Here, we're going to pass two parameters:

The ID number of our event handler~ this is where that enum comes in handy. Remember how we did this in the event table:
[il]EVT_MENU(idSave, Notepad::OnSave) // set an event for our idSave, and the function OnSave[/il]
So, we're passing that idSave index to Append() as if to say "we're going to associate [il]Notepad::OnSave[/il] as the event handler.
A wxString, formatted in a specific way: The text (with an ampersand (&) to signify which key shortcut to use, a tab (\t) and then the keyboard shortcut, which is assigned automatically according to the string we pass now. Great, it's done automatically!

[code=cpp]this->file->Append(idSave, wxT("&Save File\tCtrl-S")); // add a save option to the menu bar[/code]**Remember that we use [il]wxT("")[/il] to format a string as a wxString.

Next, we're going to add an "Open" option, using a similar process to the last line: [code=cpp]this->file->Append(idOpen, wxT("&Open File\tCtrl-O"));[/code]
And now it's time to add a separator, before the exit option. We can do this very simply, by calling one function (which doesn't need parameters) [code=cpp]this->file->AppendSeparator();[/code]
Lastly, let's add an exit option: [code=cpp]this->file->Append(idExit, wxT("E&xit\tCtrl-F4"));[/code]
Next, we're going to append that file menu to our menu bar. This is also as simple as calling the Append function. It takes two parameters, the actual menu to add, and the name of the menu (what to display in the menu bar) [code=cpp]this->menu->Append(file, wxT("&File"));[/code]
The last thing we need to do for the menu bar is actually apply it to the application, which can be done very simply: [code=cpp]this->SetMenuBar(menu); // set our menu bar to be visible on the application[/code]
Now it's time for the last line of our constructor! Wahey!

Basically, all we need to do now is add the text area itself, which is quite simple~ the wxTextCtrl constructor takes quite a lot of arguments, each of which I'm going to explain now:

The first parameter is the parent, so we pass this (this is the owner)
wxID_ANY ~ the ID of the control. Since it doesn't matter, we can just pass wxID_ANY
The third, wxt("") is the text to put in the text area straight away. We pass an empty string here
wxDefaultPosition: the position of the control
wxDefaultSize: the size of the control
And lastly, we have the style~ we want two styles here, wxTE_MULTILINE and wxTE_PROCESS_ENTER. This way, we enable multi-line editing, and allow the user to press enter to move on to a new line. (Otherwise, the enter keypress is processed internally)

[code=cpp] this->text = new wxTextCtrl(this, wxID_ANY, wxT(""), wxDefaultPosition, wxDefaultSize, wxTE_PROCESS_ENTER | wxTE_MULTILINE);
} // end of the constructor![/code]

Defining those events~ what to do, what to do?
First off, the save event. We need to create a save dialog, show it, and check if the user clicked OK. If they did, then we want to save the contents to a file (which is very simple)
So, let's open up that function! [code=cpp]void Notepad::OnSave(wxCommandEvent &event) {[/code]
First off, we need to create a FileDialog. If you're coming from developing in .NET, you'll probably be thinking that you can use a SaveFileDialog. WRONG! We use a [il]wxFileDialog[/il], and specify that we want it to be a save dialog within the parameters. [code=cpp] wxFileDialog *saveDialog = new wxFileDialog(this, wxT("Save File~"), wxT(""), wxT(""),
wxT("Text Files (*.txt)|*.txt|C++ Files (*.cpp)|*.cpp"), wxSAVE);[/code]
This is another one which takes a lot of parameters, so I'll explain them all now:

this ~ the parent of the object
wxT("Save File~") ~ the title of the dialog
The next two, I've passed empty strings. These are the default directory, and the default file. (You can define them if you wish, but you don't have to)
Next, we have the filter. The filter accepts a specific format: "the text to display|*.filetype|another type|*.otherfiletype" (if you're familiar with .NET, you should be familiar with this)
And lastly, the style of the dialog: wxSAVE, since we want a save dialog

Next, we actually need to display the dialog box, and determine what the user pressed (OK or Cancel) After that, we save the contents of the text area to the file specified: [code=cpp]int response = saveDialog->ShowModal();
if (response == wxID_OK) { // if the user clicked OK, we should save the text
this->text->SaveFile(saveDialog->GetPath()); // this is pretty cool. we can save it with just one line!
// wxTextCtrl has a member function called SaveFile, which you simple pass the path to and it will save
// our dialog has a member function called GetPath, which will return the entire path and file name
}
} // end of the event handler[/code]

Since the open file event is almost identical, I'll post the code now~ the only difference is that we specify wxOPEN instead of wxSAVE: [code=cpp]void Notepad::OnOpen(wxCommandEvent &event) {
wxFileDialog *openDialog = new wxFileDialog(this, wxT("Open File~"), wxT(""), wxT(""),
wxT("Text Files (*.txt)|*.txt|C++ Files (*.cpp)|*.cpp"), wxOPEN);
int response = openDialog->ShowModal();
if (response == wxID_OK) {
this->text->LoadFile(openDialog->GetPath());
}
}[/code]

And the last event is the close event. This one is simple, it's only one line long. We call [il]Destroy()[/il] to basically dispose of the window and any resources used:[code=cpp]void Notepad::OnExit(wxCommandEvent &event) {
this->Destroy(); // close the window, and get clear any resources used (eg, memory)
}[/code]

Almost there... Let's implement it in our app!
And now for the bit that you've been waiting for. Implementing the app, so we can actually compile it! w00t! This shouldn't be anything new, provided that you've read Part II. [code=cpp]class MainApp : public wxApp {
public: // remember this from part 2? very simple from here on in, we're almost done
virtual bool OnInit();
};

bool MainApp::OnInit() {
// create a new Notepad (we used a wxFrame in part 2)
Notepad *main = new Notepad();
main->Show(true); // show it

return true;
}

// and lastly, we just have to implement our application!
IMPLEMENT_APP(MainApp)[/code]
Now, compile and run~ you should have a basic notepad application! Note that you don't have the keyboard shortcuts to copy, paste, etc~ but if you highlight some text, and right click, you get a pretty big context menu, with plenty of options. And if you're feeling up to the task, you could try adding them as a new menu to your menu bar!

And finally, here is the entire program, just in case you got lost along the way: [code=cpp]#include <wx/wx.h>

class Notepad : public wxFrame {
public:
Notepad(); // our default constructor

private:
wxMenuBar *menu; // the menu bar
wxMenu *file; // the file menu (keep this simple
wxTextCtrl *text; // the main text area
void OnSave(wxCommandEvent &event); // the click event for "save"
void OnOpen(wxCommandEvent &event); // the click event for "open"
void OnExit(wxCommandEvent &event); // the click event for "close"
// declare some ID values for our menu items
// these can be anything, but I personally tend to start from 1,000
enum MenuControls {
idSave = 1000,
idOpen, idExit
};
// this bit's important~
// it's a macro, which is basically saying we want to define some events
// (events such as clicking menu items in the menu)
DECLARE_EVENT_TABLE()
};

// this is our event table, where we assign functions to specific events
// using those IDs we created earlier
// basically, by passing a number and a method name, we assign that method name a value, or a key
// this key is then assigned to items later (in this case, menu items) as the event handler
// don't worry if this doesn't make sense right now, it will become clear later on
BEGIN_EVENT_TABLE(Notepad, wxFrame) // begin the event table for our Notepad class, which inherits wxFrame
EVT_MENU(idSave, Notepad::OnSave) // set an event for our idSave, and the function OnSave
EVT_MENU(idOpen, Notepad::OnOpen) // set an event for open
EVT_MENU(idExit, Notepad::OnExit) // set an event for exit
END_EVENT_TABLE() // end the event table

// our constructor, which does all this stuff for the wxFrame constructor
// this makes it easier to simply create our notepad object later~
Notepad::Notepad() : wxFrame(NULL, wxID_ANY, wxT("wxNotepad"), wxDefaultPosition, wxSize(650,500)) {
this->menu = new wxMenuBar(); // instantiate our menu bar
this->file = new wxMenu(); // instantiate our file menu for our menu bar
this->file->Append(idSave, wxT("&Save File\tCtrl-S")); // add a save option to the menu bar
// note how we passed "idSave" as the first argument? This means that we're assigning OnSave
// as an event handler when the user clicks the save menu item
// now we do the same for our "open" option, assigning the OnOpen event to it
this->file->Append(idOpen, wxT("&Open File\tCtrl-O"));
this->file->AppendSeparator(); // add a separator (between our file I/O options and our exit option
this->file->Append(idExit, wxT("E&xit\tCtrl-F4")); // add an exit option to the file menu
this->menu->Append(file, wxT("&File")); // add the file menu to the menubar, and give it the title "File"
this->SetMenuBar(menu); // set our menu bar to be visible on the application

// lastly in our constructor, we're going to add the text area~ we need to pass quite a few parameters here
// the first parameter is the parent, so we pass this (this is the owner)
// wxID_ANY ~ the ID of the control. Since it doesn't matter, we can just pass wxID_ANY
// the third, wxt("") is the text to put in the text area straight away. We pass an empty string here
// wxDefaultPosition: the position of the control
// wxDefaultSize: the size of the control
// and lastly, we have the style~ we want two styles here, wxTE_MULTILINE and wxTE_PROCESS_ENTER
// this way, we enable multi-line editing, and allow the user to press enter to move on to a new line
this->text = new wxTextCtrl(this, wxID_ANY, wxT(""), wxDefaultPosition, wxDefaultSize, wxTE_PROCESS_ENTER | wxTE_MULTILINE);
}

// now it's time to define our save event (for when the user clicks "Save"
void Notepad::OnSave(wxCommandEvent &event) {
// first, we create a wxFileDialog, which takes a number of parameters
// this ~ the parent of the object
// wxt("Save File~") ~ the title of the dialog
// the next two, I've passed empty strings. These are the default directory, and the default file
// (you can define them if you wish, but you don't have to)
// next, we have the filter. The filter accepts a specific format:
// "the text to display|*.filetype|another type|*.otherfiletype
// and lastly, the style of the dialog: wxSAVE, since we want a save dialog
wxFileDialog *saveDialog = new wxFileDialog(this, wxT("Save File~"), wxT(""), wxT(""),
wxT("Text Files (*.txt)|*.txt|C++ Files (*.cpp)|*.cpp"), wxSAVE);
// next, we display the dialog box
// it will return one of 2 values: wxID_OK, or wxID_CANCEL (whichever button the user clicked)
int response = saveDialog->ShowModal();
if (response == wxID_OK) { // if the user clicked OK, we should save the text
this->text->SaveFile(saveDialog->GetPath()); // this is pretty cool. we can save it with just one line!
// wxTextCtrl has a member function called SaveFile, which you simple pass the path to and it will save
// our dialog has a member function called GetPath, which will return the entire path and file name
}
} // end of the event handler

// next, we have our open dialog, which is practically the same as our save dialog, so I won't go into detail
// note how we pass wxOPEN instead of wxSAVE as the style though~
void Notepad::OnOpen(wxCommandEvent &event) {
wxFileDialog *openDialog = new wxFileDialog(this, wxT("Open File~"), wxT(""), wxT(""),
wxT("Text Files (*.txt)|*.txt|C++ Files (*.cpp)|*.cpp"), wxOPEN);
int response = openDialog->ShowModal();
if (response == wxID_OK) {
this->text->LoadFile(openDialog->GetPath());
}
}

// if the user clicks exit (from the menu) then we should close the window
void Notepad::OnExit(wxCommandEvent &event) {
this->Destroy(); // close the window, and get clear any resources used (eg, memory)
}

// now all that's left is the implementation! we need to create our MainApp class
class MainApp : public wxApp {
public: // remember this from part 2? very simple from here on in, we're almost done
virtual bool OnInit();
};

bool MainApp::OnInit() {
// create a new Notepad (we used a wxFrame in part 2)
Notepad *main = new Notepad();
main->Show(true); // show it

return true;
}

// and lastly, we just have to implement our application!
IMPLEMENT_APP(MainApp)[/code]

Where do I go from here?
Well, that's it for this series of tutorials (for now, at least)
If there's anything that you're still not sure of, please feel free to leave a comment on this tutorial, requesting one~ hopefully, I'll be able to get it done within 24-48 hours of you requesting it.

Remember that you can check out the wxWidgets documentation if you get stuck along the way. Also, keep an eye on my contributions~ you never know when a tutorial or snippet might crop up.

Happy coding! /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

C++ templates and operator overloading basics in C++ Tutorials

gabehabe — Fri, 10 Oct 2008 05:16:36 -0600

Nice write up /icon_up.gif" style="vertical-align:middle" emoid=":^:" border="0" alt="icon_up.gif" />

wxWidgets Part II: Hello, wxWidgets! in C++ Tutorials

gabehabe — Thu, 09 Oct 2008 15:47:40 -0600

wxWidgets: Part II
Hello, wxFrame!

So, hopefully you've read part one, and got a development environment set up. In this tutorial, we're actually going to start writing some code! Hooray! OMG, code FTW, right? Right!

The end result isn't going to be the most impressive thing in the world, but it's an important one~ wxWidgets is actually quite short and to the point, but the program structure is very different compared to your typical C++ program. The code may look a little confusing at first, but for those of you who have made a window using the Win32 API, you'll know what I mean when I say this:
It's short. You can create a window in just 15 lines, with plenty of spacing to see what's going on.

NOTE: My example is 15 lines long with spacing. Many examples out on the web actually use about 26, because they design a class which is not necessary at this stage. I'm making this as simple as possible to demostrate the pure power of the wxWidgets toolkit.

This tutorial is going to be brief, but it's important that you understand the structure of the program itself before we get in-depth. When writing a wxWidgets application, you don't even have to write a main() function! /ohmy.gif" style="vertical-align:middle" emoid=":o" border="0" alt="ohmy.gif" />

Like I said before, wxWidgets is short and to the point. It also heavily focuses on object oriented program. If you don't have any experience with objects, I strongly recommend that you read up on them before getting into this code.

Before we start, what do we need to include?
We actually only need to include one header in our application. It's the main wxWidgets header file: [code=cpp]#include <wx/wx.h>[/code]
Writing the MainApp class
This is going to be our main application, as the name suggests. We're going to create a class, and inherit [il]wxApp[/il]. All that we need to do is override one virtual function: [il]bool OnInit();[/il]

This is basically the function that will be called when our class is initialised. So, without further ado, let's get started! [code=cpp]class MainApp : public wxApp {
public:
virtual bool OnInit();
};[/code]
How simple is that?! And it doesn't get too much more difficult, either.

Let's now define this [il]OnInit()[/il] function. So, we want to create a wxFrame, and show it. Simple as that! The constructor for a wxFrame takes quite a few parameters, which I'll cover soon: [code=cpp]bool MainApp::OnInit() {
wxFrame *content = new wxFrame(NULL, wxID_ANY, wxT("Hello cliche! Hello wxWidgets!"), wxDefaultPosition, wxSize(350, 150));
content->Show(true);

return true;
}[/code]
Can you believe that there's only one line left after this? /ohmy.gif" style="vertical-align:middle" emoid=":o" border="0" alt="ohmy.gif" /> How great is this?

What are all these things in the wxFrame constructor, then?
The first parameter is the parent of the wxFrame being created. We're passing NULL~ this is the main wxFrame, and it isn't going to have a parent.

Secondly, we have the window ID. wxID_ANY is basically just saying it can be any ID, it doesn't matter. You can pass -1 as the ID, which is the default ID.

The third parameter is the title of the window. We have something else that's completely new here: [il]wxT("text");[/il]
Well, wxWidgets has pretty much got it's own everything. Including its own string class, called... yep, you guessed it: wxString. [il]wxT()[/il] is basically a quick way to format a string.

The fourth parameter is the location of the window. We're passing wxDefaultPosition, to give our wxFrame a default start position. Makes sense, doesn't it? /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Lastly, we have [il]wxSize(int width, int height)[/il] which basically defines the size of our window.

So after breaking it up, it should make a lot more sense. Lastly, we've got this [il]content->Show(true);[/il] which is simply saying that we want to show our wxFrame on the screen.

And finally, that last line! No main here!
All we have to do now is implement our application. (Our wxApp class, which we called MainApp)
We can do this in one line: [code=cpp]IMPLEMENT_APP(MainApp)[/code]
NOTE THAT THERE IS NO SEMI-COLON
This probably seems weird to you, but like I said before, wxWidgets pretty much just follows its own rules. You'll see a lot of stuff like this in the coming tutorials.

Here's the complete code: [code=cpp]#include <wx/wx.h>

class MainApp : public wxApp {
public:
virtual bool OnInit();
};

bool MainApp::OnInit() {
wxFrame *content = new wxFrame(NULL, wxID_ANY, wxT("Hello cliche! Hello wxWidgets!"), wxDefaultPosition, wxSize(350, 150));
content->Show(true);

return true;
}

IMPLEMENT_APP(MainApp)[/code]
(Like I said, it's very concise)

Until next time~

Happy coding! /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Beginner's Guide to PHP-GTK in PHP Tutorials

weldan — Sun, 12 Oct 2008 10:55:46 -0600

Nice guide. Thanks /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" />

wxWidgets Part I: Getting set up in C++ Tutorials

gabehabe — Thu, 09 Oct 2008 14:06:58 -0600

Welcome to the wonderful world of wxWidgets! In this series of tutorials, I'm going to be explaining how to develop software in C++ using wxWidgets.

So, what's this wxWidgets stuff?
wxWidgets is a very interesting toolkit, which is compatible with pretty much any operating system! That's right, you can make your software for a whole range of platforms, including:

Win32
Mac OS X
GTK+
X11
Motif
WinCE
and more!

It's compatible with a whole bunch of languages, including C++, Perl and C# ~ but in these tutorials, I'll be covering development in C++

What should I already know?
As with all programming concepts, it's important that you've got a good understanding of as many of the key principals as possible. Loops, functions, etc~ oh, and object oriented programming (OOP) is a must!

OK, OK~ let me get started!
It can be quite tedious to set up wxWidgets. Unfortunately, I can only cover the setup for Windows~ sorry everyone else! You can check out the wxWiki, you should be able to find everything you need there. Also, if you have any questions, let me know and I'll do my best to help. /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />
So let's get started
Wait... what do we need? Well, a compiler. Obviously. You'll also need to download wxWidgets, and preferably an IDE. (My choice: Code::Blocks)

Where can I get all this stuff from?
First off, get your compiler. MinGW is a great compiler for Windows, and that's what I'll be using. The Microsoft installer is available from here.

As I mentioned earlier, my IDE of choice is Code::Blocks. It's cross platform, but since this tutorial covers Windows, you can get the Windows installer directly from here.

Last but certainly not least, you're going to need the wxWidgets toolkit itself! The Microsoft installer is available here, and for you non-Windows users, check out the downloads page here.

OK, so what now? Install your compiler (MinGW) and wxWidgets. Install them to the root of your drive, so on Windows, you should have:
C:/MinGW
C:/wxWidgets-2.8.9 (or some other version)

Now you're going to need to clean and compile the source code. Fortunately for you Windows user though, I've set up a nice little batch script to do all the work for you. If you want to get it set up automatically, use this batch script.

If you want to do it manually, all you have to do is follow the code in that snippet, typing each command into the command line. (NOT RECOMMENDED!)
(Remember that REM is simply a comment, and not part of the code)

So now it's time to set up Code::Blocks. This bit's pretty easy. Install it (preferably to the default directory in Program Files, but it doesn't matter) and run the exe.

You should now be in front of your new favourite IDE. /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Go to File>New>Project, and find wxWidgets Project. (It should be right at the bottom)

Follow the instructions until you reach a dialog asking which version you want to use. This should be self explanatory, but (at the time of writing this tutorial) wxWidgets 2.8.x is the latest, so select that.

Next, it will probably ask you to set up wxWidgets. Open the Global Variable Editor, and paste this into the "base" text box:
[il]C:\wxWidgets-2.8.9[/il] (or wherever you installed it to)

Now click close, and continue on through the setup.

You will now be asked to select the setting which match your installation. Check all three boxes (they should be "driver" "monolithic" and "unicode.") If you read the batch script, this will make sense. If not, don't worry about it, it's not important. /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Continue on through the project setup, and you should eventually have a template prepared for you. This bit's important:
YOU CAN ONLY COMPILE FOR "RELEASE"
This is because we configured wxWidgets for release earlier (again, you'll know if you read the batch script. Don't worry if you didn't)

So, change the Build target to Release, and hit F9 (Compile and run)

That's it! You should now have a window open, built using the example code from the Code::Blocks template!

*Note: I apologise if the end setup (for Code::Blocks) is a little off. I had to do this from memory, since it's only necessary to do it once.

And that's it! It was a long setup, but over the next tutorials in this series, you're going to find out why it was worth it!

Happy coding! /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

***Please feel free to ask any questions regarding this setup. I know it can be tedious, I had problems myself when setting it up. I'll do my best to answer them. /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Perlin Noise in C++ Tutorials

manhaeve5 — Mon, 06 Oct 2008 14:20:19 -0600

Hi there, guys

I'm here to teach you something about Perlin Noise. You know, that magical thing that gives infinite possibilties and is usefull in every single game.

To be honest with you, it's not that very difficult, but it can be if it's not explained right.

First, the theoratical side:

Now, what exactly is perlin noise? Well, it is some pseudo random coherent noise. Let me explain that bit by bit:
*Pseudo random: This means that it appears random, but you get the same result twice every time you call it. Think of the rand() function. You might have
noticed that if you not seed it it always will give number 13 as first. If it was to be fully random you would get a different number everytime.

*Coherent: This means that it is very smooth. Here's a picture of some non-coherent noise.

This is coherent noise

Imagine that you zoom in on that non-coherent noise, and as you zoom in, you see that there are transitions between those pixels, and there you go,
coherent noise!

But that contrast is a bit high, don't you, let's smooth it out a bit:

There we go, looks much better, doesn't it?

But if you want to use it as a heightmap, it will be a bit too smooth, don't you think? Well, let me show you how to improve that by using octaves.
Maybe this image will help explain:

So, the smoothed noise is image a. If We zoom out on that noise, we get image b, and if we zoom out on b, u get image c. If u add a,b,c,... U get this:

And this is what we are going for.

Now, lets take that what we have learned and bring it in the practical side.

First of all, we'll need a pseudo-random number generator:

I searched a bit on the web and I came across this one:

1D

CODE

inline double findnoise(double x)
{
int x = (x<<13) ^ x;
return (double)( 1.0 - ( (x * (x * x * 15731 + 789221) + 1376312589) & Ox7fffffff) / 1073741824.0);
}

Here's the 2D version

CODE

inline double findnoise2(double x,double y)
{
int n=(int)x+(int)y*57;
n=(n<<13)^n;
int nn=(n*(n*n*60493+19990303)+1376312589)&0x7fffffff;
return 1.0-((double)nn/1073741824.0);
}

Don't ask me how it works because I dont know how it works myself, something with prime numbers... But what I do know is that it returns a value between
-1 and 1, just like our perlin noise function.

Now, as I've explained before, we get coherent noise because we look between the pixels, so our perlin noise function must be able to accept
double numbers. So we have to interpolate between the pixels. Interpolate is like taking the average, but a little bit more complicated. We'll be using
cosine interpoliation. It gives a very nice effect because it looks like a curve. But I wont explain too much, that's maybe for another tutorial.
Here is it.

CODE

inline double interpolate(double a,double b,double x)
{
double ft=x * 3.1415927;
double f=(1.0-cos(ft))* 0.5;
return a*(1.0-f)+b*f;
}

Now you might ask: "Hey, what about the 2D version?". Well, let me explain this. Let's take the average of a and b and call it d.
Let's also take c and d and call it e. And if we take the average of d and e it would equal to the average of a b c and d.
This enables us to stick to 1 dimension, making the code alot easier. Now, I'll combine these into one function. It uses SDL for image handling.

CODE

double noise(double x,double y)
{
double floorx=(double)((int)x);//This is kinda a cheap way to floor a double integer.
double floory=(double)((int)y);
double s,t,u,v;//Integer declaration
s=findnoise2(floorx,floory);
t=findnoise2(floorx+1,floory);
u=findnoise2(floorx,floory+1);//Get the surrounding pixels to calculate the transition.
v=findnoise2(floorx+1,floory+1);
double int1=interpolate1(s,t,x-floorx);//Interpolate between the values.
double int2=interpolate1(u,v,x-floorx);//Here we use x-floorx, to get 1st dimension. Don't mind the x-floorx thingie, it's part of the cosine formula.
return interpolate1(int1,int2,y-floory);//Here we use y-floory, to get the 2nd dimension.
}

And there we are, a perlin noise function. It returns a value between -1 and 1. To convert this to a 0-256 RGB value, we simple multiply it by 128,
then add 128 to it. But in the theory section I mentioned something about octaves, well I'll show it now. I call this result clouds.

CODE

SDL_Surface *Render_Clouds(int w,int h,double zoom,double p, int r, int g, int b)//w and h speak for themselves, zoom wel zoom in and out on it, I usually
{//                                           use 75. P stands for persistence, this controls the roughness of the picture, i use 1/2
int octaves=2;
SDL_Surface *ret=SDL_CreateRGBSurface(SDL_SWSURFACE,w,h,24,0,0,0,0);//Create an empty image.
for(int y=0;y<h;y++)
{//Loops to loop trough all the pixels
  for(int x=0;x<w;x++)
  {
   double getnoise =0;
   for(int a=0;a<octaves-1;a++)//This loops trough the octaves.
   {
    double frequency = pow(2,a);//This increases the frequency with every loop of the octave.
    double amplitude = pow(p,a);//This decreases the amplitude with every loop of the octave.
    getnoise += noise2(((double)x)*frequency/zoom,((double)y)/zoom*frequency)*amplitude;//This uses our perlin noise functions. It calculates all our zoom and frequency and amplitude
   }//                                            It gives a decimal value, you know, between the pixels. Like 4.2 or 5.1
   int color= (int)((getnoise*128.0)+128.0);//Convert to 0-256 values.
   if(color>255)
    color=255;
   if(color<0)
    color=0;
   SetPixel(ret,x,y,(int)((r/255.0)*(double)color),(int)((g/255.0)*(double)color),(int)((b/255.0)*(double)color));//This colours the image with the RGB values
  }//                                                           given at the beginning in the function.
}
return ret;
}

And this gives some nice clouds. I hope you enjoyed this tutorial, and I there's enough request, I'll make a more in-depth sequel.

Creating a basic Notepad Application in Java Tutorials

Locke37 — Sun, 05 Oct 2008 09:55:02 -0600

Nice tutorial! /icon_up.gif" style="vertical-align:middle" emoid=":^:" border="0" alt="icon_up.gif" />

Flash/Python socket connections and communication in Flash Tutorials

BetaWar — Sat, 04 Oct 2008 22:42:24 -0600

Before we start
This tutorial requires that you have Flash and Python installed on your computer. To download Python go here:
http://python.org/

In this tutroail
We will be creating a simple Flash client side script that will open a socket connection with our server (which we will be creating in Python), recieve a message from the server and send a message to the server, which the server will acknowledge and print out as well.

NOTE - This tutorial uses the Flash Sandbox, and doesn't work for general web activity at this point in time.

Creating the server
The server script for this tutorial is a simple script that will begin listening for socket connections on port number 2727. When a socket connection is made the server will print the client information (IP and socket), print out the data the client sent, and then send a reply to the client.

Starting out we will need to import the sockets class, otherwise the script is dead in the water:

CODE

import socket

Now, we need to get the server to allow socket connections, bind to a port, and start listneing for connection attempts.

This can be done in 3 lines:

CODE

mySocket = socket.socket ( socket.AF_INET, socket.SOCK_STREAM )
mySocket.bind ( ( '', 2727 ) )
mySocket.listen ( 5 )

Basically all that happens is the server creates a variable called [inline]myScoket[/inline] amd sets it to the socket input stream. Then it binds [inline]mySocket[/inline] to no host (defaults to localhost) and port number [inline]2727[/inline]. After that it starts listening for socket connections and will allow a total of [inline]5[/inline] connections to be open at once.

Now that the hard part is done we need to add a handle for incoming socket connections and messages:

CODE

while True:
    channel, details = mySocket.accept()
    print 'We have opened a connection with', details
    txt = channel.recv ( 100 )
    print txt
    channel.send ( "This is a response test - attempt 1\0" )
    channel.close()

This creates an infinite loop (to keep the application running until you close it) and allow connections. Upon receiving a connection the variables [inline]channel[/inline] and [inline]details[/inline] are set. The details are IP address and socket that the client is communicating from, and the channel is the data stream.

Once the socket connection has been accepted the server outputs [inline]We have opened a connection with <IP, PORT>[/inline] Then recieves the data which was sent (100 bits at a time until the data stream is finished), and prints the message out. After completing this the server sends a reply to the client in plain text.

NOTICE - The reply message ends with [inline]\0[/inline] this is a null byte character, which Flash requires to know that the end of the data stream has come.

And, after the reply is sent the server halts the connection.

Here is a look at the whole thing:

CODE

import socket
mySocket = socket.socket ( socket.AF_INET, socket.SOCK_STREAM )
mySocket.bind ( ( '', 2727 ) )
mySocket.listen ( 5 )
while True:
    channel, details = mySocket.accept()
    print 'We have opened a connection with', details
    txt = channel.recv ( 100 )
    print txt
    channel.send ( "This is a response test - attempt 1\0" )
    channel.close()

The Flash side
On the Flash side of life things are a bit easier, all we have to do is create a new [inline]XMLSocket[/inline], tell it what port and host to connect with and give it a few functions on how to act under certain circumstances.

Starting off, lets create the socket variable:

CODE

var sock:XMLSocket = new XMLSocket();

This, as you would expect, creates a new [inline]XMLSocket[/inline] called [inline]sock[/inline].

Connecting with the server is as easy as this:

CODE

sock.connect('localhost', 2727);

Which tells the socket to go for the [inline]localhost[/inline] on port [inline]2727[/inline] - The same port the server is listening on.

New, we need to set up a few functions:

CODE

sock.onConnect = function(myStatus:Boolean){
    if(myStatus){
        trace("Connected");
    }
    else{
        trace("Connection failed");
    }
}
sock.onData = function(msg:String){
      trace("Recieved: "+msg);
}
sock.onClose = function(){
    trace("Connection Closed");
}

The above functions tell the socket connection how to act given the various calls allowed by ActionScript 2.0, and output the various messages accordingly. By this time (after reading a few of my other tutorials) I hope you will be able to understand what is going on there.

Now, the simple thing is left - sending a message to the server. This is accomplished like so:

CODE

sock.send("testing it out - Flash style :)");

The full AS 2.0 code:

CODE

var sock:XMLSocket = new XMLSocket();
sock.connect('localhost', 2727);
sock.onConnect = function(myStatus:Boolean){
    if(myStatus){
        trace("Connected");
    }
    else{
        trace("Connection failed");
    }
}
sock.onData = function(msg:String){
      trace("Recieved: "+msg);
}
sock.onClose = function(){
    trace("Connection Closed");
}
sock.send("testing it out - Flash style :)");

Running it
When you have everything finished, you will want to run it. This is accomplished simply by starting up the server (this must be done first), and then in your .fla file (In Flash) pressing CTRL+Enter (this will fire up the Flash SWF in the Flash sandbox and allows for a TON of security pass overs. As this is the case you will be albe to see the script working without having to jump through any hoops.

Here is what you will get as output:
Server:

QUOTE

We have opened a connection with <'127.0.0.1', 1364>
testing it out - Flash style /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Flash

QUOTE

Connected
Recieved: This is a response test - attempt 1
Connection Closed

The End
Hopefully you enjoyed this tutorial and can see some useful applications of it. I will probably post another tutorial when I get things working online so you can have things playing outside of the sandbox.

Until next time - Keep Flashing /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Papervision 2.0 Plane in Flash Tutorials

Kerplope — Thu, 02 Oct 2008 19:28:09 -0600

If you have used custom classes in flash before, you will already be familiar with importing and utilizing those classes. One of the these classes is called Papervision and it allows you to code 3D features in Flash using ActionScript3. You can download the classes necessary to run Papervsion from their google code site. DOWNLOAD
Once you have downloaded the zip file, extract it. Then create a new folder anywhere outside that zip folder, to store your custom ActionScript classes. Inside of the zip folder copy the �org� folder (inside �src�) into the new folder you created for classes. Now open up Flash CS3. Before you begin the project go to �Edit� and then �Preferences�. Choose the category ActionScript and the ActionScript 3 Settings. Then click the crosshair (browse) and choose the folder that you created (it should be one level above the �org� folder.)

Now comes the fun part. Create a new ActionScript 3 document and open up your web browser or �My Pictures� folder. Bring about 10 or so images onto the stage of your project and make sure that you scale them down to fit on the stage.
Once you are satisfied with the images that you have chosen, arrange them however you like, then select them all. Convert to symbol(F8) and make sure that the registration is set to the top left and that Movie Clip is chosen. Name it anything that you want and click �OK�. Now click the instance of the symbol that you created and, for the purpose of this tutorial, name it �imageGallery�.

Now that �imageGallery� has been set up you should move it all the way off the stage. OK, lets code. Open up the actions panel by selecting any frame and pressing F9. In the actions panel we need to import our Papervision3D classes. which will give us the ability to access the objects, methods and properties within Papervision3D.

CODE

import org.papervision3d.cameras.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.materials.*;
import org.papervision3d.render.*;
import org.papervision3d.view.*;
import org.papervision3d.scenes.*;

Next we initialize a viewport which is basically a 3D MovieClip, which we will add to our stage. We will also need a scene where we will add objects and a camera to focus on a specific part of our scene. Last we need a rendering engine to make the scene viewable.

CODE

var viewport:Viewport3D = new Viewport3D(0,0, true,true);
var render:BasicRenderEngine= new BasicRenderEngine();
var scene:Scene3D = new Scene3D();
var camera:Camera3D = new Camera3D();
addChild(viewport);
camera.zoom = 10;
camera.focus = 100;

Now that our scene is initialized we can add a plane which will hold our �imageGallery� MovieClip. To create a plane simply type.

CODE

var picPlane:Plane = new Plane(picPlaneMaterial, imageGallery.width, imageGallery.height,10,10);

This will create define a plane but what will the plane hold? To give that plane a visual we must create a material which will be our �imageGallery� so paste this code above the previous line.

CODE

var picPlaneMaterial:MovieMaterial = new MovieMaterial(imageGallery);

We will also want the material to be visible on both sides so enter

CODE

picPlaneMaterial.oneSide = false;

Now all we have to do is add the plane to the scene and render the scene.

CODE

scene.addChild(picPlane);
render.renderScene(scene, camera, viewport);

Run the movie (ctrl-enter) and you should see your pictures in the center of the stage. This is good but the real benefit of using Papervision is to allow the user to view content in 3D space, so we are going to let the end user rotate the plane. Replace the render scene with a function the runs every frame and evaluates the users mouse position in relation to the center of the stage in order to rotate the plane.

CODE

stage.addEventListener(Event.ENTER_FRAME, positionAndRender)
function positionAndRender(evt:Event) {
    var rateOfChange:uint = 100;
    picPlane.rotationY += ((stage.stageWidth/2) - mouseX)/rateOfChange;
    picPlane.rotationX += ((stage.stageHeight/2) - mouseY)/rateOfChange;
    render.renderScene(scene, camera, viewport);
}

Test your movie and you should see something like this.

So thats it, but you don't have to be done yet. Try changing the frame rate or even try to display the �imageGallery� on a cylinder, sphere or cube. To get more help consult the documentation for Papervision3D at http://www.flashbookmarks.com/PV3D-GreatWhite-DOC/.
Feel free to contact me with any questions.

Blinking Text for Beginners in Visual Basic Tutorials

akhileshbc — Sat, 27 Sep 2008 22:59:21 -0600

Hi guys,
Most of you had created many programs for various purpose. But have you ever thought of some animation in your program../smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Here I am going to mention a small tutorial on creating a blinking text effect. It is for pure beginners.

First of all open the Visual Basic using Start>Programs>Microsoft Visual Studio>Visual Basic 6.0.

Then select Standard EXE and click open.
You will get a blank Form.

From the toolbox(in left side), select Command Button and create two buttons in your form(say, Command1 and Command2).
Also, create a Timer in your form(say, Timer1)

Then open the code window(View menu> View Code).
Then write the code as below:

CODE

Private Sub Command1_Click()
Timer1.Interval = 100 'interval of the timer
Timer1.Enabled = True 'starting the animation
Label1.Caption = "Welcome" 'text to display
End Sub

Private Sub Command2_Click()
Timer1.Enabled = False 'stopping the animation
End Sub

Private Sub Form_Load()
Timer1.Enabled = False 'disabling the animation on loading the form
End Sub

Private Sub Timer1_Timer()
If Label1.Visible = True Then 'checking whether it is visible
Label1.Visible = False 'if visible then, make it invisible
ElseIf Label1.Visible = False Then 'checking whether it is invisible
Label1.Visible = True 'if invisible then, make it visible
End If
End Sub

I had included most of the comments in the code itself. I think you understand my coding. If you have any doubt, please feel free to contact me..../smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

-Akhilesh B Chandran

C++ Basics 1 - Comments and Data Types in C++ Tutorials

gabehabe — Tue, 07 Oct 2008 06:37:11 -0600

Nice writeup~ I like the way you even managed to show some basic OOP principals in such an intro topic. /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

A few things to say though. [il]printf()[/il] is a C-standard function. It's compatible with C++ since C++ is backwards compatible with C, but it's more common to stick with C++ standards where possible. (example, for basic console I/O)

So, [code=cpp]printf("The Student %s\n", test->getName());[/code] will actually be [code=cpp]cout << "The Student " << test->getName();[/code]

Also, [il]char*[/il] is C standard for strings~ why not make use of the [il]string[/il] class?

Lastly, I think you missed explaining the purpose of that get() function. It's used to access a private variable.

/smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

File Generation - DETAILED Creation + Writing in PHP Tutorials

pr4y — Thu, 25 Sep 2008 13:26:58 -0600

QUOTE(Nykc @ 25 Sep, 2008 - 11:56 AM) [snapback]424008[/snapback]

Hey I like this guy already.....

Very nice tutorial. I was trying to do something similiar in PERL. PHP works for me as well..

Gracias!!!!

First off, thanks for the complement! /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" />

Second, just thought you should note that this script only supports text files up to 200kb in size. When I tested this, I used a text file with 500 file names... and it was only 9.8kb..... so unless you need to generate more than 10,000 files (LOL) you might need to use arrays and multiple functions to complete what you need done... but I doubt anyone will ever need to generate more than 10,000 files, so this works for now /tongue.gif" style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" />

Cheers!

Game Programming in Linux for Windows Programmers - Part 3 in C++ Tutorials

WolfCoder — Thu, 18 Sep 2008 12:05:30 -0600

Previous Tutorial

Hello there-! Have fun reading a little background on the purpose of this tutorial series (especially since this is the tutorial for compiling on different operating systems), skip to the first bold heading if you just want the tutorial but I really hope you read the background... please :3

Everyone sane has a computer with one of the big 3 operating systems. Even if you're partially insane, you still probably have Linux, Windows, or a Mac. As you probably know Windows is used in 90% of computers because of Microsoft's evil but clever marketing techniques. So... What does make an operating system good for games? Let's think about this for a moment and come up with a list...

An operating system good for games is:
- Stable, because it's annoying to play a game only to have it crash often making you restart /anime2.gif" style="vertical-align:middle" emoid=">.<" border="0" alt="anime2.gif" />
- Yielding to resources, so that when the user is playing a video game, a good amount of resources are availiable to the game.
- Simple and organized, when the user does want to play a game, they don't want to have to enter many commands, the list of games should be readily availiable and start when clicked upon.
- Supportive of hardware, so when a user gets a game, they can be sure it will work on their computer because the operating system took care of the hardware drivers.

My audiance for this tutorial is Windows game programmers, so you probably are one yourself. You've been using Windows, and I'm going to talk about both XP and Vista. People keep saying Windows is unstable, but this only really applies to Vista- but! Vista has been getting patches to make it at least run for longer than 30 minutes. Windows actually does yield resources when told to, as long as you tell it to, but Vista is a resource hog. You can't deny Vista's basic hefty memory usage and CPU overhead because I can prove it to someone who did a clean unmodified install by opening task manager. However, both are organized and the game is either on your desktop, or where Vista takes it further by having a Games window. Also excelling as a gaming operating system, both have support for drivers mostly, and companies are getting on the ball with writing drivers for Vista. The reason I switched to Linux is for point 2- the fact Vista eats up many resources. However, making a game a Linux-exclusive worse than making a game that's Windows-exclusive since most people will have Windows. The goal of someone who wants to convince gamers to have Linux is to show them a good game that works on Linux and Windows, but demonstrate that the Linux version runs much better because it has lots of resources. It's going to be a long time before Microsoft even loses slightly it's grip on the computer video gaming market.

Next is the sexy macs. They're not kawaii they're sexy apparently, as I hear computer nerds tell me. Awws... I like kawaii better, but in any case they are the easiest to use of the three. This makes it the best operating system for point 3. Macs are generally stable, but people don't understand they are just as stable as Windows and no more (excluding Vista) since most of the fault is with all the crap that comes pre-installed in Windows machines by third parties. There's little hardware that comes with Macs, and it's all stuck- making it the worst in point 4 since the owner of the Mac is generally stuck with what they got unless they somehow get the manufacturer to replace the parts inside or they figure out on their own how to do that. I'm not sure how Macs are on resources, but it seems about the same as XP. I personally don't like Macs, but I hope that more games support all the operating systems so that people can choose an operating system based on what they like rather than what games/programs it supports.

Linux, is really kawaii~! Linux may break, but I've never had my computer crash to the point of where I couldn't do anything. If something breaks, you can still continue working usually and if you know how, use the terminal to fix it. Unfortunatly, fixing a problem in Linux is very very difficult (and NO the terminal is NOT AWESOME!). You'll most likely be surfing google for a while trying to find the answer to fixing your problem- so yes and no for being a stable system. Nothing yields resources like a Linux system, I open the process viewer to see every program and operating system process I'm not using asleep with very little CPU usage. Also, there's so much RAM for me to use, allowing games to really push themselves further. If you have the Ubuntu version or even just GNOME installed for your custom Linux systems, games can be put in the space in between stuff in the taskbar, in the programs list, or on the desktop. It's easy to look up a game with the Add/Remove programs manager in the Ubuntu version making it very organized- "on par" with a Mac. It's about as supportive of hardware as Vista is, except most of it is automatically installed on the Ubuntu version of Linux. As you know from the first part of this series, enabling a video card is easy. Linux is a good operating system for programmings, but thanks to versions like Ubuntu, it's becoming also a great operating system for everyone. Enough of this let's get going^^!

Cross Platform

Hehe, I'm going to spend the time to show you how to organize your libraries of code so that you don't have to write the same SDL loop or event handler over and over. It's a good thing to have a battle-tested library that you can just drop into your projects and work from, so let's go ahead and prepare everything for work.

This tutorial will cover an example of an "SDL Core". This "SDL Core" will be made with your personal flavor of programming in it... I want this folder to contain a bundle of code files that I wrote which contains the SDL loop and some basic handling such as tilemaps and sprites. There's much I will add here but for now I just want to write a generic version of the SDL loop you saw in the previous tutorial in this series.

Now, we will develop our game in Linux, but you might have a Mac or Windows machine to compile on. When writing your code, you need to think of how it should be compiled on each system. Look at this code:

CODE

/* Platform Includes */
#ifndef COMPILE_FOR_WINDOWS
#include </usr/include/SDL/SDL.h>
#endif

#ifdef COMPILE_FOR_WINDOWS
#define WIN32_LEAN_AND_MEAN
#include <windows.h>
#include <SDL.h>
#endif

And this code:

CODE

/* Main */
#ifdef COMPILE_FOR_WINDOWS
int WINAPI WinMain(HINSTANCE hinstance,HINSTANCE hprevinstance,PSTR szcmdline,int icmdshow)
#endif
#ifndef COMPILE_FOR_WINDOWS
int main(int argn,char *argv[])
#endif
{
/* Exit */
return 0;
}

Remember that the #define / #ifndef / #endif / #ifdef things generate text, not code, so this compiles just fine on GCC and the Microsoft Compiler. Combining this with our code from the last tutorial, you get:

CODE

/*
    wcsdlcore.c
    WolfCoder's SDL Core
    written by, of course, WolfCoder (2008)

    Version 1
*/

/* Platform Includes */
#ifndef COMPILE_FOR_WINDOWS
#include </usr/include/SDL/SDL.h>
#endif

#ifdef COMPILE_FOR_WINDOWS
#define WIN32_LEAN_AND_MEAN
#include <windows.h>
#include <SDL.h>
#endif

/* My Includes */
#include "wcsdlcore.h"

/* Globals */
SDL_Surface *screen;
SDL_Event main_event;
unsigned long ticks;
unsigned long duration;
double time_step;
unsigned int frame_rate = 120;

/* Gets the time step value */
double wcsdlcore_time_step()
{
    return time_step;
}

/* Handles SDL events and returns a 0 if the game should exit */
int wcsdlcore_handle_events()
{
    /* Get all events */
    while(SDL_PollEvent(&main_event))
    {
        /* End program */
        if(main_event.type == SDL_QUIT)
            return 0;
    }
    /* Return the exit code for quitting or continuing */
    return 1;
}

/* Main */
#ifdef COMPILE_FOR_WINDOWS
int WINAPI WinMain(HINSTANCE hinstance,HINSTANCE hprevinstance,PSTR szcmdline,int icmdshow)
#endif
#ifndef COMPILE_FOR_WINDOWS
int main(int argn,char *argv[])
#endif
{
    /* Initialize SDL */
    SDL_Init(SDL_INIT_VIDEO | SDL_INIT_TIMER);
    screen = SDL_SetVideoMode(SCREEN_X,SCREEN_Y,0,SDL_HWSURFACE | SDL_DOUBLEBUF);
    /* Initialize the game */
    wcsdlcore_init();
    /* Enter the main loop */
    duration = 0;
    ticks = 0;
    time_step = 0;
    while(wcsdlcore_handle_events())
    {
        /* Clear the screen */
        SDL_FillRect(screen,NULL,SDL_MapRGB(screen->format,0,0,0));
        /* Sample the time */
        duration = 0;
        ticks = SDL_GetTicks();
        /* Handle one frame of the game */
        wcsdlcore_main();
        /* Flip buffers */
        SDL_Flip(screen);
        /* Record the time that has passed, checking for the 49 or so day wrap error */
        if(SDL_GetTicks()-ticks > 0)
        {
            duration = SDL_GetTicks()-ticks;
            /* Wait for the maximum FPS */
            while(SDL_GetTicks()-ticks < (1000/frame_rate));
        }
        time_step = (double)(duration)/(1000/16);
    }
    /* Clean-up the game */
    wcsdlcore_exit();
    /* Quit SDL */
    SDL_Quit();
    /* Exit */
    return 0;
}

And for the wcsdlcore.h file:

CODE

Lastly, when writing a library, we need to write a test program. The wcsdlcore_init()/ect. functions are missing and need to be written. Here's a stub file called test.c:

CODE

/*
    test.c
    Tests WolfCoder's SDL Core
    written by, of course, WolfCoder (2008)
*/

/* My Includes */
#include "wcsdlcore.h"

/* Game initialize */
void wcsdlcore_init()
{
}

/* Game main */
void wcsdlcore_main()
{
}

/* Game exit */
void wcsdlcore_exit()
{
}

Let's run this mess through GCC. I wrote the following Makefile and did the Tools->Build command from GEdit as usual:

CODE

# Test run WolfCoder's SDL Core
compile-run:    test.c
    make compile
    gcc -c -Wall test.c
    gcc -lSDL wcsdlcore.o wcsprite.o test.o -o wcsdlcore-test
    ./wcsdlcore-test
    rm test.o

# Clean
clean:
    rm *~

# Comple WolfCoder's SDL Core
compile:    wcsdlcore.c wcsdlcore.h wcsprite.c wcsprite.h
    gcc -c -Wall wcsdlcore.c wcsprite.c

It works just fine, we've got our window and everything, and our bundle of code does what it needs. If you plan on making a Windows version of your game, then read on~ Make a new Win32 project in Microsoft Visual Studio. Since this is Linux game programming for Windows users, chances are you've got the system you've been developing on all this time. You still need it if you want to ensure that you can compile ports. Create the new project, MOVE all your files into the part of the project where the Microsoft Compiler will compile and do the following shown in the picture (right click on the Source Files folder):

You need to download the Windows version of the SDL library. The folder you get looks like this on the inside:

Add your .c files, and then do the same for the .h files on the Header Files folder. Now, remember the COMPILE_FOR_WINDOWS macro we put in there? Here's what you do next, it should be Project->Properties as shown here:

Click on the section here and link the SDL folder (it's the SDL folder wherever it is, and then \include) you have to the project as shown:

Now right click the Resource Files and add existing file as shown in the picture. You'll find the sdl.lib inside the lib folder inside the SDL folder:

Alright, now copy and paste the SDL.dll and put it right next to your project. It varies where you put it but if you are tired of this just paste it into the C:\\Windows\System32\ folder so that any program will run. Rememeber to put SDL.dll right with your game when giving your game out to people though, and it has to be the sdl-runtime.dll (rename it to SDL.dll once it's with your .exe file).

And then click on the section shown here:

You add COMPILE_FOR_WINDOWS in there. This is the same as #define COMPILE_FOR_WINDOWS everywhere but you don't actually have to write it, ensuring that it works and that your code compiles for Windows on Windows, and for Linux on Linux. Go ahead and build, and then run the code and you should get this:

You should now have a folder containing a Microsoft Visual Studio project, and in the code folder is the Makefile along with the code files, and the Linux version of the program if you made it earlier in Linux. You can put this on a thumbdrive, or multi-boot your machine and compile it and it should work. Just remember your COMPILE_FOR_WINDOWS macro to be check and used on things that are platform-specific, but only in wcsdlcore.c should you really need it.

How was that? There's other things you could still use the macro for. For example, you could use the macro to put exclusive features in your game for each operating system for fun- or to have the in-game user interface mimic the user interface style of Linux or Windows. Just because you're using a platform-independant library doesn't mean you can't add some extra fun things to each platform.

Your Personal Library

It's all up and ready! Are you ready for the fun to begin? The idea behind this library is to pack the series of SDL commands inside so that you don't have call them outside of the core. This makes it easier to write a game without worrying about including SDL everywhere. Let's write a function that allows us to lock the main surface, write pixels, and unlock, but much simpler and without SDL functions in test.c.

Recall our set_sdl_pixel function in the previous tutorial:

CODE

/* Sets a pixel in a surface, paying attention to pixel format */
void set_sdl_pixel(SDL_PixelFormat *what,void *pixel,int width,int x,int y,int r,int g,int b)
{
    Uint8 *bit8;
    Uint16 *bit16;
    Uint32 *bit32;
    /* Address memory according to the width */
    switch(what->BitsPerPixel)
    {
    case 8:
        bit8 = (Uint8*)pixel;
        bit8[width*y+x] = SDL_MapRGB(what,r,g,b);
        break;
    case 16:
        bit16 = (Uint16*)pixel;
        bit16[(width/2)*y+x] = SDL_MapRGB(what,r,g,b);
        break;
    case 32:
        bit32 = (Uint32*)pixel;
        bit32[(width/4)*y+x] = SDL_MapRGB(what,r,g,b);
        break;
    }
}

Let's modify this so that all we need to provide is x,y and r,g,b to the function. This is a pretty minor function, it's not like a sprite-handling code so we can just put it in wcsdlcore.c. Look closely at the modified version:

CODE

/* Sets a pixel in a surface, paying attention to pixel format */
SDL_PixelFormat *set_pixel_format;
int set_pixel_width;
void *set_pixels;
void wcsdlcore_set_pixel(int x,int y,int r,int g,int b)
{
    Uint8 *bit8;
    Uint16 *bit16;
    Uint32 *bit32;
    /* Address memory according to the width */
    switch(set_pixel_format->BitsPerPixel)
    {
    case 8:
        /* 8-bit modes (indexed color */
        bit8 = (Uint8*)set_pixels;
        bit8[set_pixel_width*y+x] = SDL_MapRGB(set_pixel_format,r,g,b);
        break;
    case 16:
        /* 16-bit high color */
        bit16 = (Uint16*)set_pixels;
        bit16[(set_pixel_width/2)*y+x] = SDL_MapRGB(set_pixel_format,r,g,b);
        break;
    case 32:
        /* 32-bit true color with possible ALPHA */
        bit32 = (Uint32*)set_pixels;
        bit32[(set_pixel_width/4)*y+x] = SDL_MapRGB(set_pixel_format,r,g,b);
        break;
    }
}

We added some globals which belong to the function, but can be quickly set by functions that lock and unlock the screen... Er... Hehe, we make mistakes often, don't we? Let's make this function safer by causing it to do nothing if it is not safe to do anything. I also changed the name of the function so it's consistent with the library. Let's add another global variable to that list and modify the very top of the function:

CODE

int set_pixel_safety = 0;
void wcsdlcore_set_pixel(int x,int y,int r,int g,int b)
{
    Uint8 *bit8;
    Uint16 *bit16;
    Uint32 *bit32;
    /* Do nothing if it is not safe to set a pixel */
    if(set_pixel_safety == 0)
        return;
/* THE CODE CONTINUES HERE LIKE BEFORE */

Alright then, let's add functions that lock the surface and release it so we can call them in our test.c file:

CODE

/* Sets a pixel in a surface, paying attention to pixel format */
SDL_PixelFormat *set_pixel_format;
int set_pixel_width;
void *set_pixels;
int set_pixel_safety = 0;
void wcsdlcore_set_pixel(int x,int y,int r,int g,int b)
{
    Uint8 *bit8;
    Uint16 *bit16;
    Uint32 *bit32;
    /* Do nothing if it is not safe to set a pixel */
    if(set_pixel_safety == 0)
        return;
    /* Address memory according to the width */
    switch(set_pixel_format->BitsPerPixel)
    {
    case 8:
        /* 8-bit modes (indexed color */
        bit8 = (Uint8*)set_pixels;
        bit8[set_pixel_width*y+x] = SDL_MapRGB(set_pixel_format,r,g,b);
        break;
    case 16:
        /* 16-bit high color */
        bit16 = (Uint16*)set_pixels;
        bit16[(set_pixel_width)*y+x] = SDL_MapRGB(set_pixel_format,r,g,b);
        break;
    case 32:
        /* 32-bit true color with possible ALPHA */
        bit32 = (Uint32*)set_pixels;
        bit32[(set_pixel_width)*y+x] = SDL_MapRGB(set_pixel_format,r,g,b);
        break;
    }
}

/* Locks the surface so that pixels can be drawn */
void wcsdlcore_begin_pixels()
{
    /* Lock the surface */
    if(SDL_LockSurface(screen) != 0)
        return; /* Failure */
    /* Get values for set pixel */
    set_pixel_width = screen->pitch;
    set_pixel_format = screen->format;
    set_pixels = screen->pixels;
    /* Change the set pixel width here */
    switch(set_pixel_format->BitsPerPixel)
    {
    case 16:
        set_pixel_width /= 2;
        break;
    case 32:
        set_pixel_width /= 4;
        break;
    }
    /* Make it safe to set pixels */
    set_pixel_safety = 1;
}

/* Unlocks the surface to resume normal operation */
void wcsdlcore_end_pixels()
{
    /* Unlock and make unsafe */
    SDL_UnlockSurface(screen);
    set_pixel_safety = 0;
}

Since we're going to draw lots of pixels, the width is calculated in the begin pixels function. Looks simple right? Let's reference these in wcsdlcore.h so that test.c can use them. Let's modify wcsdlcore.h:

CODE

#ifndef WCSDLCORE_H
#define WCSDLCORE_H

/* Defines */
#ifndef SCREEN_X
#define SCREEN_X 320
#endif
#ifndef SCREEN_Y
#define SCREEN_Y 240
#endif

/* Functions to be written by developer */
extern void wcsdlcore_init(); /* Initializes the game, this gets called once before entering the main loop */
extern void wcsdlcore_main(); /* Handles one frame of the game and is called for every frame */
extern void wcsdlcore_exit(); /* Cleans up the game's resources, this is called once after exiting the main loop */

/* Functions provided by WolfCoder's SDL Core */
extern double wcsdlcore_time_step(); /* Returns the time_step value, multiply this by all the speed to achieve correct speeds */
extern void wcsdlcore_set_pixel(int x,int y,int r,int g,int b); /* Sets a pixel ONLY WHEN wcsdlcore_begin_pixels was called */
extern void wcsdlcore_begin_pixels(); /* Enables the wcsdlcore_set_pixel function to work */
extern void wcsdlcore_end_pixels(); /* Call this when you're done using the wcsdlcore_set_pixel function for the current frame */

#endif

Now let's apply our new functions by drawing a red pixel at (10,20) like before. This is test.c and all we have to do now is add the following to our main frame function:

CODE

/* Game main */
void wcsdlcore_main()
{
    /* Draw some pixels */
    wcsdlcore_begin_pixels();
    wcsdlcore_set_pixel(10,20,255,0,0);
    wcsdlcore_end_pixels();
}

We've crammed all that code into three functions we can use, now whenver you want a quick set-pixel sort of application to test something, you can drop the code in the project and all you have to write is another file like test.c and include wcsdlcore.h. It'll even compile according to the platform like you set up earlier!

Homework? Hehe~!

You've learned how to set up a project folder that contains both a Microsoft Visual Studio project for Windows and a simple Makefile project for Linux. You've also learned how to organize bundles of code for use as libraries. So whenever you want to make an SDL project, just get out your SDL Core bundle of code and compile it with your project.

Here's ideas for practicing stuff you learned in this section~

- Try writing a library that makes writing a DEBUG log to a .txt file easy. Have a function that opens the file, one that closes it, and one that writes a string or number to it, and adds a line feed if told to. This way you can put this in your game and if something goes wrong, you have a text file telling you all the errors that occured and when they occured.

- Try writing the previous dots.c demo but ONLY in test.c and WITHOUT INCLUDING SDL in that test.c file, all the includes you need are stdlib.h for the rand and wcsdlcore.h for the SDL Core we wrote.

- If you wrote a version of the dots.c demo for test.c, now compile it for Linux and Windows.

- And for a real challenge, write a library that draws lines without crashing the engine if the lines go offscreen, and then off of that, add support for particle effects using lines and pixels. This is for you advanced programmers out there who already know how to do this, or those wanting a hefty challenge for this level.

Until the next time, have fun^^