- General
-
Spørgsmål
0
Besvaret
Moving/scrolling background for games
Hi guys,
I have a question about backgrounds. I am trying to create scrolling landscape to a game scene. Like in this link http://www.youtube.com/watch?v=l3wq67W3fFg
I am not to worried about the parralax effect at this stage, just how to make a background that continuously moves smoothly across the screen. Is this even possible with Builder?
Thanks
Clint
I have a question about backgrounds. I am trying to create scrolling landscape to a game scene. Like in this link http://www.youtube.com/watch?v=l3wq67W3fFg
I am not to worried about the parralax effect at this stage, just how to make a background that continuously moves smoothly across the screen. Is this even possible with Builder?
Thanks
Clint
Svar
Svar
Besvaret
Hi! There are several ways to create the effect of a moving background. In any situation you use, it should be a graphic element that is wider than the screen (and not actually a background image) so that it can animate or be moved by the user.
When you add the wide image to the page, InteractBuilder will display a message asking if you want the image to be a "movable background image." Click "No," and then in the element's "Info" tab, click the last option, "Reset to Original Size."
- If you want the background to move by itself, you can use a transition animation added to the graphic element
- If you want the user to move the background, you can use a Drag-Move behavior on the wide image. The constraints would be the following:
Left: the width of the app screen minus the width of the image
Right: the width of the image
Top: the height of the app screen
Bottom: 0
There are some other options, like Swipe-Animate, and if you want the user to be able to move other elements along with the background you can use a technique similar to the page menu.
Let us know if you have any questions about this or if you'd like to see a sample of any of the techniques!
When you add the wide image to the page, InteractBuilder will display a message asking if you want the image to be a "movable background image." Click "No," and then in the element's "Info" tab, click the last option, "Reset to Original Size."
- If you want the background to move by itself, you can use a transition animation added to the graphic element
- If you want the user to move the background, you can use a Drag-Move behavior on the wide image. The constraints would be the following:
Left: the width of the app screen minus the width of the image
Right: the width of the image
Top: the height of the app screen
Bottom: 0
There are some other options, like Swipe-Animate, and if you want the user to be able to move other elements along with the background you can use a technique similar to the page menu.
Let us know if you have any questions about this or if you'd like to see a sample of any of the techniques!
Hi Inna,
Thanks, but this doesn't quite answer my question. I have done the image to move as linear by itself as a background, it's bigger than the screen. But I want it to keep looping/repeating so that I get a smooth endless moving background. Like tiles being added after each other in line. Do you understand what I mean?
I can't have an image so big it's endless, that would be huge!
Clint
Thanks, but this doesn't quite answer my question. I have done the image to move as linear by itself as a background, it's bigger than the screen. But I want it to keep looping/repeating so that I get a smooth endless moving background. Like tiles being added after each other in line. Do you understand what I mean?
I can't have an image so big it's endless, that would be huge!
Clint
To make the image endless, you can use the "Replay" option on the animation behavior. Edit the image so that the left-most screen-width part is identical to the right-most screen-width part.
For example, if the screen of your app is 1024 pixels wide and the image is 5000 pixels wide, the 1024 pixels on the left side of the image should look exactly the same as the 1024 pixels on the right side of the image.
To make sure the screen doesn't show the white background at any point (between replays or before the page loads), you can set the background image to also look like the first 1024 pixels of the wide background.
For example, if the screen of your app is 1024 pixels wide and the image is 5000 pixels wide, the 1024 pixels on the left side of the image should look exactly the same as the 1024 pixels on the right side of the image.
To make sure the screen doesn't show the white background at any point (between replays or before the page loads), you can set the background image to also look like the first 1024 pixels of the wide background.
Hi Inna,
Thanks, that's more to what I'm trying to do. The only problem is there is a slight jerk/halt in the animation as the image replays itself. Not sure thats fixable. I mite have to try work something with the way I make the image.
Thanks, that's more to what I'm trying to do. The only problem is there is a slight jerk/halt in the animation as the image replays itself. Not sure thats fixable. I mite have to try work something with the way I make the image.
Kundesupport af UserEcho
When you add the wide image to the page, InteractBuilder will display a message asking if you want the image to be a "movable background image." Click "No," and then in the element's "Info" tab, click the last option, "Reset to Original Size."
- If you want the background to move by itself, you can use a transition animation added to the graphic element
- If you want the user to move the background, you can use a Drag-Move behavior on the wide image. The constraints would be the following:
Left: the width of the app screen minus the width of the image
Right: the width of the image
Top: the height of the app screen
Bottom: 0
There are some other options, like Swipe-Animate, and if you want the user to be able to move other elements along with the background you can use a technique similar to the page menu.
Let us know if you have any questions about this or if you'd like to see a sample of any of the techniques!