Commit 4d377359 authored by Nathan Bean's avatar Nathan Bean
Browse files

Added 3D chapters

parent d99e64bf
{
"cSpell.words": [
"heightmap",
"heightmaps"
]
}
\ No newline at end of file
......@@ -40,6 +40,7 @@ While not strictly required for the course, these additional software packages m
* [BFXR](https://www.bfxr.net/) A free online sound effect generator perfect for creating 8-bit sound effects.
* [Piskel](https://www.piskelapp.com/) A free online pixel art program specifically for drawing animated sprites.
* [Graphics Gale](https://graphicsgale.com/us/) A downloadable freeware animation editor.
* [Inkscape](https://inkscape.org/) an open-source vector graphics editor you can install (and is installed in the labs).
* [Tiled Map Editor](https://www.mapeditor.org/) an open-source tool for creating tile maps you can install (and is installed in the labs).
......
......@@ -9,4 +9,6 @@ chapter = true
# Particle Systems
One, Two, three, ... BOOM!
\ No newline at end of file
One, Two, three, ... BOOM!
<img src="https://media.giphy.com/media/2dnGHOAQt1tIziib5X/giphy.gif" />
\ No newline at end of file
---
title: "Introduction"
pre: "1. "
weight: 1
date: 2020-03-20T10:53:05-05:00
---
While the earliest video games often featured worlds that were sized to the dimensions of the screen, it was not long before game worlds were to grow larger. This brought serious challenges to game development, as the platforms of the time did not have very large memory resources to draw upon.
A similar problem existed in storing raster images in early computers, where memory space was a premium. Remember, raster images have three or four color channels - Red, Green, Blue, and sometimes Alpha. If each channel is 8 bits, and an image is 13 x 21 pixels like the one below, our total memory consumption would be 8 x 4 x 13 x 21 = 8,736 bits, about 1 KB. But the image only contains three colors! Given that, can you think of a way to represent it with a smaller memory footprint?
![Raster Image using a Color Palette]({{<static "images/10.1.1.png">}})
The answer they adopted was the use of a _color palette_, a collection of 8, 16, or 32 colors. This collection was 0-indexed (so the first color was represented by a 0, the next by a 1, and so on...). This meant you needed to sore 8 x 4 x 8 = 245 bits for a 8-color palette, and the actual image could be represented as a list of 3-bit color keys (3 bits can represent 0-7, the full range of keys for a 8-color palette). So we only need an additional 3 x 13 x 21 = 819 bits to represent the image data. The actual image therefore could be represented by only 1,064 bits - about 1/8th a KB. The memory savings grow larger the larger the image represented.
With the concept of palettized image formats in mind, let’s look at an example of an early game - Super Mario Bros. Do you notice anything about the game world that harkens back to our earlier use of palettes?
![Super Mario Bros]({{<static "images/10.1.2.png">}})
Notice how so much of the scene seems to be the same texture repeated? Much like the color palette applies a collection of colors on a regular grid, a tile engine applies a collection of tile textures on a regular grid. This allows a large level to be drawn with only a handful of textures. Moreover, these textures are typically stored in a texture atlas (i.e. all the tiles appear in a single texture).
Let's look at how we can implement this strategy in MonoGame. But first, we need to review the basics of 1D and 2D arrays.
\ No newline at end of file
---
title: "2D and 1D Arrays"
pre: "2. "
weight: 2
date: 2020-03-20T10:53:05-05:00
---
Let's start from a purely conceptual level, with some diagrams using tile assets created [by Eris available from OpenGameArt](https://opengameart.org/content/platform-tileset-nature). A tile map could be thought of as a grid of tiles, as demonstrated in this image:
![Tile map Example]({{<static "images/10.2.1.png">}})
Along with the map is the tile set, which defines the individual tiles that can be used within the map, i.e.:
![Tile set Example]({{<static "images/10.2.2.png">}})
We assign a number to each tile in the tile set:
![Numbered tile set]({{<static "images/10.2.3.png">}})
We can then specify what tile fills a grid cell in the tile map with the same number, i.e.:
Tilemaps are a good example of the The [flyweight pattern](https://gameprogrammingpatterns.com/flyweight.html) in action. Basically, we have three data structures we need to work with - one that contains the data for a single tile, one that contains all of these tiles, and one that represents where these tiles are placed in the game.
The
We discussed the importance of
You've likely been working with both 1-dimensional and 2-dimensional arrays for some time now. But do you know how these are represented in memory? A
\ No newline at end of file
+++
title = "Models"
title = "10. Tile Maps"
date = 2020-03-20T10:53:05-05:00
weight = 10
weight = 90
chapter = true
draft = true
+++
### Game Development Techniques
### Chapter 10
# Models
# Tile Maps
Rendering Complex 3D Objects
\ No newline at end of file
I feel like we’ve passed that tree before…
\ No newline at end of file
+++
title = "Basic 3D Rendering"
title = "13. Basic 3D Rendering"
date = 2020-03-20T10:53:05-05:00
weight = 10
weight = 130
chapter = true
draft = true
+++
### Game Development Techniques
### Chapter 13
# Basic 3D Rendering
It's all triangles!
\ No newline at end of file
It's all triangles!
<img src="https://media.giphy.com/media/3oKIPaYYYLafTAM0i4/giphy.gif"/>
\ No newline at end of file
......@@ -9,7 +9,7 @@ So far we've set the World, View, and Transform matrix of each 3D object within
What we want is a _camera_ - an object that maintains a position and derives a view matrix from that position. Our camera also should provide a projection matrix, as we may want to tweak it in response to game activity - i.e. we might swap it for another matrix when the player uses a sniper rifle.
In fact, we may want _multiple_ cameras in a game. We might want to change from a first-person camera to an overhead camera when the player gets into a vehicle, or we may want to present a flythrough of the level before the player starts playing. Since each of these may work in very different ways, let's start by defining an interface of thier common aspects.
In fact, we may want _multiple_ cameras in a game. We might want to change from a first-person camera to an overhead camera when the player gets into a vehicle, or we may want to present a fly-through of the level before the player starts playing. Since each of these may work in very different ways, let's start by defining an interface of their common aspects.
## The ICamera Interface
......@@ -129,7 +129,7 @@ Then we can add our constructor:
}
```
This just sets our inital variables. Finally, we can write our update method:
This just sets our initial variables. Finally, we can write our update method:
```csharp
/// <summary>
......
+++
title = "Lights and Cameras"
title = "14. Lights and Cameras"
date = 2020-03-20T10:53:05-05:00
weight = 10
weight = 140
chapter = true
draft = true
+++
### Game Development Techniques
### Chapter 14
# Lights and Cameras
Lights, Camera, Action!
\ No newline at end of file
Lights, Camera, Action!
<img src="https://media.giphy.com/media/U8FvqfxkzxoSpokGaW/giphy.gif">
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment