One thing I’ve always enjoyed about beat ’em up games from the past is when they’ve put a city skyline in the background. It’s a minor touch, but it makes a big difference. It does a great job of transporting you to a new world.<\/p>\n
The problem with having a background, however, is that you limit your foreground space. You need to take up about half the screen for your cityscape background and half for the foreground map in which your user will fight the baddies. For my game engine, I wanted to have a sandbox-style world like Grand Theft Auto. This meant requiring a map that gets large and potentially grows vertically and not just horizontally. This would mean getting rid of the background artwork, which would severely limit the experience I am going for.<\/p>\n
One day, looking at the album artwork for the latest Bon Iver album, I realized that maybe there was a solution to my problem:<\/p>\n
<\/a><\/p>\nWhy not combine the background with a foreground map that can scroll up and down? i.e. fake the perspective. After sketching out how it might look, I sat down and actually implemented. Here’s what it looks like:<\/p>\n<\/iframe><\/p>\n<p><iframe loading=\"lazy\" width=\"420\" height=\"345\" src=\"http:\/\/www.youtube.com\/embed\/XBSh8JkHQg4\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>In my head, it worked out a lot better, but I think this is decent. The above demos I think illustrate how it might work in a game situation, but I need to create a few more complex levels. What I’m really trying to go for is an immersive game world that retains that 8-bit flat 2D art look. <\/p>\n<p>What do you think? Let me know in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One thing I’ve always enjoyed about beat ’em up games from the past is when they’ve put a city skyline in the background. It’s a minor touch, but it makes a big difference. It does a great job of transporting you to a new world. The problem with having a background, however, is that you … <a href=\"https:\/\/www.ussherpress.com\/blog\/?p=552\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Flattened Perspective Demo<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[137],"tags":[52],"_links":{"self":[{"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/552"}],"collection":[{"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=552"}],"version-history":[{"count":4,"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/552\/revisions"}],"predecessor-version":[{"id":561,"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/552\/revisions\/561"}],"wp:attachment":[{"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Why not combine the background with a foreground map that can scroll up and down? i.e. fake the perspective. After sketching out how it might look, I sat down and actually implemented. Here’s what it looks like:<\/p>\n
<\/iframe><\/p>\n<p><iframe loading=\"lazy\" width=\"420\" height=\"345\" src=\"http:\/\/www.youtube.com\/embed\/XBSh8JkHQg4\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>In my head, it worked out a lot better, but I think this is decent. The above demos I think illustrate how it might work in a game situation, but I need to create a few more complex levels. What I’m really trying to go for is an immersive game world that retains that 8-bit flat 2D art look. <\/p>\n<p>What do you think? Let me know in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One thing I’ve always enjoyed about beat ’em up games from the past is when they’ve put a city skyline in the background. It’s a minor touch, but it makes a big difference. It does a great job of transporting you to a new world. The problem with having a background, however, is that you … <a href=\"https:\/\/www.ussherpress.com\/blog\/?p=552\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Flattened Perspective Demo<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[137],"tags":[52],"_links":{"self":[{"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/552"}],"collection":[{"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=552"}],"version-history":[{"count":4,"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/552\/revisions"}],"predecessor-version":[{"id":561,"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/552\/revisions\/561"}],"wp:attachment":[{"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ussherpress.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/www.ussherpress.com\/blog\/wp-content\/uploads\/220px-Vigilante1-150x150.png\")
<\/a>\n\t\t\t<\/div><\/figure>![\"\"](\"https:\/\/www.ussherpress.com\/blog\/wp-content\/uploads\/gfs_58627_2_2-150x150.jpg\")
<\/a>\n\t\t\t<\/div><\/figure>![\"\"](\"https:\/\/www.ussherpress.com\/blog\/wp-content\/uploads\/ninja_gaiden_arcade-150x150.jpg\")
<\/a>\n\t\t\t<\/div><\/figure>![\"\"](\"https:\/\/www.ussherpress.com\/blog\/wp-content\/uploads\/river-city-ransom-20080501043851995-150x150.jpg\")
<\/a>\n\t\t\t<\/div><\/figure>![\"\"](\"https:\/\/www.ussherpress.com\/blog\/wp-content\/uploads\/tgUwdYkuv6MSYHcyIhDNIra2rUWvyQO_-150x150.jpg\")
<\/a>\n\t\t\t<\/div><\/figure>![\"\"](\"https:\/\/www.ussherpress.com\/blog\/wp-content\/uploads\/198224_8956929_lm-150x150.jpg\")
<\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n![\"\"](\"https:\/\/www.ussherpress.com\/blog\/wp-content\/uploads\/198224_8956929_lm.jpg\" "\\"198224_8956929_lm\\"")
<\/a><\/p>\n