0

i started to develope a web-based game on the canvas element in addition with create http://www.createjs.com/ , where the user has actions like jump over obstacles and collect goddies and so on.

I want to publish it on many devices like smartphones, tablets, game-consoles and browsers-based.

Now i wonder what is the best solution to make it as responsive as possible regarding the different screen-resolutions.

My first intention is to define a basic height like 1000px and then scale objects like "your game character" and action-properties like "jump-height" depending on the screen-height.

I feel like this would be a little overload to calculate and scale a lot "just" for screen-optimizing.

What i think now.. is maybe only set heights etc. and calculate in percent. But i don´t know if i run in problems, maybe when it is going on colission-detection and so on.

Does anyone know Best Practises on this topic or can give me some advice?

Liam
  • 27,717
  • 28
  • 128
  • 190
Sven Delueg
  • 1,001
  • 11
  • 23

2 Answers2

1

I'm perhaps a little of mark here, but writing some lines.

Twiddling with canvas a bit myself these days. From what I read in your question it all depends on your code. Loosely I take an approach like this:

  • Detect available space.
  • Pre-animation:
    • Calculate as much as possible and save pre-calculated values to objects etc.
    • Paint background, animation sprites and other objects to off DOM / memory canvas.
  • During-animation:
    • Use pre-calculated values to position and animate.

By this one outsource a lot of the calculations to only run on change in window size. If one does not have this in mind all the time while writing the code "What can I pre-calculate" one are in for a huge refactoring job.

I have fiddled with pixel ratio and PPI, in directions like this. I have however found the use of such functions like createHiDPICanvas() to quickly mess up things like rotating and positioning. One issue, which by various information I have read on the subject, is that people does not factor in the fact that browsers also has a zoom factor. It can look OK when zoom is at 100% but when one zoom up/down it all falls apart. But then again you might find it useful.

There are various cases where one have to look out for what one do. Example:

If I draw horizontal and vertical lines, then align them to x0 + 0.5 or y0 + 0.5 to get crisp lines.

Ultimately it all comes down to how you do the final calculations during runtime. This slide might be of interest as an example.

Community
  • 1
  • 1
user13500
  • 3,817
  • 2
  • 26
  • 33
0

i have the solution for my problem, and it is very simple though.

in createjs you only have to define a fixed height and width of your canvas, and afterwards you can scale the whole stage and all childs and distances will be scaled properly relative to the stage scaling.

Sven Delueg
  • 1,001
  • 11
  • 23