Introduce multi-layered canvas rendering for optimization

DevSDK commented 3 years ago

Previously, The all blocks are rendered every events or updates. It could possibly cause performance issue. Please see [1]. The keyboard event spends 20ms so the rendering update is delayed which over 16ms for 60 FPS. It may cause a bad-user experience.

Therefore, Separate rendering layers to reduce rendering time. The background tiles are rendered only once when the canvas is initialized. Also, Stacked blocks are not required to render every time. So add "shouldUpdateStackedLayer" to use checking update the stacked block.

So, update blocks are only control-blocks.

Note here [2], the rendering time is reduced to 13~6ms.

Also, this CL contains minor refactoring for draw-rects

[1] https://user-images.githubusercontent.com/18409763/110893398-40e42480-8339-11eb-928e-fb41a4ca7020.png

[2] https://user-images.githubusercontent.com/18409763/110893887-34140080-833a-11eb-878f-7156b6fb81e7.png

WoochanLee commented 3 years ago

Thank you for contributing!! I'll do a code review soon. Could you please change your PR base branch to 'develop'? I created develop branch for contributing a few days ago. Anyway, very Thanks!

DevSDK commented 3 years ago

Could you please change your PR base branch to 'develop'?

Done.

WoochanLee commented 3 years ago

@oh3vci Please review this code as well.

DevSDK commented 3 years ago

PTAL

WoochanLee commented 3 years ago

Please check this bug. An afterimage remains when using the shift function.

DevSDK commented 3 years ago

PTAL

oh3vci commented 3 years ago

LGTM!

WoochanLee commented 3 years ago

Don't merge before has two approved. I will change branch rules.

WoochanLee / BalanceTetris

Introduce multi-layered canvas rendering for optimization #10