GameDevelopment Best Practise: Scaling distances of actions and objects

Question

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?

Answer 1

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.

Answer 2

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.