tag:blogger.com,1999:blog-5363619801148340972024-03-13T07:57:59.070-07:00Jan PlähnUnknownnoreply@blogger.comBlogger7125tag:blogger.com,1999:blog-536361980114834097.post-53935985492323237512020-07-05T08:58:00.005-07:002020-07-06T10:12:23.659-07:00Halftone Post-Processing Effect in Unity 3D<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu0y6QQxoddUvbQZajk7o0Uh3zsN0bEidHiudvQl_0xwwwD0eqwaAzydjfR61ZHvRqhUrfc09D-UHGdmAo6FwHFp2PKMV10vwMnXSQ51vLAXcpYkQm-LHAAIV7wj1I7EC7dtKIFkfRWDI/s1600/beforeAfterHalftone.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="703" data-original-width="1406" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu0y6QQxoddUvbQZajk7o0Uh3zsN0bEidHiudvQl_0xwwwD0eqwaAzydjfR61ZHvRqhUrfc09D-UHGdmAo6FwHFp2PKMV10vwMnXSQ51vLAXcpYkQm-LHAAIV7wj1I7EC7dtKIFkfRWDI/s1600/beforeAfterHalftone.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<b><span style="font-size: large;"><br /></span></b>The word "Halftone" describes a reprographic technique, which simulates gradients and imagery by using dots, which either vary in size or in spacing. Thus, only two colors are used in the entire image. This technique is based on a basic optical illusion. When the dots are small, the human eye interpretes the produced patterns as if they were smooth, creating the perceived brightnesses. the halftone technique used to be popular in newspaper and comic print as well as black and white photography, but can also be used to create interesting real-time imagery in 2d and 3d games. This tutorial aims to provide you a quick and easy way to create your own, lightweight halftone post-processing effect in Unity 3D.<br />
<br />
<b><span style="font-size: large;">Step 1: Setting up Custom Post-Processing</span></b><br />
<b><span style="font-size: large;"><br /></span></b>
To get started, we create a new Image Effect Shader in our Unity Assets folder <span style="background-color: #cccccc;"><span style="color: #444444;"><i>(Create>Shader>Image Effect Shader)</i></span></span>. By default, Unity hides Image Effects from the inspector. Therefore, we need to open the new shader and edit the very first line:<br />
<br />
<div id="code-snippet">
<strike><span style="color: #999999;">Shader "Hidden/Halftone"</span></strike><br />
<b><span style="color: #444444;">Shader "Custom/Halftone"</span></b></div>
<br />
Of course you can give your shader any name you want.<br />
<br />
Now we create a new Material using this new shader.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh6AaTldobaSwzmaH4qX0NRb1oYCfOACVR9l7tEnV3T2Y9ASR6ZJ2Dd36P9keS2p6quDMRz_78S6uTNanG57Vws3ZFsyYDRtUiymyAabbkf5m_0z8vytWjBqKKNoK1JkSu0jMKBRdbEQ4/s1600/material.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="216" data-original-width="591" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh6AaTldobaSwzmaH4qX0NRb1oYCfOACVR9l7tEnV3T2Y9ASR6ZJ2Dd36P9keS2p6quDMRz_78S6uTNanG57Vws3ZFsyYDRtUiymyAabbkf5m_0z8vytWjBqKKNoK1JkSu0jMKBRdbEQ4/s1600/material.png" /></a></div>
<br />
<br />
To make our new material work as a Post-Processing effect, we need to create the following C#-script and attach it to our Camera. This new script will take care of editing the current frame before it gets rendered. To accomplish this, we use a function called Graphics.Blit(), which needs to be called in OnRenderImage. For a more detailed explanation of this, I suggest you check out <a href="https://www.alanzucconi.com/2015/07/08/screen-shaders-and-postprocessing-effects-in-unity3d/" target="_blank">this tutorial by Alan Zucconi</a>.<br />
<br />
<div id="code-snippet">
<span style="color: #0b5394;">using</span> UnityEngine;<br />
<br />
<b><span style="color: #444444;">[ExecuteAlways]</span></b><br />
<span style="color: #0b5394;">public class</span> CustomPostProcessing : MonoBehaviour {<br />
<br />
<b><span style="color: #0b5394;">public</span> <span style="color: #444444;">Material postProcessingMaterial;</span></b><br />
<br />
<span style="color: #444444;"><b><span style="color: #0b5394;">void</span><span style="color: #444444;"> OnRenderImage(RenderTexture source, RenderTexture destination) {</span></b></span><br />
<span style="color: #444444;"><b> Graphics.Blit(source, destination, postProcessingMaterial);</b></span><br />
<span style="color: #444444;"><b> }</b></span><br />
}</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFJBYdSo0kk7S0-7422mkyvj0H74pYT8YkrUta4MHjabxHyEZazAxVHRyjsiVAZvVxOyB3O0rZ3oD4-Pin7nTbL93GgUxESRHl2A3AdemVoltqQUYGN1dIaMUOk0aa8kuiK8Wrb8Q24hE/s1600/cameraScript.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="75" data-original-width="585" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFJBYdSo0kk7S0-7422mkyvj0H74pYT8YkrUta4MHjabxHyEZazAxVHRyjsiVAZvVxOyB3O0rZ3oD4-Pin7nTbL93GgUxESRHl2A3AdemVoltqQUYGN1dIaMUOk0aa8kuiK8Wrb8Q24hE/s1600/cameraScript.png" /></a></div>
<span style="font-size: large;"><b><br /></b></span>
Now, all we need to do is assign our new Material to our script in the inspector. Unity's default Image Effect Shader inverts the colors of our image. So if you did everything right, your Scene should look something like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhija0xRGv1QR5rOqjlEd0gHIyNKVv82t4KA36iDq95WJ7VVrNZvc7MvMdPCkOA2Ot3JbzXt_yMtm6RY5nyoR7FK1-r9cnxporlChJEoCwTuju4M9qgESx_cGZPFjCbHIMWOltz0LkuCsA/s1600/step1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="738" data-original-width="1134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhija0xRGv1QR5rOqjlEd0gHIyNKVv82t4KA36iDq95WJ7VVrNZvc7MvMdPCkOA2Ot3JbzXt_yMtm6RY5nyoR7FK1-r9cnxporlChJEoCwTuju4M9qgESx_cGZPFjCbHIMWOltz0LkuCsA/s1600/step1.png" /></a></div>
<br />
To get rid of the inversion effect, we open our shader, find the fragment shader, i.e. the part that takes care of calculating the current pixel color, and remove this line of code:<br />
<br />
<div id="code-snippet">
<span style="color: #0b5394;">fixed4</span> frag (v2f i) : SV_Target<br />
{<br />
<span style="color: #0b5394;">fixed4</span> col = tex2D(_MainTex, i.uv);<br />
<span style="color: #999999;"><span style="color: #999999;"> </span><strike><span style="color: #999999;">// just invert the colors</span></strike></span><br />
<span style="color: #999999;"> <strike>col.rgb = 1 - col.rgb;</strike></span><br />
<span style="color: #a64d79;">return</span> col;<br />
}</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now, everything should look as before:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtytmN0geHenkbkeuucWU4-u1opvl_QjgDzCgieqBvEdJD1yPw3Uul-tdxnxG_uz4KsAkMl6ytyAUSv9l5yQFA7freSz9pvKwJSgClpJHwNsmEAvZZhG4MOp5NGJ4o56L4GSpWQgTH7Pc/s1600/step2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="738" data-original-width="1134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtytmN0geHenkbkeuucWU4-u1opvl_QjgDzCgieqBvEdJD1yPw3Uul-tdxnxG_uz4KsAkMl6ytyAUSv9l5yQFA7freSz9pvKwJSgClpJHwNsmEAvZZhG4MOp5NGJ4o56L4GSpWQgTH7Pc/s1600/step2.png" /></a><span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b><br /></b></span><br />
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b><br /></b></span>
<br />
<br />
<span style="font-size: large;"><b>Step 2: Dividing the Screen Into Cells</b></span><br />
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: medium;">Now we start coding the actual effect. We start by dividing the screen into little cells, each of which will contain one dot. This is process can be compared to reducing the resolution of the picture.</span><br />
<span style="font-size: medium;"><br /></span>
<span style="font-size: medium;">Firstly, let's start by adding a new property to set up our desired cell size. We can also hide the _MainTex property, as it will not be set by the user himself, as on a normal material. The main texture of an image effect is the current frame itself, which is set automatically in our post-processing script, so there is no need to manually set it.</span><br />
<span style="font-size: medium;"><br /></span>
<br />
<div id="code-snippet">
Properties<br />
{<br />
<b><span style="color: #444444;">[HideInInspector]</span></b> _MainTex ("Texture", <span style="color: #0b5394;">2D</span>) = "white" {}<br />
<br />
<b><span style="color: #444444;">[Header(Dots)]</span></b><br />
<b><span style="color: #444444;"> _CellSize("Cell Size", </span><span style="color: #0b5394;">float</span><span style="color: #444444;">) = 6</span></b><br />
<span style="font-size: medium;"></span><br />
}</div>
<div>
<br /></div>
<div id="code-snippet">
<div>
<span style="color: #0b5394;">sampler2D</span> _MainTex;</div>
<div>
<b><span style="color: #0b5394;">float</span><span style="color: #444444;"> _CellSize;</span></b></div>
</div>
<div>
<br /></div>
Next, we round the UV coordinates, i.e. the current pixel's relative position on the screen and multiply it by our desired cell size. To keep the cell's ratio independent from the screen resolution, we additionally need to divide the cell size by our screen's width and height, saved in a built-in variable called "_ScreenParams".<br />
<br />
<div id="code-snippet">
<span style="color: #0b5394;">fixed4</span> frag (v2f i) : SV_Target<br />
{<br />
<b><span style="color: #444444;"> </span><span style="color: #38761d;">//Create Cells</span></b><br />
<b><span style="color: #444444;"> </span><span style="color: #0b5394;">float</span><span style="color: #444444;"> cellWidth = _CellSize </span></b><span style="color: #444444;"><b>/ _ScreenParams.x</b></span><b><span style="color: #444444;">;</span></b><br />
<b><span style="color: #444444;"> </span><span style="color: #0b5394;">float</span><span style="color: #444444;"> cellHeight = _CellSize </span></b><span style="color: #444444;"><b>/ _ScreenParams.y</b></span><b><span style="color: #444444;">;</span></b><br />
<b><span style="color: #444444;"> </span><span style="color: #0b5394;">fixed2</span><span style="color: #444444;"> roundedUV;</span></b><br />
<b><span style="color: #444444;"> roundedUV.x = round(i.uv.x / cellWidth) * cellWidth;</span></b><br />
<b><span style="color: #444444;"> roundedUV.y = round(i.uv.y / cellHeight) * cellHeight;</span></b><br />
<br />
<span style="color: #0b5394;">fixed4</span> col = tex2D(_MainTex, i.uv);<br />
<span style="color: #a64d79;">return</span> col;<br />
}</div>
<div>
<br /></div>
Next up, we replace the tex2D function and use the rounded uv as the source for our output color, instead of the actual given uv, in order to display each of our cells in a different color.<br />
<div>
<br /></div>
<div id="code-snippet">
<div>
<span style="color: #0b5394;">fixed4</span> frag (v2f i) : SV_Target<br />
{<br />
<span style="color: #38761d;">//Create Cells</span> <br />
<span style="color: #0b5394;">float</span> cellWidth = _CellSize / _ScreenParams.x<span style="color: #444444;">;</span><br />
<span style="color: #444444;"> </span><span style="color: #0b5394;">float</span><span style="color: #444444;"> cellHeight = _CellSize </span>/ _ScreenParams.y<span style="color: #444444;">;</span><br />
<span style="color: #444444;"> </span><span style="color: #0b5394;">fixed2</span><span style="color: #444444;"> roundedUV;</span><br />
<span style="color: #444444;"> roundedUV.x = round(i.uv.x / cellWidth) * cellWidth;</span><br />
roundedUV.y = round(i.uv.y / cellHeight) * cellHeight;<br />
<br />
<strike><span style="color: #999999;">fixed4 col = tex2D(_MainTex, i.uv);</span></strike><br />
<span style="color: #999999;"> <strike>return col;</strike></span><br />
<span style="color: #444444;"><b><span style="color: #0b5394;">fixed4</span><span style="color: #444444;"> roundedCol = tex2D(_MainTex, roundedUV);</span></b></span><br />
<span style="color: #444444;"><b><span style="color: #444444;"> </span><span style="color: #a64d79;">return</span><span style="color: #444444;"> roundedCol;</span></b></span><br />
}</div>
</div>
<div>
<span style="font-size: large;"><b><br /></b></span><span style="font-size: medium;">This divides our image into cells, each of it having a different color. This gives it a low resolution look, as if the image was downscaled.</span><br />
<span style="font-size: medium;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvQPSjaOwiCQB8Af5-x0jBtk_tdpXYwT3OYZjKjy1nd5gs6vDv758RUpQEnIPl1b_NMKM_lkkhGoUdmirSQddcTd-dEpIfBP7ZNBuia_Kg7i6T456mjBw85scNLtKWLSGczpCjNK-VbnM/s1600/step3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="738" data-original-width="1134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvQPSjaOwiCQB8Af5-x0jBtk_tdpXYwT3OYZjKjy1nd5gs6vDv758RUpQEnIPl1b_NMKM_lkkhGoUdmirSQddcTd-dEpIfBP7ZNBuia_Kg7i6T456mjBw85scNLtKWLSGczpCjNK-VbnM/s1600/step3.png" /></a></div>
<span style="font-size: medium;"><br /></span>
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b>Step 3: Drawing Dots</b></span><br />
<br />
Let's start drawing a dot in each cell. The plan is, to detect the distance between the uv coordinate and the rounded uv coordinate, i.e. the distance to the cell center. This way we can determine, if the current pixel is on a dot, or outside of it. Using this distance, we can use the <a href="https://thebookofshaders.com/glossary/?search=smoothstep" target="_blank">smoothstep function</a>, to gives us a value, which we can use to correctly interpolate between our background color and our dot color. We start by calculating the distance to the cell center:<br />
<br />
<div id="code-snippet">
<span style="color: #0b5394;">fixed4</span> frag (v2f i) : SV_Target<br />
{<br />
<span style="color: #38761d;">//Create Cells</span><br />
<span style="color: #0b5394;">float</span> cellWidth = _CellSize / _ScreenParams.x;<br />
<span style="color: #0b5394;">float </span>cellHeight = _CellSize / _ScreenParams.y;<br />
<span style="color: #0b5394;">fixed2</span> roundedUV;<br />
roundedUV.x = round(i.uv.x / cellWidth) * cellWidth;<br />
roundedUV.y = round(i.uv.y / cellHeight) * cellHeight;<br />
<br />
<b><span style="color: #274e13;">//Calculate Distance From Cell Center</span></b><br />
<b><span style="color: #444444;"> </span><span style="color: #0b5394;">float2</span><span style="color: #444444;"> distanceVector = i.uv - roundedUV;</span></b><br />
<b><span style="color: #444444;"> distanceVector.x = (distanceVector.x / _ScreenParams.y) * _ScreenParams.x;</span></b><br />
<b><span style="color: #444444;"> </span><span style="color: #0b5394;">float</span><span style="color: #444444;"> distanceFromCenter = length(distanceVector);</span></b><br />
<br />
<span style="color: #0b5394;">fixed4</span> roundedCol = tex2D(_MainTex, roundedUV);<br />
<span style="color: #a64d79;">return</span> roundedCol;<br />
}</div>
<div>
<br /></div>
<div>
As you can see, we modify the x-value of the distance vector to make up for the screen ratio. Otherwise, our dots would scale with the screen and become ovals.</div>
<div>
<br /></div>
<div>
To draw the dots, we need to add two more properties: The size of the dots and the smoothness of each dot's edges. The smoothness should be set to a really small values, to keep the dots nice and crisp. However, don't set this value to zero, as our smoothstep function will not be able to output any result then.</div>
<div>
<br /></div>
<div id="code-snippet">
<div>
<div>
Properties</div>
<div>
{</div>
<div>
[HideInInspector] _MainTex ("Texture", <span style="color: #0b5394;">2D</span>) = "white" {}</div>
<div>
<br /></div>
<div>
[Header(Dots)]</div>
<div>
_CellSize("Cell Size", <span style="color: #0b5394;">float</span>) = 6</div>
<div>
<b><span style="color: #444444;">_DotSize("Dot Size", </span><span style="color: #0b5394;">float</span><span style="color: #444444;">) = 6</span></b></div>
<div>
<b><span style="color: #444444;"> _DotSmoothness("Smoothness", Range(0,0.01)) = 0.002</span></b></div>
<div>
}</div>
</div>
</div>
<div>
<br /></div>
<div id="code-snippet">
<div>
<span style="color: #0b5394;">sampler2D</span> _MainTex;</div>
<div>
<span style="color: #0b5394;">float</span> _CellSize;</div>
<div>
<b><span style="color: #0b5394;">float</span><span style="color: #444444;"> _DotSize;</span></b></div>
<div>
<b><span style="color: #0b5394;">float</span><span style="color: #444444;"> _DotSmoothness;</span></b></div>
</div>
<div>
<br /></div>
<div>
Now, we can use the smoothstep function to evaluate if we should draw the dot color or the background color, or if we should interpolate between the two colors (if the pixel is right on the dot's edge). Let's use black <i style="background-color: #cccccc; color: #444444;">(float4(0,0,0,1))</i><i style="background-color: white; color: #444444;"> </i><span style="background-color: white; color: #444444;">and white </span><i style="background-color: #cccccc; color: #444444;">(float4(1,1,1,1))</i><span style="background-color: white; color: #444444;"> as placeholder colors for the dots and the background.</span></div>
<div>
<br /></div>
<div id="code-snippet">
<div>
<span style="color: #0b5394;">fixed4</span> frag (v2f i) : SV_Target</div>
<div>
{</div>
<div>
<span style="color: #38761d;"> //Create Cells</span></div>
<div>
<span style="color: #0b5394;">float</span> cellWidth = _CellSize / _ScreenParams.x;</div>
<div>
<span style="color: #0b5394;">float</span> cellHeight = _CellSize / _ScreenParams.y;</div>
<div>
<span style="color: #0b5394;">fixed2</span> roundedUV;</div>
<div>
roundedUV.x = round(i.uv.x / cellWidth) * cellWidth;</div>
<div>
roundedUV.y = round(i.uv.y / cellHeight) * cellHeight;</div>
<div>
<br /></div>
<div>
<span style="color: #38761d;"> //Calculate Distance From Cell Center</span></div>
<div>
<span style="color: #0b5394;">float2</span> distanceVector = i.uv - roundedUV;</div>
<div>
distanceVector.x = (distanceVector.x / _ScreenParams.y) * _ScreenParams.x;</div>
<div>
<span style="color: #0b5394;">float</span> distanceFromCenter = length(distanceVector);</div>
<div>
<br /></div>
<div>
<span style="color: #38761d;"> //Calculate Dot Size</span></div>
<div>
<span style="color: #0b5394;">float</span> dotSize = _DotSize / _ScreenParams.x;</div>
<div>
<br /></div>
<div>
<span style="color: #0b5394;">fixed4</span> roundedCol = tex2D(_MainTex, roundedUV);</div>
<div>
<strike><span style="color: #999999;">return roundedCol;</span></strike></div>
<div>
<br /></div>
<div>
<b><span style="color: #444444;"> </span><span style="color: #38761d;">//Calculate Displayed Color</span></b></div>
<div>
<b><span style="color: #444444;"> </span><span style="color: #0b5394;">float</span><span style="color: #444444;"> lerpAmount = smoothstep(_DotSize, _DotSize + _DotSmoothness, distanceFromCenter);</span></b></div>
<div>
<b><span style="color: #444444;"> </span><span style="color: #0b5394;">fixed4</span><span style="color: #444444;"> col = lerp(float4(0, 0, 0, 1), float4(1, 1, 1, 1), lerpAmount);</span></b></div>
<div>
<b><span style="color: #444444;"> </span><span style="color: #a64d79;">return</span><span style="color: #444444;"> col;</span></b></div>
<div>
}</div>
</div>
<br />
<br />
If we did everything right, setting the Dot Size on the material to something lower than the Cell Size, will reveal that for every cell in the picture a dot gets drawn:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjheXOGeD9t6VbJdxvKBB4LlWyUeQ6sKHSwg6y4479YzOsD2He-gx8indxIGV800BSF5D8uRFizlUL0IO_DHMHiejkfu6c0vMhIBZuBSiU2SdkWqRIDEPsW46p8b1eW9YqqOiaZx2kCyJ4/s1600/step4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="738" data-original-width="1134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjheXOGeD9t6VbJdxvKBB4LlWyUeQ6sKHSwg6y4479YzOsD2He-gx8indxIGV800BSF5D8uRFizlUL0IO_DHMHiejkfu6c0vMhIBZuBSiU2SdkWqRIDEPsW46p8b1eW9YqqOiaZx2kCyJ4/s1600/step4.gif" /></a></div>
</div>
<div>
<br /></div>
<div>
Lastly, lets add two more properties for the dot color and the background color:<br />
<br /></div>
<div id="code-snippet">
<div>
Properties</div>
<div>
{</div>
<div>
[HideInInspector] _MainTex ("Texture", <span style="color: #0b5394;">2D</span>) = "white" {}</div>
<div>
<br /></div>
<div>
[Header(Dots)]</div>
<div>
_CellSize("Cell Size", <span style="color: #0b5394;">float</span>) = 6</div>
<div>
_DotSize("Dot Size", <span style="color: #0b5394;">float</span>) = 6</div>
<div>
_DotSmoothness("Smoothness", Range(0,0.01)) = 0.002<br />
<br />
<b><span style="color: #444444;">[Header(Color)]</span></b><br />
<b><span style="color: #444444;"> _BackgroundColor("Background Color", </span><span style="color: #0b5394;">Color</span><span style="color: #444444;">) = (0.85,0.85,0.85,1)</span></b><br />
<b><span style="color: #444444;"> _DotColor("Dot Color", </span><span style="color: #0b5394;">Color</span><span style="color: #444444;">) = (0,0,0,1)</span></b></div>
<div>
}</div>
</div>
<div>
<br /></div>
<div id="code-snippet">
<div>
<span style="color: #0b5394;">sampler2D</span> _MainTex;</div>
<div>
<span style="color: #0b5394;">float</span> _CellSize;</div>
<div>
<span style="color: #0b5394;">float</span> _DotSize;</div>
<div>
<span style="color: #0b5394;">float</span> _DotSmoothness;<br />
<b><span style="color: #0b5394;">fixed4</span><span style="color: #444444;"> _BackgroundColor;</span></b><br />
<b><span style="color: #444444;"></span></b>
<b><span style="color: #0b5394;">fixed4</span><span style="color: #444444;"> _DotColor;</span></b></div>
</div>
<div>
<br /></div>
<div>
We should also replace our two placeholder values in the fragment shader with those new properties.<br />
<br />
<div id="code-snippet">
<div>
<span style="color: #0b5394;">fixed4</span> frag (v2f i) : SV_Target</div>
<div>
{</div>
<div>
<span style="color: #38761d;">//Create Cells</span></div>
<div>
<span style="color: #0b5394;">float</span> cellWidth = _CellSize / _ScreenParams.x;</div>
<div>
<span style="color: #0b5394;">float</span> cellHeight = _CellSize / _ScreenParams.y;</div>
<div>
<span style="color: #0b5394;">fixed2</span> roundedUV;</div>
<div>
roundedUV.x = round(i.uv.x / cellWidth) * cellWidth;</div>
<div>
roundedUV.y = round(i.uv.y / cellHeight) * cellHeight;</div>
<div>
<br /></div>
<div>
<span style="color: #38761d;">//Calculate Distance From Cell Center</span></div>
<div>
<span style="color: #0b5394;">float2</span> distanceVector = i.uv - roundedUV;</div>
<div>
distanceVector.x = (distanceVector.x / _ScreenParams.y) * _ScreenParams.x;</div>
<div>
<span style="color: #0b5394;">float</span> distanceFromCenter = length(distanceVector);</div>
<div>
<br /></div>
<div>
<span style="color: #38761d;">//Calculate Dot Size</span></div>
<div>
<span style="color: #0b5394;">float</span> dotSize = _DotSize / _ScreenParams.x;</div>
<div>
<br /></div>
<div>
<span style="color: #0b5394;">fixed4</span> roundedCol = tex2D(_MainTex, roundedUV);</div>
<div>
<br /></div>
<div>
<span style="color: #38761d;">//Calculate Displayed Color</span></div>
<div>
<span style="color: #444444;"> </span><span style="color: #0b5394;">float</span><span style="color: #444444;"> lerpAmount = smoothstep(_DotSize, _DotSize + _DotSmoothness, distanceFromCenter);</span></div>
<div>
<span style="color: #444444;"> <strike><span style="color: #999999;">fixed4 col = lerp(float4(0, 0, 0, 1), float4(1, 1, 1, 1), lerpAmount);</span></strike></span><br />
<span style="color: #444444;"><span style="color: #999999;"> </span></span><span style="color: #444444;"><b><span style="color: #0b5394;">fixed4</span><span style="color: #444444;"> col = lerp(_DotColor, _BackgroundColor, lerpAmount);</span></b></span></div>
<div>
<span style="color: #a64d79;">return</span> col;</div>
<div>
}</div>
</div>
</div>
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b>Step 4: Calculating Dots Sizes</b></span><br />
<span style="font-size: large;"><b><br /></b></span>
This is actually much easier than it sounds. All we need to do, is to get the relative luminosity (i.e. the perceived brightness) of the "rounded" Color and multiply it with the dot size. For this, we use the so-called <a href="https://en.wikipedia.org/wiki/Relative_luminance" target="_blank">luminosity function</a>. Multiplying the dot size with 1-luminosity will make lighter cells have smaller dots and darker cells have larger dots. You can also try using the unmodified uv to get the luminosity, giving you skewed dots, but a slightly more realistic look.<br />
<br />
<div id="code-snippet">
<span style="color: #0b5394;">fixed4</span> frag (v2f i) : SV_Target<br />
{<br />
<span style="color: #38761d;">//Create Cells</span><br />
<span style="color: #0b5394;">float</span> cellWidth = _CellSize / _ScreenParams.x;<br />
<span style="color: #0b5394;">float</span> cellHeight = _CellSize / _ScreenParams.y;<br />
<span style="color: #0b5394;">fixed2</span> roundedUV;<br />
roundedUV.x = round(i.uv.x / cellWidth) * cellWidth;<br />
roundedUV.y = round(i.uv.y / cellHeight) * cellHeight;<br />
<br />
<span style="color: #38761d;">//Calculate Distance From Cell Center</span><br />
<span style="color: #0b5394;">float2</span> distanceVector = i.uv - roundedUV;<br />
distanceVector.x = (distanceVector.x / _ScreenParams.y) * _ScreenParams.x;<br />
<span style="color: #0b5394;">float</span> distanceFromCenter = length(distanceVector);<br />
<br />
<span style="color: #38761d;">//Calculate Dot Size</span><br />
<span style="color: #0b5394;">float</span> dotSize = _DotSize / _ScreenParams.x;<br />
<span style="color: #0b5394;">fixed4</span> roundedCol = tex2D(_MainTex, i.uv); <b><span style="color: #444444;">//use </span></b><b><span style="color: #444444;"><i>roundedUV</i></span></b><b><span style="color: #444444;"> instead of i.uv for different effect</span></b><br />
<b><span style="color: #0b5394;">float</span><span style="color: #444444;"> luma = dot(roundedCol.rgb, float3(0.2126, 0.7152, 0.0722));</span></b><br />
<b><span style="color: #444444;"> dotSize *= (1 - luma);</span></b><br />
<br />
<span style="color: #38761d;">//Calculate Displayed Color</span><br />
<span style="color: #0b5394;">float</span> lerpAmount = smoothstep(dotSize, dotSize + _DotSmoothness, distanceFromCenter);<br />
<span style="color: #0b5394;">fixed4</span> col = lerp(_DotColor, _BackgroundColor, lerpAmount);<br />
<span style="color: #a64d79;">return</span> col;<br />
}</div>
<div>
<br /></div>
And done! You can now enjoy all of your Unity scenes with your very own Halftone Post-Processing effect!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4irItw9cO6WubAhEWnDMMYwQxe8Xae3JllWFMsgQ5yD4PB2TKY5c_5mt2EO3oYorQj4UNtPaG2m0mYk3dIFcut0TEid3AyDww2aJ47JZDqLbMLKR4EEHm-dnlk8N6Nbctq1z88KsEEhI/s1600/step4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="738" data-original-width="1134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4irItw9cO6WubAhEWnDMMYwQxe8Xae3JllWFMsgQ5yD4PB2TKY5c_5mt2EO3oYorQj4UNtPaG2m0mYk3dIFcut0TEid3AyDww2aJ47JZDqLbMLKR4EEHm-dnlk8N6Nbctq1z88KsEEhI/s1600/step4.png" /></a></div>
<br />Unknownnoreply@blogger.comtag:blogger.com,1999:blog-536361980114834097.post-12322533037436726982020-06-01T10:00:00.001-07:002020-10-29T01:19:20.791-07:00Chairades<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWkCGmCXgX4za6OsorBk7c7KA4eQOrz2F-3U0UbE-tqfVkYQSjsvzNjXP2E3G15o1rUdZhDEjWphXL-amttOZyQ2M4tD2s4LYYxcAF2M40d1QWz10Ai-k5Frn6wu1V-2UG_gEA3nKHMU/s1600/ChairadesAwards1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWkCGmCXgX4za6OsorBk7c7KA4eQOrz2F-3U0UbE-tqfVkYQSjsvzNjXP2E3G15o1rUdZhDEjWphXL-amttOZyQ2M4tD2s4LYYxcAF2M40d1QWz10Ai-k5Frn6wu1V-2UG_gEA3nKHMU/s16000/ChairadesAwards1.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>
<br />
<div style="background-color: white; color: #222222; font-family: Lato, Lato, LatoExtended, sans-serif; font-size: 16px; text-align: justify;">
<i>Chairades </i>was created for the course <i>Game Design 6: Experimental Game Design</i> and later released on <a href="https://analauramc2.itch.io/chairades" target="_blank">itch</a> as part of the Gotland Game Conference showcase 2020, where it won three awards: <i>Best in Show</i>, <i>The Innovation Award</i>, and <i>Best Presentation</i>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Lato, Lato, LatoExtended, sans-serif; font-size: 16px; text-align: justify;">
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="background-color: white; color: #222222; font-size: 16px; text-align: justify;">In Chairades, your goal is to assemble a chair using the given budget. You can buy all the materials your heart desires: planks, beams, books - even cacti and bowling balls. The player can place and combine materials, move them around and rotate them. Once you are satisfied with your finished creation, a professional chair tester will enter the room and sit on it. He will then determine if your chair is ready for the market.</span><br />
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="background-color: white; color: #222222; font-size: 16px; text-align: justify;"><br /></span>
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="background-color: white; color: #222222; font-size: 16px; text-align: justify;">The game features a big toolbox with placement, movement, rotation and delete tools, a save and load file system, multiple customers, a simulation system including slow motion, wonky rag doll physics and loads of fun.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Lato, Lato, LatoExtended, sans-serif; font-size: 16px; text-align: justify;">
The game was created in a group of three people, where my task was to code the game, as well as creating sounds for the various game actions.<br />
<br />
Get the game on itch:<br />
<br />
<iframe frameborder="0" height="167" src="https://itch.io/embed/609796" width="552"><a href="https://fatduckgames.itch.io/chairades">Chairades by Fat Duck Games</a></iframe>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg977qEa_-cfLVvL-rM0La53cuJZ3eI2s2qAahXh06qJAeaA-y2EEk6H5Enj_JJ4UveBD-nMwr5xDUBf1KMPT7123k2r3sIfF5NFLim5ey5E6S_1YH0TUut0j52nVf_tySGrAfC0Xtollk/s1600/NkbctY+%25281%2529.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg977qEa_-cfLVvL-rM0La53cuJZ3eI2s2qAahXh06qJAeaA-y2EEk6H5Enj_JJ4UveBD-nMwr5xDUBf1KMPT7123k2r3sIfF5NFLim5ey5E6S_1YH0TUut0j52nVf_tySGrAfC0Xtollk/s640/NkbctY+%25281%2529.png" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirVtFaKEabEJcmvNn9ICpAeYrNPqD4PUnhmgBLzwFEkr4BOHLznSYc9vgUZrwNpL-X19-w_HvWCvFQ72cNm7n62_BtrEyugvPxbazO_J_CzVeFCxvx3JRN-IfjFXwSZv8DY3BG45ds_mg/s1600/fa34jA.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="700" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirVtFaKEabEJcmvNn9ICpAeYrNPqD4PUnhmgBLzwFEkr4BOHLznSYc9vgUZrwNpL-X19-w_HvWCvFQ72cNm7n62_BtrEyugvPxbazO_J_CzVeFCxvx3JRN-IfjFXwSZv8DY3BG45ds_mg/s640/fa34jA.gif" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRkBvYPOK-G6su1W0vBhr6LIo2ps8Uzn_WxOPxRTEns6UHu4FUqlZ1dT5ARiRVF5BzBAewMjyzeUgqv27ky0dR-DNk4KG8AJiVu5o2vWnezt5zzbiqdtv7yXEUN_XXC-qKQAz81fMsZhk/s1600/Si8XkZ.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRkBvYPOK-G6su1W0vBhr6LIo2ps8Uzn_WxOPxRTEns6UHu4FUqlZ1dT5ARiRVF5BzBAewMjyzeUgqv27ky0dR-DNk4KG8AJiVu5o2vWnezt5zzbiqdtv7yXEUN_XXC-qKQAz81fMsZhk/s640/Si8XkZ.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChGqr6Bz2OKOjhiwrEyNNAOYGtD9yv4UF2NT-mAXBUfWV0xUWEJQsGhNWd6HQj2SnrUsivzpktBs__qKsy5a7gsYhDR1MF6tb6og1Y7CrXS_dX1dIlHpVxrwONhkTH_Bfd9vDnGFrpSk/s1600/7iwefy.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChGqr6Bz2OKOjhiwrEyNNAOYGtD9yv4UF2NT-mAXBUfWV0xUWEJQsGhNWd6HQj2SnrUsivzpktBs__qKsy5a7gsYhDR1MF6tb6og1Y7CrXS_dX1dIlHpVxrwONhkTH_Bfd9vDnGFrpSk/s640/7iwefy.png" width="640" /></a></div>
</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-536361980114834097.post-43844593536339804922020-03-20T12:00:00.002-07:002020-10-29T01:23:55.728-07:00Stereo Driver<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ptoUpnd6IJx7ES0yFEZjn6Y0pbhPoACDEH4-X1dM8k-clVIPJcXO5pxKJR82zPmwhB1KrtmE40Mn8Op6Ju1nbnw1c4xT1nXjIHFaJSmYisfJx3qkk2x882ZhSiod_Yb47oGLd9cAsjs/s640/Screenshot+%252876%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ptoUpnd6IJx7ES0yFEZjn6Y0pbhPoACDEH4-X1dM8k-clVIPJcXO5pxKJR82zPmwhB1KrtmE40Mn8Op6Ju1nbnw1c4xT1nXjIHFaJSmYisfJx3qkk2x882ZhSiod_Yb47oGLd9cAsjs/s16000/Screenshot+%252876%2529.png" /></a></div><br /><i style="color: #222222; font-family: Lato, Lato, LatoExtended, sans-serif; font-size: 16px;"><br /></i><i style="color: #222222; font-family: Lato, Lato, LatoExtended, sans-serif; font-size: 16px;"><br /></i></div>
<div style="text-align: justify;">
<i style="color: #222222; font-family: Lato, Lato, LatoExtended, sans-serif; font-size: 16px;"><br /></i></div>
<div style="text-align: justify;">
<i style="color: #222222; font-family: lato, lato, latoextended, sans-serif;">Stereo Driver </i><span face=""lato" , "lato" , "latoextended" , sans-serif" style="background-color: white; color: #222222;">was created for the course </span><i style="color: #222222; font-family: lato, lato, latoextended, sans-serif;">Game Design 6: Experimental Game Design</i><span face=""lato" , "lato" , "latoextended" , sans-serif" style="background-color: white; color: #222222;"> and later released on </span><a href="https://analauramc2.itch.io/stereo-driver" style="color: black; font-family: lato, lato, latoextended, sans-serif; margin: 0px; padding: 0px;" target="_blank">itch</a><span face=""lato" , "lato" , "latoextended" , sans-serif" style="color: #222222;"><span style="background-color: white;">, where it got added to the game collection <i><a href="https://www.eurogamer.net/articles/2020-03-19-indie-devs-make-a-bunch-of-games-free-on-itch-to-help-with-self-isolation" target="_blank">self-isolation on a budget</a> </i>and received thousands of downloads.</span></span></div>
<div style="text-align: justify;">
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="color: #222222;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="color: #222222;"><span style="background-color: white;">In Stereo Driver, the player explores a procedural generated terrain that constantly changes to the music played by a car radio controlled by the player. You can find and collect cassettes, allowing you to add new songs to your car radio.</span></span></div>
<div style="text-align: justify;">
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="color: #222222;"><span style="background-color: white;">Stereo Driver allows you to pick any song from YouTube and load it into the game to explore how the world changes along with the music. Additionally, you can upload your own music files to the game, creating a fully personalized experience.</span></span></div>
<div style="text-align: justify;">
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="color: #222222;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="color: #222222;"><span style="background-color: white;">Stereo Driver features seven different biomes, an advanced YouTube system, a local file system, music conversion and normalization, advanced options and loads of visual effects and custom shaders.</span></span></div>
<div style="text-align: justify;">
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="color: #222222;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: justify;">
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="background-color: white; color: #222222; font-size: 16px;">The game was created in a group of three people, where my task was to code the game, as well as creating shaders, sounds and making a coherent UI.</span></div>
<div style="text-align: justify;">
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="background-color: white; color: #222222; font-size: 16px;"><br /></span></div>
<div style="text-align: justify;">
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="background-color: white; color: #222222; font-size: 16px;">Get the game on itch:</span></div>
<div style="text-align: justify;">
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="background-color: white; color: #222222; font-size: 16px;"><br /></span></div>
<div style="text-align: justify;">
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="background-color: white; color: #222222; font-size: 16px;"><br /></span></div>
<iframe frameborder="0" height="167" src="https://itch.io/embed/588395" width="552"><a href="https://analauramc2.itch.io/stereo-driver">Stereo Driver by Smig</a></iframe>
<br />
<div style="text-align: justify;">
<span face=""lato" , "lato" , "latoextended" , sans-serif" style="background-color: white; color: #222222; font-size: 16px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrkU_vQaMtcbxDO6Jw0BdkP-SxTp-VeY2uiyGWW10Vs1z8wq5aygmzN2qvWLiDfxSUo3VazH43He52RmGxzAC-clnri70iQZHl6FPM4rrpm4pL50EqdbnTI9cs82QlYwookLrbXm_JhdE/s800/ezgif.com-optimize%25281%2529.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="450" data-original-width="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrkU_vQaMtcbxDO6Jw0BdkP-SxTp-VeY2uiyGWW10Vs1z8wq5aygmzN2qvWLiDfxSUo3VazH43He52RmGxzAC-clnri70iQZHl6FPM4rrpm4pL50EqdbnTI9cs82QlYwookLrbXm_JhdE/s16000/ezgif.com-optimize%25281%2529.gif" /></a></div><div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;"><br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWQjAcaSThMej0QWYv00dnqm76sipT53HlQYJWcn7whGApIQQwndLIsMCjx-xyKBzTJ3m7-R0T7PdPZg1j_ZhJEIErHtHgvZHy9faW3Fl7pG0lS8a4Nwu8gpjTalfuJ5M5stLoF8UMOog/s640/Screenshot+%2528119%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="358" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWQjAcaSThMej0QWYv00dnqm76sipT53HlQYJWcn7whGApIQQwndLIsMCjx-xyKBzTJ3m7-R0T7PdPZg1j_ZhJEIErHtHgvZHy9faW3Fl7pG0lS8a4Nwu8gpjTalfuJ5M5stLoF8UMOog/s16000/Screenshot+%2528119%2529.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiADvStzBU7itR_X0yA04_L0vENJgPNORRj4CyEVccU_Ti2O3AmxIlVr7bJ5r98ht_Jk6A52PoS3ZxjSggkjhM-NEESSNsoGghDZez6SWgPRnZpaArLM33DoPUlIY7wmqVskYm6VEjQkrU/s640/Screenshot+%252867%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiADvStzBU7itR_X0yA04_L0vENJgPNORRj4CyEVccU_Ti2O3AmxIlVr7bJ5r98ht_Jk6A52PoS3ZxjSggkjhM-NEESSNsoGghDZez6SWgPRnZpaArLM33DoPUlIY7wmqVskYm6VEjQkrU/s16000/Screenshot+%252867%2529.png" /></a></div><br /><div><br /></div>Unknownnoreply@blogger.comtag:blogger.com,1999:blog-536361980114834097.post-3611785976523823492020-02-02T04:54:00.000-08:002020-02-02T04:54:14.488-08:00Retro Find<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioci0ZG3rDNXh07rM6rCnzW-SCA4kj7zHZbcpAJr4ZQ4E1WXlfxhFr6YnWowHH3QgnQ3kzFWHzMVs5c1qAs8VuJhjzssHq1rPrUOgHX1O04Khl8K80tITl6CVdpFt0bAdUWwjEoN5Qm8c/s1600/headerGooglePlay.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="1024" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioci0ZG3rDNXh07rM6rCnzW-SCA4kj7zHZbcpAJr4ZQ4E1WXlfxhFr6YnWowHH3QgnQ3kzFWHzMVs5c1qAs8VuJhjzssHq1rPrUOgHX1O04Khl8K80tITl6CVdpFt0bAdUWwjEoN5Qm8c/s640/headerGooglePlay.png" width="640" /></a></div>
<div style="background-color: white; color: #2e2e2e; font-family: "Open Sans", sans-serif; line-height: 1.38; margin: 0pt 0px; padding: 0px;">
<span style="font-family: "arial"; font-size: 12pt; margin: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>Retro Find was created by me as a personal project. </div>
<div style="background-color: white; color: #2e2e2e; font-family: "Open Sans", sans-serif; line-height: 1.38; margin: 0pt 0px; padding: 0px;">
It is an abstract casual brain game for Android and requires players to find shapes and geometry specified for each game round. Finding the right shapes gives the player not just points, but also more time to find more. Once the time has run out, the game is over.<br />
Retro Find features 4 different unlockable levels, endless game play and lots of fun!<br />
Most of the game was made by me, however I got some help with Music, Sound Effects and 3D Models.</div>
<br />
<div dir="ltr" style="background-color: white; color: #2e2e2e; line-height: 1.38; margin: 0pt 0px; padding: 0px;">
<span style="font-family: "arial";"><span style="white-space: pre-wrap;"><a href="https://play.google.com/store/apps/details?id=com.JANPLAEHN.Find" target="_blank">Get Retro Find on Google Play!</a></span></span></div>
<div dir="ltr" style="background-color: white; color: #2e2e2e; line-height: 1.38; margin: 0pt 0px; padding: 0px;">
<span style="font-family: "arial";"><br /></span></div>
<div dir="ltr" style="background-color: white; color: #2e2e2e; line-height: 1.38; margin: 0pt 0px; padding: 0px;">
<span style="font-family: "arial";"><br /></span></div>
<div dir="ltr" style="background-color: white; color: #2e2e2e; line-height: 1.38; margin: 0pt 0px; padding: 0px;">
<span style="font-family: "arial";"><span style="white-space: pre-wrap;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Rgn9XaZHeZxM7TrqtShH6lp0806KNuG_HjFO_9uvJDBZCZJfImzeM0qBKNd8Ji6jHGvSozNxZYPWeEnUMBTxtOyCI-o7cAEoNz5FyaEF9mT3VeoIDN_42gJFFZvZn579XRcHlIR7fUg/s1600/Screenshot+%2528474%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="908" data-original-width="512" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Rgn9XaZHeZxM7TrqtShH6lp0806KNuG_HjFO_9uvJDBZCZJfImzeM0qBKNd8Ji6jHGvSozNxZYPWeEnUMBTxtOyCI-o7cAEoNz5FyaEF9mT3VeoIDN_42gJFFZvZn579XRcHlIR7fUg/s400/Screenshot+%2528474%2529.png" width="225" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJl6nA5dzl05XHOYFs6tQu3a7SKxy-06OdnXYTGMz5N4xVT8EuLGw3KXzlypX1Vp70SlDzp1xnQntPBOpLbASe43AFxpKV56BNTqHPboIZJNCTMBrOO_QQEqvZWaAVMcImn40mCk3ZvUY/s1600/Screenshot+%2528478%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="908" data-original-width="512" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJl6nA5dzl05XHOYFs6tQu3a7SKxy-06OdnXYTGMz5N4xVT8EuLGw3KXzlypX1Vp70SlDzp1xnQntPBOpLbASe43AFxpKV56BNTqHPboIZJNCTMBrOO_QQEqvZWaAVMcImn40mCk3ZvUY/s400/Screenshot+%2528478%2529.png" width="225" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0SrZ1LUC5zZ2J45-TJZmqUMui5eU54Vm3dN8nXTxKDXNPy5E6MZWCkGcVN5XsTOiJtVaQZPCRHkawCJ40GAwaBmZdZnu-wPBrG9BSh3frg-i1Wnm70CpyihxeTM-RjDxvBHtcTroEpHM/s1600/Screenshot+%2528480%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="908" data-original-width="512" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0SrZ1LUC5zZ2J45-TJZmqUMui5eU54Vm3dN8nXTxKDXNPy5E6MZWCkGcVN5XsTOiJtVaQZPCRHkawCJ40GAwaBmZdZnu-wPBrG9BSh3frg-i1Wnm70CpyihxeTM-RjDxvBHtcTroEpHM/s400/Screenshot+%2528480%2529.png" width="225" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJky26UgvzrAyJCsnK5jWD0ZCaf-I-gHHklaMO41vt_V6qoTIHAL3q-oSDoonBhhuyRkC-BGK2O8XiY8Cy9A3ZcoYGDZ7ZIaGBebgiYv8_ehT-q4DVerA0ury3AeAjHPk5je1tA4LULQ/s1600/Screenshot+%2528482%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="908" data-original-width="512" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJky26UgvzrAyJCsnK5jWD0ZCaf-I-gHHklaMO41vt_V6qoTIHAL3q-oSDoonBhhuyRkC-BGK2O8XiY8Cy9A3ZcoYGDZ7ZIaGBebgiYv8_ehT-q4DVerA0ury3AeAjHPk5je1tA4LULQ/s400/Screenshot+%2528482%2529.png" width="225" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div dir="ltr" style="background-color: white; color: #2e2e2e; line-height: 1.38; margin: 0pt 0px; padding: 0px;">
<span style="font-family: "arial";"><span style="white-space: pre-wrap;"><br /></span></span></div>
<div>
<span style="font-family: "arial"; font-size: 12pt; margin: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-536361980114834097.post-29505977803403580052019-07-04T03:06:00.000-07:002019-10-27T03:09:05.635-07:00Runway Rumble<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Runway Rumble was created for the course </span><span style="font-family: Arial; font-size: 12pt; font-style: italic; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Game Production 2: Vertical Slice</span><span style="font-family: Arial; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and later showcased at the Gotland Game Conference, where it got nominated for </span><span style="font-family: Arial; font-size: 12pt; font-style: italic; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Best Social Game</span><span style="font-family: Arial; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and the </span><span style="font-family: Arial; font-size: 12pt; font-style: italic; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Jury Spotlight Award.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">This game is a local 2 versus 2 multiplayer game that takes place at an airport, you are in control of cars that work to service planes so they can take off while trying to contain the chaos. Service planes before they leave again. Do this by picking the right vehicle for the service they need. To service the planes you need to collect the right resources and shoot them at the planes. Use these tools to best the chaos at the airport and ensure enjoyable travels to all passengers more effectively then the other team roaming the tarmac.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span id="docs-internal-guid-df40f349-7fff-6ca7-75ed-0d9ea9bf3ccc"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">My personal role in creating Runway Rumble was programming the main gameplay mechanics as well as the UI. I was in charge of creating a good game feel and making the cars in the game be fun and easy to handle. Furthermore, I created a camera system, cut scenes, post-processing and a custom ocean shader.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://game.speldesign.uu.se/projects/3d-games/runway-rumble/" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: Arial; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Find Runway Rumble on Gotland Game Blog!</span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3jGAxj-P2QHGyiTNuBIANhlAwQSZuvL2cV-wZA99At76CPaiZzwVFoLg1-kEDuczPzGp-nsLfCbCG0Hep7vaj5O9eSQeIIajrgNwWPKKuj3zhyzWbPvRPiaNMquToNTUIaaiM9VbPs48/s1600/Screenshot+%2528311%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3jGAxj-P2QHGyiTNuBIANhlAwQSZuvL2cV-wZA99At76CPaiZzwVFoLg1-kEDuczPzGp-nsLfCbCG0Hep7vaj5O9eSQeIIajrgNwWPKKuj3zhyzWbPvRPiaNMquToNTUIaaiM9VbPs48/s1600/Screenshot+%2528311%2529.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSzIODhRbxwHnv7axienWp-h1kLN1SjC3q7N9TI25cGIg6fKNSF20b2r6DyFH63K0zAkZSroXQn-0zZEeWodp__9BCyh-rGNlZ6ZfUY7DZ8J4g2NtcD7urAOSsw1J-vl2AbGcPdKWo04/s1600/Screenshot+%2528313%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSzIODhRbxwHnv7axienWp-h1kLN1SjC3q7N9TI25cGIg6fKNSF20b2r6DyFH63K0zAkZSroXQn-0zZEeWodp__9BCyh-rGNlZ6ZfUY7DZ8J4g2NtcD7urAOSsw1J-vl2AbGcPdKWo04/s1600/Screenshot+%2528313%2529.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_dkHb87hLoT3Mi5R0R0q-4t3NV1IJowJraMF4mPbF6BbKdsqoKT5QUObIev-QQ9MWVugCUT0p106buQa2Q2xK8i-MBuGE9jD3IctYflatQEFrpTfXM8w3snC3PqnhAh0IQnrlecDwTa8/s1600/Screenshot+%2528315%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_dkHb87hLoT3Mi5R0R0q-4t3NV1IJowJraMF4mPbF6BbKdsqoKT5QUObIev-QQ9MWVugCUT0p106buQa2Q2xK8i-MBuGE9jD3IctYflatQEFrpTfXM8w3snC3PqnhAh0IQnrlecDwTa8/s1600/Screenshot+%2528315%2529.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtzEDPO6R9x8RamX87J3hN0Ex6nuZ3egNQHmEjoCPCqn8hCCiaa2O8oqY1gNKWpn5Z0Ah1hPNT5SrIRcgThJ0PpMkJRC1COzQH-M0D4nykHaIfXkmKi-PDGfE7XGXX0-yhypgdn2fAsZc/s1600/Screenshot+%2528318%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtzEDPO6R9x8RamX87J3hN0Ex6nuZ3egNQHmEjoCPCqn8hCCiaa2O8oqY1gNKWpn5Z0Ah1hPNT5SrIRcgThJ0PpMkJRC1COzQH-M0D4nykHaIfXkmKi-PDGfE7XGXX0-yhypgdn2fAsZc/s1600/Screenshot+%2528318%2529.png" /></a></div>
<br />Unknownnoreply@blogger.comtag:blogger.com,1999:blog-536361980114834097.post-25066333341638702462017-07-01T04:36:00.000-07:002020-07-05T05:20:32.304-07:00Small Projects<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4MboeBM2YCmHNaoLLTDWb2UajWedv2ScPXs4_O3zTZL6HMq8ANvtfEN8fMrRP5bEp90doNSAziGMTsyVd0Rh01c0ylo1LfVucjEtYAZBJwcMplStXdUxTMN1Pl26AxW-SsUnkMV6e5U/s1600/smallProjectspreview.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="632" data-original-width="1349" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4MboeBM2YCmHNaoLLTDWb2UajWedv2ScPXs4_O3zTZL6HMq8ANvtfEN8fMrRP5bEp90doNSAziGMTsyVd0Rh01c0ylo1LfVucjEtYAZBJwcMplStXdUxTMN1Pl26AxW-SsUnkMV6e5U/s1600/smallProjectspreview.png" /></a></div>
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b>Crowd Surfers</b></span><br />
<i><span style="font-size: x-small;">June 2020</span></i><br />
<i><br /></i>
<i>Crowd Surfers</i> is an experimental game made for the IGDA eJam 2020 within 48 hours in a team of three people.<br />
<br />
The goal of this game is to carry as many crowd surfers from the concert as possible to the back without dropping them! Players control the arms/crowd by making them follow the mouse cursor. In addition to this, players have to activate the chunk of the crowd they want to control. My personal tasks within the development included programming the game loop, procedural animations and polish. Get <i>Crowd Surfers</i> <a href="https://fatduckgames.itch.io/crowd-surfers" target="_blank">here!</a><br />
<div>
<div>
<br /></div>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjItjTaXyr15KfJobNDzrKWCCbVKDnGaZcdLZC-29MeSaN2Z2XyJyNLckoN-bQRODCrsKniq-TLW-02MtajbaDhqn0hCBxkwct4yiOs4DIHTTdIcbjovuZ_AsSn8q8_o_jPJN2zb2cnEVk/s1600/iYaNW0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="632" data-original-width="1349" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjItjTaXyr15KfJobNDzrKWCCbVKDnGaZcdLZC-29MeSaN2Z2XyJyNLckoN-bQRODCrsKniq-TLW-02MtajbaDhqn0hCBxkwct4yiOs4DIHTTdIcbjovuZ_AsSn8q8_o_jPJN2zb2cnEVk/s1600/iYaNW0.png" /></a><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Legs.</b></span><br />
<span style="font-size: large;"><i style="font-size: medium;"><span style="font-size: x-small;">June 2020</span></i></span><br />
<br />
Legs. is an experimental 2D platformer including charming (?) programmer art and wonky controls, and was made by myself as a personal project for the <i>I Can't Draw But Want To Make A Game </i>jam on itch.<br />
<br />
The player takes their legs for a stroll at the beach to reach the sea and go for a swim. But watch out! Sea urchins and crabs are nothing you want to step on! Play the game in your browser, <a href="https://fatduckgames.itch.io/legs" target="_blank">right here</a>!</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGymVCQ_065LTzscWc09do8fkmoQYH7qtr_K65fKNQFVAvZoaPAIDKRgG_yO4X-vM3uv5rxm9GO8we1z1cMsG5C4kS-5SeEJJPJofXRDS1QRpH2Uy0QXwLpeK23dGZIekErMc-f7MymU/s1600/Screenshot+%252827%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGymVCQ_065LTzscWc09do8fkmoQYH7qtr_K65fKNQFVAvZoaPAIDKRgG_yO4X-vM3uv5rxm9GO8we1z1cMsG5C4kS-5SeEJJPJofXRDS1QRpH2Uy0QXwLpeK23dGZIekErMc-f7MymU/s1600/Screenshot+%252827%2529.png" /></a></div>
<div>
<br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Paper Cat</b></span><br />
<span style="font-size: large;"><i style="font-size: medium;"><span style="font-size: x-small;">March 2020</span></i></span><br />
<span style="background-color: white; color: #222222; font-family: "lato" , "lato" , "latoextended" , sans-serif; font-size: 16px;"><br /></span>
<span style="background-color: white; color: #222222; font-family: "lato" , "lato" , "latoextended" , sans-serif; font-size: 16px;"><i>Paper Cat</i> is a game created for an <i>Experimental Game Design </i>course at Uppsala University. it contains a hidden mechanic aiming to create distrust between players in a seemingly peaceful co-op platformer.</span><br />
<span style="background-color: white; color: #222222; font-family: "lato" , "lato" , "latoextended" , sans-serif; font-size: 16px;"><br /></span>
<span style="background-color: white; color: #222222; font-family: "lato" , "lato" , "latoextended" , sans-serif; font-size: 16px;">Your goal is to work together to reach the end! You can pick up each other and the things around you to help you jump over obstacles. Be careful with the shredders, they will definitely destroy you. Graba friend and play the game <a href="https://fatduckgames.itch.io/paper-cut" target="_blank">here!</a></span><br />
<span style="background-color: white; color: #222222; font-family: "lato" , "lato" , "latoextended" , sans-serif; font-size: 16px;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_JrxuJbwnVBS1aA7HvPMLPwQGzOLn2_-VuAOcmTeDDJrLJKoQkoVd2iQXrzL26JavB-escA7v9TLo-83RWNruy71PCD6OkEft3FFXIl4bdRwC2dziIT_HNL-cs5EanfYidiU7ZT9pIDo/s1600/uf3KuH.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="868" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_JrxuJbwnVBS1aA7HvPMLPwQGzOLn2_-VuAOcmTeDDJrLJKoQkoVd2iQXrzL26JavB-escA7v9TLo-83RWNruy71PCD6OkEft3FFXIl4bdRwC2dziIT_HNL-cs5EanfYidiU7ZT9pIDo/s1600/uf3KuH.png" /></a></div>
<span style="background-color: white; color: #222222; font-family: "lato" , "lato" , "latoextended" , sans-serif; font-size: 16px;"><br /></span>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>El Cheapo</b></span><br />
<span style="font-size: large;"><i style="font-size: medium;"><span style="font-size: x-small;">January 2019</span></i></span><br />
<span style="font-size: large;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;">This mobile game was created within 48 hours for Global Game Jam 2019. Your goal is to flick all the furniture into the moving truck using your fingers. If you miss the truck, it will drive off and leave you with your final score. My tasks in this project included game play and UI programming, creating a sound system and linking to Google Play Services for achievements and leader boards. El Cheapo has also been presented at the Gotland Game Conference 2019 and got nominated for the Jury Spotlight Award.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;"><a href="https://play.google.com/store/apps/details?id=com.WORLDWIDEMARMELADE.ElCheapo" target="_blank">El Cheapo is released on Google Play!</a></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ9pTsqoP76S04jHB6d-dxBaAIEnvQwD8CG4naAT3PUZeiEWFfmyaUh0JQlwc1nPqRs4Q1GYKD0M1c_H0z_o91dso4-wK1VV42nSZgE5nTnYPG4mfhzWO__nNFv9ti2ZvrwhMs5gXLsi4/s1600/ElCheapoScreenshots-2-1920x1080.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ9pTsqoP76S04jHB6d-dxBaAIEnvQwD8CG4naAT3PUZeiEWFfmyaUh0JQlwc1nPqRs4Q1GYKD0M1c_H0z_o91dso4-wK1VV42nSZgE5nTnYPG4mfhzWO__nNFv9ti2ZvrwhMs5gXLsi4/s1600/ElCheapoScreenshots-2-1920x1080.jpg" /></a></div>
<span style="font-size: large;"></span><br />
<br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Jungle Jive</b></span><br />
<span style="font-size: large;"><i style="font-size: medium;"><span style="font-size: x-small;">June 2018</span></i></span><br />
<span style="font-size: large;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="text-align: justify;">
<span style="color: black; font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre;">Jungle Jive was created for the course </span><span style="color: black; font-family: "arial"; font-size: 12pt; font-style: italic; vertical-align: baseline; white-space: pre;">Game Production 1: Arcade Games</span><span style="color: black; font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre;"> and later showcased at the Gotland Game Conference 2018.</span></div>
</div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="text-align: justify;">
<span style="color: black; font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre;">Playing Jungle Jive, your goal is to imitate dance moves to the beat of the background music, similarly to how you play other dancing games. The Twist is, </span></div>
<div style="text-align: justify;">
<span style="color: black; font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre;">that your input device is a puppet. You have to twist and turn the puppets arms and legs to perform the shon dance moves and beat your opponent in a</span></div>
<div style="text-align: justify;">
<span style="color: black; font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre;"> dance </span><span style="color: black; font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre;">off. Additionally, items and freestyle sequences give you more opportunities to win the game and become the dance master of the jungle. </span><span style="font-family: "arial"; font-size: 12pt; white-space: pre-wrap;">My tasks in the project included programming a beat system, general gameplay and UI, as well as composing and producing a music track and building the dolls.</span></div>
</div>
<div style="text-align: justify;">
<span id="docs-internal-guid-42bd9f56-7fff-918b-1c77-d46a3f86aacf"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="text-align: justify;">
<span style="color: #1155cc; font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;"><a href="https://game.speldesign.uu.se/projects/arcade-games/jungle-jive/" style="text-decoration-line: none;">Jungle Jive on the Gotland Game Blog</a></span></div>
</div>
<br />
<div style="text-align: justify;">
<span style="font-size: large;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><br /></span></div>
<div style="text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNw9I1WYE_VMuUEoKrIf4gHtwEzHPhwITGxePABpkV-5BRVwIi86zWSo7OwkdZ-atS3Pqr4sE0ceUTnYeaIVie1UaQhAOV21sVdypx8S9_eCITzgmfF5LW5HMeb4fLwu4n8hJ7cx7az9w/s1600/IMG_9426.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1042" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNw9I1WYE_VMuUEoKrIf4gHtwEzHPhwITGxePABpkV-5BRVwIi86zWSo7OwkdZ-atS3Pqr4sE0ceUTnYeaIVie1UaQhAOV21sVdypx8S9_eCITzgmfF5LW5HMeb4fLwu4n8hJ7cx7az9w/s1600/IMG_9426.jpg" /></a></div>
<span style="font-size: large;"></span>
<span style="font-size: large;"><b><span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b><br /></b></span>
Beelonging</b></span><br />
<span style="font-size: x-small;"><i>March 2018</i></span><br />
<span style="font-size: x-small;"><i><br /></i></span>
<span style="font-size: x-small;"><span style="font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;">Beelonging was created for the course </span><span style="font-family: "arial"; font-size: 12pt; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">Game Design 2: Game Development</span><span style="font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;">. Students were tasked to turn a concept document created by other students into reality by using their newly-learned skills in each of their courses. In the creation of Beelonging my tasks mainly included coding the entire game, but I also made design decisions and took part in sound and music. For Beelonging we created 6 different levels, a boss fight, lots of enemies and a system of unlockable costumes. Play Beelonging <a href="https://team-mimic.itch.io/beelonging" target="_blank">here!</a></span></span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHxOWW5obAq_mBd9xlaIxCzmdIB3ABQoWGzJfd8-Ub-UKCF1oKJyMcqw4ESq1pXf-D5ogGf_L4s7SYuXNGeLe1JYOhmt4rDp_LHifSBZKWNckL8FyUeYqQD_LdObUR9Q9uvleTYGp-fzs/s1600/iCrEqe.png" imageanchor="1" style="font-size: medium; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="900" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHxOWW5obAq_mBd9xlaIxCzmdIB3ABQoWGzJfd8-Ub-UKCF1oKJyMcqw4ESq1pXf-D5ogGf_L4s7SYuXNGeLe1JYOhmt4rDp_LHifSBZKWNckL8FyUeYqQD_LdObUR9Q9uvleTYGp-fzs/s1600/iCrEqe.png" /></a></span></div>
</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-536361980114834097.post-33711506332165822482017-06-01T05:24:00.000-07:002020-07-05T05:27:55.048-07:00Classic Game Clones<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhArjRXCLcosPrRNeL6kPPRxg4yxiafwPdMXV-UqVGC2KZl-SDnTMwqul92AWKh1X3EjuO1Go7muVbCazR_fVmADwUvQRyss55_BXsUHTBUV_KRtsqAJ1YvlzWvnHTZyCU5LV7PqBzPo0Q/s1600/clonesPreview.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="632" data-original-width="1349" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhArjRXCLcosPrRNeL6kPPRxg4yxiafwPdMXV-UqVGC2KZl-SDnTMwqul92AWKh1X3EjuO1Go7muVbCazR_fVmADwUvQRyss55_BXsUHTBUV_KRtsqAJ1YvlzWvnHTZyCU5LV7PqBzPo0Q/s1600/clonesPreview.png" /></a></div>
<br />
<br />
<br />
<span style="font-size: large;"><b>Minecraft Clone</b></span><br />
<span style="font-size: large;"><b><br /></b></span>
<div class="separator" style="clear: both;">
<span style="font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;">As part of the course </span><span style="font-family: "arial"; font-size: 12pt; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">Real-time Graphics Programming for Games</span><span style="font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;"> I was tasked to recreate the voxel world generation and rendering seen in the game Minecraft. The project includes a voxel landscape generated with perlin noise, tree generation and the ability to move and break voxels in-game.</span></div>
<span id="docs-internal-guid-4ebf915e-7fff-cf16-52bc-a74e2d083128"><br /></span>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: #1155cc; font-family: "arial"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="https://github.com/janplaehn/MinecraftClone" style="text-decoration-line: none;">You can find the project repository on my Github.</a></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipQ-RrWmwdyNQnz4h8LU4qGxkwPPgLYR8EYd7fATDHFx4hEoP0BOwIJ0_951r1TC8xpAuy2yWAlV3tS5RQXnQ_5I7P53VK2aFITIkOw_ZhMrNvbWn3SgwwwdyJEfJ3kV-Adjuvc4VPRr0/s1600/minecraft1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="867" data-original-width="1596" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipQ-RrWmwdyNQnz4h8LU4qGxkwPPgLYR8EYd7fATDHFx4hEoP0BOwIJ0_951r1TC8xpAuy2yWAlV3tS5RQXnQ_5I7P53VK2aFITIkOw_ZhMrNvbWn3SgwwwdyJEfJ3kV-Adjuvc4VPRr0/s1600/minecraft1.png" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br />
<br />
<br />
<br />
<span style="font-size: large;"><b>Bomberman Clone</b></span><br />
<span style="font-size: large;"><b><br /></b></span>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;">As part of the University course </span><span style="background-color: white; font-family: "arial"; font-size: 12pt; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">Game Programming 1: Computer Games in 2D </span><span style="background-color: white; font-family: "arial"; font-size: 11.5pt; vertical-align: baseline; white-space: pre-wrap;">we were tasked with recreating old NES games using C++ and the SDL library. I decided to recreate </span><a href="https://www.youtube.com/watch?v=xlp_M92ri-U" style="text-decoration-line: none;"><span style="background-color: white; color: #1155cc; font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;">the original Bomberman</span></a><span style="font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;"> and wrote a game loop running ten unlockable levels, seven characters and three different power ups.</span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSgUp7Av1a4EOybHP4hE5tYINPZLZF8nHDx9WfDR4W2J8CAFsYHLPuk8oM47t-gv8g15Dy5g07ff9m-NqUcaYtIhfq5m5vsN_ERNB9oWBykUp_ug6WicjypM-0uyWEF9rd19dmab2SyKA/s1600/bomberman_static.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="699" data-original-width="1000" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSgUp7Av1a4EOybHP4hE5tYINPZLZF8nHDx9WfDR4W2J8CAFsYHLPuk8oM47t-gv8g15Dy5g07ff9m-NqUcaYtIhfq5m5vsN_ERNB9oWBykUp_ug6WicjypM-0uyWEF9rd19dmab2SyKA/s1600/bomberman_static.png" /></a></div>
<div>
<br /></div>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7AZQu8Rag0QSHsvwhxX1XPN7PEDkPgGsSsp_ZBV4BkLkIuRHC-F1qj8I5b9zkthZjtuEt_-OtEAn55ehivv9Gcia6CpNj7cQZBNrhzejfBCq40HNuXeGfxgFjUD2uAGVdg4WOYyhRHMc/s1600/bomberman2.gif" imageanchor="1" style="clear: left; float: left; font-family: "times new roman"; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="503" data-original-width="671" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7AZQu8Rag0QSHsvwhxX1XPN7PEDkPgGsSsp_ZBV4BkLkIuRHC-F1qj8I5b9zkthZjtuEt_-OtEAn55ehivv9Gcia6CpNj7cQZBNrhzejfBCq40HNuXeGfxgFjUD2uAGVdg4WOYyhRHMc/s320/bomberman2.gif" width="320" /></a></div>
</div>
</div>
Unknownnoreply@blogger.com