tag:blogger.com,1999:blog-78630012548485840782024-03-05T12:36:45.957+01:00With Hoe At SunWith Hoe At Sun - word to word translation of polish idiom meaning "chasing rainbows" - my approach to Computer Graphics and GamesMichał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.comBlogger26125tag:blogger.com,1999:blog-7863001254848584078.post-13132881414353595242019-03-24T14:36:00.000+01:002019-03-24T14:36:10.586+01:00Blog moved to codeklos.wordpress.com<h4>
<a href="https://codeklos.wordpress.com/"></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://codeklos.wordpress.com/"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-RosP1oge2kpEQiztVOKFgJrfKG9o4XrKAb238P98zlwxC02xE0XHwe7zHGr4Cu6tCh14zjRrgAUm-BMzJuIURm73lY_bR7HSRNs9Nkqjf6jdyuQMVeakILHqZGRYmWo0lX7q_82MQI/s1600/Michal+Klos+-+Mozilla+Firefox+%2528Private+Browsing%2529+24_03_2019+14_33_32.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="914" data-original-width="1600" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-RosP1oge2kpEQiztVOKFgJrfKG9o4XrKAb238P98zlwxC02xE0XHwe7zHGr4Cu6tCh14zjRrgAUm-BMzJuIURm73lY_bR7HSRNs9Nkqjf6jdyuQMVeakILHqZGRYmWo0lX7q_82MQI/s400/Michal+Klos+-+Mozilla+Firefox+%2528Private+Browsing%2529+24_03_2019+14_33_32.jpg" width="400" /></a></div>
</h4>
<h4>
After some time without updates I decided to pick the best posts and fill missing content in new layout.<br />It will be continued there: <a href="https://codeklos.wordpress.com/">https://codeklos.wordpress.com/</a></h4>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-49279811401436495772018-01-02T06:46:00.002+01:002018-01-02T07:21:26.051+01:00Crystal Drops, Shadertoy and 4kb demo<div class="separator" style="clear: both; text-align: center;">
<a href="https://i.imgur.com/In5SPpj.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="543" data-original-width="800" height="271" src="https://i.imgur.com/In5SPpj.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I have recently created shadertoy Crystal Drops featuring metaballs with cubemap refraction based on drop density. To add as much cinematic feeling as I could fit into small shader I added post processes like depth of field, chromatic aberration, barrel distortion, vignette and film grain. It was inspired by beginning scene from Protostar Demo made in Unreal Engine 4 by Epic Games.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/zr6u5wJEs4w/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/zr6u5wJEs4w?feature=player_embedded" width="320"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Crystal Drops on shadertoy:</div>
<div style="text-align: center;">
<a href="https://www.shadertoy.com/view/XlSBRW">https://www.shadertoy.com/view/XlSBRW</a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Video capture of shadertoy:</div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/68zsiGPC1gg/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/68zsiGPC1gg?feature=player_embedded" width="320"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Later I used it as test field for creating 4 KB executable and it actually takes 3.05 KB of storage.</div>
Keep in mind that it is my very first attempt at creating such thing. It lacks sound for now. Audio research is next step in enhancing the experience.<br />
<br />
Link to executable:<br />
<div style="text-align: center;">
<a href="https://drive.google.com/open?id=1ORrQHMjLe0HaJN0sy9t17DCcXFsRSORo">https://drive.google.com/open?id=1ORrQHMjLe0HaJN0sy9t17DCcXFsRSORo</a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-27594670090663574952016-12-12T21:20:00.003+01:002017-05-03T22:40:58.947+02:00FATE - Sensei Game Jam 2016<div class="separator" style="clear: both; text-align: center;">
<a href="http://outfrost.itch.io/fate" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://imgur.com/ja5zBQx.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="text-align: start;">This weekend I took part in Sensei Game Jam 2016 oraganized at Faculty of Computer Science Wrocław University. What makes it unique experience, is that experienced game developers teach and mentor less experienced and usually novice ethusiast on their very first jam. </span><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imgur.com/wKsvLsV.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://imgur.com/wKsvLsV.jpg" width="200" /></a></div>
<div class="" style="clear: both; text-align: center;">
<span style="text-align: start;"><br /></span></div>
<div class="" style="clear: both; text-align: center;">
<span style="text-align: start;">I gave lecture about various Tips&Tricks how to successfully create games at jams. There were also 3 other great lectures. I have also helped mentoring one team creating their very first FPS game in Unreal Engine 4, with Andrzej Koloska - polish game dev industry veteran. Theme was: "Wait, actually we are the bad guys?", known from Ludum Dare #24. We called our masterpiece "FATE" as tribute to Doom, cause gameplay and was very similar. It had thrilling plot twist at the and :)</span></div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imgur.com/IAUNzx0.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="115" src="https://imgur.com/IAUNzx0.jpg" width="320" /></a></div>
Details:</div>
<div style="text-align: center;">
<a href="http://outfrost.itch.io/fate">outfrost.itch.io/fate</a></div>
<div style="text-align: center;">
<br /></div>
<div class="" style="clear: both; text-align: center;">
Fellow Player recorded it on youtube 2 hours after the submission, stunning! :D</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/itUiji8c978" width="560"></iframe>
</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
...and he actually understood the message of the game itself.</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imgur.com/VX0y7s0.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="175" src="https://imgur.com/VX0y7s0.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imgur.com/5UFlybl.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="164" src="https://imgur.com/5UFlybl.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Thanks to the hosts of the game jam and congratz to the rest of the team - it was fun weekend indeed!</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-11814978071697658362016-08-16T01:05:00.001+02:002016-08-16T01:05:37.348+02:00Slavic Game Jam 2016 Finalist<div class="separator" style="clear: both; text-align: center;">
During first weekend of August we took part in <a href="http://slavicgamejam.org/">Slavic Game Jam 2016</a> organized by <a href="http://polygon.pw.edu.pl/">KNTG Polygon</a>. We made one of two Unreal Engine 4 games that made it into finals with 15 other entries within 75 games total finished on the jam. About 270 people took part in the event. All games are listed on <a href="https://itch.io/jam/sgj16">itch.io</a>.<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Before the gamejam I presented extended a bit version of my lecture "Achieving Stylized Look in Extreme Conditions"<br /><br /><a href="http://imgur.com/lafSxKU.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="214" src="https://imgur.com/lafSxKU.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
The theme was "the 90's". Our team created mascot claw machine simulator that used eye tracker Tobii Eyex. You could literally aim the claw with your mind. The game was done in Unreal Engine 4. We used Tobi Eyex C++ SDK that is available on github and vendor developer page. Gameplay was in blueprints and based on physics. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/pjgox2j.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="173" src="https://i.imgur.com/pjgox2j.png" width="320" /></a></div>
<br />Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-88376431214062519692016-07-17T18:07:00.001+02:002016-08-16T01:07:16.845+02:00The Ultimate Theory of Gravity<div style="text-align: center;">
<a href="https://drive.google.com/file/d/0Bx4jOPAbHVMoNGw5ak9oNTVrcFk/view">
<img border="0" height="127" src="https://i.imgur.com/R3w7bGz.png" width="400" /></a></div>
<div style="text-align: center;">
<br />
Help Stephen Hawking beat around the bush the gravity and reach the black hole.<br />
Game done at CastleGameJam2016 by total UnrealEngine4 noobs and Szopen.<br />
<br />
<a href="https://drive.google.com/file/d/0Bx4jOPAbHVMoNGw5ak9oNTVrcFk/view">DOWNLOAD AND PLAY</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://drive.google.com/file/d/0Bx4jOPAbHVMoNGw5ak9oNTVrcFk/view">
<img border="0" height="196" src="https://i.giphy.com/3oEjHB4HUFH4gmrvHi.gif" width="320" />
</a>
</div>
<br />
It was great learning experience because <a href="http://www.hourences.com/">Sjoerd De Jong</a> (@hourences) was helping us and teaching great use of Unreal Engine 4 during the jam. On this photo he showed us how to convert our procedural islands to instances so instead of ~1000 drawcals we had 1 per island. Futher we discovered PerInstanceRandom material node and moved block animation from Blueprint Tick (CPU) to Material Vertex Offset (GPU) - got us huge performance boost. We also talked a bit about developement under UE4 and he recomended Perforce version control system since it is used internaly by Epic Games. Perforce is like SVN but more sophisticated and we used it during the jam - ran very smoothly. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://pbs.twimg.com/media/Cm2QWLeXEAQ8_ot.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://pbs.twimg.com/media/Cm2QWLeXEAQ8_ot.jpg" width="240" /></a></div>
</div>
<div style="text-align: center;">
Lets Play:</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/KaLWNUxhhzc/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/KaLWNUxhhzc?feature=player_embedded" width="320"></iframe></div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-70405602222806254302016-06-22T22:21:00.004+02:002016-07-17T18:26:53.343+02:00Achieving Stylized Look in Extreme Conditions lecture at CastleGameJam 2016<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.castlegamejam.com/en/2016/schedule/lectures/achiving-stylized-look-in-extreme-conditions/" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="127" src="https://i.imgur.com/SIrJ04I.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
I am super excited to invite you to lecture about stylized Game Art just before Castle Game Jam 2016.<br />
<div style="text-align: center;">
<a href="http://www.castlegamejam.com/en/2016/schedule/lectures/achiving-stylized-look-in-extreme-conditions/">DETAILS</a><br />
<br />
<a href="https://drive.google.com/open?id=0B1QJnpTHVcYcNWJINXpTNnJGVGM">SLIDES</a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.castlegamejam.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://i.imgur.com/Yyg6ysZ.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/PohDeHD.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://i.imgur.com/PohDeHD.jpg" width="400" /></a></div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-28712536099290286042016-06-18T07:48:00.002+02:002016-06-18T09:22:08.156+02:00Wrocław ACM SIGGRAPH<div class="separator" style="clear: both; text-align: center;">
Last week I had the pleasure to represent TK Games at <a href="http://wroclaw.siggraph.org/event/bringing-zombies-to-your-home/">Wrocław ACM SIGGRAPH</a> at Institute of Computer Science of Wrocław University. Despite only 2 lectures I learned quite a lot about Techland engine and meet people from university interested in graphics, games and VR. Looking forward to next such event.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://wroclaw.siggraph.org/event/bringing-zombies-to-your-home/"><img border="0" height="196" src="https://i.imgur.com/wIK1Pa0.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Here is recorded part of our presentation:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/FptDCtriuQU/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/FptDCtriuQU?feature=player_embedded" width="320"></iframe></div>
<br />Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-45528261726355953712016-02-29T11:56:00.000+01:002016-06-05T11:58:29.104+02:00TimeShift - TK Game Jam 2016 Voxelastic platformer created at <a href="http://tkgames.pwr.wroc.pl/site/tk-game-jam-2016/" target="_blank">TK Game Jam 2016</a> created in Unity.<br />
Resposible for protyping gameplay and GearVR version.
<br />
<br />
<div style="text-align: center;">
<b>Featured by Style and Aestethics winners - Techland Team
</b></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<a href="https://velskicom.itch.io/timeshift" target="_blank">PLAY IT</a>
</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://velskicom.itch.io/timeshift"><img alt="" border="0" height="223" src="https://img.itch.io/aW1hZ2UvNTU5NTIvMjUwNjQyLnBuZw==/original/ceFWrN.png" title="" width="400" /></a>
</div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-34815961678984076792016-01-05T00:06:00.000+01:002016-01-07T22:50:42.602+01:00Shadertoy<div class="separator" style="clear: both; text-align: left;">
Recently I have been playing with shadertoy. Learning raymarching and signed distance fields techniques. I recreated drawing I did in my art class in highschool.</div>
<br />
<div style="text-align: center;">
drawing:</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/EYlx5WB.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/EYlx5WB.jpg" height="232" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
shader:<br />
<br />
<a href="https://www.shadertoy.com/view/ldt3zl" target="_blank">SEE IT IN REALTIME</a><br />
<br /></div>
<div style="text-align: center;">
<a href="https://www.shadertoy.com/view/ldt3zl"><img alt="" border="0" src="http://i.imgur.com/Ixjpok1.jpg" height="200" title="" width="320" /></a>
</div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-54361228674082043722015-12-31T17:32:00.000+01:002016-03-12T12:49:04.002+01:00Star Warrior LDJAM34 <h3 style="clear: both; text-align: center;">
<span style="text-align: start;">We have made game </span><b style="text-align: start;">Star Warrior</b><span style="text-align: start;"> mixing cheesy 80s and Star Wars themes on Ludum Dare game jam.</span></h3>
<h2 style="clear: both; text-align: center;">
<a href="http://ludumdare.com/compo/ludum-dare-34/?action=preview&uid=40133" style="text-align: start;" target="_blank"><span style="font-size: x-large;">PLAY IT</span></a></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/M1yDMwq.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/M1yDMwq.jpg" height="194" width="320" /></a></div>
<br />
<h3 style="text-align: center;">
In game you ride one of space fighters and have to kill with lazers a worm hidding in dunes.</h3>
<div>
<br /></div>
<div>
Game was done in Unity and we aimed for smooth and joyful gliding mechanics. My friend kozun took care of steering, camera movement and whole logic behind space shuttle. Later on programmed nearly whole gameplay. I've figured out wireframe shaders and experimented with shading effects. I've parametrized every detail of dunes and lava look, the world is endless. Then I made space fighter model and painted skybox. At the end I had to rewrite all wireframe shaders since WebGL does not support geometry shaders and update some screen effects since WebGL does not support MovieTexture as well. We had quite busy week and tons of fun working on it. Hope you like it!</div>
<div>
<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/dXaTCPK.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/dXaTCPK.gif" height="186" width="320" /></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/AVvXsEivTraLvQ6AKjP-gxBeZEhRNApO-Ats1HndP2fKc-jhgdWxOcpdbLi9pfb0ni0pcLEBDXGUXzEWnEtsHRGSRfqQAh72VoD6ikufq6IO701iir_AAlTR3632uL4ygU6fgf8ifzHcyqARJRc/s1600/StarWarrior_05_opt4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivTraLvQ6AKjP-gxBeZEhRNApO-Ats1HndP2fKc-jhgdWxOcpdbLi9pfb0ni0pcLEBDXGUXzEWnEtsHRGSRfqQAh72VoD6ikufq6IO701iir_AAlTR3632uL4ygU6fgf8ifzHcyqARJRc/s320/StarWarrior_05_opt4.gif" width="320" /></a></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: center;">
<a href="http://i.imgur.com/dfOOvUR.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/dfOOvUR.jpg" height="199" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/oa4ccDi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/oa4ccDi.jpg" height="199" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com1tag:blogger.com,1999:blog-7863001254848584078.post-6169972538082604452015-11-11T00:19:00.000+01:002015-11-11T00:20:17.461+01:00Vampiremaid sculpt, Sketchfab Staff Picks!Experimented with ZBrush to sketchfab plugin and got materials exported for free. Nice! Later tweaked all properties in their editor. PBR appeals quite nice, but the shadows could be softer.
</br>
</br>
<iframe width="540" height="480" src="https://sketchfab.com/models/55913f94b2934292bdc6f24766eb9413/embed" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
<a href="https://sketchfab.com/models/55913f94b2934292bdc6f24766eb9413?utm_source=oembed&utm_medium=embed&utm_campaign=55913f94b2934292bdc6f24766eb9413" target="_blank" style="font-weight: bold; color: #1CAAD9;">Vampiremaid sculpt</a>
by <a href="https://sketchfab.com/spolsh?utm_source=oembed&utm_medium=embed&utm_campaign=55913f94b2934292bdc6f24766eb9413" target="_blank" style="font-weight: bold; color: #1CAAD9;">spolsh</a>
on <a href="https://sketchfab.com?utm_source=oembed&utm_medium=embed&utm_campaign=55913f94b2934292bdc6f24766eb9413" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
</p>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-65937592925351346782015-11-02T04:18:00.002+01:002015-11-02T18:43:00.564+01:00Advanced calculations in Unity Inspector<div style="text-align: center;">
It is nice little feature that you can do basic calculations in Unity editor:</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.giphy.com/3o85xmQQSTF5YYpUAM.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.giphy.com/3o85xmQQSTF5YYpUAM.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
If you need to solve more advanced problems it is also possible after extending editor a bit:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.giphy.com/3oEdv5jWY5yKmk2OSQ.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.giphy.com/3oEdv5jWY5yKmk2OSQ.gif" height="50" width="320" /></a></div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-15661816662656046672015-10-30T16:41:00.002+01:002015-10-31T16:49:06.168+01:00TK Games Art Recap<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
Short video I have created with artwork we have made at <a href="https://www.facebook.com/pwrtkgames/">TK Games</a> meetings.</div>
<div style="text-align: justify;">
Created using Adobe After Effects in about two nights. Big time saver was dynamic slideshow template since I knew what effect I want to achieve and never ever used After Effects before.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/BFLT1QG_uZU/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/BFLT1QG_uZU?feature=player_embedded" width="320"></iframe></div>
<br />Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-50163373878945394572015-10-16T07:50:00.000+02:002015-10-16T07:51:18.163+02:00PEACE! - Jam in the Theater art dump<div class="separator" style="clear: both; text-align: left;">
All done in 48h at <a href="https://www.facebook.com/events/1908937289331703/">Game Jam in Theater</a>.</div>
Game was done in Unreal Engine 4. I was responsible mainly for creating and designing graphical side of project. Assets were created in Photoshop CS6.<br />
<br />
<div style="text-align: center;">
<a href="http://i.imgur.com/2gni4zs.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/2gni4zs.jpg" height="240" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/6AFsHER.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/6AFsHER.png" height="240" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/HSRmuIX.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/HSRmuIX.png" height="240" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<a href="http://i.imgur.com/utU3s7K.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/utU3s7K.png" height="240" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/03Nomsq.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/03Nomsq.png" height="320" width="252" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/EIO9nB8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/EIO9nB8.png" height="320" width="247" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/Kxy4oNv.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/Kxy4oNv.png" height="320" width="286" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/RVuVxuf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/RVuVxuf.png" height="320" width="252" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/BmEtUJ8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/BmEtUJ8.png" height="320" width="252" /></a></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: center;">
</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: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-69291994828940754622015-09-20T21:41:00.002+02:002015-09-21T08:34:49.638+02:00Polskie Gry Wideo 2015 Lecture<div class="separator" style="clear: both; text-align: left;">
Yesterday I had pleasure to give presentation at <a href="https://www.facebook.com/polskiegrywideo">Polskie Gry Wideo 2015 conference</a> about creating games - how much effort it takes to polish details and make awesome workarounds. I learned a lot about cultural references in polish games released while ago (Dying Light, The Witcher, This War of Mine etc.) and retro scene (xLand).</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="text-align: start;">Here are slides in </span><a href="https://drive.google.com/file/d/0B1QJnpTHVcYcUU9od0NteG1JbW8/view?usp=sharing" style="text-align: start;">light pdf</a><span style="text-align: start;"> and </span><a href="https://drive.google.com/file/d/0B1QJnpTHVcYcVkFOUy1UR0k0T2s/view?usp=sharing" style="text-align: start;">heavy animated pptx</a></div>
<div style="text-align: center;">
<img border="0" height="122" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEiKgTBjvOPvpnJS86-ahrupOGqvo4N852PS9xJw6399OrPse5R6KMXzLrrx4HJih76RWKcpZ3TpbmFqnrXwT6VbH-IcrUWY7pWQe0JNPdneCXjY4jlARpH2EXtebtof=" width="320" /></div>
<div style="text-align: center;">
Thanks for invitation and see you next year!</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/m06P9hp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/m06P9hp.jpg" height="179" width="320" /></a></div>
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2Fi.imgur.com%2FRn4JMQr.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/proxy/AVvXsEiKgTBjvOPvpnJS86-ahrupOGqvo4N852PS9xJw6399OrPse5R6KMXzLrrx4HJih76RWKcpZ3TpbmFqnrXwT6VbH-IcrUWY7pWQe0JNPdneCXjY4jlARpH2EXtebtof=" -->Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-69442694154773683892015-09-20T21:17:00.000+02:002015-09-20T21:17:05.214+02:00Making of Prince Charming Ludum Dare #33About month ago we have made mobile game Prince Charming at Ludum Dare #33. The theme was "You are the monster". We settled on an idea for a game where player must shake his phone (or mouse) to wreck rag-doll character against the screen boundaries.<br /><br />Much thanks to the team - the game brings joy of torturing little innocent sweet frog to anyone who take peek at it :) I am glad that we had such great feedback. Here is how game looked meanwhile we were creating it.<br />
<div style="text-align: center;">
<br /></div>
<h4 style="text-align: center;">
<a href="http://ludumdare.com/compo/ludum-dare-33/?action=preview&uid=41568">Ludum Dare entry - Play it!</a></h4>
<h4>
<b>Ratings</b></h4>
<div>
We made it to Top 5% and 10% in all categories. It was a blast!</div>
<div>
<br /></div>
<table>
<tbody>
<tr>
<td><b>#24</b></td><td><b>Theme(Jam)</b></td><td><b>4.28</b></td>
</tr>
<tr>
<td><b>#89</b></td><td><b>Humor(Jam)</b></td><td><b>3.82</b></td>
</tr>
<tr>
<td>#145</td><td>Mood(Jam)</td><td>3.71</td>
</tr>
<tr>
<td>#180</td><td>Fun(Jam)</td><td>3.56</td>
</tr>
<tr>
<td>#206</td><td>Overall(Jam)</td><td>3.62</td>
</tr>
<tr>
<td>#238</td><td>Innovation(Jam)</td><td>3.40</td>
</tr>
<tr>
<td>#268</td><td>Audio(Jam)</td><td>3.38</td>
</tr>
<tr>
<td>#281</td><td>Graphics(Jam)</td><td>3.88</td>
</tr>
<tr>
<td>#1362</td><td>Coolness</td><td>46%</td>
</tr>
</tbody></table>
<br /><br /><b>Timelapse</b><br /><br /><div style="text-align: center;">
End of day 1</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/kve1MH1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/kve1MH1.gif" height="400" width="251" /></a></div>
<div>
<br /></div>
<div style="text-align: center;">
Then I watched this masterpiece called <a href="https://www.youtube.com/watch?v=AJdEqssNZ-U">"The art of screenshake"</a></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/P4zE0BX.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/P4zE0BX.gif" height="400" width="285" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
By the end od day 2 half of traps were implemented</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/pYFEgOL.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/pYFEgOL.gif" height="320" width="228" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
and connected to shop that has been done at the same time</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/BYUd0tp.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/BYUd0tp.gif" height="400" width="248" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
That's it! Well spent weekend.<br /> There will be more of gamedev stuff soon :)</div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-8142562911292933932015-08-17T22:59:00.000+02:002016-03-12T12:54:35.924+01:00Stateic Potential - optimizing tile map in Unity 3D<div style="clear: both; text-align: justify;">
While we have made game called Stateic Potential at Slavic Game Jam 2015. After 24h we had developed simple working game prototype and started thinking about proper ballance. There was about 12h to the end of jam and we have faced even greater problem - our game run at ~10FPS at most. Normally you would bring PC with GTX and i7 to the presentation and optimize later when ideas are approved, but we had none of above and we were quite sure about the mechanics. I have taken the challenge and the results were quite stunning.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<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="http://i.imgur.com/xbQGunA.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/xbQGunA.gif" height="318" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: justify;">
The problem was that we had map composed from tiles, about 60x60. Map was loaded from Texture and read by GetPixel. Each tile was a pixel in big picture - unit of territory - and was glowing in numerous colors depending on the nation it belonged. Since it was jam and we had act quick whole map was assembled from prefabs in Unity. Literally each tile was a GameObject with Renderer and run some logic in script every Update. Each tile also had Collider so points flying over the map could make raycasts and know on whose territory they are.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/BB9OTEy.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://i.imgur.com/BB9OTEy.gif" height="258" width="400" /></a></div>
<br />
<br />
<h2 style="text-align: center;">
Things that I have tried:</h2>
<h3 style="text-align: center;">
1. Unity build-in <a href="http://docs.unity3d.com/Manual/OcclusionCulling.html">Occlusion Culling</a></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/AGNJkUN.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://i.imgur.com/AGNJkUN.gif" height="166" width="400" /></a></div>
<br />
<br />
<div style="text-align: justify;">
Early on camera seen only part of map. That caused first red bulb to fire and after short glance at <a href="http://docs.unity3d.com/Manual/RenderingStatistics.html">Rendering Stats</a> it became clear that number of drawn objects is an issue. It was first thing I have tried because required minimum effort and changes in project - jam ended in several hours! Unity occlusion culling works only on static objects placed in editor. Tiles were generated dynamically at start but heck, lets generate some and save as prefab for testing. On map 10x10 effect was very appealing - stable frame rate at ~60 FPS and reasonable amount of draw calls. But on map 60x60 it was not. Occlusion culling was even grouping together multiple tiles in clusters but visible tiles were heavy enough to freeze game at ~22 FPS. If you have many small object always seen by camera occlusion culling is not so helpful.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/DOFCVjl.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://i.imgur.com/DOFCVjl.gif" height="165" width="400" /></a></div>
<br />
<h3 style="text-align: center;">
</h3>
<h3 style="text-align: center;">
2. Checking if Unity can <a href="http://docs.unity3d.com/Manual/DrawCallBatching.html">Batch Geometry</a></h3>
<a href="http://i.imgur.com/dEZhfPC.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"><img border="0" src="http://i.imgur.com/dEZhfPC.png" height="320" width="164" /></a><br />
<br />
<div style="text-align: justify;">
Double check if Unity can do the hard work. I would gone mad if one magical check box could solve the riddle and make our game run smoothly at ~30 FPS. Tiles were Quads so were small enough to be batched and used only 2 materials, we could even use 1. Tested on prefab created for occlusion because Static Batching has less constraints over Dynamic Batching and tiles actually remain constant transform. Everything seemed to be in place but FPS was still low. It was not very effective.</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h3 style="text-align: center;">
3. Cutting corners with <a href="http://www.reddit.com/r/Unity3D/comments/20arg7/i_made_a_script_to_make_a_unity_camera_render/">Screen Effect</a></h3>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/61jkcqa.gif" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://i.imgur.com/61jkcqa.gif" height="188" width="320" /></a></div>
<br />
<div style="text-align: justify;">
Think out of the box - maybe it is possible to make something light that look just like big pixelated tiles. The idea was dropped because game's appeal was too dependent on accurately glowing pixels and their color.</div>
<br />
<br />
<br />
<br />
<br />
<h3 style="text-align: center;">
4. Draw whole map on one quad</h3>
<div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/TVztF4Y.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/TVztF4Y.gif" height="165" width="400" /></a></div>
<br /></div>
<div style="text-align: justify;">
Nothing easy worked so far I came up with craziest idea. Do you know shadertoy? Yep! It could work but I realized that there is no way to input so big matrix/vector of uniforms for changing tile's color - nation possession changing through game. But.. there was a way, a bit different...</div>
<br />
<h3 style="text-align: center;">
5. Final approach - Generate <a href="http://docs.unity3d.com/Manual/AnatomyofaMesh.html">Mesh</a> from script and update vertex color</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/Wm7LUqr.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://i.imgur.com/Wm7LUqr.png" height="242" width="400" /></a></div>
<br />
<br />
<div style="text-align: justify;">
Plan was to create whole <a href="http://docs.unity3d.com/Manual/UsingtheMeshClass.html">mesh from script</a>, update frame update vertex color according to our formula for glowing pixels and draw it with custom shader. <a href="http://docs.unity3d.com/ScriptReference/Mesh.html">Mesh</a> required vertex(position), triangles(indicies), uv and additionaly color to supply data needed for shader for rendering. All in format and order familiar to OpenGL or DirectX. Each tile was made from two triangles. To get flat shading on faces and avoid color interpolation between adjacent tiles vertices were duplicated for each tile. Standard Unity shaders do not support vertex color but it is available in appdata_full and can be used with Surface Shaders.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: justify;">
Mesh generation was pretty fast even for greater dimensions like 100x100 it went in a blink of an eye. Reading pixels by Texture.GetPixel() took on average 7ms - 12ms (lowest measured was 3ms) and creating whole map took even half minute, very slow.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/VR1XHRe.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://i.imgur.com/VR1XHRe.gif" height="287" width="400" /></a></div>
<br />
<br />
<div style="text-align: justify;">
In fact we were reading two textures - one for nations colors and second for land/sea mask. I ended up storing mask in alpha channel of nations image so had one texture read instead of two but the numbers stayed the same - maybe textures were already buffered and it will be felt after fresh start.</div>
<br />
<div style="text-align: justify;">
Jam made me focus only on runtime, but I do have some ideas for loading too, maybe next time. The way Unity detects mesh array made me lose some hours of trials and errors. It seems only assignment of new array works. I tried directly setting values by index in color array, assigning same list I reused after generation or reusing same array every Update and nothing worked.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/Y8hZT9X.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://i.imgur.com/Y8hZT9X.gif" height="300" width="400" /></a></div>
<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
It was faster than I expected. Such generated mesh turned out to be amazingly fast in rendering. At about 120k vertices there was nearly none overhead, 1 MeshRenderer, 1 Material = 1 draw call, 60+ FPS, Whoo ho! I was stunned how effective it turned out to be. Jam version of game now runs ~30FPS because at end he 3D chart of victims appear and in each tile and every bars still is separate GameObject... But wait. In Unity 5, UV3 and UV4 channels were introduced to Mesh and even if we utilize UV1 and UV2 for per tile texture(1) and whole map texture(2) we can dynamically control the height of each tile in very elegant way. I just have to do some research in using additional UVs in Unity shaders.</div>
<br />
<div style="text-align: justify;">
For now I am extremely pleased with the results and tile map generator technique seems to be quite universal. Only downside is game must be refactored to use this mesh and some code got duplicated for now. Improving speed of rendering gives a lot of fun and satisfaction. There are more things to find out especially in Polytegy.</div>
<br />
<div style="text-align: center;">
<span style="white-space: pre;"><b>Download: http://bit.ly/stateic_sgj15</b></span></div>
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><b>PS:</b> I know there is profiler and that stats measurements may be off but sometimes it is enough just to know the estimation in orders of magnitude.Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-81446360383581910752015-07-24T13:18:00.000+02:002015-07-24T13:26:47.061+02:00Slavic Game Jam 2015 LectureHere we are at Slavic Game Jam in Warsaw. With folks from TK Games, thanks for Polygon Scientific Circle for organizing such great thing. In about an hour I will be giving a lecture. Here you can view the slides. See you there. Have Fun!<br />
<br />
<div style="text-align: center;">
<a href="https://speakerdeck.com/sp0lsh/slavic-game-jam-presentation-by-tk-games">https://speakerdeck.com/sp0lsh/slavic-game-jam-presentation-by-tk-games</a></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://pbs.twimg.com/profile_banners/3302001455/1435076161/1500x500" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="106" src="https://pbs.twimg.com/profile_banners/3302001455/1435076161/1500x500" width="320" /></a></div>
<div style="text-align: center;">
<br /></div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-11989870937184779992015-07-20T18:41:00.001+02:002015-07-21T02:06:00.410+02:00Polytegy map tiles generationI want to release alpha version as soon as possible and greatest challange so far was creating world for the game. In our vision RTS should look great from above and have appeal of dense natural glades and tunnels through foliage. Here I will share some thoughts on our attempts given that we create game using unity.<br />
<h3>
</h3>
<h3>
</h3>
<h3>
</h3>
<h3>
</h3>
<h3>
</h3>
<h3>
What we have tried:</h3>
<div>
<ul>
<li><b>Prefab Templates</b> - it was easiest method. There were prepared prefabs with environment objects setup from editor. Straight forward to preview the output and see how the effect of forest will finally look like. Random only took care of choosing either resources prefab, trees or big unbreakable trees. It can be seen in short video we made.</li>
<li><b>Light Templates with editor</b>- second attempt we were talking about with designer included templates loaded from file with only important data. Prefabs for templates were to heavy and we were looking for a way to reduce amount of displayed objects. Prefabs would only be used for environment objects like resources, trees and so on. Since designer worked full time in his daily job and we had no clue how to design editor the idea was dropped. To much effort for such task.</li>
<li><b>Parametric design -</b> another approach was made by our friend who in pretty smart way visualized the glades using Rhino and Grasshopper and then rendered all after export to blender. The potential of prototyping power in these tools was overwhelming but it had it's own environment and we couldn't figure out the simple way of integration such data with Unity. I tried implementing the steps of Grasshopper algorithm but effects didn't looked the same. By the way, procedural and parametric generation is not the same as far as I am concerned - If anybody has nice explanation of the differences it would great to hear it! </li>
<li><b>Cellular Automaton -</b> I have used such method before. It is as simple as generating random noise and "smoothing" it with cellular automaton algorithm. Cellular automaton is like post processing for noise and for each cell it returns value based on amount of adjacent filled cells. Results is nice and naturally looking pattern ideal for caves and so on. Simplest way to control the patterns is to draw on cells like on bitmap after noise is generated. Works every time!</li>
</ul>
<h3>
</h3>
<div>
<br /></div>
<h3>
Cellular Automaton implementation</h3>
</div>
<div>
Implementation is fairy straight forward and in this case can be broken down into 6 stages:<br />
<ol>
<li>Create Editor for the map tile so we can faster check how random patterns will look even without launching the game.<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/AkMqHHT.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/AkMqHHT.gif" height="240" width="400" /></a></div>
</li>
<li>Generate random noise - it is simple PRNG random generator, not even perlin or something fancy.<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/aQtaMa0.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/aQtaMa0.gif" height="240" width="400" /></a></div>
</li>
<li>Draw path according to metadata of map tile - we want to be sure that units can pass from one tile to another.<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/zOX2RHV.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/zOX2RHV.gif" height="240" width="400" /></a></div>
</li>
<li>Draw empty space in the middle of tile - adds the feeling of forest glades.<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/RjgfSTR.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/RjgfSTR.gif" height="240" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</li>
<li>Run cellular automaton to smooth the random noise on tile and add more natural feeling to it.<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/LoPELyn.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/LoPELyn.gif" height="240" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</li>
<li><div class="separator" style="clear: both; text-align: center;">
Run cellular automaton once more but performing different operation. This time it increments cells if it has enough filled adjacent cells. Those cells will be used to create unbreakable environment and force player to explore the maze.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/DIWZt16.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/DIWZt16.gif" height="240" width="400" /></a></div>
</li>
</ol>
<div style="text-align: center;">
<br /></div>
<h3 style="text-align: center;">
In game screens with even positions centered to cells</h3>
<div style="text-align: center;">
Legend: <b>cubes</b> are breakable, <b>cylinders</b> are unbreakable.</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/fQRvYxB.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/fQRvYxB.gif" height="240" width="400" /></a></div>
<div style="text-align: center;">
<br /></div>
<h3 style="text-align: center;">
In game screens with positions randomized to fit cells</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/PZfpLa5.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/PZfpLa5.gif" height="243" width="400" /></a></div>
<div style="text-align: center;">
<br /></div>
<h3>
</h3>
<h3>
Whole process</h3>
</div>
<div>
Here you can see whole process in one gif. All parameters will be further tweaked until I am happy with results. Cell's value is used to choose which type of prefab to draw from: 0 (black) is empty space , 1 (grey) are breakable and resources, 2 (white) are unbreakable environment objects.<br />
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/SubmZNg.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/SubmZNg.gif" height="240" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
I will post video footage with in-game terrain and maybe core game loop as soon as possible. </div>
<div class="separator" style="clear: both; text-align: center;">
Thanks for watching! Stay tuned!</div>
</div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com2tag:blogger.com,1999:blog-7863001254848584078.post-85043997299199415652015-06-06T11:47:00.000+02:002015-06-25T11:58:56.017+02:00God Simulator 2015 winning entry at TKGameJam2015In the hindsight I think that we made a decent job not only designing game where you can score or lose out of funny idea but also ship playable, store-ready build before deadline. Kudos for audio guys for awesome music and SFX - catchy and memorable as heck! Thanks everyone for jammig together - it was fun!<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Event summary:</div>
<div style="text-align: center;">
<a href="http://tkgames.pwr.wroc.pl/site/tk-gamejam-2015-wyniki/#more-1735">http://tkgames.pwr.wroc.pl/site/tk-gamejam-2015-wyniki/#more-1735</a></div>
<br />
<div style="text-align: center;">
Our idea summed up in meme I have found after jam:<br />
<span id="goog_1390720929"></span><span id="goog_1390720930"></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqydp1zHnPiZCdy9W_bPum2pdLIpcnEH6Go3_mxeduxL6r5yNFJ8sxL9UaZLgSEBHTyOzACgHnWOiXDPzlzRy6q5zACC3_Hw5PSnPHCCZxo3a09RZ6AtfoAnouf4IGRb3s-F5_PCwWjc/s1600/scumbag-god_o_901503.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqydp1zHnPiZCdy9W_bPum2pdLIpcnEH6Go3_mxeduxL6r5yNFJ8sxL9UaZLgSEBHTyOzACgHnWOiXDPzlzRy6q5zACC3_Hw5PSnPHCCZxo3a09RZ6AtfoAnouf4IGRb3s-F5_PCwWjc/s320/scumbag-god_o_901503.jpg" width="310" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Gameplay + music:</div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/I6BRGMv4tYQ/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/I6BRGMv4tYQ?feature=player_embedded" width="320"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Git repository timeplase, notice that... we SLEEPT! :D</div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/3ZWcE8AXoTo/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/3ZWcE8AXoTo?feature=player_embedded" width="320"></iframe></div>
<div style="text-align: center;">
<br />
<br />
<br /></div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-40377964769108072142015-03-23T21:45:00.000+01:002015-07-20T21:52:50.470+02:00Frankenstein monster speedsculpt<div class="separator" style="clear: both; text-align: center;">
<b style="color: #141823; font-family: helvetica, arial, sans-serif; font-size: 14px; line-height: 19.3199996948242px; text-align: start;">Frankenstein Monster, Speedsculpt doodle, 3h</b></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; color: #141823; font-family: helvetica, arial, sans-serif; font-size: 14px; line-height: 19.3199996948242px; text-align: start;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
Model: <a href="https://sketchfab.com/models/808dc0b7830c4d2b9247fde6e785cdbf">https://sketchfab.com/models/808dc0b7830c4d2b9247fde6e785cdbf</a></div>
<div class="separator" style="clear: both; text-align: center;">
Render: <a href="http://i.imgur.com/6v9eLZQ.jpg">http://i.imgur.com/6v9eLZQ.jpg</a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
...by the way, it's pretty amazing that facebook embeds skechfab model viewer!</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: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/6us5QPW-PK8/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/6us5QPW-PK8?feature=player_embedded" width="320"></iframe></div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-82216315782605372792015-03-02T16:38:00.002+01:002015-03-09T22:10:06.765+01:00Team engineering projectI'm aware of so few updates recently but it's cause of shitloads of work I had. Here is video with gameplay and all the awesome stuff we managed to complete in about 3 months.<br />
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/XEORJhxXhnM/0.jpg" frameborder="0" height="266" src="http://www.youtube.com/embed/XEORJhxXhnM?feature=player_embedded" width="320"></iframe></div>
<div>
<br /></div>
</div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-66372074351488004372014-10-27T22:32:00.002+01:002014-10-27T23:08:59.785+01:00ZTG: Rozszerzona rzeczywistość w Unity3DW miniony weekend (25.10.14) na <a href="http://ztg.pl/program/#micha-k-o">Zjeździe Twórców Gier</a> w Poznaniu miałem okazję wygłosić prelekcję na temat szybkiego tworzenia aplikacji AR korzystając z Unity3D. Poniżej link do slajdów:<br />
<br />
<div style="text-align: center;">
<a href="http://bit.ly/unityAR_by_mk">Rozszerzona rzeczywistość w Unity3D</a></div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-8650921486746721162014-08-28T19:38:00.002+02:002014-09-02T14:27:20.345+02:00Troll Away AR Ludum Dare 30<h3 style="clear: both; text-align: center;">
<span style="text-align: start;"><b>Last weekend we have made game for Ludum Dare, for 72h Jam.</b></span></h3>
<h3 style="clear: both; text-align: center;">
<span style="text-align: start;"><b>Gameplay:</b></span></h3>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/ajPOExg70Go?feature=player_embedded' frameborder='0'></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;"><br /></span></div>
<h3 style="clear: both; text-align: center;">
<span style="text-align: start;"><b>Submission:</b></span></h3>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;"><a href="http://www.ludumdare.com/compo/ludum-dare-30/?action=preview&uid=40133">http://www.ludumdare.com/compo/ludum-dare-30/?action=preview&uid=40133</a></span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h4 style="text-align: center;">
Postmortem</h4>
<div>
<br /></div>
<div style="text-align: justify;">
I have been thinking about idea for game themed connected world. I was considering platformer with switchable environment but in the late evening of first day I came up with craziest idea I ever had at jams. Let's connect real world with virtual.</div>
<br />
<h3 style="text-align: center;">
<b>Augmented Reality</b></h3>
<div>
<b><br /></b></div>
<div style="text-align: justify;">
Three weeks ago I had made just a model viewer in Unity for android with Qualcomm Vuforia. I have had read that it is possible to track multiple markers and I was learning on the run how this library works. It turned out that it is quite simple and Vuforia takes care of heavy lifting. I have found by chance during video chat that you can debug in editor also on Unity Basic. It was extremely helpeful. Library is for mobiles and thus I do not had access to iOS device we created only Android build.</div>
<br />
<h3 style="text-align: center;">
<b>Multiplayer</b></h3>
<br />
<div style="text-align: justify;">
I thought that connecting devices to each other would allow to keep track of more markers. It turned out that game could be played with just 2 and you cannot cheat. Multiplayer was done all with Unity components and Master Server. It was done at first because it was easier to test on PC before building to mobile with AR. Class structure was inspired by Unreal Engine and took me about 5-8h to create from scratch and debug. Game at this point was mumbling to console rather than having any visuals but we had tool to create gameplay.</div>
<br />
<h3 style="text-align: center;">
<b>Gameplay</b></h3>
<br />
<div style="text-align: justify;">
I was inspired by tabletop wargames and frankly I had only vague idea. For sure characters were supposed to be moving to markers RTS like. Last jams day evening after messing around with movement, we simplified to make it snooker like. Bonus in green area was to bring your characters closer to the marker.</div>
<br />
<h3 style="text-align: center;">
Graphics</h3>
<br />
<div style="text-align: justify;">
2D art for GUI was made by Kozun. Models and animations are free assets from Unity Asset Store. There have been made scripts by Necromac that handles animation transitions and stuff and left simple interface for hooking it up to gameplay. Now I see that animations play only at server since just transform is replicated.</div>
<br />
<h3 style="text-align: center;">
<b>Sound</b></h3>
<br />
<div style="text-align: justify;">
Our game lacks sound and our sound skills are low. Videos need some more love too. There is place for many improvements.</div>
<div style="text-align: center;">
Timelapse:</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/ehFlTzmgRY4?feature=player_embedded' frameborder='0'></iframe></div>
<div style="text-align: center;">
<br />
<br /></div>
<br />
<div style="text-align: justify;">
In the hindsight I think that technical challenge was completed but there is place to improve gameplay, graphics and overall appeal. Since we have not been working all day straight next time will make better use of timeframe. We have gameplay and we can together test if it is really fun and that is IMHO most important.<br /><br /><br />
<div style="text-align: center;">
You can read it also on ludum dare site:</div>
<div style="text-align: center;">
<a href="http://www.ludumdare.com/compo/2014/09/02/troll-away-multi-ar-game-postmortem/"></a><a href="http://www.ludumdare.com/compo/2014/09/02/troll-away-multi-ar-game-postmortem/">Troll Away postmortem</a></div>
</div>
Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0tag:blogger.com,1999:blog-7863001254848584078.post-90375348596048630442014-02-02T20:25:00.000+01:002016-05-28T12:19:21.866+02:000x56 - just second night coding in JavaScriptAt <a href="http://tkgames.pwr.wroc.pl/site/tk-game-jam-vol-1/">TK GamJam vol. 1</a> this weekend with Oskar and Adam we made a game called <b>0x56 </b>inspired by vector Star Wars by Atari. Created during ~20h practically without any break, because I started coding just after getting home at Friday evening after meeting that opened the game jam.<br />
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://sp0lsh.github.io/0x56/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://i.imgur.com/s8kamVN.gif" height="183" width="320"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<a href="http://sp0lsh.github.io/0x56/">http://sp0lsh.github.io/0x56/</a><br />
<br />
<b>Awarded for best programming.</b><br />
<br />
Timelapse:<br />
<a href="http://www.youtube.com/watch?v=iL8ICd6BaWE">http://www.youtube.com/watch?v=iL8ICd6BaWE</a><br />
<br />
<br />
Mem for today:<br />
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/wbHmQPo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://i.imgur.com/wbHmQPo.jpg" height="200" width="200"></a></div>
<span class="text_exposed_show" style="background-color: white; color: #333333; display: inline; font-family: "lucida grande" , "tahoma" , "verdana" , "arial" , sans-serif; font-size: 13px; line-height: 17.940000534057617px;"><br /></span></div>
</div>Michał 'spolsh' Kłośhttp://www.blogger.com/profile/15353143113285435600noreply@blogger.com0