Game resolution to start with, and dimensions of game assets?

[srkimir]

How one would start with game development when it comes to base resolution to start with?
Something preferably with aspect ratio of 16:9? lets say like 1280x720, and then you would design literally all game assets according to that base resolution you started with 1280 x 720?
Then on smaller or larger screens, somehow you need to scale all those individual assets? (actually one needs to scale literally everything, starting from scene, to whatever scene child objets)?

Trying to recreate design in pixijs, of some random casino slot game i found, and pretty much struggling with it, just by inspecting what assets they are using i got two relevant parts:

First background is exactly 1280 x 720, so i would assume that game base resolution (if that term actually exists based on my previous question) based on which everything else was designed is indeed 1280 x 720?
Second one, reels background is 1059 x 599, this background actually represents grid 5 x 3 where game symbols needs to appear. First issue that i have is that, i guess, i need manually to calculate what is available
space for placing those 15 symbols? Cause there are some transparent pixels around it plus golden frame plus gap between reels (columns) that needs to be taken into consideration.
Just by calculating "by hand" i see that one reel (available space for symbols) is 189 x 508, which further would mean that one symbol can take up to 189 x 169 (minus few pixels of vertical space between each symbol within the same reel). Would all those dimensions, of available space and each symbols be defined by design(er) relative to base resolution of 1280 x 720? From where i would need to ensure that everything scales good on smaller/larger screens?

Then i saw actually atlas file with defined symbols that game is using with related TexturePacker json configuration, that looks like following:

Symbols_atlas.json

Where i see that sourceSize (which pixi.js will parse into sprite width and height) of each symbol is actually larger then space on reels background that symbol can occupy. Just wondering how come those symbols were designed in a way that they are taking more space then they could based on reels background? Somehow it implies that developer needs to keep track in code all those dimensions and to ensure pixel perfect design? Something like (which seems dirty)

const REEL_COUNT = 5;
const VISIBLE_SYMBOLS_PER_REEL = 3;

/**
* Includes width and height of golden frame itself
* plus additional transparent pixels outside of the golden frame
*/
const REEL_FRAME_OFFSET = {
  x: 43,
  y: 46,
};

const REEL = {
  w: 189,
  h: 508,
  gap: 5
};

const SYMBOL = {
  w: REEL.w,
  h: REEL.h / VISIBLE_SYMBOLS_PER_REEL,
}

Then one needs load this spritesheet with pixijs and to make Sprite object for each symbol where by default for example (largest symbol in atlas as you can see in uploaded json file) Special_Symbol_Book_00000.png has defined sourceSize of 380x348 (others are smaller) which will become pixijs Sprite width and height? But the issue is that i was thinking this would be defined as well relative to base resolution and relative to available space of reels where one symbol can take maximum of 189 x 169? So it is like i need to scale even on base resolution? Thank you very much for your time reading this question, pretty much im struggling with displaying random 15 objects on reels brown background.

Edited Thursday at 10:33 PM by srkimir