pages/SDL-Tutorial-Pong.html-inc

   1 <div class="pod">
   2 <!-- INDEX START -->
   3 <h3 id="TOP">Index</h3>
   4
   5 <ul><li><a href="#PONG_TUTORIAL">PONG TUTORIAL</a>
   6 <ul><li><a href="#Part_1_We_start_with_a_Rect">Part 1: We start with a Rect</a></li>
   7 <li><a href="#Part_0_quot_The_Screen_quot">Part 0: &quot;The Screen&quot;</a>
   8 <ul><li><a href="#Creating_an_empty_event_loop">Creating an (empty) event loop</a></li>
   9 </ul>
  10 </li>
  11 <li><a href="#Part_1_cont_Drawing_our_Rect_on_the_">Part 1 (cont.) - Drawing our Rect on the screen</a></li>
  12 <li><a href="#Part_2_Our_first_event_tracking_user">Part 2 - Our first event: tracking user movement</a>
  13 <ul><li><a href="#Hey_don_t_move_away_from_the_court_O">Hey, don't move away from the court! Our first collision detection.</a></li>
  14 </ul>
  15 </li>
  16 <li><a href="#Part_3_Enter_quot_the_Ball_quot">Part 3 - Enter &quot;the Ball&quot;</a>
  17 <ul><li><a href="#Some_vetorial_background">Some vetorial background</a></li>
  18 </ul>
  19 </li>
  20 <li><a href="#Part_4_Collision_Detection">Part 4 - Collision Detection</a></li>
  21 <li><a href="#Part_5_Our_hero_s_nemesis_appears">Part 5 - Our hero's nemesis appears</a>
  22 <ul><li><a href="#really_basic_IA">(really) basic IA</a></li>
  23 </ul>
  24 </li>
  25 <li><a href="#Part_6_Counting_and_showing_the_scor">Part 6 - Counting (and showing) the score</a>
  26 </li>
  27 </ul>
  28 </li>
  29 </ul><hr />
  30 <!-- INDEX END -->
  31
  32 <h1 id="PONG_TUTORIAL">PONG TUTORIAL</h1><p><a href="#TOP" class="toplink">Top</a></p>
  33 <div id="PONG_TUTORIAL_CONTENT">
  34 <p>This tutorial is intended to help you build your very own version of the Pong game and/or variations of it, using SDL Perl.</p>
  35 <p>Just in case you live under a rock, Pong is one of the earliest arcade games, a true classic by Atari Inc. The game has two simple rectangles scrolling up and down trying to hit a (square) ball that bounces around, and could be thought of as a table tennis simulation.</p>
  36
  37 </div>
  38 <h2 id="Part_1_We_start_with_a_Rect">Part 1: We start with a Rect</h2>
  39 <div id="Part_1_We_start_with_a_Rect_CONTENT">
  40 <p>In Pong, the player controls a rectangle that moves up and down, so creating the rectangle looks like a good place to start:</p>
  41 <p>&nbsp;</p>
  42 <pre>   my $player = SDL::Game::Rect-&gt;new({
  43                        -top    =&gt; 10,
  44                        -left   =&gt; 20,
  45                        -width  =&gt; 6,
  46                        -height =&gt; 32,
  47                 });
  48
  49 </pre>
  50 <p>&nbsp;</p>
  51 <p>That creates a new <cite>SDL::Game::Rect</cite> object, a rectangle, with the given width/height dimensions and in the given top/left position of the screen.</p>
  52 <p>Wait. Did I say... <i>&lt;screen</i>&gt;?</p>
  53
  54 </div>
  55 <h2 id="Part_0_quot_The_Screen_quot">Part 0: &quot;The Screen&quot;</h2>
  56 <div id="Part_0_quot_The_Screen_quot_CONTENT">
  57 <p>In SDL Perl, creating a window screen is very easy and straightforward:</p>
  58 <p>&nbsp;</p>
  59 <pre>  use SDL;
  60   use SDL::App;
  61
  62   my $app = SDL::App-&gt;new(
  63                  -title  =&gt; 'Pong',  # set window title
  64                  -width  =&gt; 640,     # window width
  65                  -height =&gt; 480,     # window height
  66           );
  67
  68 </pre>
  69 <p>&nbsp;</p>
  70 <p>That's it. If you run this code, you'll see a window appear and disappear almost instantly. Why doesn't it stay up? Well, the code is processed linearly, like usual programs are, and with no hidden magic. So, you basically said &quot;create a window&quot; and then the program ended - destroying the window. In order to keep it up and running, listening for events, you need an event loop. </p>
  71
  72 </div>
  73 <h3 id="Creating_an_empty_event_loop">Creating an (empty) event loop</h3>
  74 <div id="Creating_an_empty_event_loop_CONTENT">
  75 <p>An event loop is a simple infinite loop that captures events (like a key pressed or released from the keyboard, mouse movement, etc) and either does something about it or dispatches it to any object that might.</p>
  76 <p>For this simple game we don't need a very sofisticated event loop, so let's create a simple one.</p>
  77 <p>&nbsp;</p>
  78 <pre>  event_loop() while 1;
  79
  80 </pre>
  81 <p>&nbsp;</p>
  82 <p>Yay, an infinite loop! Now we are free to define our very own event loop any way we want. Let's make it an empty sub for starters:</p>
  83 <p>&nbsp;</p>
  84 <pre>  sub event_loop {
  85   }
  86
  87 </pre>
  88 <p>&nbsp;</p>
  89 <p>Ok. If you run it, you'll see your <code>$app</code> window displayed until you force to shutdown the program by typing <code>Ctrl-C</code> or something. Other than that, our event loop doesn't do anything, </p>
  90
  91 </div>
  92 <h2 id="Part_1_cont_Drawing_our_Rect_on_the_">Part 1 (cont.) - Drawing our Rect on the screen</h2>
  93 <div id="Part_1_cont_Drawing_our_Rect_on_the_-2">
  94 <p># TODO</p>
  95
  96 </div>
  97 <h2 id="Part_2_Our_first_event_tracking_user">Part 2 - Our first event: tracking user movement</h2>
  98 <div id="Part_2_Our_first_event_tracking_user-2">
  99 <p># TODO</p>
 100 <p>Now let's query some events!</p>
 101 <p>First, we need to use the <cite>SDL::Event</cite> module. Add this to the beginning of our code:</p>
 102 <p>&nbsp;</p>
 103 <pre>  use SDL::Event;
 104   my $event = SDL::Event-&gt;new;
 105
 106 </pre>
 107 <p>&nbsp;</p>
 108
 109
 110
 111
 112 <p>Now let's rewrite the <code>event_loop</code> subroutine to take advantage of our event object. The new subroutine should look like this:</p>
 113 <p>&nbsp;</p>
 114 <pre>  sub event_loop {
 115       # first we poll if an event occurred...
 116       while ($event-&gt;poll) {
 117
 118           # if there is an event, we check its type
 119           my $type = $event-&gt;type
 120
 121           # handle window closing
 122           exit if $type == SDL_QUIT;
 123       }
 124   }
 125
 126 </pre>
 127 <p>&nbsp;</p>
 128 <p>#TODO</p>
 129
 130 </div>
 131 <h3 id="Hey_don_t_move_away_from_the_court_O">Hey, don't move away from the court! Our first collision detection.</h3>
 132 <div id="Hey_don_t_move_away_from_the_court_O-2">
 133
 134 </div>
 135 <h2 id="Part_3_Enter_quot_the_Ball_quot">Part 3 - Enter &quot;the Ball&quot;</h2>
 136 <div id="Part_3_Enter_quot_the_Ball_quot_CONT">
 137 <p>#TODO</p>
 138
 139 </div>
 140 <h3 id="Some_vetorial_background">Some vetorial background</h3>
 141 <div id="Some_vetorial_background_CONTENT">
 142 <p>#TODO</p>
 143
 144 </div>
 145 <h2 id="Part_4_Collision_Detection">Part 4 - Collision Detection</h2>
 146 <div id="Part_4_Collision_Detection_CONTENT">
 147 <p>#TODO</p>
 148
 149 </div>
 150 <h2 id="Part_5_Our_hero_s_nemesis_appears">Part 5 - Our hero's nemesis appears</h2>
 151 <div id="Part_5_Our_hero_s_nemesis_appears_CO">
 152 <p>#TODO</p>
 153
 154 </div>
 155 <h3 id="really_basic_IA">(really) basic IA</h3>
 156 <div id="really_basic_IA_CONTENT">
 157 <p>#TODO</p>
 158
 159 </div>
 160 <h2 id="Part_6_Counting_and_showing_the_scor">Part 6 - Counting (and showing) the score</h2>
 161 <div id="Part_6_Counting_and_showing_the_scor-2">
 162 <p>#TODO
 163 </p>
 164
 165 </div>
 166 </div>