hello everyone! I made a simple game and I came across a problem, editing levels. I made my game so that it stores the level data in text files, so levels have to be built manually by directly editing the text file, this was rather tedious so i started working on a level editor and I'm having one problem, the GUI. I would like to create a GUI system that can create windows with buttons, sliders, check-boxes, etc. and I've been trying out different methods but its harder than I thought it would be. I don't want the GUI code to be platform specific so I chose not to use third party libraries. can someone give me an idea of how a GUI system should be structured or point me to some articles/tutorials about the subject? any help at all would be greatly appreciated.
Custom window GUI system
I don't want the GUI code to be platform specific so I chose not to use third party libraries
How does that go in hand? You are more likely to find a third party libary that works cross platform than create on of your own, let alone if you have no experience in gui design.
Qt for example is, from what I've heard a pretty good, plattform independant gui framework, if you use c++.
Tell us what language you are using:
Note: You should use code that other people(programmers many years ago wrote so you do not wind up reinventing the wheel about how things should be done) You can think of it like this: "If you want to have your own form of transportation, would you want to build your own car?" You can sure...I guess if you have the knowledge. But is it worth it given the resources already established or realistic to do so?" Right? Why not just buy a car and use theirs? Same kind of idea. In your case, it would be should you write the internal implementation of what makes up a gui component from scratch if you do not have prior knowledge and experiences with GUI?
I will show you an example written a year ago by my professor that really puts the pieces and concepts of GUI together. It is written in Java. But the idea is that you can have GUI components such as labels or buttons that are layered on top of a panel. A GUI is just a lot of Panels layered on top of one container object(it can be a container or a panel). So you can think them like a stack of pancakes. The orientation of components added on the panel can be changed by setting a different layout for the panel.
Use other people's functionality if it is out there. It speeds up development. The important thing is learning how to put the pieces together.
If you have a Eclipse IDE, start pasting each code starting with the main method and see what behavior you are seeing and how the method call affect the GUI application.
import javax.swing.*;
import java.awt.*;
public class NestedPanels extends JFrame {
private static final int FRAME_WIDTH = 500;
private static final int FRAME_HEIGHT = 350;
private static final int FRAME_X_ORIGIN = 150;
private static final int FRAME_Y_ORIGIN = 250;
public static void main(String[] args) {
NestedPanels frame = new NestedPanels();
frame.setVisible(true);
}
public NestedPanels() {
Container contentPane;
JPanel gamePanel;
JPanel controlPanel;
JPanel scorePanel;
setSize (FRAME_WIDTH, FRAME_HEIGHT);
setTitle ("My Nested Panels");
setLocation (FRAME_X_ORIGIN, FRAME_Y_ORIGIN);
contentPane = getContentPane( );
contentPane.setLayout(new BorderLayout());
gamePanel = new JPanel();
gamePanel.setBorder(BorderFactory.createLoweredBevelBorder());
controlPanel = new JPanel();
controlPanel.setLayout(new BorderLayout( ));
contentPane.add(gamePanel, BorderLayout.CENTER);
gamePanel.setBackground(Color.PINK);
controlPanel.setBackground(Color.BLUE);
contentPane.add(controlPanel, BorderLayout.EAST);
scorePanel = new JPanel();
scorePanel.setBorder( BorderFactory.createTitledBorder("Scores:"));
scorePanel.setLayout(new GridLayout(2, 2));
scorePanel.add(new JLabel("Player 1:"));
scorePanel.add(new JLabel(" 0"));
scorePanel.add(new JLabel("Player 2:"));
scorePanel.add(new JLabel(" 0"));
controlPanel.add(scorePanel,BorderLayout.NORTH);
controlPanel.add(new JButton("New Game"), BorderLayout.SOUTH);
setDefaultCloseOperation( EXIT_ON_CLOSE );
}
}
im using C++ and SFML
I see the following options:
- use a gui library created specifically for the sfml such as sfgui
- use a standard and cross platform c++ gui library and create your specific widget which use SFML under the hood. (there are examples on how to make a sfml widget for Qt or wxWidgets)
- create your app with a high level language such as Python or C#. To make the glue between your app and your c++ library you can create custom bindings (look at swig or cython) or use a tcp/ip connection.
so far you guys are only pointing me to libraries. are there really no tutorials / discussions on how to go about creating your own GUI system? id rather learn the basic idea on how they work and then design around that because if i ever decide to use another language for a project and need a GUI system, i can have enough knowledge to create a fairly basic one, then if i need more advanced features that i cannot create myself, then id use a GUI library. i just need an understanding of how a system would be structured, so i could add on the individual tools such as the buttons, checkboxes,sliders etc. myself.
so far you guys are only pointing me to libraries. are there really no tutorials / discussions on how to go about creating your own GUI system? id rather learn the basic idea on how they work and then design around that because if i ever decide to use another language for a project and need a GUI system, i can have enough knowledge to create a fairly basic one, then if i need more advanced features that i cannot create myself, then id use a GUI library. i just need an understanding of how a system would be structured, so i could add on the individual tools such as the buttons, checkboxes,sliders etc. myself.
A gui system is, depending on the degree of functionality, eigther far too complicated and broad for a tutorial, or so simplistic that anyone with the knowledge of how to display an image and check if mouse coordinates are within a given rectangle can figure it out himself. Additionally, you'll learn the basics by using any existing libary. Qt e.g. uses signal/slots and events for gui functionallity. If you've used that a while, implementing your own such system is trivial. But if you really want to design an own gui libary, why don't you just start out? Sorry to be a downer here, but if you can't get the start here yourself, you should definately not be making a gui libary, but start out by studying and using an existing one. There is no reasong for you to reinvent the wheel, let alone the "square wheel". Thrust me, unless you really badly want to learn how gui systems work internally, just are wasting your time. The time it will take you to write most elements any complete gui libary supports, you could have learnt how to use existing libaries in ten different langueges and would have ended up with something far more usefull, I'm not even kidding.
If you still want to roll your own, look for "sigal/slots", "event driven programming", "composition". Those are the tools you are going to need to design a good gui libary. Then start by adding your own basic gui elements. Start with something simple as a text label or buttons, using composition. Use signals and slots to bind functionallity to those elements. Delegate input via events. Don't care if you get it right. Just write how it works best for your current needs, just can still post code here and ask questions if you get stuck on specifiy parts. Way better to help you than just asking for a guide/tutorial on how to make a gui itself.
If you're creating a map/level editor and asking yourself "how do I create a gui?," then you're using the wrong tools. A map editor is a GUI application, and C++ is not the best tool for that job. Java with AWT/Swing, Python with wxPython or similar, C# with Mono are in my opinion your best bets for multiplatform GUI applications.
That being said, since you insist on putting your game on hold to create a GUI system, some people have had some success with immediate mode GUIs in short time frames. Google for "imgui" and you'll find many tutorials. I recommend Sol on Immediate Mode GUIs. IMGUIs can be quick to get up and running, but in my opinion are very unwieldy because you will be hard-coding your GUI layout. I don't like them. I recommend that while you're following any of these tutorials, keep in the back of your head the idea that you will want to evolve this immediate mode system into a retained-mode system with layout containers that can arrange your GUI controls for you. Hard coding "drawButton(100, 100, 50, 50, rgb(50,50,50), rgb(255,255,255), "Click me!", clickedCallback);" for every button gets old fast.
But seriously, if you want to finish a game, rolling your own commodity code is absolutely going to stop you from finishing.
A map editor is a GUI application, and C++ is not the best tool for that job.
On the contrary, the Qt GUI framework is absolutely fabulous and is platform-independent (it's so powerful that I have yet to need anything else to get my own GUI tools working). Designing the GUI becomes a trivial exercise in drag-and-drop widgets (although programmatic design is available for the flebility). Creating a button is as simple as saying "new button", and the signal-slot implementation makes linking actions together relatively simple.
At the very least, I would certainly pick something to work with other than attempting to implement a personal GUI framework - it's a non-trivial, tedious process, and it seems there wouldn't be much benefit at all in a roll-your-own approach. Learning a "specific" framework like Qt, Swing, etc. does not hinder the process of learning about GUI systems; they implement systems that are central to all GUI frameworks and applicable to any language and setting, and the best way to learn would be to select one and use it.
