Game Graphics
Tarek ZLITNI
www.ZLITNI.com
tarek.zlitni@gmail.com
General Concepts
1
General Concepts
process of game production
Conceptualization
• Deciding what the game is going to be, how it looks, how it
plays, what it's about.
Art
• Creating sprites, text, models, and user interface for your
game.
Coding
• Writing the systems that determine how the player interacts
with the game world.
Distribution
• Getting you game out to the players, as well as your brand.
General Concepts
process of game production
1. Conceptualization
• The conceptualization phase is a road map developers team to
follow.
• The question is not
• because any project needs to take into account several factors :skills, time,
money…
• Example : If your game calls for a lush 3D world and you don't know modeling,
you need to factor in the time it will take to learn.
2
General Concepts
process of game production
1. Conceptualization step requirements
•A lots of creative Ideas
Ideas
• A creative idea can be simple !
•Written notes that act as a guide for the game.
•This can include everything from story ideas, character descriptions, instructions
Design
Document
for designers.
•Art is very important in pre-production as it acts as a road map for the next step.
•If you have characters, you need character sketches. If you have a story, you
Concept Art need storyboards
•A list of the things you need before your game is finished. Prioritize it, so you
know where you can make cuts, if needed.
Asset
Checklist
•Having a comprehensive list of what assets, programs, etc. you need
General Concepts
process of game production
2. Art
• After the conceptualization process , we get to the much more free-
form step of art design.
• Every background, button, icon, character animation is going to
need a separate piece of art.
• If the preparation from the conceptualization step is solid, it's easy
to follow any templates, sketches and concept art.
• The one important sticking point is that the art can be as pretty as
you want, but it always needs to serve one purpose:
• It needs to add to the game, not take away from it.
3
General Concepts
process of game production
2. Art step requirements
• Having all your hard work from the pre-production phase will make
Concept this step much easier.
Material
• You will be at a computer for most of this process, making it as
pain-free as possible is very important.
A Comfy • Set up your workstation for comfort and ergonomics.
Workstation
General Concepts
process of game production
3.Coding
• It is ……………….;
There are hundreds or programming languages to choose from,
and the choice can be daunting, but here are some good suggestions.
• there are tools freely available for game makers of any skill or
experience level. These kinds of tools include libraries of pre-made
utilities for use in :
• ……………………………..
• ……………………………..
• ……………………………….
• It's much harder to give a high-level overview of this step, since the
approaches can differ so much.
4
General Concepts
process of game production
3. Coding step requirements
• Computer, Mobile, devices,…
Hardware • Robust , destined for graphics development.
• This is where a model like UML can come in handy. Even
during coding, you will need to consult the material you
Design
Document made in the Conceptualization step
• According to technology of game development, Istall the
Software required tool, SDK, IDE,…
environnement
General Concepts
process of game production
4.Distribution
• In this step of the process, The game is already done, tested, and
ready to disturbed.
• It is , perhaps, the most important step.
• What good is a game if nobody plays it?
• It is important to let people know that the game even exists.
• Publish it on Internet games sotres (App store, play Store,…)
• Use social media to inform users about the game
• They can show a representative slice of a game while still highlighting its best features.
5
General Concepts :
process of game production
4. Distribution step requirements
• Web site :The game needs some sort of web presence
Branding
• Social media : share a descriptive announce of the game
• Create animated banners, short videos to promote the game
Pubs and Ads
• create for example a YouTube channel
• Upload the game Mobile applications stores (AppSotre, playstore),
• This way aims to classify the game in the adequate category and
Mobile stores facilitate its access from games having the same game class
Graphic design
6
Graphic design
User Interface and User Experience
• As gamers and game developers we know that immersion is everything.
When you're immersed you lose track of time and become involved in
what the game is presenting.
• A major challenge is how easy it is for your player to convert an idea into
an in game action that is, how fluid your game's ………………….is and how
well-designed its …………………… is.
• A game hurts itself by providing too little information or too much,
requiring too many inputs, confusing the player with unhelpful prompts or
making it hard for a new player to interact.
• Poor UI design …………………………………….
Graphic design
User Interface and User Experience
• What Are UI and UX?
“UI, or User Interface, refers to the methods (keyboard control, mouse
control) and interfaces (inventory screen, map screen) through which a user
interacts with your game. “
“UX, or User Experience, refers to how intuitive and enjoyable those
interactions are.”
• To look at it another way:
• the UI of a car is its steering wheel, its pedals, the dials and controls on the
dashboard;
• the UX of the car comes from intangibles like the brake pedal being responsive, the
engine smoothly accelerating when you step on the gas, the gear stick having just the
right amount of resistance - those things that make the car enjoyable to drive.
7
Graphic design
User Interface and User Experience
Graphic design
User Interface
• A Good UI
• The role of a good UI is to provide …………. information ……… and
………
• We can summarize the process of UI design to six fundamental
guidelines:
1. Predict what the user wants to know, and give them that information.
2. Information must be easy to find.
3. UI should be easy to use and navigate.
• Use established patterns where you can: Everyone knows that Ctrl-Click adds items
to the selection, so don't make it swap items instead.
4. Make the user's location in the menu system obvious, and make it obvious
where the user can go and what they can do from there.
5. Minimise load times and avoid animations in menus.
6. Eliminate or simplify repetitive tasks.
8
Graphic design
User Interface
• Games With Poor UIs
• The user's choice of input is extremely relevant to
the user experience, although it's not the whole
story.
• For example, someone who is used to a touch interface is
going to find a button interface awkward,, but a well-
designed button interface will still be easy to understand
and predict.
Graphic design
Interface flowchart
1. Before starting on the individual screens, ………………… …………
……………………
2. Make a flowchart, called also the “………………”, of all those screens.
• It is a handy flowchart that states how do all those screens relate to each other.
• These are tough questions, and you will probably have
to make changes to the screen flow as you progress
through the design process.
• Example :When you complete a level, which screen comes
first? Should you be able to go to the high score list from the
main menu?
9
Graphic design
the Screen Flowchat
Graphic design
Make the Wireframes
• The wireframing is about making the basic
……….. of the screens, ……………..
• This is still about interaction design, but
this time we start to think seriously about
positioning and size.
•A wireframe is a …………………
………………………….
10
Graphic design
Make the Wireframes
• To wireframe the game interface :
1. Choose the ……………………………………..
2. Use a template that supports all your device resolutions.
3. make a group for every screen of your game. Fill them with your
wireframes as you go along.
4. When making a destructive change, ………………………
…………………………………………. You can always go back that way.
5. Work in greyscale. Emphasize buttons ………………………………...
6. No rounded corners yet: you will do a lot of re-sizing and plain rectangles
are much easier to work with.
Game components
Game Sprites
• Originally sprites referred to independent objects that are
composited together, by hardware, with other elements
such as a background.
• This occurs as each scan line is prepared for the video
output device without involvement of the main CPU and
without the need for a full-screen frame buffer.
• Sprites can be positioned or altered by setting attributes
used during the hardware composition process
• Use of the term sprite has expanded to refer to any two-
dimensional bitmap used as part of a graphics display, even
if drawn into a frame buffer (by either software or a GPU).
11
Game components
Button design
• Basic principles of buttons design
• button has to follow the basic principles of design.
• It should……………………….., most of the time.
• Both the icon and the button’s base should have a strong value contrast.
• Think about the reason why your buttons should be made of a certain
material, or painted in a certain color…
• should they be rounded or sharp, and why?
• Thinking carefully about the …………………… will help you to find the
right visual idea much, ………………….. when you start drawing it.
Game components
Button design
• Position in space
• Good buttons have one key aspect in common: their position
in space, the distance or depth at which they are put, relative
to us.
• The button should feel like it’s on a different plane or world
than the gameplay.
• Volume
• Good buttons tend to convey a ………………………. .
• They feel like they can be pushed!
• Our fingers are drawn to things they can press against.
12
Game components
Button design
• Simple Icons
• The icon’s visual language should be …………..
• The icon’s meaning has to be clear in a split
second.
• This is also why we reuse the same icons in every
game:
• even a rookie player knows what the play, forward and
previous or rewind logos mean, as they’re present on all
sorts of audio devices and apps.
• A web libraries (http://vectoricons.org,
http://www.flaticon.com, http://flaticons.net/ )
13
