Support for Parallax

Question

I'm working on a splash streen/tutorial for an app, using the tab/screen view.

Would love to have support for parallax elements that move as the user scrolls the tabs/screens.

Any suggestions in the meantime how to best achieve this?

Comments

Hi Edward,

The implementation would likely depend on whether you're using tabs or screens. Which one were you planning on using?

~ Declan.

---

I'm currently using tabs as they are initially set up to accept swiping between the different panels.

---

I've taken a quick look and it looks like it shouldn't be too hard to implement. I'm out for a few hours, but when I get home I'll put an example together and get back to you :) ~ Declan.

Answer 1

Okay, I've written a script that will resize and position of the parallax background automatically, regardless of the screen's and sprite's resolutions and orientations. You can get it here.

1. Create a TabView.
2. Make the alpha on the Image on the TabView object 0.
3. Set 'Show Graphic' on the Mask on the Tab Bar to true, and set the Image color to the desired color.
4. Set the alpha on each tab's background image to 0 (It's important to keep the images there or the container will not scroll).
5. Add an Image under the Pages object, but above the Container object in the hierarchy (so it is drawn behind the Container). This will be the parallax background, so set its sprite to your desired background sprite.
6. Add the attached script to this new Image, and set the Container Rect Transform value to the Container object's RectTransform.
8. The parallax image should now resize and position itself accordinly in both edit and play modes :)

Let me know if that helps!

~ Declan.

Comments

This is the bomb.

Thank you!

---

Good to hear :)