Difference between revisions of "Advanced C++ Programming Tutorial 2"

From Chilipedia
Jump to: navigation, search
(→‎Video Timestamp Index)
(→‎Tutorial 2.2)
 
(8 intermediate revisions by the same user not shown)
Line 16: Line 16:
  
 
== Video Timestamp Index ==
 
== Video Timestamp Index ==
−
[https://youtu.be/8_U_pake6J0 Tutorial 2.1]
+
===[https://youtu.be/8_U_pake6J0 Tutorial 2.1]===
 
<div class="mw-collapsible mw-collapsed"><br />
 
<div class="mw-collapsible mw-collapsed"><br />
 
* What are transformations? [https://youtu.be/8_U_pake6J0?t=0m26s 0:26]
 
* What are transformations? [https://youtu.be/8_U_pake6J0?t=0m26s 0:26]
Line 47: Line 47:
 
</div>
 
</div>
  
−
[https://youtu.be/ARCytFIwis8 Tutorial 2.2]
+
===[https://youtu.be/ARCytFIwis8 Tutorial 2.2]===
−
* WORK-IN-PROGRESS
+
<div class="mw-collapsible mw-collapsed"><br />
 +
* Scrolling with a Camera system [https://youtu.be/ARCytFIwis8?t=0m54s 0:54]
 +
<div class="mw-collapsible-content">
 +
:* Pipeline (Filter sequence) with camera added [https://youtu.be/ARCytFIwis8?t=2m58s 2:58]
 +
:* Camera implementation [https://youtu.be/ARCytFIwis8?t=3m24s 3:24]
 +
:* Demo time [https://youtu.be/ARCytFIwis8?t=6m29s 6:29]
 +
</div>
 +
* Camera zooming (scaling transformation) [https://youtu.be/ARCytFIwis8?t=6m50s 6:50]
 +
<div class="mw-collapsible-content">
 +
:* Mind the order of the transformations (translation first, scaling second) [https://youtu.be/ARCytFIwis8?t=8m41s 8:41]
 +
</div>
 +
* Concatenating multiple transformations [https://youtu.be/ARCytFIwis8?t=9m46s 9:46]
 +
* Implementation of concatenation using a <code>Drawable</code> class [https://youtu.be/ARCytFIwis8?t=13m41s 13:41]
 +
<div class="mw-collapsible-content">
 +
:* Demo time [https://youtu.be/ARCytFIwis8?t=22m06s 22:06]
 +
</div>
 +
* Recap: how to chain filter operations (Pipeline concept) [https://youtu.be/ARCytFIwis8?t=22m25s 22:25]
 +
* Homework assignments [https://youtu.be/ARCytFIwis8?t=23m53s 23:53]
 +
</div>
  
 
== Links ==
 
== Links ==

Latest revision as of 04:04, 2 April 2020

In this tutorial we learn how to transform our shit. Move it around, make it bigger (no pills or pumps required), flip it and reverse it. And later on we make a camera system to scroll our shit in the world. You're gonna like it.

Topics

Part 1

  • Polyline drawing
  • Vertices
  • Trivial line clipping
  • Translation
  • Flipping across an axis
  • Screen coordinate transformation
  • Scaling

Part 2

  • Camera scrolling
  • Concatenating (combining) transforms
  • Drawable packet design

Video Timestamp Index

Tutorial 2.1


  • What are transformations? 0:26
  • Storing vertices and drawing polygons/polylines 1:00
  • Implementing Graphics::DrawClosedPolyline() 2:30
  • Introducing a Star polygon generator class 3:40
  • Clipping (trivial implementation) 4:22
  • For more advanced line clipping, you can use the Cohen-Sutherland line clipping algorithm
  • Translation: moving your model on the screen 6:13
  • Coordinate systems: screen vs. world (/math model) coordinates 7:09
  • Implementing a Coordinate Transformer class 8:25
- Essentially this is a "screen translator"; a structured way to apply transformations
- analogy of an "assembly line", this will be developed into a Pipeline system
  • Implementing a persistant Entity class to hold models 13:37
  • Integrating Entity control in Game::UpdateModel() (the game loop) 16:06
  • Reasons for keeping a static model: avoid floating point calculation drift 16:30
  • Note: Rotations will be covered in a later tutorial
  • Note: Scaling sprites requires more advanced techniques

Tutorial 2.2


  • Scrolling with a Camera system 0:54
  • Pipeline (Filter sequence) with camera added 2:58
  • Camera implementation 3:24
  • Demo time 6:29
  • Camera zooming (scaling transformation) 6:50
  • Mind the order of the transformations (translation first, scaling second) 8:41
  • Concatenating multiple transformations 9:46
  • Implementation of concatenation using a Drawable class 13:41
  • Recap: how to chain filter operations (Pipeline concept) 22:25
  • Homework assignments 23:53

Links

Homework

  1. Create random starfield in large rectangular region with randomized positions, sizes, and shapes. Stars should not overlap.
  2. Implement scrolling via mouse dragging.
  3. Process vertices in-place (don't use a buffered polyline copy).
  4. Only draw models that appear in the viewport.
  5. Animate the scale (size) and color of stars so that they pulsate.

The Homework solution is here.

See also

Retrieved from "https://wiki.planetchili.net/index.php?title=Advanced_C%2B%2B_Programming_Tutorial_2&oldid=3147"