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