Sign in to follow this  

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:

I've managed to create this thus far:

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:

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!


Share this post

Link to post
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 call to your keydown event handler.


Good luck.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.