Furthermore, the SVG images actually have XML file structure and they can be edited at runtime with CSS and JavaScript. Using them you can design complex UI elements that scale perfectly in any resolution. SVGs can scale to any size and not lose clarity and are usually smaller in file size than raster graphics. Vector graphics have an advantage over raster formats like. Of course, Coherent UI supports them, but it also has the great benefit of supporting vector SVG images. Typically, raster images are used in such cases. To make it work you just need to specify the range in which these styles should apply using “max-width” and “min-width”.įor more information about media queries, you can check the following article – Complex UI elements with SVG imagesĪlthough you can design most of your UI with standard HTML base components, sometimes you might need some special irregular shape – for example for health bar in a game. In such cases you can use CSS media queries. For example you might want to use 100px by 100px image file for button on a 1024×768 screen but use 400px by 400px image for a larger screen. In some cases, you might want to have a different visual look of your UI for different screen size. They work the same way as viewport units but instead of 1/100 of the viewport size they represent 1% of the size of the parent element.Ĭreating responsive UI in the Coherent Editor is very easy as both viewport and percent units are fully supported.įor more information about viewport, percent as well as other CSS units you can check the following article – ĭifferent styles for different screen sizes To achieve this you can use percent units(%). One possible problem with viewport units, however, is that if you have nested HTML elements you might want to have them scale their position and size relative to their parent and not to the viewport. You can also use vmin units that are 1/100th of the smallest side and vmax units that represent 1/100th of the largest side. This will effectively make the health bar appear at 75% of the viewport width and 5% from the viewport height. It has “left” property set to “75vw” and “top” property set to “5vh”. The position can be anchored using properties such as “top”, “bottom”, “right” and “left” while the size of the elements defined by “width” and “height” properties.įor example here are the styles for the plank that represents the health bar in the sample above: Using these units allows the UI to be responsive and properly scaled and positioned regardless of the screen resolution. vw is 1/100th of the rendered viewport width and vh is 1/100th rendered viewport height. Viewport units (vw and vh) can be used both for the position and size. Web technologies offer many different approaches that you can use to position and scale your UI however in most cases the best approach is to use viewport units. By using Coherent UI users can take advantage of the multiple scaling and positioning options provided by HTML5. The solution is to use a modern UI middleware for games like Coherent UI. Because of these scaling issues, a lot of games running in 4K have miniature UI with wrong size and positioning.Īs shown in this article by extreme tech running BioShock in 4K makes the both the text and the rest of the UI elements too small to read.Ĭivilization 5 in 4K has similar issues with the UI. While it may be easier to scale down an image without loss of clarity, it is not easy to enlarge the image without the image becoming pixelated. Тhey typically use raster images that do not tend to resize very well. This is because they use old technology that prevents them from scaling correctly. So we know now that 4K games look awesome in general but how does the UI render in such large resolutions? It turns out that a lot of the currently used UI systems cannot work properly in 4K. (Black Ops 2 – ) Challenges for the UI in large resolutions Needless to say, the 4K resolution provides sharper crisper images with more detail and overall jaw-dropping gaming experience. Furthermore, 4K gaming’s popularity is growing exponentially and it’s only a matter of time for the 4K systems to become affordable for everybody. However, as described in this article by Jason Evangelho you can have complete 4K system for under 2500$. Of course, as with any new technology, the prices of the screens and the needed hardware is still high. There are even laptops that have 4K resolution displays and cell phones that shoot video in this resolution. Full HD).Īll major vendors already have monitors and TVs that support this resolution. Essentially it is a new standard for high screen resolution – 3840*2160 pixels or exactly four times as much pixels as 1080p (a.k.a. 4K?ĤK is the Next Big Thing in technology. In this post we’ll have a look at 4K resolution gaming, the challenges it presents to UI systems and how you can use Coherent UI and SVG images to meet them.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |