• 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
  • entries
    4
  • comments
    3
  • views
    10987

Creating an interactive UI for viewing and editing graphs

Sign in to follow this  
Followers 0
doeme

2607 views

I am a visual oriented person, so when working with graphs, trees, state engines or basically anything that can be represented as a network, I like to have an visual representation of it. In the past I usually exported such structures to a .dot file and processed it with Graphviz to a JPG or PNG. However a more convenient way would be, to be able to view and modify such drawings online, so I decided to write a widget to do this for my current project.

I quickly identified two key questions which needed answering first:
1. How to display this in the application
2. how to compute the layouting of the graph and do the routing of the edges of it

As the project I'm working on is Qt-Based the first question was easily answered. QGraphView and the connected classes are perfect for this. They even support dragging around shapes, selecting them and so on.

First iteration: Graphviz


Layouting a graph can be tricky, especially if one wants to minimize the edge crossing and wants to have nice curvy splines or at least proper angled chinks for edges. So I started to look for a 3rd party library which I could interface over C++ to do the layouting for me. Since I already knew that graphviz is very powerful this was my first try. A bit of sifting through the web and I found this nice tutorial about using graphviz with Qt: I was quickly able to get a running prototype up. But the joy soon ended, as I tried to get the prototype fully integrated into our proejct. Graphviz is completely missing 64 bit support for windows and even after spending three days I could not get graphviz to compile on my own. So I started looking for alternatives.

Second Iteration: boost::graph


After a bit of asking around I stumbled on boost::graph which was nice, as I am already familiar with boost. Layouting a graph also worked out of the box by only including some headers without any previous compilation needed. However boost::graph quickly showed its limitations by not having the functionality to route the edges at all. So hoping that this function was not actually missing but that I just had not found it yet, I was prepared to accept this and just keep going. So I started looking around for theory on routing edges which lead me to OGDF which proved to be the solution.

Final iteration: OGDF


Already the name of the Project: The Open Graph Drawing Framework looked very promising, after all this was exactly what I wanted to do. After donwloading compilation was very straight forward with options for debug & release compilation as well as 32 or 64 bit. The documentation of it is a bit flimsy but with a bit of guesswork and rooting around in the reference documentation I quickly got another prototype running with only around 20 lines of code for setting up and layouting the graph. Integrating the protoype into the existing project was straight forward, however I needed to change a few parameters when building the library, so the debug-information was removed for the release version. So after this journey over three different libraries I'm very excited to start bring this up to a full functional tool and learn more about it.

Conclusion


1
Sign in to follow this  
Followers 0


3 Comments


So sorry, I'm afraid I accidentally down voted this when aiming for the up-vote button...
0

Share this comment


Link to comment

If code integration in your tools is not absolutely needed, I suggest you http://www.yworks.com/en/products_yed_about.html which is a cross platform application with a lot of useful features for editing graphs, exporting to xml (relatively easy to parse) and many other formats.

It has many edge routing functionalities and similar features.

0

Share this comment


Link to comment

So sorry, I'm afraid I accidentally down voted this when aiming for the up-vote button...

No worries, thanks for the information.

 

 

If code integration in your tools is not absolutely needed, I suggest you http://www.yworks.com/en/products_yed_about.html which is a cross platform application with a lot of useful features for editing graphs, exporting to xml (relatively easy to parse) and many other formats.

It has many edge routing functionalities and similar features.

Thanks for the tip, yED looks very nice. However the whole point was integration into my own project. But maybe having a nice exporter/viewer for it like yED will enhance the use even more.

0

Share this comment


Link to comment

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