{"assets":[{"original":"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/Centre-portals-550x412.png","local":"\/data\/posts\/2014\/09\/7ba2705c6bd338a1caf1943b7fa3949c.png"},{"original":"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/view-mockup-550x309.jpg","local":"\/data\/posts\/2014\/09\/14ff7c0f532ccf8fff663f3dabe0043d.jpg"},{"original":"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/39966-shot1-550x307.jpg","local":"\/data\/posts\/2014\/09\/54dd1d2f90279f5a556113b2015d43ca.jpg"}],"author_link":"author\/rhythmlynx\/","author_name":"RhythmLynx","cat":"LD #30","categories":["LD #30"],"comments":[],"epoch":1410271620,"event":"LD30","likes":6,"metadata":{"p_key":"82706","p_author":"RhythmLynx","p_authorkey":"0","p_urlkey":"293438","p_title":"World transitions: Manipulating viewports in Spirit Shift","p_cat":"LD #30","p_event":"LD30","p_time":"1410271620","p_likes":"6","p_comments":"0","p_status":"WAYBACK","us_key":null,"us_name":null,"us_username":null,"event_start":"1408665600","event_key":"24","event_name":"LD30"},"source_url":"2014\/09\/09\/world-transitions-manipulating-viewports-in-spirit-shift\/","text":"<p>This post is originally from <a href=\"http:\/\/codetrip.weebly.com\/blog\/world-transitions-manipulating-viewports-in-spirit-shift\">here<\/a>.<\/p>\n<p><a href=\"http:\/\/www.ludumdare.com\/compo\/ludum-dare-30\/?action=preview&amp;uid=39966\" target=\"_blank\"><em>Spirit Shift<\/em>\u00a0<\/a>was made in 3 days for the Ludum Dare 30 game jam, based on the theme of \u2018connected worlds\u2019. After a couple of hours of discussion we worked out what we were going to make: an infinite runner where the player can (and has to) phase-shift between worlds rapidly. Since this was the core mechanic of the game we wanted it to look fluid and not confuse the player. I had done some GameMaker tutorials a few years prior and remembered a little about having multiple viewports, so I knew it would be possible and a lot easier than coding it by hand. It took a day and a half.<\/p>\n<h2>Tunnel Vision<\/h2>\n<p>Once I\u2019d done a couple of GML tutorials and read through some of the documentation (something I\u2019d be doing a lot of over the jam), I got some basic platforms generating and moving across the screen. Turns out GameMaker doesn\u2019t support having multiple rooms active, so I ended up having 3 separate \u2018lanes\u2019 spaced vertically across a single room. When the player shifted worlds it would just be a case of moving them up or down to the appropriate lane.<br\/>\nAfter mucking about with views for a while I knocked up the following prototype:<\/p>\n<p><a href=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/Centre-portals.png\"><img alt=\"Centre portals\" class=\"alignnone wp-image-392128 size-large\" height=\"412\" sizes=\"(max-width: 550px) 100vw, 550px\" src=\"\/data\/posts\/2014\/09\/7ba2705c6bd338a1caf1943b7fa3949c.png\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/Centre-portals-300x225.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/Centre-portals-550x412.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/Centre-portals.png 1024w\" width=\"550\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p>This is how we originally pictured the world portals. The idea was that you\u2019d almost be going through a tunnel, as each world shift caused the next one to expand out and fill the screen. At this point the shifting only worked the first time, so in the following demo video I have to restart the program each time:<\/p>\n<p><iframe allowfullscreen=\"\" frameborder=\"0\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/nmL6r9inIuo?feature=oembed\" width=\"500\"><\/iframe><\/p>\n<p>The main (yellow) world expands out of view, the next (cyan) world expands to take its place, the last (green) world follows suit, and a temporary fourth view expands from nothing in the centre to take last place. At least, that\u2019s what seems to be happening. In truth GameMaker doesn\u2019t allow a viewport to be larger than the window, so to get the main view to expand I actually keep it the same size and shrink the game area it represents, essentially zooming in. Having now worked it out, this trick became very useful later on.<\/p>\n<h2>A world of problems<\/h2>\n<p>With the prototype in place we started working through the design issues apparent in the way I was doing things so far.<\/p>\n<ol>\n<li>Having the portals in the middle of the screen drastically limited the play-space. Although GameMaker supports sprite depth, views themselves override this. Even if the sprite depth for all of the cyan platforms is set so that they appear in front of the yellow ones, the viewport itself takes precedence and completely covers everything behind it.<\/li>\n<li>It\u2019s ugly. Having the viewports overlap each other minimizes the total area they take up, while giving us the \u2018tunneling\u2019 effect of going into the screen as they expand. Unfortunately it just doesn\u2019t look good with those hard edges. We could have had clever bordering artwork to smooth the transition, but a hole in the world is a hole in the world.<\/li>\n<\/ol>\n<p>Addressing the first issue was pretty easy. All I\u2019m doing is linearly interpolating between the position and size of each viewport to its target position and size, meaning I can actually place them any way I want and the transition will still smooth out over the same (arbitrary) time period. Here\u2019s the expansion demo again, this time coming from the top-centre of the screen:<\/p>\n<p><iframe allowfullscreen=\"\" frameborder=\"0\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/1PTxmzYJzho?feature=oembed\" width=\"500\"><\/iframe><\/p>\n<p>The sticking point is that second problem: it\u2019s still ugly. The artists on the team were (rightly) concerned about what the backgrounds were going to look like overlapping in that way, or if we would even want backgrounds with a system like this.<\/p>\n<h2>A fresh perspective<\/h2>\n<p>After some more discussion we agreed on a kind of roulette system, mocked-up here by one of the artists:<\/p>\n<p><a href=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/view-mockup.jpg\"><img alt=\"view mockup\" class=\"alignnone wp-image-392129 size-large\" height=\"309\" sizes=\"(max-width: 550px) 100vw, 550px\" src=\"\/data\/posts\/2014\/09\/14ff7c0f532ccf8fff663f3dabe0043d.jpg\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/view-mockup-300x168.jpg 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/view-mockup-550x309.jpg 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/view-mockup.jpg 1280w\" width=\"550\"\/><\/a><\/p>\n<p>Not only is this much better aesthetically, it actually improves the gameplay too. Since each viewport has the same width but different heights, I had to widen the area of the game world shown in each port in order to preserve aspect ratio. This had the knock-on effect of allowing the player to see further ahead in the world they\u2019re about to shift to, helping them plan ahead.<br\/>\nThe final breakdown for the portal heights had the main port taking 5\/8ths of the window height, the next port with 2\/8ths (1\/4) and the last one with 1\/8th. These are roughly the same proportions as the mock-up.<br\/>\nThe only downside to this approach was that it made transitions more complicated: I now had to morph not only the viewports but the areas they represented too. Here\u2019s what happens when the player shifts:<\/p>\n<ul>\n<li>The main viewport slides down off the screen.*<\/li>\n<li>The next viewport slides down, expands vertically and zooms in to replace it.<\/li>\n<li>The last viewport slides down, expands vertically and zooms in to replace that.<\/li>\n<li>A temporary fourth view slides in from the top.* Once the transition is complete, the temporary view is disabled and what was the main view now takes last place.<\/li>\n<\/ul>\n<p>*Sort of.<br\/>\nIn much the same way that GameMaker doesn\u2019t allow viewports to be larger than the window, it also doesn\u2019t allow them to occupy space outside the window. A \u2018sliding\u2019 viewport is actually vertically shrinking or expanding while zooming in or out. This is functionally similar to the expansion zoom trick from earlier. As one of my lecturers likes to say: in videogames programming, <em>everything<\/em>\u00a0is a hack.<\/p>\n<p><a href=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/39966-shot1.jpg\"><img alt=\"39966-shot1\" class=\"alignnone wp-image-392130 size-large\" height=\"307\" sizes=\"(max-width: 550px) 100vw, 550px\" src=\"\/data\/posts\/2014\/09\/54dd1d2f90279f5a556113b2015d43ca.jpg\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/39966-shot1-300x167.jpg 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/39966-shot1-550x307.jpg 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/09\/39966-shot1.jpg 1280w\" width=\"550\"\/><\/a><\/p>\n<p>Above is a screenshot from the final game. Below is some footage of the transitions, with the time per transition increased fourfold for clarity. Below that is gameplay of the final game, so you can see how it ended up.<br\/>\nThe last thing I\u2019ll say about the viewports is that whenever you shift you\u2019re actually discarding that world and generating a new one at the top. Having a temporary fourth lane was too much hassle for a jam game, so once the transition is complete you can actually see the new world pop in over the old one at the top. Since the backgrounds are detailed and the player isn\u2019t focusing on the top of the window at that time, I think we get away with it. Look out for it in the videos below.<\/p>\n<p><iframe allowfullscreen=\"\" frameborder=\"0\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/QXNm-tSr-G0?feature=oembed\" width=\"500\"><\/iframe><\/p>\n<p><iframe allowfullscreen=\"\" frameborder=\"0\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/g1h_YVwMcj0?feature=oembed\" width=\"500\"><\/iframe><\/p>","time":"September 9th, 2014 2:07 pm","title":"World transitions: Manipulating viewports in Spirit Shift","title_was_empty":false}