CODEWITHSUNDEEP
javascripthtmlcsscanvaskineticjs
user1697180
user1697180

Reputation:

HTML5 isometric canvas with viewport - very poor performance

I've modified kinetic-viewport library to make scrollable map but i'm experiencing performance-related problems. I've made 30x20 rectangles and they were rotated by 120*. That's very simple as you can see but it lags much,I wonder what will happen if I put images on them and then make some sprites and animations? Game won't be playable I suppose.

What i'm doing wrong? I've never wrote a game before, commercial sites only. Maybe I should think differently while writing a game?

Demo - Scroll by pressing RMB. Use Mousewhell to zoom - http://godlike.hekko.pl/kinetic-viewport/demo.html

Source - http://godlike.hekko.pl/inne/kinetic-viewport.7z

Regards

Upvotes: 1

Views: 551

Answers (1)

jmc
jmc

Reputation: 538

I see you're using setInterval: you'd better use the requestAnimationFrame API where available, since it's specifically thought for animations and will give you better framerate and less CPU usage (and, thus, less battery usage, if you're also targeting mobile devices).

If you're planning to create a scrolling game, you could as well try something specifically thought for games; I'd recommend Canvace, which I'm also involved in. :)

Upvotes: 1

Related Questions