Javascript versus Flash performance

Discussion in 'Game Development (Technical)' started by lennard, Oct 1, 2010.

  1. lennard

    Moderator Original Member Indie Author

    Joined:
    Jan 12, 2006
    Messages:
    2,390
    Likes Received:
    12
    So, an internet friend and I have been noodling around with a game demo in Javascript for most of the past week. Got a dude running around the screen being chased by goblins, it's going pretty well. Except that the game is starting to get really sluggish. If I shrink my game window (running in Firefox) then the game speeds up significantly even though the amount being rendered doesn't change. Does anybody know if Firefox is really updating the whole viewable region every frame? I can't think of another explanation. I'm blitting 5 things, the main image being 82x82 pixels and the 4 other critters being 54x54 - the smoking gun for me is the fact that I shrink the viewport (all blits remain the same size, just the browser window view into the game map is about 1/4 as large) and it becomes noticeably faster, I'm guessing at least a 3x speed up...

    I'm really into this game design so I'm thinking that I'm going to have to move to Flash to implement this game (which will mean learning Flash)... Anybody have any ideas about what else I might try? BTW, this is all <div> and <img> manipulation, no canvas stuff.


    Interestingly I just tried the demo in Chrome and shrinking the window doesn't speed things up.
     
  2. Maupin

    Original Member

    Joined:
    Jun 28, 2006
    Messages:
    1,183
    Likes Received:
    0
    That's no doubt why. Without using canvas, when you're "blitting" you're having to sludge through the browser's compositing pipeline.

    If you're making an arcade game I recommend using Flash, or failing that, canvas.

    If you can learn Javascript, you can learn AS3 in less than a day. The syntax is largely the same.

    I have a blank AS3 project with a preloader that I use for Flash games. No Flash required - just the free Flex compiler from Adobe. Code can be edited in the text editor of your choice, and is compiled by double-clicking on a .bat file. (Obviously this is Windows only.) Edit: Here's a link: FreeFlexSDKFlashGameTemplate.zip
     
    #2 Maupin, Oct 1, 2010
    Last edited: Oct 1, 2010
  3. electronicStar

    Original Member

    Joined:
    Feb 28, 2005
    Messages:
    2,068
    Likes Received:
    0
    And I recomend Flixel, you can get a game going in no-time.
     
  4. joe

    joe
    Original Member

    Joined:
    Sep 28, 2004
    Messages:
    420
    Likes Received:
    0
  5. Indiepath

    Indiepath New Member

    Joined:
    Aug 22, 2004
    Messages:
    999
    Likes Received:
    0
  6. joe

    joe
    Original Member

    Joined:
    Sep 28, 2004
    Messages:
    420
    Likes Received:
    0
    yes. its a shame because a good engine doesn't make a good game - probably zynga has to learn this lesson soon.
     
  7. Indiepath

    Indiepath New Member

    Joined:
    Aug 22, 2004
    Messages:
    999
    Likes Received:
    0
    I'm more that sure the HTML5 game engine written by the same guy who wrote jQuery is pretty shit hot. Quite frankly I'm sad that it's been swallowed by a corporate and we won't get to use it....
     
  8. Maupin

    Original Member

    Joined:
    Jun 28, 2006
    Messages:
    1,183
    Likes Received:
    0
    Interesting. Never would have guessed that blitting directly to a canvas object would be slower than updating lots of img style information. Canvas surely has a way to go. I can update the whole screen in Flash (also without dirty rects) and it's quite fast.

    As for Flixel, I don't know what it does behind the scenes but all the Flixel games I've played on FlashGameLicense use an unnatural amount of CPU for what little I see onscreen. My laptop fan starts up and when I check the Windows monitor I see Flash is at 50% of the CPU.
     
  9. joe

    joe
    Original Member

    Joined:
    Sep 28, 2004
    Messages:
    420
    Likes Received:
    0
    Yes, I totally agree. I was very interessted in the Aves Engine. The videos looked great so far. Its so bad that it now belongs to a company who's philosophy is to clone games with no/bad gameplay. :(
     
  10. lennard

    Moderator Original Member Indie Author

    Joined:
    Jan 12, 2006
    Messages:
    2,390
    Likes Received:
    12
    When I started looking into JS earlier this summer I saw that <img> and <div> was supposed to be faster. I've done a few things since posting my note this AM which has improved things over here:

    1. Timer shows that typically I'm running pretty fast. Wasn't accounting for slower frames in my setTimeout call though which was resulting in some unevenness.

    2. I learned that onclick will not return an event if the mouse is moved - switching to onmousedown makes the game feel better because I'm not dropping (as many at least) events.

    The demo feels much better this afternoon. I'm occasionally getting a graphic showing up in an animation that looks like the graphic for a missing graphic on a web page and once in awhile I get a circle with a line through it when I click... but if I can solve those two issues I think I'm in the clear.
     
  11. richtaur

    Indie Author

    Joined:
    Apr 19, 2009
    Messages:
    262
    Likes Received:
    0
    Why not put up a demo for us on some website? :)

    FWIW we're working on a pure HTML5 game. Demo here! Chrome 7+ will have hardware accelerated <canvas>, so the speed problems should lessen significantly later this year.

    Personally I find the difference between Flash (a closed, proprietary platform) VS open web standards a no-brainer, but I'm kind of a hippie when it comes to development ;)
     
  12. lennard

    Moderator Original Member Indie Author

    Joined:
    Jan 12, 2006
    Messages:
    2,390
    Likes Received:
    12
    I'm hoping to get a first playable up by next weekend and will def. post a link then.
     
  13. Mattias Gustavsson

    Original Member

    Joined:
    Aug 10, 2005
    Messages:
    669
    Likes Received:
    0
    Cool - looking forward to it :D
     
  14. lennard

    Moderator Original Member Indie Author

    Joined:
    Jan 12, 2006
    Messages:
    2,390
    Likes Received:
    12
    No doubt MG!

    Mattias has been doing the animations for the game... which acquired the name of "The Chronicles of R.I.B." on Friday. I just uploaded a version of the game for MG to look at (password protected, really not ready for prime time) and some very interesting things happened.

    1. Game runs slowly for a 2nd or two, I'm assuming this is because I'm not preloading graphics yet. Then, on the server only, it starts running around 20 ms per frame (ie. 50 fps). This is bizarre because it runs locally around 50 ms per frame and my (apparently buggy) frame locking system shouldn't let it run faster than 30 fps or 34 ms per second.

    2. On the server I'm getting frames of critters and the background occassionally being completely rendered with a blue translucent overlay. I expect this is beatable with some kind of HTML/CSS flag in my img.

    Time to take a break and scratch my head a bit.
     
  15. Maupin

    Original Member

    Joined:
    Jun 28, 2006
    Messages:
    1,183
    Likes Received:
    0
    Just wondering, but why bother rendering graphics on the server at all? Unless I'm misunderstanding your architecture.
     
  16. lennard

    Moderator Original Member Indie Author

    Joined:
    Jan 12, 2006
    Messages:
    2,390
    Likes Received:
    12
    Sorry Maupin, I was unclear. What I should have said was playing the version of the demo that is sitting on the server instead of on my hard drive.
     
  17. JGOware

    Indie Author

    Joined:
    Aug 22, 2007
    Messages:
    1,578
    Likes Received:
    0
    "As for Flixel, I don't know what it does behind the scenes but all the Flixel games I've played on FlashGameLicense use an unnatural amount of CPU for what little I see onscreen. My laptop fan starts up and when I check the Windows monitor I see Flash is at 50% of the CPU."

    That's fairly common for a bitmap intensive render system under flash and that's exactly what Flixel is. I use a similar approach, and while it does use more cpu performance than other Flash methods, the end result is you get better access to the render pipeline because you're manually redrawing everything from back to front every frame.
     
  18. lennard

    Moderator Original Member Indie Author

    Joined:
    Jan 12, 2006
    Messages:
    2,390
    Likes Received:
    12
    I've found a few things since my last post.

    1. Under Chrome, my main loop is fast (<10ms) but usually my time between calls is around 1/2 second during startup. This behaviour lasts for a few minutes and then it's very quick. I'm preloading and this behaviour is after that event (of course). My setTimeOut value is 30 ms right now but I've tried others. I'm frame regulating to 50 ms if and when the thing settles down to running fast. I've seen a few threads on the web with dev's complaining about this along with a laundry list of things Google has suggested to fix the problem. Some of Googles fixes do work for some folks but many are still frustrated. I'm in Camp Frustration.

    2. Firefox pretty much just works as I want it to. I'm ignoring ie. for now and will worry about Safari later.

    3. Click/drag on Chrome highlights things in blue despite many efforts to turn this off such as:

    onselectstart = "return false";


    Chrome has turned out to be a surprise. With Googles emphasis on Javascript I would have thought it would be the easiest browser to play nice with. If and when I find fixes for the above I'll try and remember to post them for others who are interested in Javascript.
     
  19. lennard

    Moderator Original Member Indie Author

    Joined:
    Jan 12, 2006
    Messages:
    2,390
    Likes Received:
    12
    Now that I posted I couldn't leave these bugs alone...

    The issue of images being highlighted in Chrome when the cursor is dragged over them seems to be solved with this snippet:

    img = document.createElement('img');
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

    if(is_chrome)
    img.draggable = 0;

    I found 'draggable' in firebug and tried the img.draggable = 0; experiment and it worked. I made it Chrome specific because that line of code actually made Firefox start selecting images when I dragged the cursor over them with the mouse down. YMMV, I'm clearly not an expert on this stuff. That said a day of Googling failed to show me a line of code that did fix the problem so the above may help somebody.
     
  20. gormlai

    gormlai New Member

    Joined:
    Aug 23, 2009
    Messages:
    27
    Likes Received:
    0
    This is not spot on topic, but now that you've played around with using Javascript for games, what are you experiences?

    1. How easy is to organize your files well?
    2. What about security issues, like people can just copy-paste your code?
    3. What is good way to draw and what is a bad way?
    4. Do you still see large performance difference between Javascript and Flash?
    5. How do you plan to monetize your browser game?
    6. Are there enough support libraries out there for drawing in 2/3d? Playing sounds, doing threading (if possible?), loading 3d models, network, etc?
    7. What have you found to be the biggest issues with using Javascript in the browser?
    8. What have you found to be the biggest gain with using Javascript in the browser?
    9. How easy is it to debug your code?
    10. How much development time, proportionally, do use on browser specific issues?

    Sorry, if this seems a lot, but I guess that there are lot of people like me, who have considered going down the Javascript path for a while, and would like to stand on the more courageous that have come before us :)
     

Share This Page

  • About Indie Gamer

    When the original Dexterity Forums closed in 2004, Indie Gamer was born and a diverse community has grown out of a passion for creating great games. Here you will find over 10 years of in-depth discussion on game design, the business of game development, and marketing/sales. Indie Gamer also provides a friendly place to meet up with other Developers, Artists, Composers and Writers.
  • Buy us a beer!

    Indie Gamer is delicately held together by a single poor bastard who thankfully gets help from various community volunteers. If you frequent this site or have found value in something you've learned here, help keep the site running by donating a few dollars (for beer of course)!

    Sure, I'll Buy You a Beer