Anyone interested in game development or in need of high performance interactive graphics needs a basic editor to create and modify backgrounds, sprites and other images. OpenGL, a graphics standard built into Windows, Mac and Linux, offers an excellent choice for building both the editor and to implement interactive graphics. Although commercial graphics editors are available for each of these platforms, building your own editor will help you get familiar with OpenGL programming. Follow these steps to create a simple graphics editor.
1. Get familiar with OpenGL. Visit the OpenGL website, read the getting started links, then download the reference manual and programming guide. OpenGL provides both 2D and 3D modeling and images are constructed using lines and polygons, not bit-mapped images.
2. Locate a sample OpenGL program. Download the code and get it running on your workstation. Study the code to determine how additional features can be implemented.
3. Add code to draw a few additional lines or polygons. This exercise will validate that you understand the OpenGL programming interface.
4. Write down a short description of the overall design. Determine whether the editor will render 2D or 3D images, how the user interface works, how points, shapes and polygons get edited, how data gets stored and whether renderings (the final images) get stored on disk.
5. Add code to enter new lines and polygons. Track mouse movement and button presses and draw lines in response to these movements. Be patient; this will most likely be the most difficult code. Most C++ and Objective C languages have event handlers for mouse movement and mouse button events. On mouse down, save the mouse pointer’s X and Y coordinates, then on mouse up, draw a line from the saved coordinates to the current coordinates.
6. Create a data structure to track each line or shape placed on the screen, then when the “File/Save” menu item gets clicked, write this list to disk storage. On “File/Load,” clear the screen, load each line or shape into the data structure and render it onto the screen. These two functions give the editor the ability to load and save files.
7. Create several dialog boxes, each with a set of buttons or controls to vary line width, color, shapes and other features. These become the palettes that allow the user to choose brushes, colors and shapes. Again, as lines and shapes are moved to the screen, record them in the background data structure so they can be stored to disk.
8. Continue to add features as needed to fill out the editor’s design. Leverage the original code when possible but don’t be afraid to discard code that doesn’t meet your design goals.