{"id":246,"date":"2025-12-03T06:52:44","date_gmt":"2025-12-03T06:52:44","guid":{"rendered":"https:\/\/sites.wsagames.com\/et4g23-yr3\/?p=246"},"modified":"2025-12-03T06:52:44","modified_gmt":"2025-12-03T06:52:44","slug":"phase-3-star-game-prototype-1","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/et4g23-yr3\/2025\/12\/03\/phase-3-star-game-prototype-1\/","title":{"rendered":"Phase 3 – Star Game Prototype 1"},"content":{"rendered":"\n

After we had completed further research into a specific topic, we had to turn our findings into actual game ideas and mechanics.<\/p>\n\n\n\n

Star Game Idea<\/h2>\n\n\n\n

Being my main and chosen topic of research, I wanted to find a way to turn astronavigation (The process of using stars and constellations for the sake of navigation) into a game mechanic.<\/p>\n\n\n\n

This type of game mechanic would be realistic for a 3D game (As it would easily replicate actually <\/em>looking at the night sky). But, as a programmer and designer, I’m just much more comfortable with making 2D games. So, before even starting to make the prototype I already had an issue I had to solve.<\/p>\n\n\n\n

Stargazing in 2D<\/h3>\n\n\n\n

The first thing I thought to do was to look at examples of stargazing \/ looking at stars in other games. One of these examples was Blue Prince, where you could enter an observatory and look through a telescope. One issue with this is that the player doesn’t really look around <\/em>in this space, but it did give me inspiration for another idea.<\/p>\n\n\n\n

\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div>\n\n\n\n

If I could map out a 3D space into a 2D shape, I’d be able to let the player look around a 3d space through a 2D viewport. This is essentially what our eyes, cameras and telescopes do to perceive 3D space anyways. So how hard could it be?<\/p>\n\n\n\n

My first thought was to use a reeeaaally <\/em>long image that looped around itself, similar to a 360o<\/sup> panoramic images. Then I would let the player move the viewport to simulate looking around in 3D. But a big glaring issue with this, is that these 360o<\/sup> images would have really big distortions especially in the top and bottom of the images.<\/p>\n\n\n\n

\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\n

My next thought I had was by using a net, I could let players move a viewport to show specific parts of this net. This movement of the viewport would try to replicate the motion of physically moving your heard to look around you. The issue with this, is that the night sky – from the viewpoint of someone on earth – is essentially a semi-circle (As the horizon blocks them from seeing the rest of the sky). Circles are notoriously known to be difficult to make a coherent net of; which is why maps of the Earth have issues with scaling, as the size of some countries and\/or continents are incorrectly depicted on most maps. This is because the process of projecting a 3D spherical image onto a 2D plane just isn’t without distortion.<\/p>\n\n\n\n

\"\"
An example of a 2D net for a 3D cone<\/figcaption><\/figure>\n\n\n\n

However, I could supplement this issue by reducing the available area that the player is able to see. Usually the net of a sphere has a lot of gaps in between it when projected into a 2D space. Especially from tip to tip (Where the edges would meet to create the top and bottom of the sphere).<\/p>\n\n\n\n

\"\"
Example of a 2D net of a sphere<\/figcaption><\/figure>\n\n\n\n

But when the surface area of the sphere is reduced the gaps between the parts of the net are greatly reduced, making the 2D projection a lot more accurate and devoid of distortion.<\/p>\n\n\n\n

\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Reducing the part of the sphere that the player will observe (To the red part)<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Will result in a net that will have much less distortion<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

This net would essentially just become a flat 2D circle. But the issue is that the player wouldn’t be able to just move the viewport up, down, left and right around like the previous idea. Due to the fact that a 16:9 viewport on a 2D shape moving in such a way wouldn’t make sense, nor replicate the motion of looking around at the night sky.<\/p>\n\n\n\n

The way I worked around this is to have the player effectively <\/em>rotate night sky through the viewport the instead of moving the viewport itself.<\/p>\n\n\n\n

\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
This is essentially what I am describing, with the circle as the net and the rectangle as the player’s viewport<\/figcaption><\/figure>\n\n\n\n
\n
\n
\n
\n
\n
\n