Gio,
Thanks for the clarification.
I got it to work as advertised, even with zooming !
I'll look at making some optimization and moving it to its own map object,
but I thought I would share a working copy now.
The comments should be self explanatory, but in a nutshell:
This routine lays down a number of tiles for a solid background.
In my case, I am developing a water game, so this draws the ocean.
It takes one map tile which is defined as the same size as the min/max screen width.
This tile is 700px x 400 px and is only 12 k in size, I have attached the file.
This is opposed to loading a very large image and losing resolution as you scale the game board size up.
The tile sprites are all attached to one scene object
The screen is defined to be 700 x 400 via wade.setMaxScreenSize(gameWidth, gameHeight);
I have tried it with a 2x2 board size (1400px x 800px) and a 20 x 20 board size (14000 px x 8000 px) and it seems to work fine.
Not sure how a very large game board effects the performance, but in this stage of the game's life everything works smoothly.
-- You could easily modify this to work with multiple tile types by loading them from an array and adding a different tile image based on the array value like you do with the iso plugin
-- If you have a menu area at say the bottom of the screen that you don't want your character to go over, then just change the relevant value in the mapBB object. For example, if you wanted to 'reserve' a 100 px space at the bottom of the screen for the
game gui, then the value of mapBB.maxy = gameHeight/2*maxY - 100.
A big shout out to Gio for being so helpful with this. Hopefully this can help some others out too.
cheers,
Shri
/**************************************************** // load a background image onto the game screen // read the max number or rows and columns from the json level data // create the starting x and y pos for the first tile // inner for handles the rows // for each tile - position, image, layer // outer for handles the columns // define the game worlds bounding box - mapBB // ** x and y boundary used for stopping game characters, not // for anything to do with the background stuff // onUpdate - set the camera position to the player, with current z // - get the cameras position // - limit the range of the camera based on bounding boxes // - limiting routine courtesy of gio at clockwork chilli //****************************************************/ this.createBackground = function() { console.log('create background'); var xMax = currentLevelData.xMax; var yMax = currentLevelData.yMax; var xStart = -gameWidth/2*(xMax-1); var yStart = -gameHeight/2*(yMax-1); var back = new SceneObject(0,0,0,0); for (var i=0; i<yMax; i++) { for (j=0;j<xMax; j++) { var sp = new Sprite('./images/waterTile.png',self.BACKGROUND_LAYER); back.addSprite(sp,{x:xStart, y:yStart}); //console.log('water tile added at ' + xStart + ' ' + yStart); xStart += gameWidth; } xStart = -gameWidth/2*(xMax-1); yStart += gameHeight; } mapBB = {minX: -gameWidth/2*xMax, minY: -gameHeight/2*yMax, maxX: gameWidth/2*xMax, maxY: gameHeight/2*yMax}; xBoundary = gameWidth/2*xMax -100; yBoundary = gameHeight/2*yMax - 100; console.log(mapBB); back.onUpdate = function() { var pos = player.getPosition() var cPos = wade.getCameraPosition(); wade.setCameraPosition({x:pos.x, y:pos.y, z: cPos.z}); var newCameraPosition = wade.getCameraPosition(); // the limiter routine var screenBox = {minX: -wade.getScreenWidth()/2, maxX: wade.getScreenWidth() / 2, minY: -wade.getScreenHeight() / 2, maxY: wade.getScreenHeight() / 2}; var screenInWorldSpace = wade.screenBoxToWorld(wade.app.BACKGROUND_LAYER, screenBox); if (screenInWorldSpace.minX < mapBB.minX) { newCameraPosition.x += mapBB.minX - screenInWorldSpace.minX; } if (screenInWorldSpace.minY < mapBB.minY) { newCameraPosition.y += mapBB.minY - screenInWorldSpace.minY; } if (screenInWorldSpace.maxX > mapBB.maxX) { newCameraPosition.x += mapBB.maxX - screenInWorldSpace.maxX; } if (screenInWorldSpace.maxY > mapBB.maxY) { newCameraPosition.y += mapBB.maxY - screenInWorldSpace.maxY; } wade.setCameraPosition(newCameraPosition); } // end back onUpdate wade.addSceneObject(back,true); }; // end createBackground