Now you can drag and drop the prefab to your scene as many times depending on the number of layers you want. Drag and drop the Parallax layer on to your project folder to make it into a prefab. Length=GetComponentInChildren().bounds.size Here is the final script using UnityEngine
Parallax background update#
So, let’s update the code to get the distance moved by the camera and if its greater than the length of the image then we shift the startposition of the image by length of the image. So, we need to move the background after the camera has moved a distance greater than the length of the image. The only problem here is if your parallax background is not equal to one then at some point the background is going to disappear. Transform.position=startposition+relative_pos
Start is called before the first frame update Depending on the Parallax value the image will move with camera. We can just multiply the camera’s x position with Parallax value and add it to the start position of the image. So, we will get the camera, start position of the image and the Parallax value. We want this image to move relative to the camera speed. We can cover the blanks using these images. The reason we need three images is when you move the camera there will be a small blank before the image will replicate itself. Set the layer order in the sprite renderer.ĭuplicate the image two times and move them to the sides as shown in the image below.Īll the images will be children of Parallax_layer. Adjust the image size by changing the pixel per unit value so that the background image fits into the camera view.
Parallax background full#
You can also get some pretty interesting visual feats by combining the full height and full width options.Steps to Create a Parallax effect Creating a Parallax layerĬreate an empty gameobject and name it as Parallax_layer.ĭrag and drop your first background image as child of the Parallax_layer. The parallax speed option is set to 1.5 by default (in most cases, but this may vary) the minimum value for parallax speed is 1, and you can use this option to adjust the parallax speed to fit your design style. In addition, it’s possible to combine the parallax background image (in PNG format) and the Design Options tab image, and this way you can create even more complex overflow effects based on parallax. The parallax parameter allows choosing one of two parallax effects – simple and fade. If there is no parallax background image specified, the background image from the Design Options tab of the row will be used. You have the option to add a parallax effect to an entire row section by going to page options, and editing your Row (simply locate the row you wish to add the effect to and click the pencil icon located at the top right side of that row).
Themes which do not have the option to enable/disable the parallax effect in Theme options most commonly have elements of sliders where this option does exist. Please note that certain themes do not feature this option. However, if you wish, you can still enable parallax effects for mobile devices by navigating to Theme Options -> Elements -> Parallax. This is why we disabled the parallax effect on our themes by default for mobile/touch devices. At times a parallax effect will work as intended on one particular mobile device type, and appear rather messy on a different device at the same time. It’s worth adding that, due to a number of factors, parallax effects behave somewhat oddly on different mobile device types, and there is no certain way of determining exactly how they’ll behave on each of them. It’s also a good idea to make sure that the image height is at least double the size compared to the height of the parallax section itself. Because of this, it’s good to be mindful about the image width – the image could get cut away at the edges if it has a bigger width compared to its height. Note that in order to be displayed in a parallax section, the pixel size for the image height needs to be fairly high to properly utilize the parallax scrolling effect. Parallax is basically designed to be used and viewed on those screens first and foremost. Parallax effects are usually used on full screen and full width desktop screens.
0 kommentar(er)
