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="#CATEGORY">CATEGORY</a></li>
   7 <li><a href="#Part_1_We_start_with_a_Rect">Part 1: We start with a Rect</a></li>
   8 <li><a href="#Part_0_quot_The_Screen_quot">Part 0: &quot;The Screen&quot;</a>
   9 <ul><li><a href="#Creating_an_empty_event_loop">Creating an (empty) event loop</a></li>
  10 </ul>
  11 </li>
  12 <li><a href="#Part_1_cont_Drawing_our_Rect_on_the_">Part 1 (cont.) - Drawing our Rect on the screen</a></li>
  13 <li><a href="#Part_2_Our_first_event_tracking_user">Part 2 - Our first event: tracking user movement</a>
  14 <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>
  15 </ul>
  16 </li>
  17 <li><a href="#Part_3_Enter_quot_the_Ball_quot">Part 3 - Enter &quot;the Ball&quot;</a>
  18 <ul><li><a href="#Some_vetorial_background">Some vetorial background</a></li>
  19 </ul>
  20 </li>
  21 <li><a href="#Part_4_Collision_Detection">Part 4 - Collision Detection</a></li>
  22 <li><a href="#Part_5_Our_hero_s_nemesis_appears">Part 5 - Our hero's nemesis appears</a>
  23 <ul><li><a href="#really_basic_IA">(really) basic IA</a></li>
  24 </ul>
  25 </li>
  26 <li><a href="#Part_6_Counting_and_showing_the_scor">Part 6 - Counting (and showing) the score</a>
  27 </li>
  28 </ul>
  29 </li>
  30 </ul><hr />
  31 <!-- INDEX END -->
  32
  33 <h1 id="PONG_TUTORIAL">PONG TUTORIAL</h1><p><a href="#TOP" class="toplink">Top</a></p>
  34 <div id="PONG_TUTORIAL_CONTENT">
  35 <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>
  36 <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>
  37
  38 </div>
  39 <h2 id="CATEGORY">CATEGORY</h2>
  40 <div id="CATEGORY_CONTENT">
  41 <p>Tutorials</p>
  42
  43 </div>
  44 <h2 id="Part_1_We_start_with_a_Rect">Part 1: We start with a Rect</h2>
  45 <div id="Part_1_We_start_with_a_Rect_CONTENT">
  46 <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>
  47 <p>&nbsp;</p>
  48 <pre>   my $player = SDL::Game::Rect-&gt;new({
  49                        -top    =&gt; 10,
  50                        -left   =&gt; 20,
  51                        -width  =&gt; 6,
  52                        -height =&gt; 32,
  53                 });
  54
  55 </pre>
  56 <p>&nbsp;</p>
  57 <p>That creates a new <a href="/SDL-Game::Rect.html">SDL::Game::Rect</a> object, a rectangle, with the given width/height dimensions and in the given top/left position of the screen.</p>
  58 <p>Wait. Did I say... <i>&lt;screen</i>&gt;?</p>
  59
  60 </div>
  61 <h2 id="Part_0_quot_The_Screen_quot">Part 0: &quot;The Screen&quot;</h2>
  62 <div id="Part_0_quot_The_Screen_quot_CONTENT">
  63 <p>In SDL Perl, creating a window screen is very easy and straightforward:</p>
  64 <p>&nbsp;</p>
  65 <pre>  use SDL;
  66   use SDL::App;
  67
  68   my $app = SDL::App-&gt;new(
  69                  -title  =&gt; 'Pong',  # set window title
  70                  -width  =&gt; 640,     # window width
  71                  -height =&gt; 480,     # window height
  72           );
  73
  74 </pre>
  75 <p>&nbsp;</p>
  76 <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>
  77
  78 </div>
  79 <h3 id="Creating_an_empty_event_loop">Creating an (empty) event loop</h3>
  80 <div id="Creating_an_empty_event_loop_CONTENT">
  81 <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>
  82 <p>For this simple game we don't need a very sofisticated event loop, so let's create a simple one.</p>
  83 <p>&nbsp;</p>
  84 <pre>  event_loop() while 1;
  85
  86 </pre>
  87 <p>&nbsp;</p>
  88 <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>
  89 <p>&nbsp;</p>
  90 <pre>  sub event_loop {
  91   }
  92
  93 </pre>
  94 <p>&nbsp;</p>
  95 <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>
  96
  97 </div>
  98 <h2 id="Part_1_cont_Drawing_our_Rect_on_the_">Part 1 (cont.) - Drawing our Rect on the screen</h2>
  99 <div id="Part_1_cont_Drawing_our_Rect_on_the_-2">
 100 <p># TODO</p>
 101
 102 </div>
 103 <h2 id="Part_2_Our_first_event_tracking_user">Part 2 - Our first event: tracking user movement</h2>
 104 <div id="Part_2_Our_first_event_tracking_user-2">
 105 <p># TODO</p>
 106 <p>Now let's query some events!</p>
 107 <p>First, we need to use the <a href="/SDL-Event.html">SDL::Event</a> module. Add this to the beginning of our code:</p>
 108 <p>&nbsp;</p>
 109 <pre>  use SDL::Event;
 110   my $event = SDL::Event-&gt;new;
 111
 112 </pre>
 113 <p>&nbsp;</p>
 114
 115
 116
 117
 118 <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>
 119 <p>&nbsp;</p>
 120 <pre>  sub event_loop {
 121       # first we poll if an event occurred...
 122       while ($event-&gt;poll) {
 123
 124           # if there is an event, we check its type
 125           my $type = $event-&gt;type
 126
 127           # handle window closing
 128           exit if $type == SDL_QUIT;
 129       }
 130   }
 131
 132 </pre>
 133 <p>&nbsp;</p>
 134 <p>#TODO</p>
 135
 136 </div>
 137 <h3 id="Hey_don_t_move_away_from_the_court_O">Hey, don't move away from the court! Our first collision detection.</h3>
 138 <div id="Hey_don_t_move_away_from_the_court_O-2">
 139
 140 </div>
 141 <h2 id="Part_3_Enter_quot_the_Ball_quot">Part 3 - Enter &quot;the Ball&quot;</h2>
 142 <div id="Part_3_Enter_quot_the_Ball_quot_CONT">
 143 <p>#TODO</p>
 144
 145 </div>
 146 <h3 id="Some_vetorial_background">Some vetorial background</h3>
 147 <div id="Some_vetorial_background_CONTENT">
 148 <p>#TODO</p>
 149
 150 </div>
 151 <h2 id="Part_4_Collision_Detection">Part 4 - Collision Detection</h2>
 152 <div id="Part_4_Collision_Detection_CONTENT">
 153 <p>#TODO</p>
 154
 155 </div>
 156 <h2 id="Part_5_Our_hero_s_nemesis_appears">Part 5 - Our hero's nemesis appears</h2>
 157 <div id="Part_5_Our_hero_s_nemesis_appears_CO">
 158 <p>#TODO</p>
 159
 160 </div>
 161 <h3 id="really_basic_IA">(really) basic IA</h3>
 162 <div id="really_basic_IA_CONTENT">
 163 <p>#TODO</p>
 164
 165 </div>
 166 <h2 id="Part_6_Counting_and_showing_the_scor">Part 6 - Counting (and showing) the score</h2>
 167 <div id="Part_6_Counting_and_showing_the_scor-2">
 168 <p>#TODO
 169 </p>
 170
 171 </div>
 172 </div>