Jump to content

  • Log In with Google      Sign In   
  • Create Account


Custom window GUI system


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
10 replies to this topic

#1 xinfinite33   Members   -  Reputation: 203

Like
0Likes
Like

Posted 07 May 2013 - 05:04 AM

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.



Sponsor:

#2 Juliean   GDNet+   -  Reputation: 2350

Like
0Likes
Like

Posted 07 May 2013 - 07:06 AM

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++.


Edited by Juliean, 07 May 2013 - 07:20 AM.


#3 warnexus   Prime Members   -  Reputation: 1395

Like
0Likes
Like

Posted 07 May 2013 - 07:07 AM

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 );
    }
 
}


Edited by warnexus, 07 May 2013 - 07:26 AM.


#4 xinfinite33   Members   -  Reputation: 203

Like
0Likes
Like

Posted 07 May 2013 - 09:08 AM

im using C++ and SFML



#5 ColinDuquesnoy   Members   -  Reputation: 1089

Like
0Likes
Like

Posted 07 May 2013 - 09:34 AM

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.


Edited by renega_666, 07 May 2013 - 09:35 AM.


#6 Rorakin   Members   -  Reputation: 618

Like
1Likes
Like

Posted 07 May 2013 - 04:53 PM

Check this thread for many C++ suggestions



#7 xinfinite33   Members   -  Reputation: 203

Like
0Likes
Like

Posted 08 May 2013 - 07:03 AM

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.



#8 Juliean   GDNet+   -  Reputation: 2350

Like
2Likes
Like

Posted 08 May 2013 - 07:54 AM

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.


Edited by Juliean, 08 May 2013 - 08:03 AM.


#9 smr   Members   -  Reputation: 1598

Like
1Likes
Like

Posted 08 May 2013 - 09:10 AM

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.



#10 ZebraQuake   Members   -  Reputation: 131

Like
0Likes
Like

Posted 08 May 2013 - 10:19 AM

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.



#11 Hawkblood   Members   -  Reputation: 722

Like
0Likes
Like

Posted 10 May 2013 - 10:31 AM

If you want to make one yourself, the skills you need is being able to paste images to the screen (most of the time with some text on them) and mouse input. I made a GUI that I use in my games and, let me tell you, it wasn't easy. A GUI ranges from the simple "clicking on buttons" to text editing (sounds easy, but it's not). I went all out with mine: buttons, radios, lists, dropdowns, free text boxes, horizontal sliders, and a file system. It’s likely you don’t want all that. Is it a 2D or 3D game? If you have a 3D game, you will want to be sure you know how to manipulate objects in 3D with the mouse. At any rate, you will likely need buttons and lists for even the simplest level editor. Most GUIs have a grouping system for the selectable objects in a particular menu—I call them “menu groups”. Each group has its own buttons/lists/whatever associated with it so that when that group is being shown then will be rendered and checked for state changes automatically. There is really no good tutorial that I have found, so I was forced to make my GUI by imagining what I wanted each thing to do and then figuring out how to make it happen. It’s not much different than any type of programming; you just need to imagine it and convert your imagination into code…. I hope this helps you get what you are looking for.




Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS