Optimize game art for resolution and platforms

AFT712- 3D CHARACTER DESIGN/
AFT 711-3D ENVIRONMENT DESIGN
KRISHN VERMA-20194
TECHNICAL DESIGN DOCUMENT FOR 3D GAME ART
PART -1

Screen Resolution for Your Game Art
• Choosing the optimal resolution for a game from the start of development can
reduce headaches with porting later on:
The "best" resolution depends on a lot of factors:
1. The "best" resolution depends on a lot of factors:
2. The platform the game is supposed to be released on first
3. Other possible platforms you plan to port to later
4. Graphical fidelity (An 8-bit or pixel art game doesn't need to be hi-res.)
5. Genre (A puzzle-game can probably get away with a lower resolution, but a
high-speed competitive FPS might not.)

PIXELS, POINTS AND RESOLUTIONS
• The difference between pixels, points and resolutions can be confusing even
for experienced designers who are transitioning to mobile or who are not
familiar with screens and how they work..
• The main screen and density related keywords you need to understand when
designing mobile apps and answer a number of other questions we
commonly see about them.
• What do I need to know?

THERE ARE 6 NUMBERS YOU NEED TO UNDERSTAND
WHEN TALKING ABOUT SCREENS SIZES AND IMAGES.
• Pixels (A picture element: a single dot of colour on a screen)
• Screen sizes (In inches)
• Resolutions (A width and height - e.g. 320wx480h)
• DPI (Dots per inch or pixels per inch)
• Points (An abstract measurement for iOS)
• Density Independent Pixels (A similarly abstract measurement for Android)
Of these, screen size, pixels, resolution and DPI all talk about the physical attributes of a
screen,
whereas points refers to a coordinate system which is separate to the device it's running on.

WHAT IS A PIXEL?
• A pixel is a single group of coloured dots (normally red, green and blue) on a screen. By turning them on
and off at different intensities, any number of colours and brightness can be created. The colour black is
created when all the dots are off, and white is created when red, green and blue are all on at the same
time.
• In short, they are the physical lights on a screen that allow you to see what's being displayed where
each one is so small you can't individually identify them without looking very closely.

WHAT IS A PHONE'S SCREEN SIZE?

WHAT IS A PHONE’S RESOLUTION?
• A phone’s resolution is the number of pixels going across the screen
multiplied by the number of pixels going down.
The original iPhone for example had 320 pixels across and 480 pixels down, written as 320x480.
Some modern phones now have the same resolution as a high definition TV, 1920x1080 individual sets of
red, green and blue lights all contained in a 5 inch screen.
DPI (dots per inch) is a number that measures how many pixels are contained either across or down in a
single inch of screen space.
DPI means each individual pixel must be smaller and smaller in order to be able to fit into the available
space, meaning the clearer the screen will be and the higher the level of detail that screen can draw.

IOS - WHAT IS A POINT?
• Once upon a time, the original iPhone had a screen resolution of 320x480. Then the iPhone 4 came along,
and with it, the Retina screen.
• The Retina screen doubled the DPI while keeping the same screen size - meaning the number of pixels that
fit into the same space had quadrupled (twice the number of pixels across and twice the number of pixels
down).
• The resolution of the first Retina iPhone was therefore 640x960 pixels.
• But all the old graphics had to be drawn at the same size on the higher density phone.
• If the phone had drawn all the graphics at a 1:1 scale like it did originally, everything would have been
drawn at a quarter the size in the new screen - making every old app obsolete and broken.
• To prevent all those apps not working any more, Apple started using points as a way of separating the
drawing of the graphics from the density of the screen they were on.

The point was created as a unit of distance that allows graphics to be scaled independently
of the resolution of the phone they are running on. Now every iOS graphic could be drawn
according to its points values and converted to display correctly on the new screen.
An iOS point is equivalent to 1/163 of an inch.
This size is always the same regardless of the resolution of the phone it is on, and comes
from the 163DPI of the original iPhone.
Converting between pixels and points
Pixels and points are static measurements - they don’t change based on other factors:
1 pixel is always 1 pixel and is the smallest piece of a screen that can display colours.
1 point is always 1 point and is an abstract unit, only having meaning when referenced in
relation to other points.

Points are different to pixels because they change size based on DPI:
On the iPhone, 1 point is equal to 1 pixel when the resolution is 163DPI. This was the case for all the iPhones before
the Retina era.
At 326DPI, like the iPhone 4, 5 and 6, 1 point is equal to 2 pixels across and 2 pixels down, or 4 total pixels. Meaning
your 100x100 image will render a quarter the size on a retina device if rendered by counting pixels alone.
At 401DPI like the iPhone 6+, 1 point is equal to 3 pixels across and 3 pixels down, or 9 total pixels.

What about DPs?
Android uses a measure which is almost identical to points. This unit is called a “density
independent pixel”. It is the equivalent of roughly 160 pixels condensed into 1 inch of
screen space, as compared to iOS’s 163.
There is no other meaningful difference. The official definition says:
A Device independent pixel (also: density-independent pixel, DIP, DP) is a physical unit of
measurement based on a co-ordinate system held by a computer and represents an
abstraction of a pixel for use by an application that an underlying system then converts
to physical pixels.
When and why should you use them?
Use DP when designing Android layouts and points when designing iOS layouts.
Density-independent pixels and iOS points are both virtual pixel units that you should
use when defining UI layout, to express layout dimensions or position in a density-
independent (and therefore device-independent) way.

HOW TO CONVERT BETWEEN PIXELS AND POINTS
https://blog.fluidui.com

Is there an easy way to remember the difference between pixels and points?
An easy way to think of the difference between pixels and points is that pixels are
counted while points are measured.
What is Retina display and how does it differ from a regular display?
A retina display is simply a display that has twice the pixel density (pixels or points of
light per inch) of a non retina screen. The latest innovation from Apple also defines
“retina HD”, which has 3 times the pixel density of the original iPhone.
Is Apple the only one with a Retina display?
Apple are the only company with a screen that is branded as “Retina” but they are
not the only company with resolutions that high. The latest high end models from
Samsung such as the Galaxy S6 edge have even higher densities, coming in at
577DPI and more.

What is considered high or low DPI?
A good DPI depends very much on how far away from the screen you typically are. That’s
why the latest phones have the same or a higher number of pixels as a high definition TV,
even though the size of the screens differs hugely. Mobile devices that have a higher DPI
are typically better because they are held closer to your eyes (4-6 inches/10-15cm) and
therefore you can make out a lower density far easier than you could if you were looking
at something further away, like a tv (typically 4-6 metres/yards).
Is there a highest possible DPI?
There isn’t really a highest possible DPI (there might be some limitations when we are
down at the level of atoms, but we are not really there yet), but there is a limit in terms
of what the human eye can perceive. That limit comes in at about 2190DPI for a screen
held at 4 inches for the average adult. After that, humans can’t perceive the difference, so
there would be little benefit in improving the resolution past this point.

A GUIDE TO CONSOLE GAME GRAPHICS TERMINOLOGY

• The introduction of exciting new video game consoles at the low (Nintendo Switch) and high (Xbox One X) ends of
the hardware spectrum has increased interest in how games look running on different platforms
• Games can look radically different on different consoles because each system’s hardware configuration imposes
unique constraints on graphics quality.
• To help people who may be unfamiliar with video game graphics, this article describes a number of factors that
often come into play when games running on different consoles are compared.

RESOLUTION AND FRAME RATE
• Resolution and frame rate are the key factors that game developers struggle to balance on different
consoles. The current gold standard is 4K resolution running at 60 fps (frames per second).
Screen Resolution Pixels
Nintendo 2DS, 3DS, 3DS XL
bottom screen
240p (320 x 240) 76,800
Nintendo 2DS top screen 240p (400 x 240) 96,000
Nintendo 3DS, 3DS XL top
screen
240p (800 x 240) 192,000
Standard TV 480p (640 X 480) 307,200
Nintendo Switch 720p (1280 x 720) 921,600
High-definition TV 1080p (1920 x 1080) 2,073,600
Ultra high-definition TV 4K 2160p (3840 x 2160) 8,294,400

• Frame rate. Frame rate is the number of frames or images that appear on the screen
measured in seconds. Higher frame rates produce smoother movement. Games usually
target frame rates of 30 or 60 fps.
• If a console’s processors have trouble handling everything that's happening onscreen,
frame rates drop which can result in choppy, stuttering video.
• In order to hit 4K resolution at 60 fps, a console’s hardware must address 497,664,000
pixels every second.
• In order to hit 4K resolution at 60 fps, a console’s hardware must address 497,664,000
pixels every second. Most consoles can’t do this even if the image on the screen doesn’t
have much in it and nothing is moving. When things get busy, the only console on the
market that has a hope of hitting native 4K (see the definition of "native resolution"
below) at 60 fps is the Xbox One X. And that’s before you start adding all of the graphic
effects that can make games look beautiful or keep them from looking terrible.

VIDEO GAME GRAPHICS TERMINOLOGY
• Ambient Occlusion. Ambient Occlusion increases detail in areas of the screen that are illuminated by
light reflecting off other objects. It’s a subtle effect that makes objects and scenes look less flat, more
three dimensional and more realistic.
• Anisotropic filtering. Anisotropic filtering reduces texture blurring. It makes textures look sharper and
objects more detailed when viewed at a distance or at an angle.
• Anti-aliasing. Anti-aliasing smooths out the jagged curved and diagonal lines (called “jaggies”)
that occur in digital images. In general, anti-aliasing techniques average the pixels along an edge to
produce a blend that smooths the transition from one pixel to the next. It produces a more realistic
image by reducing or eliminating artificially uneven edges.
• Bloom. Bloom is an effect that mimics the inability of cameras to capture bright lights in a scene. It adds
light feathers or a haze of light around bright objects. When used well, bloom can provide subtle
enhancements that make bright lights, light beams or reflective surfaces appear to pop off the screen.
Overuse can wash out images and make them look unnatural

• Checkerboard rendering. Checkerboard rendering or checkerboarding is a technique that helps lower
power processors render high resolution images. It generally involves rendering half of the pixels in
each frame in a checkerboard pattern, and inferring the missing pixels from the pixels that were
rendered, information from the previous frame, or both. It produces less detailed or fuzzier images than
native rendering.
• Chromatic aberration. Bands of false color that appear along edges that separate high contrast light and
dark areas of an image. It's a lens flaw that photographers and film makers usually try to eliminate using
expensive lenses or digital post-processing. Some developers use it to give their games a film-like
quality.
• Downsampling. Downsampling, also known as supersampling, is an anti-aliasingtechnique. It
involves rendering an image at a resolution that is higher than the screen will display. The image is then
reduced to the screen’s resolution and the extra pixels are used to smooth curved and diagonal lines.
Downsampling also makes textures look sharper and clearer.

• Downsampling. Downsampling, also known as supersampling, is an anti-aliasingtechnique. It
involves rendering an image at a resolution that is higher than the screen will display. The image is then
reduced to the screen’s resolution and the extra pixels are used to smooth curved and diagonal lines.
Downsampling also makes textures look sharper and clearer.
• Draw distance. Draw distance is the distance away from the point of view at which objects are drawn in
three dimensions. Objects beyond the draw distance are drawn as 2D backdrops. When the draw
distance is short, objects suddenly pop into view as you approach them.
• Dynamic resolution scaling. Dynamic resolution scaling adjusts screen resolution when the load placed
on a system’s processor increases or decreases. It's used to keep frame rate steady during busy or
intense scenes. If resolution is reduced too far, the image loses clarity and detail; if it’s not reduced
enough, frame rate falters.
• Frame pacing. Frame pacing describes how long each frame remains on the screen before it’s replaced
by the next frame. For example, if frame pacing is done correctly, each frame remains on the screen for
approximately 16.66 ms (milliseconds) when the frame rate is 60 fps. When frame pacing is done
poorly, the average frame rate may be 60 fps but individual frames appear for longer or shorter than
16.66 ms. Poor frame pacing produces choppy or stuttering video.

• Geometry. 3D objects are initially rendered as wireframes made up of lines, vertices (points where lines
meet), and polygons which, taken together, are called the object’s geometry. Increasing an object’s
geometry captures more of the subtleties of its 3D shape which results in a more realistic image.
• Inverse kinematics. Inverse kinematics refers to mathematical techniques used to calculate the position
of a body's joints so that body parts like hands and feet are positioned at a desired location. It makes
movement look more natural and insures that moving characters are securely anchored to the
environment.
• Levels of details (LODS). LODS refers to the amount of detail shown for an object as it moves further
away from the viewer. LODS are usually reduced by simplifying the object’s geometry. Increasing LODS
decreases the chance the player will notice sudden changes in detail as objects move closer or further
away.
• Motion blur. Blurring that occurs when something moves while a photograph is taken or a film is
shot. Adding it to games gives motion a smoother, more film-like quality at the cost of blurring a sharp
image. Motion blur is more intrusive at lower frame rates

• Multisample anti-aliasing (MSAA). MSAA is a type of anti-aliasing that smooths edges by collapsing
multiple samples into a single frame. The term is usually preceded by a number such as "4x" to indicate
the number of samples involved. More samples produces smoother edges. MSAA is effective but it
places high demands on the GPU because each frame is fully rendered before it's collapsed. For this
reason, it's rarely used in console games.
• Native resolution. Native resolution refers to images that are rendered and shown at a screen’s full
resolution. For example, images on a 4K screen are shown at native resolution when they are rendered
at 3840 x 2160. Images that reach 2160p through checkerboarding are not shown at native resolution,
nor are images rendered at 2160p but shown at a reduced resolution because of dynamic resolution
scaling. Images presented at native resolution are sharper and clearer.
• Photogrammetry. Photogrammetry involves using photographs taken from many angles to measure the
distances between the points on an object. A map based on these distances is then used to create a
digital model of the object. Photogrammetry makes objects and scenes look highly realistic.
• Post processing. Post processing adds graphic effects to an image that is renderedin a buffer on the
video card before the image is displayed on the screen. Most of the effects listed in this article are post
processing effects.

• Rendering. Graphics rendering is a multi-stage process that creates a scene from a set of instructions
(called a model) that includes basic information such as the geometry and position of objects in a scene,
the position from which the scene is viewed, and the light sources that illuminate the scene. After a
scene has been rendered, it’s polished into the image seen onscreen with post processing effects.
• Shader. "Shader" is a general term for a family of tools that allow on-the-fly adjustment of
visual characteristics such as the hue, saturation, brightness or location of pixels, textures or vertices.
They can be used to affect virtually everything seen onscreen.
• Shadow mapping. Shadows enhance a scene by helping the viewer establish the relative depth of
objects in the scene, object movement, and changes in point of view. More detailed shadows make
scenes look fuller, deeper and more realistic. Scenes without shadows look flat.
• VSync. VSync is method for synchronizing frame rate with a screen's refresh rate. It reduces visual
artifacts at the expense of frame rate when frame rates are high.

• Supersampling. Supersampling, also known as SSAA, renders a frame at a higher resolution than the
screen can display and then reduces the image to the screen’s native resolution. It's an anti-
aliasing technique that can also increase detail in an image.
• Temporal anti-aliasing. Temporal anti-aliasing uses information from frames that come before and after
a target frame to smooth curves and diagonal lines. It reduces or eliminates a crawling effect seen along
edges as objects change position from one frame to the next. Temporal anti-aliasing produces a
smoother, softer image that reduces the sharpness and detail present in a 4K image.
• Texture mapping. Texture mapping puts a skin on a rendered model of a 3D object. The model shows
the planar surfaces of the object and how they are connected; the texture adds surface detail along
with shading effects that make the object look more three dimensional. Higher resolution textures
make objects look more realistic.
• Texture filtering. Texture filtering determines how textures change as objects are viewed from different
angles or distances. Low-quality texture filtering results in a loss of sharpness and detail and an increase
in blur as the point of view moves.
• Volumetric lighting. Volumetric lighting treats light as a three-dimensional object. It’s used to add light
rays such as sunbeams to a scene, or to add depth to atmospheric effects like fog or haze. It makes
scenes look more realistic or more attractive.

METHODS OF 3D GAME CREATION THAT WILL BE ANALYZED
ARE AS FOLLOWS:
• Modelling (High Polygon & Low Polygon)
• Polygonal Optimization
• UV-Mapping
• UV-Layout
• Texturing (Diffuse Map, Normal Map, Specular Map)
• Level of Detail
• Material Batching

A closer look at the methods in 3d game creation will yield results
in how they affect the following hardware units in mobile devices:
•GPU (Graphical Processing Unit)
•CPU (Central Processing Unit)
Mainly when dealing with 3D content the GPU is mostly used for all 3D
rendering in games and applications, the GPU will take over from the CPU to
handle rendering more efficiently. However, the CPU will help out in
calculating while the GPU is rendering 3D models on screen for games

OPTIMIZATION OF 3D GAME MODELS
• Working as a 3D artist in the game industry not only requires a sense of aesthetics, but
also an understanding of how game engines work and how one can optimize 3D
models and textures.
• So this is an important part when creating games since the memory and the
computer’s graphics card as well as its central processing unit are limited.
• Before getting into optimization lets know about some NOMANICLATURE

OPTIMIZATION OF 3D GAME MODELS
it's quite common to make GPU do more work while optimizing for CPU, and vice versa
The analysis will break down the optimization of polygons, textures, LODs (Level-of-
detail) material batching and how this will help relieve stress on the GPU and CPU.
Wes McDermott mentions that:” There is a difference in RAM among the iDevices.
The iPhone 4 contains twice the amount of RAM of the iPad and 3GS at 512 MB while
both the 3GS and iPad contain only 256 MB. It’s important to understand the RAM
available and what you have to work with. The entire amount of RAM is available to
your application, as some of it must be saved for running the OS and other apps with
multitasking. Your textures are usually the main culprit when it comes eating up RAM
in your game. That’s why, it’s very important to use optimized compressed textures to
minimize the RAM usage in your game.”

3GS and iPad contain only 256 MB. It’s important to understand the RAM available and
what you have to work with.
The entire amount of RAM is available to your application, as some of it must be saved for
running the OS and other apps with multitasking.
Your textures are usually the main culprit when it comes eating up RAM in your game.
That’s why, it’s very important to use optimized compressed textures to minimize the RAM
usage in your game.”

There are three factors that correlate between the hardware of the iPhone and
the content being created for the mobile device, the factors are as follows:
•Performance
•Game Budget
•Marketing
GPU: Geometry
Optimizing model geometry is the process of modifying the geometrical structure to make
some aspect of it work more efficient by using fewer triangles
Practical Guide to Optimization for Mobiles
British computer scientist Michael A. Jackson
is often quoted for his “Rules of Program Optimization”, he said:
“Considering how fast computers are, and how quickly their speed is increasing, there is a
good chance that if you program something it will run fast enough. Besides that, if you try to
optimize too heavily, you might over-complicate things, limit yourself, or create tons of bugs”

When creating 3D content for mobile applications, the main aspect should be
optimization, so the risk of creating something that will not work on the mobile device
will diminish.
“The more you respect and understand the limitations of the mobile devices, the better
your game will look, and the smoother it will perform. If you want to make a high-class
game for mobile, you will benefit from understanding Unity's graphics pipeline.”
This statement is very true, and it will help you utilize every aspect of a 3D engine for
Unity when creating optimized content for mobile graphics.
Optimizing 3D assets usually is a very tedious process, however if it is implemented
early on in the pipeline it can make for a better mobile game, performance wise.

Guillaume Provost
speaks about the topic of optimization, he says:
“Whether they are vertices, texels, objects, or textures, it's more about uniformly distributing
them than about plucking out detail. This is a very powerfully intuitive concept: things that
are smaller on-screen should get less detail than things that are bigger on screen.”
Programmers can always optimize their code to go just a little bit faster. But there's a
hardware limit they can never cross without sacrificing visual quality. If you are pushing the
limits of your system, chances are that it is your content -- not code -- that drives the frame
rate in your game.”
The high end console graphics are not able to run on a mobile device, not yet anyway,
therefore the mobile platform require a lot of optimization regarding texture size, texels, draw
calls, and polygon count.

POLYGON TRIANGULATION
• All 3D objects that we see on a computer screen consist of geometrical objects often
called primitives. Quadrilaterals, triangles, n-gons etc. are example of primitives.
• In game engines, everything is converted to triangles, the reason for this is because all
geometrical objects can be split into triangles, however a triangle cannot split to
anything else than triangles.
• This concludes that drawing the triangles is a lot easier performance wise than dealing
with different geometrical primitives

The advantages of using triangles are that they are the simplest primitive, there for
faster for a game engine to utilize and draw
The image illustrates a polygon, triangle and vertex
Type Vertices
Vertices 1
Triangle 3
Quad 4
Polygon 5 (or more)

POLYGONAL BUDGET
Fig. 4.9 showcases a set of main characters from video games either on the PC, Xbox 360, PS3
or the latest Xbox One console. In the statistics the main character’s poly count vary a lot, the
determining factor here is the hardware capabilities.
Wes McDermott Game developer says
“Your game budget is the blueprint or guide
through which your game content is
created."

POLYGONAL BUDGET
• Suggested polygon count for performance (total visible): 7000 vertices
• Texture memory: 24MB
• Max texture size: 1024px x 1024px
• Screen colour depth: 16-bit (65,536 colours)
• Picture Format: PNG
• Suggested texture size: under 512 x 512
The number of polygons you should use depends on the quality you require and the
platform you are targeting. For mobile devices, somewhere between 300 and 1500
polygons per mesh will give good results, whereas for desktop platforms the ideal range is
about 1500 to 4000.
You may need to reduce the polygon count per mesh if the game can have lots of
characters onscreen at any given time.

POLYGONAL BUDGET
• As an example, Half Life 2 used 2500-5000 triangles per character.
• Current AAA games running on the PS3 or Xbox 360 usually have characters
with 5000-7000 triangles.”
Area Polygon Budget
Environments 50%
Characters 25%
Effects 25%

POLYGONAL BUDGET
• The process of budgeting can also go into greater detail; you can start breaking down
those numbers more. The main character might have twice as many polygons as enemy
characters, but you might want 10 enemies on screen at once, so that gives roughly 2%
per enemy and 5% for lead character.
Area Polygon Budget
Main Character 5%
Enemy 2%
Non Player Character 2%

POLYGONAL BUDGET
• Polygons are to be spent where they are needed a general rule of thumb is to give your
main character twice the budget of your regular enemy. However, a boss may require
greater detail there for dependent on its size it could use twice the budget of a regular
enemy and more closer to the main character.
Area Polygon Budget
Main Character 5%
Enemy 2%
BOSS 2%
The total amount of vertices can go up to number closer to 300000 with the use of
LODs, occlusion culling and other various optimization techniques to filter out geometry
that is not being used.

OPTIMIZING THE USE OF TRIANGLES
The model on the right has 726 triangles
while the one of the left has 156.

Hard vs. Smooth Edges
Smoothing groups can be applied to various polygons which will help disguise the limited
amount of geometry, this is very important when modeling for games to utilize every
performance aspect

LEVEL OF DETAILS
Level of detail centers around decreasing the geometrical surfaces of 3D models as the viewer
moves away from the object ,using LODs fluently will enable a real-time application to make
the most of all assets.
It is important to use LODs effectively to achieve different levels of detail for different
distances. An object that is far as way does not require the same level of detail as an object
that is close to the camera,
When the player moves further away from a specific asset the level of detail will diminish,
the LOD transition should be next to impossible to catch
The LOD enables there to be a more total of 3D models on scene, which is crucial for creating
believable environments.

Optimize game art for resolution and platforms

Optimize game art for resolution and platforms

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Ähnlich wie Optimize game art for resolution and platforms

Ähnlich wie Optimize game art for resolution and platforms (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Optimize game art for resolution and platforms