<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="https://humbird0.com/atom.xsl" type="text/xsl"?>
<feed xmlns="http://www.w3.org/2005/Atom">

	<title>Night Raider Updates</title>
	<updated>2021-10-29T00:00:00Z</updated>
	<id>humbird0.com/content/games/night_raider/updates.xml</id>

	<subtitle>All updates to Night Raider</subtitle>
	<link rel="self" href="https://humbird0.com/content/games/night_raider/updates.xml" />
	<link rel="alternate" href="https://humbird0.com/content/show.htm" />
	<icon>https://humbird0.com/apple-touch-icon.png</icon>
	<logo>https://humbird0.com/css/feed_logo.png</logo>
	<author>
		<name>humbird0</name>
	</author>



	<entry>
		<title>Night Raider</title>
		<id>tag:humbird0.com,2023-08-01T12:10:41Z:night-raider</id>
		<updated>2023-08-01T12:10:41Z</updated>

		<link rel="alternate" href="https://humbird0.com/content/games/night_raider/content.htm" />
		<category term="night-raider" />
		<summary type="html">
			&lt;div class=&quot;has_3d has_experiments has_tutorial&quot;&gt;
				&lt;p&gt;
					I hope you&apos;ll forgive the choppiness of the animation. Back in 2004 I rendered this at 12 frames a second to avoid adding too many kilobytes to the game&apos;s file size so people could actually download it over their crappy DSL internet connections. Adding this one video *tripled* the size of the game!
				&lt;/p&gt;
				&lt;a href=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/dial-up-download-speeds.gif&quot;&gt;
					&lt;img src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/dial-up-download-speeds.gif&quot; loading=&quot;lazy&quot; alt=&quot;dial up download speeds&quot; /&gt;
				&lt;/a&gt;
			&lt;/div&gt;
		</summary>
		<content type="xhtml">
			<div class="has_3d has_experiments has_tutorial">
				<p>
					I hope you'll forgive the choppiness of the animation. Back in 2004 I rendered this at 12 frames a second to avoid adding too many kilobytes to the game's file size so people could actually download it over their crappy DSL internet connections. Adding this one video *tripled* the size of the game!
				</p>
				<a href="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/dial-up-download-speeds.gif">
					<img src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/dial-up-download-speeds.gif" loading="lazy" alt="dial up download speeds" />
				</a>
			</div>
		</content>
	</entry>



	<entry>
		<title>Night Raider</title>
		<id>tag:humbird0.com,2023-08-01T12:03:56Z:night-raider</id>
		<updated>2023-08-01T12:03:56Z</updated>

		<link rel="alternate" href="https://humbird0.com/content/games/night_raider/content.htm" />
		<category term="night-raider" />
		<summary type="html">
			&lt;div class=&quot;has_3d has_experiments has_tutorial&quot;&gt;
				&lt;p&gt;
					That way, the audience doesn&apos;t question it when another &quot;letterbox&quot; appears. And since they&apos;re looking up for the text, they probably won&apos;t notice that the image is squishing down this time.&lt;br /&gt;&lt;br /&gt;And then, suddenly... WTF it&apos;s 3D now!?
				&lt;/p&gt;
				&lt;video muted=&quot;muted&quot; controls=&quot;controls&quot; loop=&quot;loop&quot; src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/3d-rest-of-credits.mp4&quot; loading=&quot;lazy&quot; /&gt;
			&lt;/div&gt;
		</summary>
		<content type="xhtml">
			<div class="has_3d has_experiments has_tutorial">
				<p>
					That way, the audience doesn't question it when another "letterbox" appears. And since they're looking up for the text, they probably won't notice that the image is squishing down this time.<br /><br />And then, suddenly... WTF it's 3D now!?
				</p>
				<video muted="muted" controls="controls" loop="loop" src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/3d-rest-of-credits.mp4" loading="lazy" />
			</div>
		</content>
	</entry>



	<entry>
		<title>Night Raider</title>
		<id>tag:humbird0.com,2023-08-01T11:58:36Z:night-raider</id>
		<updated>2023-08-01T11:58:36Z</updated>

		<link rel="alternate" href="https://humbird0.com/content/games/night_raider/content.htm" />
		<category term="night-raider" />
		<summary type="html">
			&lt;div class=&quot;has_3d has_experiments has_tutorial&quot;&gt;
				&lt;p&gt;
					And to make the letterboxing look like it &quot;belongs&quot; I added a couple of 2D scenes before this one that use &quot;cinematic&quot; letterboxes to display the text of the credits.
				&lt;/p&gt;
				&lt;video muted=&quot;muted&quot; controls=&quot;controls&quot; loop=&quot;loop&quot; src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/credits-letterboxing-setup.mp4&quot; loading=&quot;lazy&quot; /&gt;
			&lt;/div&gt;
		</summary>
		<content type="xhtml">
			<div class="has_3d has_experiments has_tutorial">
				<p>
					And to make the letterboxing look like it "belongs" I added a couple of 2D scenes before this one that use "cinematic" letterboxes to display the text of the credits.
				</p>
				<video muted="muted" controls="controls" loop="loop" src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/credits-letterboxing-setup.mp4" loading="lazy" />
			</div>
		</content>
	</entry>



	<entry>
		<title>Night Raider</title>
		<id>tag:humbird0.com,2023-08-01T11:57:30Z:night-raider</id>
		<updated>2023-08-01T11:57:30Z</updated>

		<link rel="alternate" href="https://humbird0.com/content/games/night_raider/content.htm" />
		<category term="night-raider" />
		<summary type="html">
			&lt;div class=&quot;has_3d has_experiments has_tutorial&quot;&gt;
				&lt;p&gt;
					So I have to transition from a tall 2D image to a &quot;squished&quot; 3D image, and I do a cross-fade at the same time to hide the fact that these are two slightly different images. If you look closely, the jar on the left changes and some objects on top of the roof disappear.
				&lt;/p&gt;
				&lt;video muted=&quot;muted&quot; controls=&quot;controls&quot; loop=&quot;loop&quot; src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/squish-letterboxing.mp4&quot; loading=&quot;lazy&quot; /&gt;
			&lt;/div&gt;
		</summary>
		<content type="xhtml">
			<div class="has_3d has_experiments has_tutorial">
				<p>
					So I have to transition from a tall 2D image to a "squished" 3D image, and I do a cross-fade at the same time to hide the fact that these are two slightly different images. If you look closely, the jar on the left changes and some objects on top of the roof disappear.
				</p>
				<video muted="muted" controls="controls" loop="loop" src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/squish-letterboxing.mp4" loading="lazy" />
			</div>
		</content>
	</entry>



	<entry>
		<title>Night Raider</title>
		<id>tag:humbird0.com,2023-08-01T11:55:34Z:night-raider</id>
		<updated>2023-08-01T11:55:34Z</updated>

		<link rel="alternate" href="https://humbird0.com/content/games/night_raider/content.htm" />
		<category term="night-raider" />
		<summary type="html">
			&lt;div class=&quot;has_3d has_experiments has_tutorial&quot;&gt;
				&lt;p&gt;
					But in 3D, the camera is looking down at a 45 degree angle so it sees half of the top of objects and half of the side, so floors and walls look half as tall.
				&lt;/p&gt;
				&lt;a href=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/3d-looks-half-as-tall.png&quot;&gt;
					&lt;img src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/3d-looks-half-as-tall.png&quot; loading=&quot;lazy&quot; alt=&quot;3d looks half as tall&quot; /&gt;
				&lt;/a&gt;
				&lt;a href=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/3d-camera-45degree-angle.png&quot;&gt;
					&lt;img src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/3d-camera-45degree-angle.png&quot; loading=&quot;lazy&quot; alt=&quot;3d camera 45degree angle&quot; /&gt;
				&lt;/a&gt;
			&lt;/div&gt;
		</summary>
		<content type="xhtml">
			<div class="has_3d has_experiments has_tutorial">
				<p>
					But in 3D, the camera is looking down at a 45 degree angle so it sees half of the top of objects and half of the side, so floors and walls look half as tall.
				</p>
				<a href="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/3d-looks-half-as-tall.png">
					<img src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/3d-looks-half-as-tall.png" loading="lazy" alt="3d looks half as tall" />
				</a>
				<a href="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/3d-camera-45degree-angle.png">
					<img src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/3d-camera-45degree-angle.png" loading="lazy" alt="3d camera 45degree angle" />
				</a>
			</div>
		</content>
	</entry>



	<entry>
		<title>Night Raider</title>
		<id>tag:humbird0.com,2023-08-01T11:54:58Z:night-raider</id>
		<updated>2023-08-01T11:54:58Z</updated>

		<link rel="alternate" href="https://humbird0.com/content/games/night_raider/content.htm" />
		<category term="night-raider" />
		<summary type="html">
			&lt;div class=&quot;has_3d has_experiments has_tutorial&quot;&gt;
				&lt;p&gt;
					Notice how the 3D one looks squished? In RPG Maker 2003 a floor tile is 16x16 pixels, and a wall tile is 16x16 pixels.
				&lt;/p&gt;
				&lt;a href=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/rm2k-tiles.png&quot;&gt;
					&lt;img src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/rm2k-tiles.png&quot; loading=&quot;lazy&quot; alt=&quot;rm2k tiles&quot; /&gt;
				&lt;/a&gt;
			&lt;/div&gt;
		</summary>
		<content type="xhtml">
			<div class="has_3d has_experiments has_tutorial">
				<p>
					Notice how the 3D one looks squished? In RPG Maker 2003 a floor tile is 16x16 pixels, and a wall tile is 16x16 pixels.
				</p>
				<a href="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/rm2k-tiles.png">
					<img src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/rm2k-tiles.png" loading="lazy" alt="rm2k tiles" />
				</a>
			</div>
		</content>
	</entry>



	<entry>
		<title>Night Raider</title>
		<id>tag:humbird0.com,2023-08-01T11:54:14Z:night-raider</id>
		<updated>2023-08-01T11:54:14Z</updated>

		<link rel="alternate" href="https://humbird0.com/content/games/night_raider/content.htm" />
		<category term="night-raider" />
		<summary type="html">
			&lt;div class=&quot;has_3d has_experiments has_tutorial&quot;&gt;
				&lt;p&gt;
					And the 3D image looks like this.
				&lt;/p&gt;
				&lt;a href=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/first-3d-frame.png&quot;&gt;
					&lt;img src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/first-3d-frame.png&quot; loading=&quot;lazy&quot; alt=&quot;first 3d frame&quot; /&gt;
				&lt;/a&gt;
			&lt;/div&gt;
		</summary>
		<content type="xhtml">
			<div class="has_3d has_experiments has_tutorial">
				<p>
					And the 3D image looks like this.
				</p>
				<a href="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/first-3d-frame.png">
					<img src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/first-3d-frame.png" loading="lazy" alt="first 3d frame" />
				</a>
			</div>
		</content>
	</entry>



	<entry>
		<title>Night Raider</title>
		<id>tag:humbird0.com,2023-08-01T11:52:41Z:night-raider</id>
		<updated>2023-08-01T11:52:41Z</updated>

		<link rel="alternate" href="https://humbird0.com/content/games/night_raider/content.htm" />
		<category term="night-raider" />
		<summary type="html">
			&lt;div class=&quot;has_3d has_experiments has_tutorial&quot;&gt;
				&lt;p&gt;
					Basically the &quot;pop-up&quot; is gradually happening at the same time as the rotation, which makes the entire transition seem to happen in a single motion.&lt;br /&gt;&lt;br /&gt;The black bar letterboxing is actually necessary, because the 2D image from RPG Maker looks like this.
				&lt;/p&gt;
				&lt;a href=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pre-squish.png&quot;&gt;
					&lt;img src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pre-squish.png&quot; loading=&quot;lazy&quot; alt=&quot;pre squish&quot; /&gt;
				&lt;/a&gt;
			&lt;/div&gt;
		</summary>
		<content type="xhtml">
			<div class="has_3d has_experiments has_tutorial">
				<p>
					Basically the "pop-up" is gradually happening at the same time as the rotation, which makes the entire transition seem to happen in a single motion.<br /><br />The black bar letterboxing is actually necessary, because the 2D image from RPG Maker looks like this.
				</p>
				<a href="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pre-squish.png">
					<img src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pre-squish.png" loading="lazy" alt="pre squish" />
				</a>
			</div>
		</content>
	</entry>



	<entry>
		<title>Night Raider</title>
		<id>tag:humbird0.com,2023-08-01T11:50:11Z:night-raider</id>
		<updated>2023-08-01T11:50:11Z</updated>

		<link rel="alternate" href="https://humbird0.com/content/games/night_raider/content.htm" />
		<category term="night-raider" />
		<summary type="html">
			&lt;div class=&quot;has_3d has_experiments has_tutorial&quot;&gt;
				&lt;p&gt;
					... so to hide it, I added a camera rotation to distract the viewer.
				&lt;/p&gt;
				&lt;video muted=&quot;muted&quot; controls=&quot;controls&quot; loop=&quot;loop&quot; src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pop-up-with-rotation.mp4&quot; loading=&quot;lazy&quot; /&gt;
			&lt;/div&gt;
		</summary>
		<content type="xhtml">
			<div class="has_3d has_experiments has_tutorial">
				<p>
					... so to hide it, I added a camera rotation to distract the viewer.
				</p>
				<video muted="muted" controls="controls" loop="loop" src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pop-up-with-rotation.mp4" loading="lazy" />
			</div>
		</content>
	</entry>



	<entry>
		<title>Night Raider</title>
		<id>tag:humbird0.com,2023-08-01T11:48:29Z:night-raider</id>
		<updated>2023-08-01T11:48:29Z</updated>

		<link rel="alternate" href="https://humbird0.com/content/games/night_raider/content.htm" />
		<category term="night-raider" />
		<summary type="html">
			&lt;div class=&quot;has_3d has_experiments has_public has_tutorial&quot;&gt;
				&lt;p&gt;
					This involves changing the camera&apos;s zoom level while adjusting its distance to keep the building in the same place on the screen.&lt;br /&gt;&lt;br /&gt;In motion, this &quot;pop-up&quot; book effect is very noticeable...
				&lt;/p&gt;
				&lt;video muted=&quot;muted&quot; controls=&quot;controls&quot; loop=&quot;loop&quot; src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pop-up-book-effect.mp4&quot; loading=&quot;lazy&quot; /&gt;
			&lt;/div&gt;
		</summary>
		<content type="xhtml">
			<div class="has_3d has_experiments has_public has_tutorial">
				<p>
					This involves changing the camera's zoom level while adjusting its distance to keep the building in the same place on the screen.<br /><br />In motion, this "pop-up" book effect is very noticeable...
				</p>
				<video muted="muted" controls="controls" loop="loop" src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pop-up-book-effect.mp4" loading="lazy" />
			</div>
		</content>
	</entry>



	<entry>
		<title>Night Raider</title>
		<id>tag:humbird0.com,2023-08-01T11:47:24Z:night-raider</id>
		<updated>2023-08-01T11:47:24Z</updated>

		<link rel="alternate" href="https://humbird0.com/content/games/night_raider/content.htm" />
		<category term="night-raider" />
		<summary type="html">
			&lt;div class=&quot;has_3d has_experiments has_tutorial&quot;&gt;
				&lt;p&gt;
					Creating this effect involved a bunch of sneaky tricks. But the main one is changing the amount of 3D depth from a flat 2D image, to something with normal 3D depth.
				&lt;/p&gt;
				&lt;a href=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pop-up-before.png&quot;&gt;
					&lt;img src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pop-up-before.png&quot; loading=&quot;lazy&quot; alt=&quot;pop up before&quot; /&gt;
				&lt;/a&gt;
				&lt;a href=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pop-up-after.png&quot;&gt;
					&lt;img src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pop-up-after.png&quot; loading=&quot;lazy&quot; alt=&quot;pop up after&quot; /&gt;
				&lt;/a&gt;
			&lt;/div&gt;
		</summary>
		<content type="xhtml">
			<div class="has_3d has_experiments has_tutorial">
				<p>
					Creating this effect involved a bunch of sneaky tricks. But the main one is changing the amount of 3D depth from a flat 2D image, to something with normal 3D depth.
				</p>
				<a href="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pop-up-before.png">
					<img src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pop-up-before.png" loading="lazy" alt="pop up before" />
				</a>
				<a href="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pop-up-after.png">
					<img src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/pop-up-after.png" loading="lazy" alt="pop up after" />
				</a>
			</div>
		</content>
	</entry>



	<entry>
		<title>Night Raider</title>
		<id>tag:humbird0.com,2023-08-01T11:45:44Z:night-raider</id>
		<updated>2023-08-01T11:45:44Z</updated>

		<link rel="alternate" href="https://humbird0.com/content/games/night_raider/content.htm" />
		<category term="night-raider" />
		<summary type="html">
			&lt;div class=&quot;has_3d has_experiments has_tutorial&quot;&gt;
				&lt;p&gt;
					Of course, that means I had to literally re-create the entire town in 3D.
				&lt;/p&gt;
				&lt;a href=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/town-in-3d-editor.png&quot;&gt;
					&lt;img src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/town-in-3d-editor.png&quot; loading=&quot;lazy&quot; alt=&quot;The town in 3D Studio Max&quot; /&gt;
				&lt;/a&gt;
			&lt;/div&gt;
		</summary>
		<content type="xhtml">
			<div class="has_3d has_experiments has_tutorial">
				<p>
					Of course, that means I had to literally re-create the entire town in 3D.
				</p>
				<a href="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/town-in-3d-editor.png">
					<img src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/town-in-3d-editor.png" loading="lazy" alt="The town in 3D Studio Max" />
				</a>
			</div>
		</content>
	</entry>



	<entry>
		<title>Night Raider</title>
		<id>tag:humbird0.com,2023-08-01T11:38:18Z:night-raider</id>
		<updated>2023-08-01T11:38:18Z</updated>

		<link rel="alternate" href="https://humbird0.com/content/games/night_raider/content.htm" />
		<category term="night-raider" />
		<summary type="html">
			&lt;div class=&quot;has_3d has_experiments has_rm2k has_rpgmaker has_tutorial&quot;&gt;
				&lt;p&gt;
					Back in 2004, I experimented with creating a seamless 2D to 3D transition effect for my &lt;a href=&quot;http://humbird0.com/content/games/night_raider/content.htm&quot;&gt;Night Raider&lt;/a&gt; game, that you would see during its ending credits. It&apos;s actually a video, but it&apos;s designed to look like RPG Maker 2000 is suddenly doing 3D somehow.
				&lt;/p&gt;
				&lt;video muted=&quot;muted&quot; controls=&quot;controls&quot; loop=&quot;loop&quot; src=&quot;https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/transition-clip-fast.mp4&quot; loading=&quot;lazy&quot; /&gt;
			&lt;/div&gt;
		</summary>
		<content type="xhtml">
			<div class="has_3d has_experiments has_rm2k has_rpgmaker has_tutorial">
				<p>
					Back in 2004, I experimented with creating a seamless 2D to 3D transition effect for my <a href="http://humbird0.com/content/games/night_raider/content.htm">Night Raider</a> game, that you would see during its ending credits. It's actually a video, but it's designed to look like RPG Maker 2000 is suddenly doing 3D somehow.
				</p>
				<video muted="muted" controls="controls" loop="loop" src="https://humbird0.com/content/experiments/night_raider_2d_to_3d_transition/content/transition-clip-fast.mp4" loading="lazy" />
			</div>
		</content>
	</entry>

</feed>