Sprites and GB Studio

CS 4730 - Computer Game Design

​

​

CS 4730

A Quick History

• We start with the CRT (cathode ray tube)
• Made up of pixels (picture elements)
• A 300x200 screen would have 200 scan lines of 300 pixels each
• Every other line would get drawn, starting from the top and working it’s way down, then back to the top to draw the other half of the lines
• This is one reason graphics coordinates start with the upper left
• After drawing the scan lines (aka one frame), the ray gun had to line back up at the top
• This delay is called VBLANK

CS 4730

A Quick History

• Early game systems didn’t have enough memory to store one screen’s worth of pixels at a time!
• If a game (old or modern) updates the frame buffer when the scan lines are in the middle of being drawn, tearing occurs
• The fix: have more than one buffer and swap the two during VBLANK
• This swapping is called VSYNC and good frame rates lock to VSYNC

CS 4730

4:3 vs. CRT vs. Pixel Perfect

CS 4730

The Graphics are Amazing!

• “Though still rooted in the work of the first two games, X improves on the visuals even more and features impressive graphical effects.”
• “And despite all of their saccharin-sweet cuteness, the graphics are magnificent. X's dream of producing an interactive cartoon has been fully realized -- the animation is lavish, the textures rich, and even the most superfluous touches have been completely executed.”

​

CS 4730

The Graphics are Amazing!

• Castlevania 3 (NES)
• Super Mario 64 (N64)

​

• So… it’s all relative, huh?

CS 4730

Graphics vs. Visual Design

• Sometimes (most times) you don’t have to have AMAZING graphics
• You need to have the RIGHT graphics
• Tetris wouldn’t be “better” with sweet bump mapping
• Just because we’re using 2D, that doesn’t mean you’re being held back

CS 4730

Graphics vs. Visual Design

CS 4730

Graphics vs. Visual Design

• ​

CS 4730

• ​

CS 4730

CS 4730

Sprites

• Sprites are, in effect, an abstraction of all graphical content
• What a “Sprite” actually is in a given game framework will differ
• In some engines/frameworks, Sprite is a class that has collision detection, movement, etc.
• When all it’s parts are combined together, a sprite often has one or more of the following: texture/image, position, animation frames, collision geometry, other state as defined by the game

CS 4730

Sprites and Spritesheets

• Asset management is important for �any game
• It is impractical to save every single�frame of animation in a separate file
• A spritesheet is a single image, �broken up in a regular pattern where�all the images needed for animation�are stored

CS 4730

Sprites in GB Studio

• Sprites are
• Player characters
• NPCs
• Moving objects
• Collectables
• Anything not�the background
• Sprites have
• Animation
• Collision box

CS 4730

Sprites in GB Studio

• Sprites are
• Player characters
• NPCs
• Moving objects
• Collectables
• Anything not�the background
• Sprites have
• Animation
• Collision box

CS 4730

Sprites in GB Studio

• Sprites are
• Player characters
• NPCs
• Moving objects
• Collectables
• Anything not�the background
• Sprites have
• Animation
• Collision box

CS 4730

Drawing Sprites

• Typically, you want to draw back to front to create the proper layering of objects
• Think of it like a shadow box
• But just because you draw something, it doesn’t mean it’s necessarily going to be seen
• We care about three coordinate systems at the same time:
• Screen coordinates
• World coordinates
• Object coordinates

CS 4730

Screen, World, and Object Coordinates

CS 4730

Scrolling can be… weird…

• Do you move the sprite? The camera? The world around it?
• Each requires a bit different math with the different coordinate sets
• What about drawing objects not on screen?
• If you try to draw them, that’s fine
• The graphics engine / canvas will just ignore them
• But what does that do to your game loop?
• Keeping up with all those objects… Updating all those locations…
• Be smart with how you create and destroy objects!

CS 4730

Parallax Scrolling

• Multiple layers of background, scrolling at different speeds to give the illusion �of depth

CS 4730

Animation

• 2D animation is created from a spritesheet, very similar to a flipbook
• The spritesheet is split into frames and then sets of frames are assigned to various actions
• There are several ways to do this in MonoGame… because it’s not built in…
• You can see a very basic example in the SpriteAnimation repo in GitHub or a more complex one in the Platformer2D example

CS 4730

What about 3D?

• Excluding VR or other specialized displays, even a 3D game is still rendered in 2D for a flat monitor screen...
• So how is it 3D?
• Two main aspects:
• Assets are rendered on all sides
• User has some extra control of the camera to move in all three directions
• The Camera is just the angle and perspective of the player as shown on the screen

CS 4730

Types of Cameras

• Orthographic
• perpendicular to the plane of the game
• Z-­axis? Top-­down perspective.
• Y-­axis? Side scroller.
• Handy for artists!
• Art is done as tiles and easy to manage
• Forces 2D gameplay only

CS 4730

Types of Cameras

• Axonometric
• “off axis” view
• Allows for some 3D gameplay
• Isometric is most common form
• All axes are equal
• Can have other forms by shortening/lengthening some axes for artistic reasons

CS 4730

Types of Cameras

CS 4730

• ​

CS 4730

• ​

CS 4730

CS 4730

CS 4730

• ​

CS 4730

CS 4730