A few questions on HTML5

w/e

Boaroceraptorasaurus-Rex
Reaction score
275
Ever since hearing about flash dying to HTML5, I've been kind of curious as to how well HTML5 can replace it.
I have some questions about the language that I'm hoping people could kind of shed some light on.

How are objects drawn and animated in HTML5 as opposed to flash/actionscript?
What languages should I know or have a good understanding of before learning HTML5?
What are some good resources to learn HTML5? Where should I start?

Thanks
 
One good link I can give you to the power of HTML is http://www.ro.me/ There is also a "behind the scenes" part of the site, which may be of use to you. http://www.ro.me/tech/

Another good compilation site is http://www.canvasdemos.com/ (They also have a tutorial section).

As for learning it, it's not so much the actual HTML that will be replacing Flash. The thing that HTML5 offers is the <canvas> element. This can be very heavily modified using JavaScript, which runs as any other programming languages would, by drawing the graphics frame by frame. Having an existing knowledge of JavaScript can accelerate your learning quickly, as you can obviously skip the step of getting used to the API and structure of it.

A good tutorial which I found on Canvas games can be found here: http://www.felinesoft.com/blog/index.php/2010/09/accelerated-game-programming-with-html5-and-canvas/

Hope some of those links were of use to you.
 
Object in the canvas, as UndeadDragon said, are rendered using a syntax very similar to OpenGL now existing in JavaScript by most modern browsers.
When they are drawn and how they are drawn however does not have to be frame by frame, and only mozilla and webkit, as far as I know, have implemented
functions for doing just that (requestAnimationFrame) which take the draw function as its callback.

That's about what I had to add, the rest have been answered.
 
So I have to learn JavaScript in order to animate stuff or draw stuff?
There's no software or anything to help me out with it like in Flash?
 
Depending on what kind of animations and image manipulations you want, you might not need to. CSS3 transforms and transitions (especially these) can help you out quite a bit, though they might not be perfectly supported by all browsers.

But for a game, for example, yes you would need to learn JavaScript. And if you're gonna be using JS, I recommend learning the language instead of just using it and just learning to manipulate the websites using it (if you don't, you'll end up hitting your head against the wall after encountering something like what's in my signature). For example listening to talks by Douglas Crockford (not necessarily the first one of those, though it can be interesting) can teach you a lot. And as ActionScript is a superset of JavaScript, you can likely carry quite a bit of what you learn to Flash if you decide to go back.
 
http://www.youtube.com/watch?v=_RRnyChxijA

This was a very interesting video to watch on the topic of graphics (Specifically games) on javascript (and html5).

There is WebGL, Canvas, CSS Transforms, to start with.

EDIT: In response to learning javascript: Native games have a much larger (as much as 20 years) head start on web-based games. There is a similar comparison for graphics in general, and thus many of the tools that would make the new features easy to use don't yet exist. Right now, you're very limited.
 
I would recommend learning canvas, which allows you to draw things and will probably be the dominant way to have graphics in HTML5. If you want 3d, learn WebGL. This a quite complex and low-level API, so you might want to check out three.js which is a popular library that makes WebGL much easier to use. Some languages you should know if you want to make a game with HTML5 are JavaScript, for the actual game (and you need it anyway for canvas and WebGL) and CSS3. Another thing you might want to look into is the Application Cache, which allows web applications to be stored in the user's browser, so they could use your website offline as well.
 
General chit-chat
Help Users
  • No one is chatting at the moment.
  • V-SNES V-SNES:
    Happy Friday!
    +1
  • The Helper The Helper:
    News portal has been retired. Main page of site goes to Headline News forum now
  • The Helper The Helper:
    I am working on getting access to the old news portal under a different URL for those that would rather use that for news before we get a different news view.
  • Ghan Ghan:
    Easily done
    +1
  • The Helper The Helper:
    https://www.thehelper.net/pages/news/ is a link to the old news portal - i will integrate it into the interface somewhere when i figure it out
  • Ghan Ghan:
    Need to try something
  • Ghan Ghan:
    Hopefully this won't cause problems.
  • Ghan Ghan:
    Hmm
  • Ghan Ghan:
    I have converted the Headline News forum to an Article type forum. It will now show the top 20 threads with more detail of each thread.
  • Ghan Ghan:
    See how we like that.
  • The Helper The Helper:
    I do not see a way to go past the 1st page of posts on the forum though
  • The Helper The Helper:
    It is OK though for the main page to open up on the forum in the view it was before. As long as the portal has its own URL so it can be viewed that way I do want to try it as a regular forum view for a while
  • Ghan Ghan:
    Yeah I'm not sure what the deal is with the pagination.
  • Ghan Ghan:
    It SHOULD be there so I think it might just be an artifact of having an older style.
  • Ghan Ghan:
    I switched it to a "Standard" article forum. This will show the thread list like normal, but the threads themselves will have the first post set up above the rest of the "comments"
  • The Helper The Helper:
    I don't really get that article forum but I think it is because I have never really seen it used on a multi post thread
  • Ghan Ghan:
    RpNation makes more use of it right now as an example: https://www.rpnation.com/news/
  • The Helper The Helper:
  • The Helper The Helper:
    What do you think Tom?
  • tom_mai78101 tom_mai78101:
    I will have to get used to this.
  • tom_mai78101 tom_mai78101:
    The latest news feed looks good

      The Helper Discord

      Members online

      No members online now.

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top