Hi All, I have just started using flashpunk. I followed some videos and make a small space shooter game. I need help in adding a scrolling a background. I have checked that BackDrop class can be used for that but I didn’t found any example/tutorial. Can anyone place post a sample tutorial so I can check it and use it in my game.
Thanks & Regards
It’s not much of a tutorial but here we go. Backdrop is a graphic class so it needs to be added to an Entity just like an Image or Spritemap.
In your entity:
_backdrop = new Backdrop(GFX_BACKDROP_GRAPHIC, true, true); //repeat on X and Y
graphic = _backdrop;
_backdrop is a class variable defined as:
private var _backdrop: Backdrop;
GFX_BACKDROP_GRAPHIC is an embedded graphic class (as you would have with Image or Spritemap).
This entity will now scroll with your world camera. That’s all you have to do. You want it to have parallax scrolling (scrolling slower or faster than the camera)? Do something like this:
_backdrop.scrollX = 0.5; //scroll half speed on the X axis
_backdrop.scrollY = 2.0; //scroll double speed on the Y axis
For additional information check out the documentation here - http://useflashpunk.net/docs/net/flashpunk/graphics/Backdrop.html 
Hello Ultima2876
I’ve tried to implement as you said. But still I got the still screen. No scrolling is there. I am posting my code. Please check and let me know what I am doing wrong.
// background entity for backdrop
package entities { import net.flashpunk.Entity; import net.flashpunk.Graphic; import net.flashpunk.graphics.Backdrop; import net.flashpunk.Mask;
/**
* ...
* @author Deepak Singh Kushwah
*/
public class Background extends Entity
{
private var backdrop:Backdrop;
public function Background(x:Number = 0, y:Number = 0)
{
backdrop = new Backdrop(GA.BACK_IMG, true, true);
graphic = backdrop;
super(x, y, graphic);
}
override public function update():void {
backdrop.scrollX = 0.5;
backdrop.scrollY = 2.0;
super.update();
}
}
}
and adding it to level1.
package worlds { import entities.Background; import entities.Currentlevel; import entities.Enemy; import entities.Player; import entities.PlayerLives; import entities.Score; import net.flashpunk.Entity; import net.flashpunk.graphics.Backdrop; import net.flashpunk.World; import net.flashpunk.FP;
/**
* ...
* @author Deepak Singh Kushwah
*/
public class Level1 extends World
{
private var player:Player;
private var enemy:Array;
private var back:Background;
public function Level1()
{
super();
}
override public function begin():void {
back = new Background(0,0);
add(back);
player = new Player(FP.screen.width*0.5, 500);
add(player);
add(new Enemy(GA.Rand(10, 750), 0, GA.Rand(10, 150)));
//FP.screen.color = 0xC5DDF9;
add(new Score(10, 10));
add(new PlayerLives(150, 10));
add(new Currentlevel(290, 10));
}
override public function update():void {
if (classCount(Enemy) < 5 ) {
//add(new Enemy(GA.Rand(10, 750), 0, GA.Rand(10, 150)));
}
if (GA.SCORE >= 20) {
GA.SCORE = 0;
GA.PLAYER_LIVES = 3;
GA.CURRENT_LEVEL = 2;
FP.world = new Level2;
}
super.update();
}
}
}
I am not able to post complete project because this site system says I am new user. So please check this code here and let me know what’s wrong.
Thanks & Regards
Hello there Your backdrop/basic world code looks good, though scrollX and scrollY on backdrop are just properties that tell it how much to scroll relative to the camera - you only need to set these once (in the constructor or added function of the entity).
There’s a property in World called ‘camera’ that sets the camera position. Use it as follows (in your world or an entity update function):
FP.world.camera.x += 10 * FP.elapsed;
FP.world.camera.y += 10 * FP.elapsed;
There is a good example project for this kind of thing here: https://github.com/zachwlewis/pink
Thank you Ultima2876, now background is scrolling.
Regards
Thank you guys so much for this thread. This just saved me A LOT of messing about.