Teddy Hyde is the mobile GitHub editor for Android. Especially suitable for authoring your Jekyll blog: upload images, write draft posts, and preview Markdown with a quick swipe. Download it on Google Play.
15 August 2014

I recently found some story creation tools and even some comic markup tools. I was excited about these; when I was coming of age as an adolescent, comics, along with Dungeons and Dragons, were responsible for widening my world view, improving my reading skills, and making me into a happy, creative person.

But, honestly, I am disappointed with the tools I see out there. They either require weird markup or weird proprietary editors, and none of these are therefore suitable for making comics in your mobile phone. If you could write them in a simple declarative language, you could use an Android editor like Teddy Hyde with Hyde Transformations to extend your editor and write comics from your mobile phone. Comics, for me, are a form of communication, a form of expressing myself, and I want to be able to do that from my mobile phone when the moment strikes me.

What I want is a purely declarative simple markup language. Something akin to HTML but for comic books. It should be simple to get started with, not require learning anything imperative like JavaScript. 15 years ago at RealNetworks we helped develop a language called SMIL used to build time based presentations; it could look something like that.

Comics on the web should be bigger than comics on paper. Animations and movement. Interactivity and hackability.

Since I love AngularJS and it seemed like a good fit, I wrote a first version. It sort of works and the markup is simple.

<cx-frame>
        <cx-dialog animation="zoomInDown" delay="2s" from="grandad">I
        think I was a unicorn once...</cx-dialog>
        <cx-character name="grandad" animation="pulse" />
        <cx-character name="grandson" animation="wobble" />
      </cx-frame>
      
      <cx-frame>
        <cx-character name="fish" animation="wobble"/>
      </cx-frame>

      <cx-frame>
        <cx-character name="fish" width="60"/>
      </cx-frame>

      <cx-frame>
        <cx-character name="fish" animation="wobble"/>
      </cx-frame>

This renders this.

comic

I like it, animated voice bubbles, animated characters, and a simple markup language that I think you could use with a few minutes of perusal. It leverages some awesome simple technologies like Bootstrap, Animate.css and iScroll.js.

The goals:

  • Easily create a frame with characters.
  • Characters can have speech bubbles
  • You can have multiple characters
  • Characters can have animations
  • Any frame can link to another comic page so you can chain them together and create serial stories

There is lots of room for improvement.

  • Animations should occur on each frame when you enter the frame. You want to see the animations when the frame comes into view, not when the page has fully loaded. I have been trying to wire in a scrolling JavaScript plugin that triggers events to do this, but it is broken now.
  • It would be great to add movement to characters, so they could move from point to point, and it would be cool to give them frames so they could walk. I think there is a simple markup solution for all of this that would not require using imperative JavaScript code.

Are there better ways to do this? ReactJs?. Polyfills?.

Can you help improve on this idea or fix bugs? The code is on GitHub. Fork it!



blog comments powered by Disqus