Comic Press

By Shamus Posted Tuesday Sep 28, 2010

Filed under: Programming 48 comments

EDIT: Whoops. I’d intended to post this after today’s comic. The screenshots are spoiler-ish, so you might want to see today’s comic before reading further.

Some people expressed interest in what I was doing that led to yesterday’s post. I’m not one to miss an opportunity to talk about myself, so let’s do that.

Ever since DM of the Rings CXXXI I’ve used my own software for making comics. It’s 100% homebrew code. It looks thus:

comic_press1.jpg

Ok, I never have the window this small. I usually run it full-screen, so it looks like this:

comic_press2.jpg

That 308 you see in the lower left corner is the framerate counter, and should give you a pretty good idea of why I made the software in the first place. If you’ve ever opened a jumbo project in Photoshop, Comic Book creator, or some other graphic-artsy type program, you’ve probably noticed that they are not the smoothest things in the world. Zoom way in and pan around and watch your modern quad-core desktop computer choke and stutter like an old 486. Comic Press here is a champ and will maintain the smooth framerate no matter what you do. It’s rendering the comic using OpenGL, and this is a lightweight job even for graphics cards of a decade ago. It’s rendering maybe one or two hundred polygons. (Although the images are ginormous and likely wouldn’t fit in a turn of the century card.)

The word bubbles break against the panel borders automatically, so you can just slide them around the page and fiddle with how wide or tall they are and CP handles the rest. (Some artist-types do this sort of stuff in Photoshop by manually arranging words, drawing ovals, giving them borders, and cropping them as needed. Madness!) You can chain bubbles together, aim the tail, and alter the dialog in realtime. Just click and drag. I’m pretty proud of this.

The bubbles support a few bits of HTML markup, although that part needs work. You might remember the post from two years ago where I was frustrated with how slow and cumbersome Windows was when I generated the word bubbles. I managed to fix that, though.

Note that the program is only complete enough to serve my needs. It’s lacking crucial features and bug fixes that would be required if I were to ever try and release this to the public. There’s a dozen ways to crash it. I know about these issues and avoid them, so the program is stable for me. But it would be a minefield for the uninitiated.

Anyway, note the palette of controls on the right-hand side. That changes based on what you have selected. It’s the only part of the program that is Windows-specific. You couldn’t port this program to any other platform because you’d have to re-write the 3,000 lines of code that drive the interface widgets. (Windows code is very bulky.) It’s also kind of wasteful. There’s a ton of space wasted below the controls.

Last week I got to thinking it would be cool if the controls floated over the workspace like in this, which I just Photoshopped:

comic_press3.jpg

If the controls were part of the rendering, then they could be transparent. Also, it would no longer be driven by Microsoft-specific code, so it would be portable. I decided to try and find a library that would let me do this, which is how I lost my weekend to frustration and madness.

 


From The Archives:
 

48 thoughts on “Comic Press

  1. RichVR says:

    So when it’s more stable… Pretty please? I’d open a PayPal account just to buy this from you.

    1. Nighty says:

      Same. I hate all the bloated image editing software, but I don’t have the time or skill to make my own.

    2. loudwhitenoise says:

      I, too, would buy this. Are there ever updates posted on these old posts, or would I need to search the archive for related material rather than bookmarking this page?

  2. SolkaTruesilver says:

    I am not interested in your programming antics, Shamus. They are clearly the products of a madman.

    However, I had to take a look at your Civ V sneak peeks, and I laughed my ass off just for these. I can’t wait to see the serie of comic you make out of it. The 4X-related comic strips always hit da spot for me.

    I remember fondly one of your first comics: Sins of a Solar Empire: How to conquer a colony. Still laugh when thinking about it. If that isn’t comedy gold, I don’t know what is.

    (hehe.. “Part of our heritage”)

  3. Dragomok says:

    Wow. Shamus, if you ever find the appropriate library (or write it yourself), I’m pretty sure it will be the best application for making comics ever created.

  4. fscan says:

    have you tried http://www.wxwidgets.org ? i never used it, but it seems to be quite popular. you could also use one of the many gl ui toolkits (like http://www.fltk.org )

    1. wtrmute says:

      Yeah, I second FLTK. It’s really simple; you just create widgets normally, run the ->show method on your top-level widget, and then check for events with FL::check() inside your event loop. It stays out of your way, at least. Here’s a really basic tutorial.

  5. Jeff says:

    Overlapping tool windows are the devil. It’s the one thing I hate about my photoshop.

  6. WILL says:

    I don’t even care if it’s a minefield, this sort of program sounds much too useful to NOT be released.

  7. eri says:

    You know someone’s hardcore into comics when they use an application they programmed themselves to make them.

    1. Viktor says:

      He’s a programmer. 10 minutes with trying to do it in Photoshop is all it takes for him to go “I can do this better”. Getting rid of slowdown and a general control scheme in exchange for something fast and dedicated makes the hundreds of hours programming and debugging worth it. At least for the variety of programmers like Shamus(meaning good ones) who do that sort of thing for fun.

      1. Deoxy says:

        Programmers are the hardest working lazy people in the history of the planet. They will gladly spend 100 hours to save 10 minutes on a task they are going to do 10 times, tops – because 100 hours of fun is a much better use of time than 90 minutes of work.

        Oh, and other people could well benefit from that 100 hours, too… at least, that’s how we justify it sometimes.

  8. Heron says:

    If you want someone to fix bugs or add features so you don’t have to, I would love to help out :)

  9. Ravens Cry says:

    This has nothing to do with the comic per say, but it does have to do with blog. Namely, it was down earlier today, the connection would time out.
    I just thought you should know, Mr. Young, if you didn’t already.

  10. Jabor says:

    Honestly, if you open-sourced that thing, I’m pretty sure you’d see the bugs magically fixed for you or something.

  11. Simon Buchan says:

    It’s a bit late, I know, but GetBitmapBits() is evil and bad (as you found out). If you want to get at the bits GDI creates, use CreateDIBSection() to create the HBITMAP, which gives you a nice pointer to the memory it’s writing to. Just make sure to call GdiFlush() before reading it.

    Also, I would love to write a nice clean C++ OpenGL widget library. I’m sure you would too. ;)

    1. Aldowyn says:

      Wow, that actually made sense to me. Mostly. And I’m only 2 months into a Java course, not even C++! :D

  12. BenD says:

    Would buy.

  13. GreyDuck says:

    I use an old copy of Macromedia Fireworks (version 3) to assemble my modest little effort; I can’t play with bubbles and their contents quite as smoothly as you can, but since FW treats the bubbles and the text as objects I can tweak them fairly gracefully.

    Still, if you ever decide to release your software into the wild, count me as another curious and interested party.

  14. HeroOfHyla says:

    I just use gimp from sketching to final comic when I do stuff (which is rare because I am incredibly lazy). I’ve never had much of a problem with it.

  15. mike says:

    You may want to consider making your UI with HTML…
    You could implement the Awesomium library in your project.
    http://www.khrona.com/products/awesomium/

    It may take more work than you would like. But it is essentially a port of the WebKit you could use to renderer in your OpenGL project (render to texture or something).

    1. adam says:

      I second this!

      I’m actually seriously impressed you developed an entire GL application to craft your comics– that is so hardcore, I almost couldn’t believe it.

      If you’re looking for a quick library to help do some UI things in ComicPress, the simplest and most portable option would be to use GLUI. But of course, it’s rather limited in its capabilities (and a little ugly).

      As mike suggested, another option might be to use Awesomium to render some web-based widgets (like JQuery UI) as an overlay in your OpenGL scene (it’s under a proprietary license but is free for non-commercial use). The nifty thing about using Awesomium versus other options is that you can hook-up communication directly between Javascript and C++ so that all your UI scripting logic is nicely separated.

      Check out the latest SDK, it’s got an OpenGL sample (AwesomiumGL) that you can build right-away.

  16. Mark says:

    Shamus,

    It sounds like the library you want is Qt, which is LGPL as of January 2009 (before this it was proprietary). It’s an extremely mature cross-platform windowing library that integrates OpenGL functionality very smoothly. Many languages have Qt bindings if you decide you hate C++ more than you hate discarding code that might be lifted directly from the current version.

    I’m pretty sure it can do what you describe. I know that it has a tutorial example about painting non-hardware-accelerated 2D graphics on top of hardware-accelerated OpenGL graphics, with transparency, even, though I don’t know if this functionality can be extended to rendering any widgets on top of an OpenGL scene.

    1. Ian says:

      I’ve worked with Qt a bit in da Lunix and it does seem like it’s rather nice from a developer’s standpoint. Nothing serious, mainly test projects, but it was far easier than trying to create windows with, uh, Windows (though Windows Forms in the .NET world is extremely nice).

      Qt is also very nice on the end-user side of things. If I remember correctly, it uses native or close-to-native controls for common dialogs and skins (unlike GTK+, which seems to go out of its way to look out of place in everything but a pure GTK environment).

    2. Shamus says:

      Qt was the one that set me off on this rant. It not only wanted to run the show, but it had its OWN DEVELOPMENT ENVIRONMENT. Now, there are a lot of good reasons for this. (It needs a platform-agnostic environment to make platform-independent apps.) But it’s still asking an awful lot. And it expects to control everything, and you just plug into it.

      I downloaded it. I tried it. The OpenGL demo was broken out of the box. It couldn’t find the OGL headers. Someone had re-arranged the directory structure of the headers and hadn’t bothered to update the demos. So I had to edit dozens of little files here and there.

      And then the compiler gave me these baffling messages:

      Unknown function call “SGFDSAKOKHBCVXFDSREWEWWQYOPMNBCVVCBXVBCCBXCXDSFFDSFDS”.

      (Something like that.)

      Hundreds of these, with random gibberish on the end. I couldn’t copy & paste from the output window, which means I’d have to type that long string of gibberish into Google manually if I wanted to see if anyone else had dealt with this.

      And so I gave up. If the system can’t get its act together even within the confines of it’s own unique development environment, then I don’t want to risk any more time on it.

      Looked nice, though.

      1. James says:

        I’m clearly not going to change your mind about Qt as you’ve already investigated it and it failed you, but as soon as I saw your floating-transparent-widgets mockup I was compelled to go through the comments and suggest Qt if it wasn’t in there already.

        So, not to evangelise, but just add my own experiences: I love Qt. I use it for work, and for play. It comes with everything plus the kitchen sink, networking, XML, GL, and is able to make C++ a bit nicer to work with. But you don’t have to use all of the Qt stuff really. qmake will generate MS Visual Studio project files just as easily as makefiles, and at work we don’t even use qmake for the build system, we use cmake.

        That said, I can’t attest to how nice the library is to install/use on a Windows system – I use Linux on my desktops and occasionally do development in OS X, but let the other devs take care of installing all the various libraries on win32. I remember trying it in a VM for a while, with MSYS to get access to g++, but it was a bit awkward. So yeah.

      2. Gaukler says:

        I love Qt, but it can definitely be a pain when you’re trying to graft it onto an app rather than starting “The Qt Way”. I’d try wxWidgets as mentioned above, since I don’t think it adds all the MOC stuff needed for pseudo-reflection (which it looks like caused those crazy incomprehensible errors).

        Disclaimer: I’ve only used Qt, not wxWidgets, so I have no clue of the arcane processes for getting GL and wx to play nicely, and am not responsible for the resulting madness and suffering.

      3. Atle says:

        I considered suggesting Qt the other day, as well. But your comment about humbleness led me not to.

        But using platform agnostic widgets inside OpenGl is asking a lot. To expect the control and response of these widgets, without the library running the show, is asking even more.

        Too bad about your problems. I use Linux, and KDE (which is based on Qt) so here everything works out of the box. And using the accompanying IDE should be optional. However, there are a couple of extra build steps that this will automate for you.

        Good luck with your project, though. Looks very cool! And I am very impressed with your productivity. I myself have about one hundred times more ideas than time to work on them. Part of the reason is not being very productive on my spare time.

  17. Porschecm2 says:

    I hope you get around to releasing this (bugs and all) or allow someone else to do some bug-fixing on it so you can release it; I’m yet another one who would love to get my hands on a nifty, versatile program like this.

  18. Randy Johnson says:

    I’d pay ten bucks for this, I used to make fun comics all the time, but hated using photoshop.

  19. thebigJ_A says:

    I know nothing about this kind of stuff (which is why I find this post interesting).

    Tell me, why would a 2d image render polygons? (I bet that question shows how little I know.)

    1. PurePareidolia says:

      I’m betting that each layer (speech bubble, text box, image – any of the individual, separate elements) is a single flat, textured quad.

      1. Shamus says:

        That would be a reasonable approach, but I actually made the bubbles out of polygons. It was just easier (for me) than generating textures and performance simply isn’t an issue here.

    2. Shamus says:

      EVERYTHING that appears in a game is polygons. Actually, everything is triangles. It’s all graphics cards can draw: Triangles. Even if you’re just slapping a standard image onto the view as I am doing, you need a pair of triangles to do so.

      In the shots above, the scene is wiped clean. Then a single white rectangle is drawn for the page. (2 triangles.) Then a black rectangle is drawn for each of the panels to make the black border. (2 triangles per panel.) Within that border it draws the image. (2 more tris.) Then it draws the bubbles, which are actually a fan of triangles. (Picture an oval cut up like a pizza.) Then it draws another rectangle to put the text into the bubble.

      The bubbles comprise most of the triangles that the thing has to draw.

      1. Volatar says:

        That is a great use of the GPU’s we all have sitting around in our computers, useless when we are not gaming.

        1. Matt K says:

          True. I understand like 10% of what Shamus is saying but it’s neat that he’s using the gpu for at least part of this.

      2. thebigJ_A says:

        I see, thanks. The bit about the bubbles reminded me of something else I’ve always wondered. Why is it that computers can’t render true curves (circles, spheres, etc.)? I mean, we’ve gotten to the point where there are so many polygons in that exploding barrel (or whatever) that it LOOKS round, as opposed to the stop-sign shapes I remember as a kid. But you’d think that by now they’d have found a way to make a true circle.

        Wouldn’t that reduce the load significantly, were it possible?

        1. Epopisces says:

          There are ways of doing this from a curve creation perspective: for example Bezier curves or NURBS (Non-uniform rational B-splines. Which doesn’t make any more sense than the acronym to most people heh).

          Unfortunately that is only a virtual curve: to the computer it is a series of very fine line segments. When it gets right down to it, this is because all graphics in computers are generated based on points in space with coordinates (a tri, for example, is the surface between three points in space).

          I think to create true circles without segments or tris would require an enirely different graphics architecture than most computers are designed to use, and I’m still not sure if it would be superior to the current method.

        2. WJS says:

          1. It is possible to draw a “true” circle (within the limit that everything is pixels, at least), so “You’d think someone would have figured it out by now” is nonsense.
          2. Why the hell would you expect that to be faster than a triangle?

  20. andy_k says:

    Posts like this are why I have to check this blog every freakin’ day.

    Keep it up!

  21. Volatar says:

    I would like to echo all the others in saying: I would buy this software.

    Seriously. It looks so perfectly useful to pass up.

    If you prefer to open source it that would be cool too though. Either way would work for me.

  22. Wouter Lievens says:

    Or you could have used Java :-)

  23. Maddy says:

    You continue to be teh awesome. I deal with all kinds of software in my job that could be so much better if only I had the skills and tools to hack them to my will.

    I can always tell the software company about the features and improvements that would make using their software less hellish, but this is usually fruitless and my DIY mentality makes me wish I could just solve the problems myself.

    1. Volatar says:

      This is why FOSS is the best. If it needs fixing, you can fix it. If the project leaders are screwing everything up, fork it.

  24. Felblood says:

    I’ve been looking for some image editing software that’s good with speech balloon tails.

    Since Shamus isn’t going to let me have his, can somebody suggest a piece of software that does this well?

    I’ll probably keep making the panel images the way I do now, and then import them as high-res PNGs, so it just has to be able to arrange the panel images and then put text and balloons on them. i.e. It doesn’t need to be good at drawing, it just has to put stuff on top of drawings.

  25. MrWhales says:

    Shamus, we demand this software magic when you find appropriate ingredients for it’s making in other cauldrons.

    I’ve always wondered how you did yours, they always looked swo much better than most other webcomics(that use screenshots atleast)

  26. Tomas says:

    Impressive application. Seems too good to have only a single user. However, you should have named it “Comic Relief”.

  27. Blue_Pie_Ninja says:

    Not sure if this is too late or anything but I also say to have this released, it looks way too good and I’m sure someone with knowhow is reading this blog (not me, yet) will be able to fix the code to have all the bugs exterminated. :)

    Please release this, please!

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun. Your email address will not be published. Required fields are marked*

You can enclose spoilers in <strike> tags like so:
<strike>Darth Vader is Luke's father!</strike>

You can make things italics like this:
Can you imagine having Darth Vader as your <i>father</i>?

You can make things bold like this:
I'm <b>very</b> glad Darth Vader isn't my father.

You can make links like this:
I'm reading about <a href="http://en.wikipedia.org/wiki/Darth_Vader">Darth Vader</a> on Wikipedia!

You can quote someone like this:
Darth Vader said <blockquote>Luke, I am your father.</blockquote>

Leave a Reply to Porschecm2 Cancel reply

Your email address will not be published.