Getting Started

[playh5]

Hello, I'm getting started with phaser. My code:

<script src = "phaser.js"></script><script type="text/javascript">	var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update:update});	function preload(){		game.load.image('bg','assets/Background.png')	}	function create(){				game.add.tileSprite(0,0,'bg')	}	function update(){			}</script>

I have folder "myfirstgame" with "index.html", "phaser.js" and an asset folder where the Background.png is, I viewed the index.html in my browser but only white background. why?

Thanks!

[rich]

Are you using a web server or just trying to open the html file directly in the browser? (if so, that won't work)

 

Also your sprite line is wrong. Change "tileSprite" to just "sprite".

[playh5]

Hi Rich thanks!, I downloaded wamp server and viewed the game on browser "http://localhost/FirstGame/index.html". I changed "tileSprite" to "sprite" and it's still the same white screen

[playh5]

Oh, it worked. days ago after installing wamp server I created a "project folder" and when I viewed this on localhost I saw some index links. So I copied assets folder phaser.js and my index.html from "FirstGame folder" and paste to this "project folder" and it worked perfectly. Not sure what's wrong with "FirstGame" folder.

[Fricken Hamster]

This probably has nothing to do with it, but I clear cache every time when assets are messed with.

[playh5]

Ah ok thanks for the tip Fricken

[rich]

If you use Chrome - make sure the dev tools are open (ctrl+shift+j on windows) then click the settings cog icon, click "General" on the left and check: "Disable cache (while DevTools is open)".

 

Then you don't need to worry about the cache ever again, just make sure the DevTools window is open when coding and testing.

[playh5]

Thanks Rich! thats another great tips.

 

Ok,I made a small prototype. I have a "group" and I added sprites into it by this code.

function preload(){		game.load.image('bg','assets/Background.png');		game.load.image('how','assets/tapPlay.png');		game.load.image('title','assets/Title.png');		game.load.image('instruction','assets/Instruction.png');		game.load.image('g1','assets/sprites/Gift01.png');		game.load.image('g2','assets/sprites/Gift02.png');		game.load.image('g3','assets/sprites/Gift03.png');		game.load.image('g4','assets/sprites/Gift04.png');		game.load.image('g5','assets/sprites/Gift05.png');	}	function loadGameAssets(){		var g1;		var g2;		var g3;		var g4;		var g5;		for(var i = 0; i < 5; i++){			g1 = giftGroup.create(2 + Math.random() * 450,260,'g1');			g2 = giftGroup.create(2 + Math.random() * 450,260,'g2');			g3 = giftGroup.create(2 + Math.random() * 450,260,'g3');			g4 = giftGroup.create(2 + Math.random() * 450,260,'g4');			g5 = giftGroup.create(2 + Math.random() * 450,260,'g5');		}	}

 

I'm stuck on how to add a click listener to each item on the group. Like

//Pseudo Code:giftGroup.addClickListener(clickHandler,this);function clickHandler(_item){   _item.y -= 10;}

Also on the examples, I only see sample codes of removing each items on the group when the item collide with another sprite or object. How about when each item on the group was out of bounds or like each y coordinate is less than zero?

 

Thanks in advance

[rich]

Look at the Input code examples and you'll see how to enable click detection.

 

You can kill a sprite when it leaves the game world:

yourGroup.setAll('outOfBoundsKill', true);

[playh5]

Thanks once again Rich