

Introduction to making HTML5/JavaScript games with Coquette.js - sethvincent
http://superbigtree.tumblr.com/post/57993562778/introduction-to-making-html5-javascript-games-with

======
tieTYT
> The ticker updates the game loop at 60 frames per second. From the project
> readme: “If the main game object or a game entity has an update() function,
> it will get called on each tick. If the main game object or a game entity
> has adraw() function, it will get called on each tick.”

I'm not much of a game dev, but doesn't this imply a faulty game loop? Maybe
this quote is just hand waving the minute details. This is my reference:
[http://gafferongames.com/game-physics/fix-your-
timestep/](http://gafferongames.com/game-physics/fix-your-timestep/) The final
implementation of the game loop in that article doesn't always update and
render at the same rate.

~~~
lewispollard
Modern browsers can use requestAnimationFrame to allow the browser to handle
render loops differently from update loops. How this works between browsers
isn't always the same, but the description tends to be along the lines of
allowing the browser to use another thread for those calls, use GPU
acceleration, pause rendering if the page isn't visible etc. In an engine I've
been building, I've been using setInterval(1000/60) for the update loop with a
delta time calculation, and requestAnimationFrame for the renderer calls,
seems to work very well.

~~~
tieTYT
I'm making a JS game right now and I'm using requestAnimationFrame in one loop
that both updates and renders. I basically implemented that "fix your
timestep" article with requestAnimationFrame as the call that does the looping
for me. Is that a bad idea?

Do you have any sample code showing your two separate loops or did you get
this from some webpage you could show me? My first reaction to what you said
is, "won't that cause threading issues because your update could be half done
while you're rendering?" Then I remembered JS is single threaded.

~~~
lewispollard
I think that will work fine for the most part, but the problem is you can't be
sure of what optimizations the browser is making (or will make in future
builds of the browser) when using requestAnimationFrame - it's designed to
allow browsers to do weird stuff to keep the loop in sync with the monitor,
which isn't really what you want when processing game logic.

JS is of course single threaded but requestAnimationFrame can give browsers
the option to batch stuff up and do it outside of the regular javascript
execution - I don't know if any browsers actually do this but it's possible.
The main thing is that if your rendering FPS is low due to a lot of
elements/sprites/whatever on the screen, your game logic loop could
potentially still be run at full speed while requestAnimationFrame stumbles
along at a lower rate. End result being that you could actually increase your
FPS, because the game logic isn't sitting around waiting as long between
render frames to update.

Of course, setInterval doesn't guarantee a constant speed loop either, but
it's at least designed to be as consistent as possible.

Here's a relevant article:
[http://www.chandlerprall.com/2012/06/requestanimationframe-i...](http://www.chandlerprall.com/2012/06/requestanimationframe-
is-not-your-logics-friend/)

------
ghostdiver
It's very simple and lightweight, however collision code is very naive:

    
    
      if (obj1BoundingBox === this.RECTANGLE &&
                obj2BoundingBox === this.RECTANGLE)
              return Maths.rectanglesIntersecting(obj1, obj2);
    

which means it will not work for moving objects

~~~
adam-a
It means it won't work for very fast moving objects.

For most purposes this type of collision is fine. It's a lot quicker too -
doing line intersections for every potential collision is quite intensive.
Often it's best to reserve more thorough checks for objects like bullets which
you know will be moving fast.

~~~
ghostdiver
It is not like you can implement collision resolving system ad hoc as a plugin
or extension if base code does not offer you some proper foundation.

------
wbobeirne
Was just thinking about what to do for the upcoming Ludum Dare, and was
looking at various js game frameworks so that my games could be played
regardless of OS and libraries. This one looks like a real winner, thanks for
posting.

~~~
sethvincent
Awesome! Yeah, I think it'll be a good choice for Ludum Dare.

------
rohitv
Thanks! I'm always looking around for js game libraries/frameworks, adding
another one to the list :) Anyone know of any other good ones ? So far I know
of:

ImpactJS

LimeJS

CraftyJS

Cocos2D

~~~
fomojola
GameClosure ([http://www.gameclosure.com/](http://www.gameclosure.com/)) looks
really good.

~~~
stared
It looks good, I started writing a game in it (and it was fine, though I have
no comparison with other frameworks), but it seems that no-one uses it. Or am
I mistaken?

~~~
dirkk0
Judging from the Google group, it doesn't seem to be very active but not dead
at all. The main difference with Game Closure seems to be that parts of it are
native code and must be compiled and deployed to the phone, which makes it
particulary interesting for speed requirements.

------
dan1234
Does this support sound effects? I think they're a critical part of any
successful game but so often overlooked.

~~~
sethvincent
Good point. It doesn't. You could pair it with whichever sound library works
best for you. I might use it with something like buzz.js
([http://buzz.jaysalvat.com/](http://buzz.jaysalvat.com/)), but there are
quite a few others that would work well.

------
d0vs
OT but: why not capitalizing "html5" and "javascript"?

~~~
sethvincent
style / laziness?

------
BaconJuice
Can you host the demo for us to check out?

~~~
sethvincent
If you mean the demos in the coquette github repo, check out:
[http://coquette.maryrosecook.com/](http://coquette.maryrosecook.com/)

and:
[http://coquette.maryrosecook.com/demos/advanced/](http://coquette.maryrosecook.com/demos/advanced/)

And you can see a demo of the game I made with coquette here:
[http://sethvincent.github.io/BlockSnot/](http://sethvincent.github.io/BlockSnot/)

~~~
BaconJuice
great stuff, Thanks! I'll buy your book now.

