• Announcements

    • khawk

      Download the Game Design and Indie Game Marketing Freebook   07/19/17

      GameDev.net and CRC Press have teamed up to bring a free ebook of content curated from top titles published by CRC Press. The freebook, Practices of Game Design & Indie Game Marketing, includes chapters from The Art of Game Design: A Book of Lenses, A Practical Guide to Indie Game Marketing, and An Architectural Approach to Level Design. The GameDev.net FreeBook is relevant to game designers, developers, and those interested in learning more about the challenges in game development. We know game development can be a tough discipline and business, so we picked several chapters from CRC Press titles that we thought would be of interest to you, the GameDev.net audience, in your journey to design, develop, and market your next game. The free ebook is available through CRC Press by clicking here. The Curated Books The Art of Game Design: A Book of Lenses, Second Edition, by Jesse Schell Presents 100+ sets of questions, or different lenses, for viewing a game’s design, encompassing diverse fields such as psychology, architecture, music, film, software engineering, theme park design, mathematics, anthropology, and more. Written by one of the world's top game designers, this book describes the deepest and most fundamental principles of game design, demonstrating how tactics used in board, card, and athletic games also work in video games. It provides practical instruction on creating world-class games that will be played again and again. View it here. A Practical Guide to Indie Game Marketing, by Joel Dreskin Marketing is an essential but too frequently overlooked or minimized component of the release plan for indie games. A Practical Guide to Indie Game Marketing provides you with the tools needed to build visibility and sell your indie games. With special focus on those developers with small budgets and limited staff and resources, this book is packed with tangible recommendations and techniques that you can put to use immediately. As a seasoned professional of the indie game arena, author Joel Dreskin gives you insight into practical, real-world experiences of marketing numerous successful games and also provides stories of the failures. View it here. An Architectural Approach to Level Design This is one of the first books to integrate architectural and spatial design theory with the field of level design. The book presents architectural techniques and theories for level designers to use in their own work. It connects architecture and level design in different ways that address the practical elements of how designers construct space and the experiential elements of how and why humans interact with this space. Throughout the text, readers learn skills for spatial layout, evoking emotion through gamespaces, and creating better levels through architectural theory. View it here. Learn more and download the ebook by clicking here. Did you know? GameDev.net and CRC Press also recently teamed up to bring GDNet+ Members up to a 20% discount on all CRC Press books. Learn more about this and other benefits here.
Sign in to follow this  
Followers 0
xinfinite33

Custom window GUI system

10 posts in this topic

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.

0

Share this post


Link to post
Share on other sites

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
0

Share this post


Link to post
Share on other sites

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
0

Share this post


Link to post
Share on other sites

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
0

Share this post


Link to post
Share on other sites

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.

0

Share this post


Link to post
Share on other sites

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
2

Share this post


Link to post
Share on other sites

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.

1

Share this post


Link to post
Share on other sites

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 [i]something[/i] 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 [i]all[/i] GUI frameworks and applicable to any language and setting, and the best way to learn would be to select one and use it.

0

Share this post


Link to post
Share on other sites
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.
0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0