What's the difference between viewport and canvas?

0 favourites
  • 4 posts
From the Asset Store
Pixel Destruction like in "Worms" (Drawing Canvas based)
  • Hello,

    I just migrated from C2 to C3 and am quite confused.

    C2 used to have a 'Window size' which was easy to understand - it was the size of the "window" though which your layout is viewed.

    C3 removes this and replaces it with 'Viewport size'. Also there is a system function "Set canvas size", so I understand there must be separate Viewport size and Canvas size variables C3 uses.

    Finally, a cherry on top of the confusion is that to get viewport width/height you need to supply a layer index?? I don't quite understand how 2 layers can have different viewport dimensions.

    If someone could explain I would be very grateful, thanks!!

    The tutorial is quite unhelpful as it doesn't go into detail on either canvas size or viewport size.

    (I'm developing for NWjs, so I need this figured out to be sure everything displays properly)


  • Iirc viewport size (and left,right,top,bottom) can be changed by layer scale (and parallax), so a layer needs to be specified.

    Canvas size I believe is the same as window size, I'm not sure about this one.

  • platforminfo.windowinnerwidth

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Best I could gather from several places is that :

    C3 introduces a distinction between hardware pixels and abstract (layout) pixels.

    Viewport size values are abstract pixels, meaning the pixels the game renders (which may not correspond with how they are displayed on the screen); e.g. when a layer is zoomed in, it may only have 50xN abstract pixels on the screen, thus ViewportWidth(0) will be 50, while physical amount of pixels that is used to display stuff relies on scaling, window size and other factors.

    Canvas size values are device pixels, so by setting canvas size you basically set the Window size.

    Also note that some tutorials refer to abstract pixels as CSS pixels, which may or may not be the same thing.

    Feel free to correct me if I got something wrong.

    (I wish there was a comprehensive tutorial about that!)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)