CS12020 for CGVG. Practical 1. Jim Finnis

Transcription

1 CS12020 for CGVG Practical 1 Jim Finnis (jcf1@aber.ac.uk)

2 About me 20 years in the games industry (more or less) Windows, PS2, Xbox, Gamecube, Wii development experience DirectX (more than I like to think about) OpenGL As well as a few engines... These days I'm studying for a PhD, giving hormones to robots

3 What we'll be covering Using the Arduino and custom-built shield as a very simple gaming platform Building a simple game Learning a little about displays Learning a little about inputs Because even with the best games engines, you always need to know what's really going on underneath.

4 What we'll be covering Learning about the architecture of a typical game The main loop State machines Most importantly, building on and using your knowledge of C.

5 This session Learning about the shield Connecting it Installing the library Running a test program Learning how the display works A simple exercise

6 The Shield Your Arduino, plugged in underneath Digital pin 13 LED y x Buttons 1-5 LED display headers passed though from the Arduino

7 The Shield 8x8 Bi-color LED matrix (red and green) Allows for four colours But can only show one row at a time! There are ways around this. Single red LED Connected to pin 13, like the one on the Arduino 5 buttons

8 Book out your shield! Go to the front and get a shield Sign the form to tell us you have a shield! Collect a worksheet while you're there

9 Connecting your shield Make sure you connect it with the Arduino disconnected from the PC. Make sure you connect it correctly. Double check every time Don't force it.

10 Connecting your shield Two chips and red LED this end Arduino connectors this end 6 pin row 6 pin analog header (labelled A0-A5 on your Arduino)

11 Care for your shield This is my shield. There are many others like it but this one is mine. Keep your shield dry avoid corrosion Keep it in a Tupperware box Don't knock it about or pile things on it Wrap it in cloth, tissue paper in its box Probably a good idea to keep it connected to the Arduino We have spares, but not many And you'll lose your deposit

12 Connecting your shield Now do worksheet 1, section 1 Don't move on yet.

13 How the display works The LED matrix can only show one row at a time (or rather, all rows switched on will show the same pattern) So how can we show a picture with different patterns for each row?

14 Persistence of Vision We very quickly turn show each row in turn by itself About 1000 times a second! This looks like a single picture because of persistence of vision (although it's really a bit more complicated than that) This is how old CRTs used to work Flickering lights at faster than about 16Hz appear steady And this is why low frame rates look bad in games.

15 Interrupts Functions which run automatically in response to hardware events What your program is doing is saved, the interrupt runs, the code goes back to your program. Your code doesn't notice Timers, button presses, etc. (except for a little time lost in the interrupt) This is how multitasking operating systems work

16 Interrupts We output the frame buffer to the LED matrix using an interrupt. Interrupts can be triggered by internal timers as well as external signals Our interrupt redisplays each line of the screen at very short intervals (but it's OK, the library sets it up for you) All you need to do is set pixel values in the frame buffer.the interrupt will do the rest.

17 The frame buffer The frame buffer is an array of values which the system uses to generate the display. The end product of all drawing operations is always a frame buffer. Our frame buffer is an array of 8 short (16 bit) integers Each entry in the array is a row, each adjacent pair of bits is a column one bit for red, one bit for green.

18 The frame buffer data[0] = R G R G R G R G R G R G R G R G data[1] = R G R G R G R G R G R G R G R G data[2] = R G R G R G R G R G R G R G R G data[3] = R G R G R G R G R G R G R G R G data[4] = R G R G R G R G R G R G R G R G data[5] = R G R G R G R G R G R G R G R G data[6] = R G R G R G R G R G R G R G R G data[7] = R G R G R G R G R G R G R G R G

19 Example

20 Example data[0]: = 0 data[1]: = 512 data[2]:? data[3]: should be obvious data[4] and so on should be really obvious

21 Writing to the AberLED frame buffer Luckily for you, you don't need to know how to access the bits directly but it still might be useful to you. For example, setting a whole row to red. To set an individual pixel to a colour, use AberLED.set(x,y,colour) where the colour is GREEN, RED, YELLOW or BLACK.

22 Coordinates The coordinate system for set() x (0,0) is top left This is a fairly common setup y

23 swap()? Your test code starts the system up, sets some pixels and then calls swap(). That's because the AberLED system is double buffered.

24 Tearing and Flickering These used to be common effects in games Tearing is due to the display being refreshed (redrawn onto the physical display) before we've finished working on it. Flickering is due to the need to build up the display in layers, some of which are going to get overdrawn think of a Head Up Display Both problems arise because the frame buffer is being displayed while we're drawing on it!

25 Tearing Also at

26 Flickering Consider the layers in this scene being built up

27 The solution We need to draw everything all at once somehow Obviously we can't really do that But we can build up our image on another frame buffer and then instantly copy it to the display buffer.

28 Double buffering Even better, we can keep two buffers. The back buffer is being drawn on while the front buffer is being displayed, When we've finished drawing, we swap the two buffers over (some people calling this flipping) The buffer we just drew as the back buffer is now the front buffer, and is being displayed The old front buffer now the back buffer, we can write our new picture to it.

29 Double buffering Graphics hardware (or interrupt) rendering the front buffer to the display Front displaying displaying displaying displaying Back drawing drawing drawing drawing Drawing code writing data to the back buffer

30 Double buffering So when you render a frame (a single picture) to the display you must: Clear the display to erase what was in the buffer before Draw your image by writing to the back buffer Swap the back and front buffers What you just drew will now be displayed, What was just displayed will now the back buffer and can be drawn over

31 Double buffering Why are we swapping? Why not just copy the back buffer to the front buffer? Hint: we can do the swap without copying any memory. How?

32 Double buffering We never actually move the buffer data We just swap pointers to it!

33 Pointer swapping buffera bufferb unsigned short buffera[8]; unsigned short bufferb[8]; unsigned short *frontbuffer = buffera; unsigned short *backbuffer = bufferb; back front

34 Pointer swapping buffera bufferb void swap(){ unsigned short *tmp = frontbuffer; frontbuffer = backbuffer; backbuffer = tmp; } back front

35 Pointer swapping buffera bufferb void swap(){ unsigned short *tmp = frontbuffer; frontbuffer = backbuffer; backbuffer = tmp; } back front

36 Pointer swapping buffera bufferb void swap(){ unsigned short *tmp = frontbuffer; frontbuffer = backbuffer; backbuffer = tmp; } back front

37 Pointer swapping buffera bufferb void swap(){ unsigned short *tmp = frontbuffer; frontbuffer = backbuffer; backbuffer = tmp; } back front

38 Pointer swapping buffera bufferb void swap(){ unsigned short *tmp = frontbuffer; frontbuffer = backbuffer; backbuffer = tmp; } back front

39 The Test Code #include <AberLED.h> void setup( ){ AberLED.begin(); AberLED.clear(); for(int i=0;i<8;i++){ AberLED.set(i,i,YELLOW); } AberLED.swap(); } void loop(){ } Include the library definition Start the LED library Clear the back buffer Set pixels (0,0), (1,1), (2,2) and so on to yellow in the back buffer Swap the front and back buffers The front buffer, the one which the interrupt is continuously displaying, will now show what we have drawn.

40 Extra information For those of you interested in the electronics The LED matrix requires 24 control signals one for each row, two for each column (red and green) We're controlling these using just 6 pins on the Arduino using shift registers chips which take a serial signal (i.e. a stream of bits over time) and convert them to a parallel signal (i.e. lots of outputs) More information on the worksheet

41 Making it move Our current program only draws one thing a diagonal line. What about animating something? We can use the Arduino loop() function, which is run repeatedly once setup() has finished.

42 Inside the loop function Clear the display with AberLED.clear() Draw everything Swap the buffers with AberLED.swap() Update variables Delay Why?

43 Exercise 1 Can you make a red dot move left to right across the screen? What variable(s) do you need? How should they change each time round the loop? How do you detect when the dot reaches the edge? What should the variable(s) do when that happens?

44 Exercise 2 Can you make it bounce off the ends instead of wrapping round? Do you need any more variables?

45 Input Your Arduino has 5 buttons You can get the state of each button with the getbutton(int number) if(aberled.getbutton(1)) Serial.println( eek );

46 Exercise 3 Can you change your program to make it move the dot in response to user buttons? Use buttons 1-4 to make the dot change direction, and button 5 to make it stop. What variables do you need? What should you do when the dot goes off the edge? Are there any problems?