1. CS 134
More Graphics

2. Today in Video Games

3. Due tonight! Any questions?
Homework 1
Due tonight!
Any questions?

4. The Game Loop So Far while (!shouldExit) {
System.arraycopy(kbState, 0, kbPrevState, 0, kbState.length);
// Actually, this runs the entire OS message pump.
window.display();
if (!window.isVisible()) {
shouldExit = true;
break; }
// Check keyboard input for player
// Update positions and animations of all sprites
gl.glClearColor(0, 0, 0, 1);
gl.glClear(GL2.GL_COLOR_BUFFER_BIT);
// Draw background(s)
// Draw sprites
// Draw more background(s)
// Present to the player.
window.swapBuffers();

5. Scrolling
All sprites AND the camera should have their position stored in world space.
All drawing commands take pixel space values.
When scrolling, you UPDATE the camera's world space position so that you CALCULATE the sprites' pixel space position.

6. Really, the camera is in the world!
Scrolling
Really, the camera is in the world!

7. Scrolling Think of the camera as being positioned in the world as well
class Camera {
public int x;
public int y; }

8. Scrolling
Given a camera c, and a sprite s, where do you draw the sprite?
c.x, c.y
s.x, s.y

9. Scrolling
Given a camera c, and a sprite s, where do you draw the sprite?
c.x, c.y
s.x, s.y
s.x - c.x
s.y - c.y

10. Scrolling Other features to think about with cameras:
Prevent the camera from leaving the world
Calculate the camera's position based on the player's position
Which of the two must win?

11. Timing & Scrolling
Questions?

12. Backgrounds++
Side/Top down
Isometric
Hex grid
3/4ths View

13. Side/Top Down

14. Side/Top Down
Level is 2D array
Tile position:
x*w
y*h

15. 3/4ths View

16. 3/4ths View No change from normal rendering
Draw top to bottom, to follow the Painter's Algorithm
If you have height, you must make sure top to bottom follows floor position.

17. 3/4ths View Known info: tileW tileH imageW imageH Tile position:
x * tileW
y * tileH

18. Isometric

19. Isometric Level is still 2D array of indexes Tile position:
(x+y) * half_w
(-1-x+y) * half_h

20. Hex Grid

21. Hex Grid Still 2D array of indexes Tile position: x*w (if y is even)
(if y is odd)
y*ystep

22. Defs are still always a 2D array Questions?
Backgrounds++
Defs are still always a 2D array
Questions?

23. Parallax Scrolling
Let's look at a video

24. Parallax Scrolling Simple parallax
Farther away things appear smaller, move slower
Can have multiple layers

25. Parallax Scrolling Consider having multiple layers For example
BG1: offset by ???
BG2: offset by ???
You can also have
FG2: offset by ???

26. Parallax Scrolling Consider having multiple layers For example
BG1: offset by camX/2, camY/2
BG2: offset by camX/4, camY/4
You can also have
FG2: offset by camX*1.5, camY*1.5

27. Parallax Scrolling
Questions?

28. Homework Due March 1st (in two weeks)
Simple tiled background, significantly bigger than screen, at least 40x40 tiles.
Controllable camera
Controllable animating sprite moving around
Camera must not be allowed to exit the world.
Okay if character moves with arrows and camera moves with WASD.

29. Homework Sites with existing art: http://www.spriters-resource.com/
Note that sprites are usually all in one file, you will have to cut it up into pieces.

30. Homework Many options for extra credit:
Do an isometric or hexgrid view
Add parallax scrolling with at least two extra background layers
Add intelligent camera controls (character must not be always centered!)
Research on “camera controls with dead zone”