Jump to content

Getting Started


Recommended Posts

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?


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...