Forums » Help » Background Images

I have been screwing around with this engine for a couple of days and I can't figure out how to create a background like the one in this video:

http://www.appmobi.com/index.php?q=node/157

All I want is a solid background that is larger than the "camera" area and I would like to just scroll on the x and y axis around the "map"

If you look at this video (scrub to 3:55):
http://www.appmobi.com/index.php?q=node/163

It appears that they have found a way to have the background appear in Weltmeister. How is this possible?

Any help would be much appreciated.

Thanks,

J

we had a discussion abt this here

http://impactjs.com/forums/help/simple-background-level-how-to

Just use a tilesheet layer with your background on it and place it! Check the Run&Jump demo in weltmeister for how he does backgrounds there.

Haha me and Fugu with our feed subscribe notification in Chrome. :P

@80bit haha right on

@80bit - Ok so I went and looked at what was done in weltmeister for the jump & run demo and I see that he set up a background but all he did was create a small section of tiles and the just set repeat. This is not what I am looking for. I want a background that is one image not a bunch of tiles.

Maybe this isn't even possible and I just wasted $100 but I want to make a game for the iPad, which is 1024x768 and have a background image that is 2048x768 so that the user can scroll the viewport left and right to look at the entire level. Think of the background for a game like "Super Stick Man Golf (iPad)" or Worms Armageddon from back in the day.

I also want to have two background layers one set way in the distance and one set more in the foreground that the sprites or other game objects can collide with.

@fugufish - I will try to just draw an image but how would I simulate left and right scrolling?

Something like this:

code
if(ig.input.state("CanvasTouch"))
{
nY = ig.input.mouse.y;
nX = ig.input.mouse.x;

this.screen.y=nY;
this.screen.x=nX;
}
code

Oops screwed up the code tag..

	if(ig.input.state("CanvasTouch"))
        {
            nY = ig.input.mouse.y;
            nX = ig.input.mouse.x;

	    this.screen.y=nY;
            this.screen.x=nX;
        }

@cipherz no you didn't waste $100 !

okay so you want to have a background of 2048 x 768

Tileset method:

in Weltmeister,
1) set the tileset to your background image

2) the tilesize could be 8, 16, etc . Doesn't actually matter cos there's no interaction with the background I assume

2) paint the entire image (by holding SHIFT, and left click to drag and highlight your entire image ). Or you can do it by mini steps. As long as you get there.

the idea is to stick your huge image into the background layer.

don't worry about the view port thing. If the background layer is bigger than your viewport, you can make it scroll around by adding some camera code into the game.

I'm assuming that you're making a 2d side scroller?

If you need help , send your project over (with a similar sized image of course, but not the same) and we can fix it. It's good learning for everybody.

@fugufish - I'm going to try that out and let you know if I get it to work. I will also take some screen shots of the process and post them so that others can learn how to do this.

As an alternative, make your background image into an entity. I have this working in my latest game. I have a title "splash" screen which only consists of an image that is 640x640 (my canvas is also 640x640). I load it into weltmeister just like any other entity. Below is the code for this entity.

ig.module(
	'game.entities.title-splash'
)
.requires(
	'impact.entity'
)
.defines(function(){

EntityTitleSplash= ig.Entity.extend({
	
  size: {x:640, y:640},
  gravityFactor: 0,
	
	animSheet: new ig.AnimationSheet( 'media/title-screen6.png', 640, 640),

  name: "title-splash",	

	init: function( x, y, settings ) {
		  this.parent( x, y, settings );
      this.addAnim( 'idle', 1, [0] )
  }

 
});

You'll also want to turn off all collisions and ensure that the entity retains the lowest z index so that it is "below" everything else when looking into the screen.

So which would be a better approach for a large 2048x768 image? Entity or the background approach?

vtry both and let us know! ( use the new debug panel in Impact 1.18 to tell )