Hello,
I wanted to create a parallax scrolling background for a particular scene. I had the idea to create an animated gif but the gif image is not as smooth as I would like it to be. Does WSE support parallax scrolling?
Thank you for your help.
I realized, that the mp4 video of the image is very smooth. So I could try using that as the background for a workaround. I know a <video> tag hasn't been created yet, so I assume I'll just use the assets tag. If you believe using a video as the background will cause any problems or if you have a better idea, please let me know. Thank you
.
Update:
Well the video idea failed to not being recognize with the Imagepack tag. My next idea was to try to see if I could slide a jpg image upwards using the animation command. However, the background image createdpantry never appears, the background remains black with no errors.
[assets]
[imagepack name="pack_cup1" x="0" y="0" z="0"]
[image src="createdpantry.jpg" name="cup01" /]
[/imagepack]
[animation name="my_anim"]
[group]
[do asset="pack_cup1" action="move" x="0" y="-500" duration="8000" easing="linear" /]
[/group]
[/animation]
[/assets]
[scenes]
[scene id="start"]
[start asset="my_anim" /]
[/scene]
[/scenes]
Update #2:
I turned my mp4 movie into a gif, the gif file is huge 54 mb but it does work with show asset. However, the gif stops animation after 1 min of play with the WSE. The animation never stops playing in the browser.
This is the animated background image:
http://i.imgur.com/4T0mNey.gif
If that takes too long to load, you can use:
http://i.imgur.com/4T0mNey.gifv. However, gifv and webm don't seem compatible with WSE.
Hi brg,
there's no built-in parallax effect.
Your example doesn't work because the sprite you are using is invisible. You need to set an image on it and use the show command on it first. Another problem with your code is that the game ends immediately. That is because animations don't hold the flow of the story, so the way you wrote your start scene, you start the animation and then the story ends and nothing gets shown. You need to put a wait command there and loop the scene it is in, at least for your tests.
I also just found out that the move command didn't use pixels as the default unit for x and y. It's fixed now in the develop branch on GitHub. If you don't want to update, just use "px" as unit for your x and y attributes on the move command.
Hope that helps!
Hi C7N,
Thanks for the response, I didn't paste the entire code but I am using a line break command for test. The animation example on the wiki didn't show a set command being used but I did speculate that....wish I had explore those thoughts more. Everything is working fine now, thank you!
I have one more question, in order to get parallex scrolling to work perfectly I'll need to know the y position of an image in run-time. Is this possible with WSE?
Current Animation Code causes the blank black background to be shown. This is because the second image can not meet the first image in time:
[animation name="my_anim" type="animation"]
[group]
[do asset="pack_cup1" action="move" x="0px" y="-720px" duration="7000" easing="linear" /]
[do asset="pack_cup2" action="move" x="0px" y="0px" duration="7000" easing="linear" /]
[/group]
[group]
[do asset="pack_cup1" action="move" x="0px" y="1440px" duration="0" easing="linear" /]
[/group]
[group]
[do asset="pack_cup2" action="move" x="0px" y="-720px" duration="7000" easing="linear" /]
[do asset="pack_cup1" action="move" x="0px" y="0px" duration="7000" easing="linear" /]
[/group]
[group]
[do asset="pack_cup2" action="move" x="0px" y="1440px" duration="0" easing="linear" /]
[/group]
[/animation]
NOTE:
Screen resolution is 1280x720.
pack_cup1 is the first image.
pack_cup2 is the second image.
The first group works just fine. The lack of not knowing where the second is at causing issues aligning the two pictures.
Unfortunately, there's no way right now to query asset properties at runtime. Having said that, do you really need that for parallax?
The difference between the "do" and the "transform" command is that only the second one uses an actual timer for the tweening, so maybe the issue is that the "simulated" timer used for "do" (which just depends on the duration attribute) runs a little different than the actual animation. That's why I'd recommend you try the "transform" command instead.
Normally, I use assets properties for parallax in C# and C++. I was avoiding transform due to not being able to find a CSS code example for the WSE Wiki's animation page. The Wiki animation page displays the code to use for the xml file but doesn't show what the CSS file looks like. I'll see if I can hunt down a WSE example that shows the CSS code for a transform animation example. Unfortunately, my experience in CSS is limited. Thank you for the transform idea, I will look into it.
I guess what you want is
for x values and
for y values.
There's no need to look into any CSS files.
Thanks! I thought I had to manipulate the CSS file but I managed to do parallex vertical scrolling by doing the following. There was a tiny gap between images but I made a dark static background image so the user doesn't notice the gap that "sometimes" appears. I pasted the code below for anyone that wants to do parallex scrolling in WSE. The reason why my_anim2 is 715px instead of 720 was to reduce the tiny gap that appeared when pack_cup1 was trying to catch up to pack_cup2. The gap is only about 5 pixels high now.
[animation name="my_anim" type="animation"]
[group]
[transform asset="pack_cup1" property="top" from="0" to="-720" unit="px" duration="4000" easing="linear" /]
[/group]
[group]
[transform asset="pack_cup1" property="top" from="-720" to="720" unit="px" duration="0" easing="linear" /]
[/group]
[group]
[transform asset="pack_cup1" property="top" from="720" to="0" unit="px" duration="4000" easing="linear" /]
[/group]
[/animation]
[animation name="my_anim2" type="animation"]
[group]
[transform asset="pack_cup2" property="top" from="715px" to="0" unit="px" duration="4000" easing="linear" /]
[/group]
[group]
[transform asset="pack_cup2" property="top" from="0" to="-715px" unit="px" duration="4000" easing="linear" /]
[/group]
[group]
[transform asset="pack_cup2" property="top" from="-715px" to="715px" unit="px" duration="0" easing="linear" /]
[/group]
[/animation]
The gap does slowly increases over time, luckily the scene only last for about 2 mins. I maybe able to fine tune this in the future to remove the gap between image 2 and image 1. The resolution of both images are 1280x720.