{"author_link":"\/users\/paude","author_name":"Paude","author_uid":"paude","comments":[],"epoch":1570645572,"event":"LD45","format":"md","ldjam_node_id":174973,"likes":13,"metadata":{"p_key":"136757","p_author":"Paude","p_authorkey":"1171144","p_urlkey":"353033","p_title":"Parallax effect: the importance of the background","p_cat":"LDJam ","p_event":"LD45","p_time":"1570645572","p_likes":"13","p_comments":"0","p_status":"WAYBACK","us_key":"1171144","us_name":"Paude","us_username":"paude","event_start":"1570147200","event_key":"78","event_name":"Ludum Dare 45"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD45","removed_author":false},"_superparent":159347,"_trust":1,"author":171144,"body":"![gif_parallax.gif](\/\/\/raw\/88c\/92\/z\/2928b.gif)\n\nThe **parallax effect** is used in our videogame ['Robbie'](https:\/\/ldjam.com\/events\/ludum-dare\/45\/robbie) to simulate a 3D environment, as you can see in the gif. Basicaly I've drawn **six tiling**(1) **layers**.\n\n![parallax.png](\/\/\/raw\/88c\/92\/z\/2927b.png)\n\nIn this graph you can see all six layers used to create this parallax illusion. **The further the layer, the slower it moves** compared to the camera. The terrain itself it could also be considered as a layer.\n\n\nThe way parallax background is made is by basically moving the layers of the parallax (that are tiled horizontally) to the camera\u2019s y position and the cameras x position divided by a specific value. The higher this value is the more it will move in relation to the camera, **making it appear closer to the player**. You can see this effect happening clearly when looking through the window of a moving vehicle, the closest objects move very fast while the mountains on the far back move very slowly.\n\n```\n\/\/Sky\nlayer_y(\"Sky\", y -view_h_half);\nlayer_x(\"Sky\", x - view_w_half);\n\n\/\/Layer 1\nif (layer_exists(b1_id)){\n    layer_y(b1_id, y-view_h_half);\n    layer_x(b1_id, x\/b1_depth - global.timer * 0.2);\n}\n\/\/Layer 2\nif (layer_exists(b2_id)){\n    layer_y(b2_id, y-view_h_half);\n    layer_x(b2_id, x\/b2_depth) ;\n}\n\n\/\/Layer 3\nif (layer_exists(b3_id)){\n    layer_y(b3_id, y-view_h_half);\n    layer_x(b3_id, x\/b3_depth + global.timer * 0.15);\n}\n\/\/Layer 4\nif (layer_exists(b4_id)){\n    layer_y(b4_id, y-view_h_half);\n    layer_x(b4_id, x\/b4_depth);\n}\n\/\/Layer 5\nif (layer_exists(b5_id)){\n    layer_y(b5_id, y-view_h_half);\n    layer_x(b5_id, x\/b5_depth);\n}\n```\n\nThe layers in the graph are cropped to give a better view. Most of them, such as the buildings or clouds are indeed from 3 to 4 times longer horizontally, as you can see here:\n\n![BackBuildings.png](\/\/\/raw\/88c\/92\/z\/292dd.png)\n\n![FrontBuildings.png](\/\/\/raw\/88c\/92\/z\/292e1.png)\n\n![BackClouds.png](\/\/\/raw\/88c\/92\/z\/292e3.png)\n\n\n\n*(1): Tiling means that a certain object is designed so it can be stacked (vertically or horizontally) and it looks continuos. All layers used in Robbie are tileable.*\n\nIf this post was interesting to you please consider passing by and trying our game out if you have time, thank you! :) \nhttps:\/\/ldjam.com\/events\/ludum-dare\/45\/robbie\n\n-@paude","comments":1,"comments-timestamp":"2019-10-09T18:37:43Z","created":"2019-10-09T16:07:37Z","files":[],"files-timestamp":0,"id":174973,"love":13,"love-timestamp":"2019-10-09T19:23:18Z","meta":[],"modified":"2019-10-09T19:23:18Z","name":"Parallax effect: the importance of the background","node-timestamp":"2019-10-09T18:30:49Z","parent":169992,"parents":[1,5,9,159347,169992],"path":"\/events\/ludum-dare\/45\/robbie\/parallax-effect-the-importance-of-the-background","published":"2019-10-09T18:26:12Z","scope":"public","slug":"parallax-effect-the-importance-of-the-background","subsubtype":"","subtype":"","type":"post","version":526391},"node_metadata":{"n_key":"174973","n_urlkey":"353033","n_parent":"169992","n_path":"\/events\/ludum-dare\/45\/robbie\/parallax-effect-the-importance-of-the-background","n_slug":"parallax-effect-the-importance-o","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"171144","n_created":"1570637257","n_modified":"1570648998","n_version":"526391","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/45\/robbie\/parallax-effect-the-importance-of-the-background","text":"![gif_parallax.gif](\/\/\/raw\/88c\/92\/z\/2928b.gif)\n\nThe **parallax effect** is used in our videogame ['Robbie'](https:\/\/ldjam.com\/events\/ludum-dare\/45\/robbie) to simulate a 3D environment, as you can see in the gif. Basicaly I've drawn **six tiling**(1) **layers**.\n\n![parallax.png](\/\/\/raw\/88c\/92\/z\/2927b.png)\n\nIn this graph you can see all six layers used to create this parallax illusion. **The further the layer, the slower it moves** compared to the camera. The terrain itself it could also be considered as a layer.\n\n\nThe way parallax background is made is by basically moving the layers of the parallax (that are tiled horizontally) to the camera\u2019s y position and the cameras x position divided by a specific value. The higher this value is the more it will move in relation to the camera, **making it appear closer to the player**. You can see this effect happening clearly when looking through the window of a moving vehicle, the closest objects move very fast while the mountains on the far back move very slowly.\n\n```\n\/\/Sky\nlayer_y(\"Sky\", y -view_h_half);\nlayer_x(\"Sky\", x - view_w_half);\n\n\/\/Layer 1\nif (layer_exists(b1_id)){\n    layer_y(b1_id, y-view_h_half);\n    layer_x(b1_id, x\/b1_depth - global.timer * 0.2);\n}\n\/\/Layer 2\nif (layer_exists(b2_id)){\n    layer_y(b2_id, y-view_h_half);\n    layer_x(b2_id, x\/b2_depth) ;\n}\n\n\/\/Layer 3\nif (layer_exists(b3_id)){\n    layer_y(b3_id, y-view_h_half);\n    layer_x(b3_id, x\/b3_depth + global.timer * 0.15);\n}\n\/\/Layer 4\nif (layer_exists(b4_id)){\n    layer_y(b4_id, y-view_h_half);\n    layer_x(b4_id, x\/b4_depth);\n}\n\/\/Layer 5\nif (layer_exists(b5_id)){\n    layer_y(b5_id, y-view_h_half);\n    layer_x(b5_id, x\/b5_depth);\n}\n```\n\nThe layers in the graph are cropped to give a better view. Most of them, such as the buildings or clouds are indeed from 3 to 4 times longer horizontally, as you can see here:\n\n![BackBuildings.png](\/\/\/raw\/88c\/92\/z\/292dd.png)\n\n![FrontBuildings.png](\/\/\/raw\/88c\/92\/z\/292e1.png)\n\n![BackClouds.png](\/\/\/raw\/88c\/92\/z\/292e3.png)\n\n\n\n*(1): Tiling means that a certain object is designed so it can be stacked (vertically or horizontally) and it looks continuos. All layers used in Robbie are tileable.*\n\nIf this post was interesting to you please consider passing by and trying our game out if you have time, thank you! :) \nhttps:\/\/ldjam.com\/events\/ludum-dare\/45\/robbie\n\n-@paude","title":"Parallax effect: the importance of the background","wayback_source":[]}