scrollable-kinetic.html

<script src="phaser.min.js"></script>
<script src="dist/phaser-scrollable.min.js"></script>

<script>
	window.game = new Phaser.Game(800, 600, Phaser.AUTO, "game", {preload: preload, create: create}, false, true);
	
	function preload() {
		game.stage.backgroundColor = "#444444";
		
		game.load.image("background", "lightworld_large.gif");
	}
	
	var horizontalScroll = true;
	var verticalScroll = true;
	var kineticMovement = true;
	var scroller;
	
	function create() {
		scroller = game.add.existing(new ScrollableArea(0, 0, game.width, game.height));
		configure();
		
		var image = game.make.image(0, 0, "background");
		image.inputEnabled = true;
		image.events.onInputUp.add(function() {
			console.log("IMAGE CLICKED!");
		});
		scroller.addChild(image);
		
		scroller.start();

		horizontalScroll = true;
		verticalScroll = true;
		kineticMovement = true;
		
		this.paramTextStyle = {font:"20px Arial", fill:"#ffffff", stroke:"#000000", strokeThickness:10};
		
		this.horizText = game.add.text(30, 430, "HorizontalScroll: " + horizontalScroll, this.paramTextStyle);
		this.horizText.inputEnabled = true;
		this.horizText.events.onInputDown.add(function() {
			horizontalScroll = !horizontalScroll;
			configure();
			this.horizText.setText("HorizontalScroll: " + horizontalScroll);
		}, this);
		
		this.vertText = game.add.text(30, 460, "VerticalScroll: " + verticalScroll, this.paramTextStyle);
		this.vertText.inputEnabled = true;
		this.vertText.events.onInputDown.add(function() {
			verticalScroll = !verticalScroll;
			configure();
			this.vertText.setText("VerticalScroll: " + verticalScroll);
		}, this);
		
		this.kineticText = game.add.text(30, 490, "KineticMovement: " + kineticMovement, this.paramTextStyle);
		this.kineticText.inputEnabled = true;
		this.kineticText.events.onInputDown.add(function() {
			kineticMovement = !kineticMovement;
			configure();
			this.kineticText.setText("KineticMovement: " + kineticMovement);
		}, this);
		
		this.scrollToText = game.add.text(30, 520, "Scroll to 300,300", this.paramTextStyle);
		this.scrollToText.inputEnabled = true;
		this.scrollToText.events.onInputDown.add(function() {
			scroller.scrollTo(300, 300, 1000, false);
		}, this);
		
		this.scrollToText = game.add.text(30, 550, "Scroll to 0, 0", this.paramTextStyle);
		this.scrollToText.inputEnabled = true;
		this.scrollToText.events.onInputDown.add(function() {
			scroller.scrollTo(0, 0, 1000, false);
		}, this);
	}
	
	function configure() {
		this.scroller.configure({
			horizontalScroll:horizontalScroll,
			verticalScroll:verticalScroll,
			kineticMovement:kineticMovement
		});
	}
</script>