3.1. G RAPHICS I The use of images within games

Reflections and advice on the games proposed in the Week 2 Hand-in

Brief exploration of the different roles images serve within games

Images play many roles within 2 D games, including: Character sheets Special Effects GUI/HUD elements Background tiles / elements Animations Game objects

Images also play an important role in 3D games in terms of texturing 3D surfaces, providing information driving the rendering process. The roles of image include (but are not limited to): diffuse, specular, normal, height, emissive maps etc. Specular Diffuse Normal Height

A repository of images (including GUI/HUD elements, fonts, sprite and tile sheets, animations, etc. is available to help you source graphics for your game. You can also source images from other sources such as Google Images, etc. Important: Infringing copyright is wrong. It is your responsibility to ensure you have adequate usage permission. To do: Explore Images

Properties defining an image and common image types

● Type (e.g. bitmap, vector) ● Dimension (pixel width and height) ● Channels (e.g. Red,Green,Blue,Alpha) ● Colour depth (8/16/24 bits per channel etc.) ● Compression type An image can be defined in terms of: Bitmap, 768x512 pixel image Four channels (red, green, blue, alpha) 8-bits per channel (32 bits/pixel)

● If an image does not have an alpha channel it is opaque See GraphicAssetDemos of the Javacode repository: ● ImageTypeTest ● Images with an alpha channel may be either transparent or translucent. Aside: Combining a transparent or translucent image with another image is a process known as compositing. Explored next lecture. OpaqueTransparentTranslucent

There are lots of different image formats. Four of the most common are BMP, JPG, GIF and PNG. DDS is also available in XNA. Suggestion: For hassle free development in this module, store your graphics in PNG format.

Loading and storing images in XNA and Java and associated performance issues

Load image into Asset Manager Obtain image from Asset Manager AssetManager. addImageAsset (name, URL); graphicalAsset = AssetManager. retrieveGraphicalAsset (name); Texture2D texture = Game. Content.Load (name); Load image from (+into) the Game’s ContentManager When possible images will be automatically stored in graphics memory. Load request Image data

Aside: The XNA ContentManager Load method loads and caches assets, returning a reference on subsequent calls. Memory space on graphics cards is a limiting factor (for most games), i.e. all assets cannot be kept in graphics memory at the same time. Most games repeatedly use the same set of assets. Within games it is common to have some form of asset/space management, capable of: Providing game objects with references to requested assets Loading/unloading assets (per level, dynamically, etc.) Aside: Asset Management is explored in a later lecture. To do: Plan your image needs

SpriteSortMode determines how textures are sorted before rendered BlendState determines how textures are blended together Aside: On the surface both approaches look somewhat different – although the Java implementation can be viewed as an instance of one higher-level implementation of a SpriteBatch Call the game layer draw method to draw all visible game objects in a layer (thereby invoking the draw method of game objects as needed) Begin a SpriteBatch, draw textures, and then end the SpriteBatch GameLayer.draw (graphics2D) GameObject.draw(graphics2D) SpriteBatch.Begin ( spriteSortMode, blendState ); SpriteBatch.Draw ( texture, position, colour); SpriteBatch.End ();

The importance of maintaining a correct draw order was introduced in 2.2. Architectural Design I – Design Basics Castle wall drawn in front of background scenery Hud drawn on top of everything Player drawn in front of background and castle wall, but behind rope bridge. To do: Plan your draw order Update the GameObject. drawOrder property (the GameLayer’s draw automatically draws in an ordered sequence) Either: use several SpriteBatch (drawing up in ‘layers’ containing objects of equal depth) or use a SpriteBatch sprite sort mode/draw method supporting layer depth). GameObject. setDrawOrder (int drawOrder) SpriteBatch. Draw(..., float layerDepth )

In some games you can only display one bit of your game world on the screen (viewport) at any one time. There is no point in spending effort ‘drawing’ objects that fall outside of the viewport.

In order to draw an image (XNA/Java) the graphics card must configure itself, e.g. setup for texture, etc. Excellent performance occurs when the graphics card draws the same image lots of different times in one batch (i.e. only a single setup cost) Poor performance occurs when the graphics card needs to setup a new image each draw request. Hint: Store multiple images on a single image sheet and then select draw regions is often useful. Aside: Sorting by texture (for performance) and sorting by draw order conflict with one another!

To do: Based on feedback on Week 2 hand-in, revise design if needed Think about types of images in your game, and how they might be ordered during a draw Explore image repository (and other sources) for suitable source art Today we explored: Use of images within games and common image characteristics Loading, storing and drawing images alongside common design issues