Pixel Art Monitor

Pixel Art Monitor. A Modern ProblemAssessing The SituationA Starting PointThick Borders to The RescueHandling Out of Gauge Screens LetterboxingThe Final ResultConclusionThe old gaming consoles – where pixel art was born – would always output video data at only one resolution regardless of the CRT monitors and TVs they were plugged to This inevitably led to distorted and blurred graphics which were made worse by the artefacts generated by the way cathode tubes and video standards worked At the end of the day what players saw on the screen looked nothing like the original pixel artand developers could do nothing about it Yet today most players expect pixel art to look crisp and sharp regardless of whether they’re using the latest 4K OLED TV or an old 4∶3 LCD screen In this post we’re going to take a look at how we handled this problem in Guntastic During preproduction we investigated which screen resolutions players actually used to get a better idea of the problem scale While it was quite safe to assume home consoles worked at standard 16∶9 resolutions such as 720p and 1080p (and now 2160p) the situation on PC was far more complex By looking at the data above we observed that 1 Perhaps unsurprisingly 16∶9 was the more common aspect ratio with the standard 1920×1080 resolution which was used on more than 38% of PCs (with Steam installed that’s it) 2 There are some awkward screen resolutions out there with queer 16∶9like aspect ratios or perfect 16∶9 aspect ratios but uneven sizes 3 More than 7% of users had 16∶10 screens 4 Screens with a 4∶3 aspect ratio still existed although had a shrinking a small market share Remember the data above is from December 2016 Had we started working on the game today we would have found a radically different scenario 1080p is used on more than 60% of PCs while nonHD res As standard 16∶9 HD resolutions were already the defacto target to develop for we decided to use a reference resolution of 640×360 pixels A canvas of this size scales perfectly using integer factors to all HD resolutions 2× for 1280×720 3× for 1920×1080 and so on including 4K 8K and possibly more (although I can’t imagine what a pixel art game would look on such screens!) We’ve already seen in a previous postthat 640×360 proved to be the most viable option from a gameplay point of view as well Our initial implementation of the scaling mechanism was quite standard and worked by changing the orthographic size of the game camera based on the detected screen resolution A very good introduction to this technique can be found in the Pixel Perfect 2Dpost on the Unity blog which also provides example code that can be easily ported over to UE4 To prevent distortions and blurriness at the remaining screen resolutions we identified a simple solution in a slightly modified version of the “Thick Borders” technique outlined in the same blog post Basically the idea is to scale the game to the nearest whole multiple of the reference resolution and then show or hide a small portion of the game world to the sides of the screento compensate for the small difference in screen resolution This proved to work well especially on 16∶9like aspect ratios displays that have resolutions that only differs marginally from standard 16∶9 HD resolutions (eg 1366×768 1360×768 etc) To support this technique we had to change how the final scaling factor is calculated if it’s near to the next integer we round it up even if we’ll lose a bit of the world to the sides otherwise we round it down so thick borders will fill the rest of the screen The final implementation lives inside our PlayerCameraManagerclass and takes approximately 80 l Although thick borders did the trick in most cases they failed to handle situations where the area to cover to the sides was way too big in example with some 4∶3 screens and uneven resolutions such as 1600×900 Since these screens were not widespread we decided to solve the problem by applying a simple letterboxing effect This also served as a failsafe solution in case a player is using a very strange resolution we didn’t directly account for We initially tried to apply the letterboxing effect through the builtin vignette post processing filter but it proved difficult to control and integrated badly with the pixelated look of the rest of the game Currently the effect is implemented inside the game world by using a simple rectangular static mesh with a big central hole that helps keeping overdraw to a minimum Not the cleanest approach but it gets the job done! In the end every level in Guntastic is composed of 34×24 tiles The playable area only accounts for 24×16 of them (which is approximately our native resolution of 640×360 pixels) with the rest being there only to support the thick borders and letterboxing techniques The following table and figure show which scaling factor and techniques are applied at common resolutions In this post I presented the solution we adopted to support multiple screen resolutions in Guntastic which is a mix of three different techniques scaling thick borders and letterboxing While definitely not perfect this approach was quite simple to implement while remaining – we hope – future proof and flexible enough to handle even niche resolutions.

The PIXEL LED Art Frame is a nostalgically designed screen that displays your choice of animated LED pixel art giving you a place to view retroflavored designs It’s controlled via Bluetooth through an iOS or Android app and features 1024 ultrabright LEDs creating an effective resolution of 32 by 32 pixels.

Make Pixel Art The Original FREE Online Pixel Art Drawing App!

Check out our pixel art screen selection for the very best in unique or custom handmade pieces from our shops.

PIXEL: LED ART A Platform for LED Pixel Art

A gorgeous pixel art display screen without any fluff and at a great budget price point If you&#39ve been waiting for the right time to grab a Divoom display Video Duration 9 minViews 55KAuthor MUO.

Pixel Sharp Graphics at Multiple Screen Resolutions Dev

Drawing pixel art is easier than ever while using Pixilart Easily create sprites and other retro style images with this drawing application Pixilart is an online pixel drawing application and social platform for creative minds who want to venture into the world of art games and programming.