背景图无缝移动

 

   在2D游戏开发中,可以采用(一张)背景图进行(无缝移动),从而,形成一个动态的场景,

  这样,玩家就可以感受到正在进行一个游戏。

 

   但是,当所采用的(背景图)大小,刚才能覆盖窗口的可视范围时,那么,只要背景作出移动,

  就会出现(没有)背景图覆盖的(空缺区域)。

 

   大家可以通过(下方场景)中右方的按钮,点击(背景图移动第1步),这时,背景图就会

 (往下移动)10个单位,同时,大家可以看到场景中出现了(黑色的空缺区域),

  那么,我们如何解决这个问题呢?

 

   现在,大家可以想想,当(背景图)往下移动后,它会有一部分(移出)了(可视范围),而这个

  部分,我们已经是看不到了,所以,我们可以把这个部分的背景图(截取出来),然后,再把它填充

  到(黑色的空缺区域)中,这样,问题就解决了。

 

   所以,大家可以通过(下方场景)中右方的按钮,点击(背景图移动第2步),这时,就可以看到

  (黑色的空缺区域)就被(往下移动)10个单位后,超出可视范围的那一部分背景图填充了。

   

   然后,大家只要重复去点击按钮(背景图移动第1步)与(背景图移动第2步)就可以看到这个过程

  在不断地重复,同时,背景图慢慢地往下作出移动,而点击(背景图连续移动),就会自动重复以上

  步骤。

 

下载代码学习与训练

 

 

 

 

 

(可在手机上查看)

 

Please use a browser that supports "canvas"