1

I am working on a rpg game development. My concern is- I don't want to use any image. I want to draw everything (seriously, everything..) using canvas drawing methods (lineto, bezierCurveTo, quadraticCurveTo etc.)

So, is there anything wrong or any performance overheads in it compared to using images in game development? Please, I need guidance it this field, because this is my first game... :) Thanks!

user2131144
  • 21
  • 3
  • See this thread about performance in canvas: http://stackoverflow.com/a/16208154/2252829 The main point is to prerender your objects in canvas contexts to avoid redraw unnecessary things – Gustavo Carvalho May 17 '13 at 16:14
  • I can't speak to the performance end, but if this is your first game...I'd either use images for some things (sprites) and do the map walls etc in canvas. Focus on collision detection etc. if you're determined to only use canvas, start with a simpler game such as a Tetris clone or puzzle game to focus on learning the ins and outs of game programming, as well as getting a good measure of performance (replace the canvas prices with bitmaps, etc). – phatskat May 17 '13 at 16:16
  • Also consider read this awesome tutorial: [Improving HTML5 Canvas Performance](http://www.html5rocks.com/en/tutorials/canvas/performance/). Follow the tips to start your first game with the right foot! – Gustavo Carvalho May 17 '13 at 16:25
  • @gfcarv - It means if prerender techniques used properly then effects and performance similar to the game developed using images can be achieved, right? – user2131144 May 17 '13 at 16:34
  • Right! The game will take some time to draw all things at start but this will not affect the gameplay performance. – Gustavo Carvalho May 17 '13 at 16:38
  • Thank you all very much for help.. – user2131144 May 17 '13 at 16:43
  • Bezier curves are particularly tough on performance because many points along the curve must be calculated. So if you have a built a complex Bezier "sprite", you can cache it to an image using canvas.toDataURL(). You might get performance improvement of 5-50x by using your cached image rather than redrawing. – markE May 17 '13 at 17:26
  • @markE Instead of rely to `canvas.toDataURL` (which have a lot of security issues) we may simply create a new canvas at the proper size (let's call it the `spriteCanvas`) then draw the complex Bezier curves ( and other complex shapes ) on it, and finally draw back the canvas in the main game context with `context.drawImage(spriteCanvas,...)`. And since we have the spriteCanvas cached we can call again every frame without need to redraw the shapes. In this case, the use of `toDataUrl` seems like a bit unnecessary. Don't you agree? Or is there any significant advantages to cache with toDataUrl? – Gustavo Carvalho May 17 '13 at 20:07
  • @gfcarv: Yes, big advantages to cached images! context.drawImage performs *much faster* than multiple context.bezierCurveTo. So, create an image object sourced by canvas.toDataURL and reuse that image--much faster! So you're actually **caching an image**--not using multiple canvas.toDataURL. This is even faster than using a second offscreen spriteCanvas as a source. Use spriteCanvas when you want to *make changes to the sprite before drawing*--a modification buffer. BTW, Since OP is creating all their sprites from raw canvas draws there are no security issues. ;) – markE May 17 '13 at 20:33
  • @markE I've made some tests and seems that using a second offscreen spriteCanvas to draw on main canvas is a bit faster than the image cached by `toDataURL`. [See the tests](http://jsperf.com/drawimage-canvas-vs-image) and please tell me if you find any inconsistencies. Opera did surprised me because redraw on it is faster than both approaches(cached image and offscreen canvas). – Gustavo Carvalho May 17 '13 at 23:23
  • @gfcarv: Thanks for setting up the tests--nice! Looks like image cache and offscreen are about at parity (changed since I tested on our servers awhile back). BTW, IE10 also tests about the same +/- 2% between cache and offscreen. Again, thanks...good to have this info! – markE May 17 '13 at 23:44
  • @markE The difference seems to be notable only in Chrome but not that relevant. And many thanks for all your info too! To reply the asker: I recommend use the method you are more comfortable with and make tests in your target platforms. Don't waste you time doing over optimizations to simple games, and most of all, have fun with it! – Gustavo Carvalho May 18 '13 at 00:07

0 Answers0