HTML and CSS Reference
In-Depth Information
Tween-based cloud animation
We have made the background less boring by including the cloud animaions. We used the
TweenJS library for this tween-based animaion.
We move the cloud from right to let in a slow pace. The distance and tween duraion of
the two clouds are intenionally diferent so they do not appear the same. This has been
highlighted in the following figure:
We used the TweenJS library in the previous project, Project 4 , Muliply Defense . This ime,
we will add a second argument to the Tween.get method by seing the loop opion to
true . This allows the tween animaion to keep running in loops. In addiion, we set a delay
to both the cloud animaions by using the wait method, shown as follows:
Tween.get(cloud1, {loop:true});
Classified intel
Addiionally, we can do more aciviies in the background. For example, we can change the
darkness of the background based on the current ime. The game may show sunlight during
the day and gradually turn dark from evening to night. This can be done using two background
images, light and dark, and tuning the opacity on them based on the ime using JavaScript.
Search WWH ::

Custom Search