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:
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.