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

From Chilipedia
Jump to: navigation, search
(Created page with "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 one we make a camera system...")
 
(→‎Tutorial 2.2)
 
(25 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
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 one we make a camera system to scroll our shit in the world. You're gonna like it.
+
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 ==
 
== Topics ==
Line 5: Line 5:
 
* Polyline drawing
 
* Polyline drawing
 
* Vertices
 
* Vertices
 +
* Trivial line clipping
 
* Translation
 
* Translation
 
* Flipping across an axis
 
* Flipping across an axis
 
* Screen coordinate transformation
 
* Screen coordinate transformation
 
* Scaling
 
* Scaling
 +
=== Part 2 ===
 +
* Camera scrolling
 +
* Concatenating (combining) transforms
 +
* <code>Drawable</code> packet design
  
 
== Video Timestamp Index ==
 
== Video Timestamp Index ==
−
[https://youtu.be/l-u6uxnOmH0 Tutorial 2.1]
+
===[https://youtu.be/8_U_pake6J0 Tutorial 2.1]===
 +
<div class="mw-collapsible mw-collapsed"><br />
 +
* What are transformations? [https://youtu.be/8_U_pake6J0?t=0m26s 0:26]
 +
* Storing vertices and drawing polygons/polylines [https://youtu.be/8_U_pake6J0?t=1m00s 1:00]
 +
<div class="mw-collapsible-content">
 +
:* Implementing <code>Graphics::DrawClosedPolyline()</code> [https://youtu.be/8_U_pake6J0?t=2m30s 2:30]
 +
:* Introducing a <code>Star</code> polygon generator class [https://youtu.be/8_U_pake6J0?t=3m40s 3:40]
 +
</div>
 +
* Clipping (trivial implementation) [https://youtu.be/8_U_pake6J0?t=4m33s 4:22]
 +
<div class="mw-collapsible-content">
 +
:* For more advanced line clipping, you can use the Cohen-Sutherland line clipping algorithm
 +
</div>
 +
* Translation: moving your model on the screen [https://youtu.be/8_U_pake6J0?t=6m13s 6:13]
 +
* Coordinate systems: screen vs. world (/math model) coordinates [https://youtu.be/8_U_pake6J0?t=7m09s 7:09]
 +
<div class="mw-collapsible-content">
 +
:* Implementing a Coordinate Transformer class [https://youtu.be/8_U_pake6J0?t=8m25s 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
 +
</div>
 +
* Implementing a persistant <code>Entity</code> class to hold models [https://youtu.be/8_U_pake6J0?t=13m37s 13:37]
 +
* Integrating Entity control in <code>Game::UpdateModel()</code> (the game loop) [https://youtu.be/8_U_pake6J0?t=16m06s 16:06]
 +
<div class="mw-collapsible-content">
 +
:* Reasons for keeping a static model: avoid floating point calculation drift [https://youtu.be/8_U_pake6J0?t=16m30s 16:30]
 +
</div>
 +
* Scaling polylines [https://youtu.be/8_U_pake6J0?t=18m36s 18:36]
 +
<div class="mw-collapsible-content">
 +
:* Note: Rotations will be covered in a later tutorial
 +
:* Note: Scaling sprites requires more advanced techniques
 +
</div>
 +
</div>
 +
 
 +
===[https://youtu.be/ARCytFIwis8 Tutorial 2.2]===
 +
<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 ==
Line 17: Line 72:
  
 
== Homework ==
 
== Homework ==
−
Coming soon!
+
# Create random starfield in large rectangular region with randomized positions, sizes, and shapes. Stars should not overlap.
 +
# Implement scrolling via mouse dragging.
 +
# Process vertices in-place (don't use a buffered polyline copy).
 +
# Only draw models that appear in the viewport.
 +
# Animate the scale (size) and color of stars so that they pulsate.
 +
 
 +
The Homework solution is [https://youtu.be/Jj6tni4cxSw here].
  
 
== See also ==
 
== See also ==
 
* [[Advanced C++ Programming Tutorial 3|Next in series (Tutorial 3)]]
 
* [[Advanced C++ Programming Tutorial 3|Next in series (Tutorial 3)]]
 
* [[Advanced C++ Programming Series]]
 
* [[Advanced C++ Programming Series]]
−
* [[Intermediate C++ Game Programming Series]]
+
* [https://www.patreon.com/planetchili Planet Chili Patreon]

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"