Jump to content

Help with Time Based Animation?


Recommended Posts

Hello all!
I'm completely new to HTML5 and javascript. Heck the only experience I have is messing around with Flixel.
Anyways I'm trying to learn by following this tutorial: http://blog.sklambert.com/html5-canvas-game-panning-a-background/

I've managed to create this thus far: http://berathen.com/space-shooter-demo.html

Arrows to move and Space/Enter to shoot.


Now it's working just fine in Google Chrome, but it's incredibly, painfully slow when viewed with the Wii U gamepad's browser.
At first I just assumed that this was simply how things are and that HTML5 games simply are slow on the Wii U.

But then I stumbled across the games  Onslaught Arena and Dragon Dash which both actually play nicely on my Wii U.


I scoured across the internet and found that apparently the Wii U gamepad plays a lot of HTML5 games at an incredibly low 10 FPS.
So that's when I started my search for animating and moving objects independently of the frame rate. Hopefully I'm on the right track here.

I came across this article here: http://viget.com/extend/time-based-animation

The sample on that site that showcases shooting bullet bills out of a canon actually works the same on both my laptop's browser and my Wii U.

My only problem is I have absolutely no idea how to use javascript really. I haven't the faintest clue how to utilize the code he's using.
Every attempt I've made has had no real impact on making my game run any faster on my Wii U.

So I'm wondering if anyone has any tips with the Wii U's browser in mind or any tutorials on time based animation for a complete beginner like myself.


Thanks for reading!


Link to comment
Share on other sites



Had a quick look at your code, the ship animations are apparently time based since you use the frame delta to interpolate the distance however your firing rate is still frame based (counter++ with firing rate of 15). So the gameplay is still affected by the rate at which you render (at 10 FPS you cannot fire more than 1 bullet per seconds while at 60 FPS you can fire 4).


Assuming you want a fire rate of 10 bullets / sec.

var fireRate = 0.1;

Then in the update accumulate the time delta on counter:

counter += _delta;


Another thing I would do is to separate the firing action from the rendering / animation loop to increase the responsiveness for user actions by moving the ship.fire() call to your keydown event handler.


Good luck.
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...