Hello! I'm writing a game now (I use HTML / CSS / JS, without canvas). Now I need to make sure that all objects in the scene adjust to different window sizes. (I hope clearly explained).

My idea was the following: I have a viewport with the original resolution (480x800). When you start the game, we check what size the window. Regarding them, we proportionally resize the viewport. After we check how much the viewport has changed and make the ratio of the previous size to the current one. When this coefficient is found, we multiply by it all X'y, Y'i, the size of all objects. But as it turned out, this method is no good. Does anyone have any idea?

Here, this method for different screen resolutions enter image description here

  • "But as it turned out, this method is no good" - and here it is dark. What is it not good, let me know? - Igor
  • Not suitable, because the object changes its size is not as it should. Yes, and it is positioned no matter. - Reaget
  • I give up. Maybe for someone “not as it should be” and “it doesn't matter” - an informative description of the problem. - Igor
  • @Igor It is necessary that the game on all screens looks the same, and not so that somewhere the object is too large for this screen, somewhere too small. - Reaget
  • Maybe it makes sense to use the engine for the isometric before it is too late? As a plus, this is a compilation for ios and android, as well as a web version, and a reduction in development time while saving on bikes. Although I have always respected the path of the Jedi) - Ninazu

2 answers 2

Apply the usual Viewport - info W3 + for the window size, apply styles as%, but not as static in pixels, for example style = width: 90%. A good idea: install these styles right in the source code of your window. This will speed up the page loading.

    adaptive layout by relative values ​​in this implementation is not initially true, if you use only HTML / CSS / JS I suggest you think about Bootstrap or make everything static in 3 copies for basic resolutions for small, medium, widescreen sizes. Do I really assume that with different resolutions of monitors you have so different proportions of your "objects" that in the end this difference of proportions makes your scene according to the appearance criteria at least "strange" and at most "terrible", if yes, then consider the maximum allowable size for each window and consider the above-mentioned Bootstrap (at least, his idea of ​​the grid).

    • Yes, that's right. "Strange" or "Scary." - Reaget