HTML5 Canvas Tools

Discussion in 'Game Development (Technical)' started by Duilen, May 8, 2011.

  1. Duilen

    Duilen New Member

    Joined:
    Apr 30, 2011
    Messages:
    12
    Likes Received:
    0
    2d/3d canvas could potentially provide an interesting medium for game dev. The problem is it just seems to be so damn difficult to do simple things in canvas.

    * You can't easily animate individual objects as you have to stroke() the entire canvas with each frame. I really wish canvas worked more like HTML or SVG in this area. I just want to have a DOM reference for every element with CSS and JS event access.

    * Shape tweens are basically impossible.

    * This might be changing but the drawing API is pretty weak. You can't even anti-alias lines!

    * Object collision/detection seems to be way easier with SVG.

    * Not scalable in the vector sense.

    It really feels like 2d canvas was designed with more traditional content/media in mind, not animation or gaming. Having said that, I do think there is potential for certain types of games. I'd like to explore that but writing native canvas code is a real pain. Is there a Raphael(SVG library) equivalent to canvas?
     
  2. CJX

    CJX New Member

    Joined:
    Mar 27, 2011
    Messages:
    10
    Likes Received:
    0
    I agree that the canvas element is a little tricky to get into, but the more I use the canvas element the more I like it. Taking advantage of it's (somewhat sparse) features mostly just requires thinking about them in the right way. For example, you can have a DOM-like reference easily using an array of javascript objects.

    Also - lines are *always* anti-aliased - I don't know how you've managed to draw a non-anti-aliased line! :)
     
  3. richtaur

    Indie Author

    Joined:
    Apr 19, 2009
    Messages:
    262
    Likes Received:
    0
    If you just want to have a DOM reference for every element, why don't you just use DOM? With CSS3 you even have hardware-accelerated 3d transforms in many modern browsers. Or for that matter, just use SVG?

    There's a relatively comprehensive list of JavaScript game engines here: https://gist.github.com/768272 This space is blowing up ATM so you'll see dozens more pop up in the upcoming months.
     
  4. Duilen

    Duilen New Member

    Joined:
    Apr 30, 2011
    Messages:
    12
    Likes Received:
    0
    I am working on CSS3/JS games. I just thought I'd explore canvas a bit more before writing it off as over hyped.
     
  5. richtaur

    Indie Author

    Joined:
    Apr 19, 2009
    Messages:
    262
    Likes Received:
    0
    In my opinion it is certainly not overhyped. There was an article on Impact in the latest Game Developer's Magazine. I'd say the industry is starting to take canvas seriously.
     
  6. oNyx

    Original Member

    Joined:
    Jul 26, 2004
    Messages:
    1,212
    Likes Received:
    0
    >stroke() the entire canvas with each frame

    Do you mean clear? (You don't have to do that either.)


    >I really wish canvas worked more like HTML or SVG

    If you want a graph, you can create a graph. No one will stop you.


    >Shape tweens are basically impossible.

    That's not the job of some 2D drawing API.


    >You can't even anti-alias lines!

    You can't draw lines without antialiasing.

    (I only use bitmaps. No vectors and no text. Using this specific subset makes it more portable, because you won't have to implement any of those difficult functions.)


    >Object collision/detection seems to be way easier with SVG.

    Not related to the drawing API.


    >Not scalable in the vector sense.

    Well, it isn't any more or less suited for scalable 2D graphics than any other pixel-centric 2d drawing API.


    >It really feels like 2d canvas was designed with more
    >traditional content/media in mind, not animation or gaming.

    It's just a 2D drawing API. Nothing more, nothing less. In my opinion it's about the same as Java2D, Slick, Pygame, or Flash (without the authoring tool). You can draw bitmaps or sub-regions thereof and you can transform them. There are also some primitives, colors, and clipping. That's all you really need. Some OpenGL-like blending modes would have been nice for some effects, but they aren't strictly required.


    >writing native canvas code is a real pain

    It's very straightforward, really. But you can always create some library which sits on top of it. As I mentioned earlier, you can for example create some kind of scene graph if you like.
     
  7. TomK32

    TomK32 New Member

    Joined:
    May 9, 2011
    Messages:
    2
    Likes Received:
    0
    Well, if you start your game and after some time think svg would be easier maybe svg is really the thing you should use.
    At least that was the case in my #ld48 entry Trollbridge Armours. In my case I needed a lot of interfaces, buttons to click on and such. Quite a pain in canvas but easy-peasy with svg where I have events on every svg object.

    My next game will have no user interaction but mouse dragging, something I can better do in Canvas. Also if I the user would move a figure or deadly spaceship over the screen I'd choose Canvas over SVG.

    Both Canvas and SVG have a future in game development but it will always depend on the game you want to create.

    Really just depends on the way you store your entities, got nothing to do with Canvas or SVG.
     
  8. meds

    meds New Member

    Joined:
    Dec 26, 2008
    Messages:
    344
    Likes Received:
    0
    Like OpenGL HTML5 was not created with the idea it would be used for games. It was merely adapted to that purpouse which is why it's actually not at all suitable for games. It may catch on simply because a lot of people are going to use it but that hardly makes it ideal for the actual development of games.
     
  9. Allen Varney

    Original Member

    Joined:
    Jul 30, 2004
    Messages:
    155
    Likes Received:
    0
    Not sure whether this is quite on topic, but here's a Google Chrome WebGL demo of a hardware-accelerated interactive music video, with code base and links to WebGL tutorials: Ro.me
     

Share This Page

  • About Indie Gamer

    When the original Dexterity Forums closed in 2004, Indie Gamer was born and a diverse community has grown out of a passion for creating great games. Here you will find over 10 years of in-depth discussion on game design, the business of game development, and marketing/sales. Indie Gamer also provides a friendly place to meet up with other Developers, Artists, Composers and Writers.
  • Buy us a beer!

    Indie Gamer is delicately held together by a single poor bastard who thankfully gets help from various community volunteers. If you frequent this site or have found value in something you've learned here, help keep the site running by donating a few dollars (for beer of course)!

    Sure, I'll Buy You a Beer