{"id":193,"date":"2010-05-30T10:08:22","date_gmt":"2010-05-30T10:08:22","guid":{"rendered":"https:\/\/astrofra.com\/wordpress\/?page_id=193"},"modified":"2010-05-30T10:08:22","modified_gmt":"2010-05-30T10:08:22","slug":"flyin-island-post-mortem","status":"publish","type":"page","link":"https:\/\/astrofra.com\/wordpress\/index.php\/gamedev\/flyin-island-post-mortem\/","title":{"rendered":"Flyin&#8217; Island post mortem"},"content":{"rendered":"<p>The <a href=\"https:\/\/astrofra.com\/wordpress\/2009\/08\/09\/the-flyin-island\/\">Flyin&#8217;Island<\/a> game was an opportunity to develop a range of visual tricks. As a  consequence, the gameplay was almost unexisting.<br \/>\nHere&#8217;s a detail of  some of the techniques used to achieve the overall visual look in &#8220;the  Flying Island&#8221;.<\/p>\n<p>The 3D assets used for  the game :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"ngg-singlepic ngg-none\" src=\"https:\/\/astrofra.com\/wordpress\/wp-content\/gallery\/flyin039-island-post-mortem\/assets_collection.gif\" alt=\"assets_collection\" width=\"580\" height=\"357\" \/><\/p>\n<p><strong>The Sea :<\/strong><\/p>\n<p>I made it with a set of concentric vertical waves. Each even circles are  animated to the left, the odd ones are rotated to the right, then vice  versa.<br \/>\nThe UV coordinates were animated, to produce a scrolling  effect of the texture, synchronised with the object animation.<\/p>\n<p><img decoding=\"async\" class=\"ngg-singlepic ngg-none\" src=\"https:\/\/astrofra.com\/wordpress\/wp-content\/gallery\/flyin039-island-post-mortem\/sea_setup.jpg\" alt=\"sea_setup\" \/><\/p>\n<p><strong>Pros  :<\/strong> easy to setup, no need for a morph or any kind of mesh  deformation. Visually quite compelling.<\/p>\n<p><strong>Cons :<\/strong> once setup,  it was almost impossible for the boat to move over the sea without  making the trick obvious.<\/p>\n<p><strong>The island :<\/strong><br \/>\nAs  the boat doesn&#8217;t really change its position, I had to implement an  internal system to make it actually move.<br \/>\nDepending on its speed and  heading, the boat will come closer to the island, or not.<br \/>\nThe  distance between the boat and the island it real, so is the compass  representation, unless we come very close.<\/p>\n<p>The visual representation of the island works like this :<\/p>\n<div>Code:<\/div>\n<div>\n<blockquote>\n<pre>screen_island_pos = (real_island_pos - real_boat_pos).Normalize() * Mtr(1500)<\/pre>\n<\/blockquote>\n<\/div>\n<p>So  that, whatever happens, the island will always remain at the same  distance.<br \/>\nTo give the illusion of distance, the island mesh is  scaled, more and more, as the player will come closer to it.<\/p>\n<p><strong>The  good :<\/strong> fun to implement<br \/>\n<strong>The bad :<\/strong> players won&#8217;t  understand why they can&#8217;t actually reach the island !<\/p>\n<p><strong>The moon : <\/strong><br \/>\nThe  glowing moon is a 3d sphere, with a 2D ring in its half, to mimick the  glow effect. In order for this ring no to be noticed, the moon is always  facing the camera, as for a billboard sprite.<\/p>\n<p>The main light  used on this scene has the same coordinated as the moon, so that  everything looks like it was actually lit by the moon.<\/p>\n<p><strong>The Water Impacts : <\/strong><br \/>\nOnly a ring modeled in polygons, that was scaled on its Y axis to create  an animation.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"Water Impact\" src=\"https:\/\/astrofra.com\/posts\/tig_contest\/flying_dutchman\/post_mortem\/water_impact.jpg\" alt=\"\" width=\"400\" height=\"225\" \/><\/p>\n<p><strong>Pros :<\/strong> easy to setup, no morph, no texture<br \/>\n<strong>Cons  :<\/strong> quite cheap once animated, looks like a bad Adobe Flash  animation.<\/p>\n<p><strong>The  boat animation :<\/strong><br \/>\nIn order for the boat to appear sailing  on the sea, it was rotated on its X axis, back and forth, using a simple  Cosine function.<br \/>\nBut I wanted it to physically interact with the  rest of the environment (skulls, cannon feedback, etc). So I enabled the  physics on the whole boat object.<\/p>\n<p>Directly modification of the  boat rotation didn&#8217;t make any good to the physic system, especially  regarding the collision detection.<\/p>\n<p>To fix this problem, a dummy  object was rotated, and the boat was connected to this dummy thanks to 3  physical joints (Position Constraints, aka Springs). Hence, the  rotation was physically transmited to the boat thru the springs, easing  greatly the collision system.<\/p>\n<p>Same thing for the boat heading \/  turning.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"boat_physic_ri\" src=\"https:\/\/astrofra.com\/posts\/tig_contest\/flying_dutchman\/post_mortem\/boat_physic_rig.jpg\" alt=\"\" width=\"400\" height=\"227\" \/><\/p>\n<p>In order to catch collisions properly, I placed collision cubes inside  the boat. The result is not 100% accurate, but it works quite well.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"boat_colshape\" src=\"https:\/\/astrofra.com\/posts\/tig_contest\/flying_dutchman\/post_mortem\/boat_colshapes.jpg\" alt=\"\" width=\"400\" height=\"284\" \/><\/p>\n<p><strong>Pros :<\/strong> The physics creates some additional appeal to the boat.<br \/>\n<strong>Cons  :<\/strong> A bit complex to setup. Took me time to find the correct  combination, though tt doesn&#8217;t serve the gameplay directly.<\/p>\n<p><strong>The boat visual :<\/strong><br \/>\nThe  boat stands for the main part of the cockpit. It was modeled entirely,  but eventually I got rid of the sails &amp; poles, for they would have  obscured the camera &amp; the main view.<\/p>\n<p>At first I planned to  texture it, but with the lack of time, I simply relied on an Ambient  Occlusion baking. Auto UV unwrap and render texture did almost all the  work for me.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"ambiant_occ_settings\" src=\"https:\/\/astrofra.com\/posts\/tig_contest\/flying_dutchman\/post_mortem\/ambiant_occ_settings.gif\" alt=\"\" width=\"340\" height=\"308\" \/><\/p>\n<p><strong>Pros :<\/strong> quite fast to get a cool &amp; proper result.<br \/>\n<strong>Cons :<\/strong> less personal than a hand painted texture.<\/p>\n<p><strong>The canon &amp; boulders  : <\/strong><br \/>\nAs for the ship, they are all handled in physics.  Before being shot, they will remain on the bridge, for they are trapped  into an invisible collision box. Their trajectory is full physic as  well, the initial force of ejection being proportionnal to the time the  player pressed the fire button.<\/p>\n<p><strong>The good :<\/strong> Easy to  implement, as the physics handled everything for me, collision included.<br \/>\n<strong>The  bad :<\/strong> the straight trajectory is not really fun. As Toastie  mentionned in the thread, a curved path would have been more interesting  to play with.<\/p>\n<p><strong>The  enemies :<\/strong><br \/>\nThe enemies are spawn behind the player,  whatever its position.<br \/>\nTo do this with a minimal maths skills, I used  3 dummmies objects, parented to the boat object. These dummies defined  the area in which I wanted the enemies to be spawn, with a few vector  &amp; rand() operations.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"spawn_area\" src=\"https:\/\/astrofra.com\/posts\/tig_contest\/flying_dutchman\/post_mortem\/spawn_area.jpg\" alt=\"\" width=\"400\" height=\"224\" \/><\/p>\n<div>Code:<\/div>\n<div>\n<blockquote>\n<pre>k1 = Rand(0.0, 1.0)\nk2 = Rand(0.0, 1.0)\n\nv0 = ItemGetWorldPosition(spawn_area_a)\nv1 = ItemGetWorldPosition(spawn_area_b) - ItemGetWorldPosition(spawn_area_a)\nv2 = ItemGetWorldPosition(spawn_area_c) - ItemGetWorldPosition(spawn_area_b)\n\nenemy_pos = v0 + v1.Scale(k1) + v2.Scale(k2)\n<\/pre>\n<\/blockquote>\n<\/div>\n<p><strong>The  good :<\/strong> the enemies look like a real armada, surrounding the player.<br \/>\n<strong>The  bad :<\/strong> No AI at all, they can&#8217;t even shoot at the player, thus  reducing a lot the challenge. More variety in the type of enemies would  have been cool too. I had in mind to make some giant crabs or squids &#8230;  or even the Kraken in the end.<\/p>\n<p><strong>Conclusion :<\/strong><\/p>\n<p><strong>The good :<\/strong><\/p>\n<p>* The game looks quite good and is close enough to what I had  in mind in the beginning.<br \/>\n* I implemented a lot of stuff as well,  that I won&#8217;t have to rewrite for the next game (menus, controller, audio  manager, gui &#8230;).<br \/>\n* it was fun to make it.<\/p>\n<p><strong>The bad :<\/strong><\/p>\n<p>*  The challenge in this game is reduced to the max.<br \/>\n* no AI for the  enemies<br \/>\n* the game objectif is quite unclear (reach the island, for  what ?)<br \/>\n* no end level boss<br \/>\n* you can&#8217;t even die<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Flyin&#8217;Island game was an opportunity to develop a range of visual tricks. As a consequence, the gameplay was almost unexisting. Here&#8217;s a detail of some of the techniques used to achieve the overall visual look in &#8220;the Flying Island&#8221;. The 3D assets used for the game : The Sea : I made it with &hellip; <a href=\"https:\/\/astrofra.com\/wordpress\/index.php\/gamedev\/flyin-island-post-mortem\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Flyin&#8217; Island post mortem<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":168,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-193","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/astrofra.com\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/193"}],"collection":[{"href":"https:\/\/astrofra.com\/wordpress\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/astrofra.com\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/astrofra.com\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/astrofra.com\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":0,"href":"https:\/\/astrofra.com\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/193\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/astrofra.com\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/168"}],"wp:attachment":[{"href":"https:\/\/astrofra.com\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}