240x320 Aspect Ratio
Giulia Satmary
As we venture into the realm of digital images, understanding the specifics of image resolution and dimensions becomes crucial. A common resolution in mobile devices and certain graphics is 240 x 320 pixels. This size is referred to by its width and height, respectively, and it follows a standard aspect ratio of 3:4. This means for every 3 units of width, there are 4 units of height, creating a portrait orientation. The pixel density, measured in pixels per inch (PPI), is dependent on the screen size and can greatly affect the image quality. A higher pixel density generally means a sharper, clearer image.
Pixels, short for picture elements, are the tiny dots that make up a digital image. The resolution of an image, often measured in pixels, refers to the amount of detail it contains. Larger resolutions mean more pixels, which usually translates to finer details. For a 240px by 320px image, the resolution indicates its width and height in pixels. It is important to use images with appropriate resolutions because fine details might get lost when viewing on larger displays if the pixel count is too low.
In the realm of digital media, we encounter a variety of image file formats. The most common ones include JPEG (or JPG), which is widely used due to its balance of quality and file size. Meanwhile, PNG provides transparency and is preferred for web graphics. GIF is great for simple animations. Formats like TIFF and BMP offer high-quality images at the cost of larger file sizes. For logos and illustrations, vector image formats like SVG or EPS are ideal since they scale without loss of quality. For online icons, ICO is standard and WebP is an efficient format for web images offering good quality at smaller file sizes.
Creating mobile-friendly images requires us to resize the photo to dimensions that display well on mobile devices. Since screen sizes and resolutions vary, we often aim for a balance that looks good on most devices. A 240px 320px photo is typically suitable for low-resolution smartphones, but newer devices might need higher resolution images to avoid pixelation. We consider the aspect ratio, pixel density, and screen resolution when converting an image to make sure it fits mobile standards.
When converting an image to a 240320 pixel resolution, especially when using an Internet-based tool, privacy and security are paramount. Below, we outline some critical steps to maintain these aspects:
WF28JTYAJDNN0 is a 2.8-inch IPS TFT LCD module with a wider viewing angle, featuring a resolution of 240x320 pixels and an aspect ratio of 3:4. The WF28JTYAJDNN0 module is designed in portrait mode as an IPS TFT-LCD, incorporating the ILI9341 controller IC. It supports MCU 8-bit/16-bit or SPI interfaces, providing a typical contrast ratio of 800:1. The brightness of WF28JTYAJDNN0 is 500 nits (typical value).
This 2.8-inch IPS TFT provides a wider viewing angle compared to TN TFT, with angles of Left: 80 / Right: 80 / Up: 80 / Down: 80 degrees (typical value). IPS panels in TFT displays offer broader viewing angles, accurate and consistent color reproduction, superior image quality, precise touchscreen performance, and consistent color temperature. The versatility of IPS TFT-LCD displays makes them suitable for various applications, including consumer electronics, medical displays, and industrial control panels.
I've gotten a lot of answers to this question, but they are all generic and generally not very useful. None of the tutorials talk about aspect ratio and dealing with mobile devices and there are a zillion ways to do it, all seem to have gotcha's and flaws.
What you want is to constrain the camera viewport on portrait or landscape(depending on your needs), by computing camera.orthographicSize property, so you can build your 2d scene regardless of aspect ratio and resolution:
You typically don't need different sizes of assets - imported textures and sprites with automatically-generated mip maps will look nice when rendered at any size less than or equal to the original pixel size of the image.
If you come around to using the bars it's actually pretty simple to implement (I'm posting this even though the OP stated the opinion of it being unacceptable because it has the benefit of being not near as bad on mobile and it's a simple solution that requires no code whatsoever)
In my game (not listed here as this is not an ad, can ask in comments if desired) we use portrait mode. To do a nice simple 16:9 I made my Ortho camera at size 16. This means the camera will adapt 32 game units of height (y: 16 through -16 in my case) into the device's vertical of the screen.
I then placed black masks with a game between -9 and +9. Voila, the game's screen looks the exact same on all devices and a little skinnier on devices that are a little wider. I've had absolutely no negative feedback regarding the masks. To do landscape simply flip those values and then you'd make the camera of size 9. Change the values to match whatever you've decided is your game unit scale.
I'm doing this in a game I am currently working on. I have a background image that is 1140x720. The most important bits (the ones that should never get cropped) are contained in the 960x640 middle area. I run this code on the start function of my camera:
I also define sizes other than font size for buttons and such. It works well on every aspect ratio I've tested. It's been a while since I set it up, so I may be missing a step. Let me know if it doesn't work as expected and I'll see if I left anything out.
@Marcel's answer and code are great and helped me understand what was happening. It's the definitive answer. Just thought someone might also find useful what I ended up doing for my specific case: since I wanted something really really simple, one sprite to be always on screen, I came up with these few lines:
I added this to the camera and dragged my sprite (it's my background) to the script's only property. If you don't want any black bars (horizontal or vertical) you can put a bigger background behind this one...
This is an >5 years old question, but it's still not only quite relevant, but also getting more and more complex over the years as there are even more screen ratios on mobile devices nowadays than even when this question was asked.
Since this question was ask, there have been quite a few additional options given in Unity (especially with Unity 2018). Still, there are quite a few tips & tricks when handling the screen ratio so that it can fit with almost every screen sizes.
First, the best universal method is, ironically, the old method: Dynamically build whatever screen-related assets in real-time when, for example, a scene is started. This is a similar thing to what is used for websites where you create a different kind of GUI & experience based on the screen sizes. For example, having a screen less wide than 800px would have 1 kind of GUI while having one of over 2000px would have another kind. It's really time consuming and relatively complex to build (hence more prone to bugs & errors), but offers the best versatility of any kind of setup.In such a way, your goal is to make sure every buttons and texts are always big enough to by pressed by people with big fingers and/or be read by anyone.
The main difference between doing it in a game engine (like Unity) and doing in HTML5 for the web is the fact that you're not stuck with a single "scene" in the game engine while HTML5 might requires you to work in a single web page as redirection scripts might be blocked by the User's browser. This means that you could start your game with a custom flash scene (such as a custom scene where your company logo appears) and, in that scene, you apply a checked that detect the screen sizes. Then, after, you make you scene transition script to decide which "scene" to load depending on the screen pixel sizes. This is far easier than having to script everything into a single scene.
The second way is a quite easier and faster, but it can have quite some impact on the performances depending on how good the optimization was applied. Simply put, using a 3D space (known as "World Canvas" in Unity) based GUI may saves you a ton of work. Unlike other kind of canvas, the World Canvas (3D based canvas) is getting automatically adjusted on the height of the screen based on its active screen rotation. This includes even a built-in Anti-Aliasing as well as a really good pixels ratio conversion of the textures using in the GUI which means that the GUI will look as if it was made especially for that screen resolution as long as each displayed textures doesn't exceed their maximum resolution. Another really important part of this method which is, for now, unique and can't be used with others is that this method also allow you to use basic VECTORS based graphics. Yup, for a while now Unity can render SVG files with flat colors. It's just not yet compatible with the GUI 5.x yet which is why this doesn't work with other GUI methods as this one is the only one who's using the proper Z-Buffer and some other built-in system of the engine to render the UI (which is why you can put both UI and 3D models in the canvas). Note that I precise that, for now, only basic Vectors based graphics can be used such as flat colors and really basic gradients (kinda like the limited HTML5 SVG-based code rendering). No outlines or styles or any kind of complex "rendered" magic can be done (yet?).
Lastly, the 3rd way is to use the "Canvas Scaler" component on the same GameObject as the Canvas' component. Usually, the best result comes from using the UI Scale Mode "Scale with Screen Size" and decide if the screen should be matching either the Width or Height of the target device. This methods comes with some restrictions and requires you to design something that can be well adjusted in one direction with a wide range of screen size. For this, I always suggest the use of something I call fractal UI design. This means to cut your menus in smaller sections while raising how "deep" the menus gets OR getting a menu design that allow you to display limited information at one time.
93ddb68554