Proper game loop,OOP and IDE

[aladine]

Hello everyone, 

 

there is two question i want to ask,the first one is about game loop,

i've been wondering if this is the good way to create a fluid game loop, when i start doing stuff with Java, i've faced difference game loops each one is better than the other in certain circumstances, but there is also some real horrible ones, so, this kind of loop (code below) is it the right choice to make games ?  

 

the second question is about Object Oriented Programming, is there a way to create classes,objects, use inheritance and other things that you can do with another language (Java for example), i've read that typeScript could be helpful but i have no idea how to get along with it, so i will really appreciate it if someone explain it better and maybe post some links for tutorials or a good book name.

 

PS: 

i've been learning HTML5 (canvas) and JavaScript for 3 weeks now, and all my code are written in NotPad++, it's very light and i always like making homework with it, but when it comes to making "big"  projects, using an advanced IDE with Spell Checking and code hints is very useful (i once spend more than 10 minutes looking for an error, and it comes that i wrote "javasrcipt" instead of "javascript"   ) 

so do you guys now an IDE that support canvas element while coding with javascript ? cause i tried netBeans,Komodo and dreamWeaver, but i can't find what am looking for, 

example: 

if i have :

var canvas = $("#myCanvas");

var context = canvas.get(0).getContext("2d");

now what am looking for is something that after i wrote context along with a point, it shows me the difference method and classes available for this object .

 

thank you very much

 

the loop Code  : 

<script type = "text/javaScript">			$(document).ready(				function(){					//variables 					var canvas = $("#myCanvas")					var context = canvas.get(0).getContext("2d");					var canvasWidth = canvas.width();					var canvasHeight = canvas.height();					var x =0;					//loop					function animate(){						//clearing the screen 						context.clearRect(0,0,canvasWidth,canvasHeight);						//update						x++;						//draw 						context.fillRect(x,250,10,10);						//do it again						setTimeout(animate, 33);					}					//calling the loop function  					animate();				}			);		</script>

[Gio]

For the IDE, I would definitely recommend WebStorm. Not free, but well worth the money.

 

About your game loop: it's a start, but the timing of setTimeout isn't very reliable - try requestAnimationFrame instead. Though not all browsers support it, so maybe you can fall back to setTimeout for those that don't support it.

 

I think that eventually your loop will have to become more complex - for example, calculate the animation frames based on the *actual* time that's passed since the previous step, using (new Date()).getTime() or something like that, and/or decide how many simulation steps you want to perform based on that.

 

Regarding classes - that's personal preference, and I know that many people really like TypeScript. I am personally quite happy with simple Javascript - you can do class-like behavior quite easily using functions and prototypes, and however, OOP is not always the best approach for everything. The flexibility of Javascript is awesome, don't restrict yourself to thinking of everything as an object, as tempting as it may be if you're coming from Java.

[Chris]

I support that. You should use requestAnimationFrame for your game loop.

Have a look at this article that goes deeper into the topic and also provides a polyfill that works on all browsers.

 

Note that the time that has passed since the first call of RAF is always passed into your loop function as first argument - np need to fetch it from a Date object by yourself.

 

I can recommend WebStorm as well - I am using its "bigger brother" PHPStorm and the IDE is REALLY worth the $50.

[James Cat]

agreed that we storm is a good idea for js :-)

as for oop its worth looking at the history of prototypical languages to understand where they came from and why, in comparison to classical oop, you have to think more along the lines of favouring composition and delegation than inheritance, and think behind the scenes of what classes really are (for example do you think that there would be multiple copies of the same class methods for each instance of an object, no, of course the method exist in one place and the classes simply contain pointers to tables of function pointers, JavaScript just makes this explicit)

I did some research on this for my masters ptojuect - section 5, page 19. the references are at the end.

http://zzjames.files.wordpress.com/2013/07/proj_smithj.pdf

its not a great thesis! but that part got good comments :-)

James Cat

[Rezoner]

> is there a way to create classes,objects, use inheritance and other things that you can do with another language

 

Learn about prototype - learn until you love it.

 

I wrote an article recently about few OO techniques in JS http://trickkr.com/item/68/javascript-object-oriented-programming-good-approaches

which helped my friend who is c++ programmer.

 

As for canvas support in IDE, really there is not much to remember. My editor of choice is Sublime Text and I used this cheat sheet to memorize canvas properties http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

[Paul-Andre]

There are different ways of doing OOP in javascript, and there is much more to javascript.

 

If you are new to it, I would recommend that you understand how functional programming works. Functional programming is basically when you treat functions as objects and what it permits you to do. The most common action is passing a function as an argument to another. You'll find a lot of it in JavaScript. (you're doing it in that code snippet, twice!)

 

Next, I would recommend to understand how closures work, and why it matters. When you create a function within a function, the variables inside the outer function are accessible in the inner function and continue to be so while the inner function is alive. It seems complicated, but it's actually pretty simple once you understand it. Just google for a tutorial explaining it.

 

For creating objects, other than the constructor+prototype way you may use the module pattern: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript  .You might want to read more from that book. Of course, sometimes the simplest way to make an object is just to use an object literals like var mousePosition = {x: 5 , y: 6}  

 

To find errors, I recommend using the Chrome Console. It's extremely helpful! Open your page in Chrome and press: ctrl + shift + j

 

Then, there are languages that compile to javascript that impose a certain classical OOP pattern. The most used are CofeeScript (Javascript with Python-like syntax) and TypeScript (Javascript with strict typing). I haven't really used either so I can't say more. I'd recommend to learn javascript first though.

 

Happy learning!

[dreta]

requestAnimationFrame() is the way to go, but it's not the solution. The reason is that, first of all, you don't need to update your game logic as often as your rendering, and second of all, you want to update your logic with a fixed time step, not with the exact frame time. This improves stability, especially when it comes to physics and ensures that your game always behaves the same.

 

Read at least one of these articles.

 

http://www.koonsolo.com/news/dewitters-gameloop/

http://gafferongames.com/game-physics/fix-your-timestep/

 

As for OOP in JS (and JS in general), you should read "Professional JavaScript for Web Developers" by Nicholas Zakas. It explains all modern approaches to OOP in JavaScript. It's probably the best book for learning JavaScript.

[alex_h]

@dreta - Thanks for posting those links, really interesting reads!

 

One thing I don't get though, you say 'you don't need to update your game logic as often as your rendering'

But why would you need to update your rendering if your game logic hadn't updated? For example in my games I'll only redraw the canvas if my game logic has updated and flagged that something has changed. Or maybe I'm interpreting you too literally. Do you just mean that you don't need to update your game logic as frequently as requestAnimationFrame() might get called, is that it?

[dreta]

It's game dependent. If your game only updates the canvas when something happens, then that's a different story, in most games things update and change constantly, so it makes sense to constantly re-draw as well instead of waiting for something to change. As for, does it makes sense to render even though logic hasn't updated, imagine a platforming game, it's sufficient to update physics at 30FPS, but you want your rendering to be super smooth, because you have fast moving objects, so you'd still update the canvas at 60FPS, but you'd have to implement prediction so that even though physics change your objects' positions at 30FPS, you would render objects where they should, in theory, be in between the physics update frames. So yeah, it's a case of requestAnimationFrame() updating your logic more often that you'd need. It's kind of complicated, might be hard to implement, i'm just throwing it out there. Don't worry about it and start with a basic loop with a fixed time step for the logic.

 

The gist of things still remains though. requestAnimationFrame() is going to try to v-synch. What this means is that it's tied to monitor's refresh rate, which you have no control over. 60FPS gets thrown around a lot when talking about requestAnimationFrame(), but that's just because most monitors run at 60Hz, if you change your refresh rate to 75Hz and run Chrome Developer Tools, you'll see that requestAnimationFrame() frame duration rectangles are far shorter. So technically, you don't know how often requestAnimationFrame() will be called. The function's perfect for rendering, but awful for timing code, so even if you want to run your logic and rendering at 60FPS, you still want to time your logic with a fixed 16.6ms step and let the rendering be called when ever requestAnimationFrame() wants to call it.

[alex_h]

Cool, thanks for the info - a lot of food for thought there!

By chance I've recently started a new game which is a platformer with physics, so as far as I'm concerned this is a very timely discussion!

Thanks again,

Alex

[Quetzacotl]

Render loop should be separated from logic loop, that's for sure. For rendering use requestAnimationFrame, it's the best option. Never compute logic in requestAnimationFrame, even if you add condition to keep constant ticks per second ratio. It has to be outside of it, because when you change focus from your game tab in browser, renderAnimationFrame isn't called, but timeout and interval are. This is crucial to keep game in sync.

[James Cat]

http://www.objectplayground.com/