Make game background? Also other questions...

[Legomite]

How do I add a background to a scene?

Is there like a background Image for a scene or do I have to use a sprite?

I tried using a sprite but I have not idea how to set the height or width of it.

My other list of questions since I don't feel like making a completely different topic.

How do I set the layer of the sprite like how z-index in css works

How do I load or unload a scene?

[Ninjadoodle]

Hi @Legomite

 

To make a background, I would first make a container ...

var bg = new game.Container().addTo(game.scene.stage);

Then I would create a sprite and put it inside the container (Let's say your game is 480x320)  ...

var levelBg = new game.Sprite('levelBg.png'); // Create the backgroundlevelBg.position.set(240*game.scale, 160*game.scale); // Place the background in the centre of the screenlevelBg.anchor.set(0.5, 0.5); // Set the anchor point to the centrebg.addChild(levelBg); // Add the background to the bg container

 

You don't really need to set the height or width as the background will just display at the size you made it.

 

You can then make another container, called content or mg (or whatever you want) and place you player and other props inside.

 

The best way to set a layer of a sprite (that doesn't change) is to use containers. If you want to change the z-index on the fly, then check out this topic and scroll to the lower half ... http://www.html5gamedevs.com/topic/9789-define-a-z-index-for-specific-spriteelements/?hl=index

 

As far as loading a scene, it's very easy in Panda, but you have to follow the correct steps ...

 

http://vermeire.home.xs4all.nl/panda/fiddler.html

 

Also, don't forget to check out the Panda.js Resources. They will teach you almost everything you need to know ...

 

http://www.html5gamedevs.com/topic/9927-pandajs-resources/

 

Hope this helps

[Legomite]

Hi @Legomite

To make a background, I would first make a container ...

var bg = new game.Container().addTo(game.scene.stage);

Then I would create a sprite and put it inside the container (Let's say your game is 480x320) ...

var levelBg = new game.Sprite('levelBg.png'); // Create the backgroundlevelBg.position.set(240*game.scale, 160*game.scale); // Place the background in the centre of the screenlevelBg.anchor.set(0.5, 0.5); // Set the anchor point to the centrebg.addChild(levelBg); // Add the background to the bg container

Also,cityis is a bit ridiculous but, what does the anchor do?

You don't really need to set the height or width as the background will just display at the size you made it.

You can then make another container, called content or mg (or whatever you want) and place you player and other props inside.

The best way to set a layer of a sprite (that doesn't change) is to use containers. If you want to change the z-index on the fly, then check out this topic and scroll to the lower half ... http://www.html5gamedevs.com/topic/9789-define-a-z-index-for-specific-spriteelements/?hl=index

As far as loading a scene, it's very easy in Panda, but you have to follow the correct steps ...

http://vermeire.home.xs4all.nl/panda/fiddler.html

Also, don't forget to check out the Panda.js Resources. They will teach you almost everything you need to know ...

http://www.html5gamedevs.com/topic/9927-pandajs-resources/

Hope this helps

What does a anchor do?

[Ninjadoodle]

Hi @Legomite

 

An anchor sets the point by which your sprite is positioned or manipulated (scaled etc.).

 

levelBg.anchor.set(0.5, 0.5)

 

The first value is the x-axis and the second the y axis.

 

Setting the first value to 0 will put the x of the anchor on the left side of the sprite. Setting it to 1 will put it on the right. Therefore, 0.5 is the middle.

The same goes for the y-axis, 0 being the top and 1 the bottom.

 

Hope this helps