Canvas drawImage extremely slow with large world

时间:2017-08-30 21:02:50

标签: javascript html5 performance canvas html5-canvas

I'm working on a game that uses the canvas to draw players and the background. Rendering players is fine however rendering the background takes a huge performance hit.

I have a camera object that properly pans my large gameArea however stalls on the background drawing.

Current Approach:

  • Generate Background image once (use the worldWidth and worldHeight)
  • Keep track of image
  • Draw portions of the image repeatedly (slicing the image dependant on camera position's x and y)

The issue is that my worldWidth and worldHeight are pretty large e.g (10,000 x 10,000) and this is causing huge performance issues. Especially in the initial draw and subsequent renders

Code: Simplified version of my game code but still produces same problem.

ffmpeg -i C:\Users\PAW\Videos\Resolve\untitled.mov

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'C:\Users\PAW\Videos\Resolve\untitled.mo
v':

  Metadata:

    major_brand     : qt
    minor_version   : 512
    compatible_brands: qt
    encoder         : Lavf57.25.100

Duration: 01:09:43.81, start: 0.000000, bitrate: 390431 kb/s
    Stream #0:0(eng): Video: dnxhd (DNXHR 444) (AVdh / 0x68645641), yuv444p12le(
tv, bt709/unknown/unknown), 1280x720, 388894 kb/s, 59.94 fps, 59.94 tbr, 60k tbn
, 60k tbc (default)

    Metadata:
      handler_name    : Core Media Data Handler
      timecode        : 01:00:00:00
    Stream #0:1(eng): Audio: pcm_s16le (sowt / 0x74776F73), 48000 Hz, stereo, s1
6, 1536 kb/s (default)
    Metadata:
      handler_name    : Core Media Data Handler
    Stream #0:2(eng): Data: none (tmcd / 0x64636D74)
    Metadata:
      handler_name    : Core Media Data Handler
      timecode        : 01:00:00:00

Is there a more efficient way to create the grid background and pan it according to the camera xPos and yPos?

Here is the link to the Fiddle. If you change the worldWidth and worldHeight back to 10,000 it crashes.

0 个答案:

没有答案