Subpixel Camera for a 3D Pixel Art Game Engine

Поділитися
Вставка
  • Опубліковано 19 жов 2020
  • Date of Recording: 2020-10-10
    Following the example of many 2D pixel art games, we render our scene at a low pixel art resolution (640x360) and upscale the result to the screen resolution for presentation. At render-time, the camera is snapped to the nearest "pixel", and when blitting to screen, the snap offset is corrected so that the camera is permitted to smoothly glide over the pixels of the screen at the display's native resolution.
    Some extra projections need to be computed in order to ensure that this operation works precisely even when the camera is rotated 45 degrees.
    The pixel art shaders were also updated to add contrast in shadowed regions by shading the shadowed regions using a simple monochromatic Lambertian BRDF, resulting in a soft fake ambient lighting effect.

КОМЕНТАРІ • 34

  • @mondzahn
    @mondzahn Рік тому +3

    i love your channel and your work just looks so beautiful
    i hope this will be finished and released someday^^

  • @kevinziegler8664
    @kevinziegler8664 Рік тому +4

    Love this! Just tried it myself and after a bit of tinkering I got the camera to work in both directions.. but only when using 45 degrees in the x axis.. when I set it to let's say 30 it's not pixel perfect anymore (I guess it's because the camera is moving in the z direction and the 30 degree angle means the camera needs to move slightly different compared to 45 degrees). Now I can't wrap my head around the maths. Do you have any suggestions / a formula how to calculate the amount of pixel I need to move when going up and down? Thanks in advance!

  • @DreamingOfTheHeart
    @DreamingOfTheHeart 11 місяців тому +2

    Hope you don't mind me asking, how do you deal with odd resolutions and aspect ratios that aren't 640x360? Love the work btw!

  • @Andrew90046zero
    @Andrew90046zero 2 роки тому +3

    Does this function similarly to how the "pixel-perfect component" works in unity? or is your method slightly different?

  • @rhaskia7807
    @rhaskia7807 Рік тому

    How did you manage to do the sort of shading outlines of the boxes and such? I'm creating something sorta similar for a game and want to know how

  • @squeenixu
    @squeenixu 3 роки тому +9

    OOH. Could be used for some really cool camera gimmicks in-game

    • @t3ssel8r
      @t3ssel8r  3 роки тому +3

      yeah! like some camera based puzzles. I haven't thought it through though

  • @starbi
    @starbi 2 роки тому +11

    Thank you t3ssel8r for the amazing inspiration. I recreated something like this without any shader code, just using a render texture and a script.
    Moving the camera actually pans the whole viewport. Whenever the viewport moves one pixel or more from the center, I move it back a number of pixels and transform the camera with the same number of pixels, taking into account the units per pixel and some trigonometry for the angles. I was suprised, it works really well with almost no peformance hit, including rotations and zooming. I'll have to see how it works with moving entities though. Yours is probably the proper way of doing it and mine relies on C# code in the update function, it feels like it will lead to problems down the line.

    • @t3ssel8r
      @t3ssel8r  2 роки тому +1

      this is essentially what I do as well

    • @Cheeztaco
      @Cheeztaco 2 роки тому

      Would you mind sharing your camera script? I'm trying to get this to work but I still get the annoying jitters. I also have the slight suspicion, that cinemachine won't work for this.

    • @starbi
      @starbi 2 роки тому +3

      @@Cheeztaco I haven't worked with cinemachine. But if it does any transformations like smoothing then it will cause jitter. To start out with I recommend making a regular camera pointing straight down. That way the number of units accross the height of the screen is 2 * orthographic size. So if you have a camera resolution of 360 and an orhographic size of 5. The units you have to move per pixel will be 1/36. Every translation of the camera should be dictated by the viewport panning across the screen.
      I can't really show my code as I'm not home yet and it also depends on other objects and it's really messy right now.

    • @Cheeztaco
      @Cheeztaco 2 роки тому +1

      @@starbi I'll grab me a coffee an try that. Thanks for pointing me in the right direction :)

    • @Cheeztaco
      @Cheeztaco 2 роки тому

      @@starbi I can't seem to wrap my head around that. Relatively new to unity btw. Switched from gamemaker because plain 2d just wasn't enough for my idea. I'll ask a bit around and see if someone can help me, but thanks

  • @ibbymuk1232
    @ibbymuk1232 3 роки тому +8

    are u ever gonna release this or make a tutorial ? ...... cos this looks soo goodd

  • @MrYaroph
    @MrYaroph 2 роки тому

    do you use a shader found on the net to have this rendering?

  • @CaffeinatedCombatant
    @CaffeinatedCombatant 11 місяців тому

    What method did you use to render the scene? Is this an actual shader system? I have lots of questions.

  • @StarCourtesan
    @StarCourtesan 2 роки тому

    How did you make the grasS?

  • @DcCoO
    @DcCoO 11 місяців тому

    One doubt came up when I read your description: what happens to the borders? If there is a snap offset of x, all the rendered scene should move x, opening a "letterbox" of size x in the borders. How do you guess what should be there?

    • @t3ssel8r
      @t3ssel8r  11 місяців тому +1

      x is always at most a single texel, so you can either pad the RT size by 1 texel in each dimension, or what I do is just set the texture extrapolation mode to clamp, and in practice it's pretty unobtrusive

  • @elojoquetodolove3162
    @elojoquetodolove3162 3 роки тому +2

    Excelent work but i need to know how to do this

  • @Ziplock9000
    @Ziplock9000 Рік тому

    So am I right in assuming you render in a higher resolution to a texture and just reduce the size for displaying?

    • @t3ssel8r
      @t3ssel8r  Рік тому

      the opposite: render to low resolution and upscale for displaying

    • @Ziplock9000
      @Ziplock9000 Рік тому

      @@t3ssel8r If that's true then it's not sub-pixel, it's extra-pixel

    • @fransbstrom1666
      @fransbstrom1666 11 місяців тому

      @@t3ssel8r how do configure render to a low resolution other than the display resolution? 👀