StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHtml5 canvas game, creating a map much bigger than viewing canvas
text
Body
copied!<p>So let me start off by saying I am trying to create a large image or room, say 5000 by 3750, and have the canvas or viewing area only 800 by 599, always following the player piece. I did find a good guide on how to do this, using a background and Player drawn in java script (not taken from a sprite sheet). But what I have is a sprite sheet with the background, and the player, I have gotten the player to work on the background drawn from JavaScript, but not taken from the sprite sheet like I want to do. Here is some of the code:</p> <pre><code>// wrapper for "class" Map (function(){ function Map(width, height){ // map dimensions this.width = width; this.height = height; // map texture this.image = null; } // generate an example of a large map Map.prototype.generate = function(){ ctxBg.drawImage(imgSprite,0,2250,5000,3750,0,0,5000,3750); } // draw the map adjusted to camera Map.prototype.draw = function(context, xView, yView){ var sx, sy, dx, dy; var sWidth, sHeight, dWidth, dHeight; // offset point to crop the image sx = xView; sy = yView; // dimensions of cropped image sWidth = 800; sHeight = 599; // if cropped image is smaller than canvas we need to change the source dimensions if(800 - sx < sWidth){ sWidth = 800 - sx; } if(599 - sy < sHeight){ sHeight = 599 - sy; } // location on canvas to draw the croped image dx = 0; dy = 0; // match destination with source to not scale the image dWidth = sWidth; dHeight = sHeight; context.drawImage(imgSprite, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); } // add "class" Map to our Game object Game.Map = Map; })(); // Game Script (function(){ // prepaire our game canvas var canvas = document.getElementById("gameCanvas"); var context = canvas.getContext("2d"); // game settings: var FPS = 30; var INTERVAL = 1000/FPS; // milliseconds var STEP = INTERVAL/1000 // seconds // setup an object that represents the room var room = { width: 5000, height: 3750, map: new Game.Map(5000, 3750) }; room.map.generate(); </code></pre> <p>heres the camra/player codes:</p> <pre><code>(function(){ function Rectangle(left, top, width, height){ this.left = left || 0; this.top = top || 0; this.right = (left + width) || 0; this.bottom = (top + height) || 0; } Rectangle.prototype.set = function(left, top, /*optional*/width, /*optional*/height){ this.left = left; this.top = top; this.width = width || this.width; this.height = height || this.height; this.right = (this.left + this.width); this.bottom = (this.top + this.height); } Rectangle.prototype.within = function(r) { return (r.left <= this.left && r.right >= this.right && r.top <= this.top && r.bottom >= this.bottom); } Rectangle.prototype.overlaps = function(r) { return (this.left < r.right && r.left < this.right && this.top < r.bottom && r.top < this.bottom); } // add "class" Rectangle to our Game object Game.Rectangle = Rectangle; })(); // wrapper for "class" Camera (avoid global objects) (function(){ // possibles axis to move the camera var AXIS = { NONE: "none", HORIZONTAL: "horizontal", VERTICAL: "vertical", BOTH: "both" }; // Camera constructor function Camera(xView, yView, canvasWidth, canvasHeight, worldWidth, worldHeight) { // position of camera (left-top coordinate) this.xView = xView || 0; this.yView = yView || 0; // distance from followed object to border before camera starts move this.xDeadZone = 0; // min distance to horizontal borders this.yDeadZone = 0; // min distance to vertical borders // viewport dimensions this.wView = 800; this.hView = 599; // allow camera to move in vertical and horizontal axis this.axis = AXIS.BOTH; // object that should be followed this.followed = null; // rectangle that represents the viewport this.viewportRect = new Game.Rectangle(this.xView, this.yView, this.wView, this.hView); // rectangle that represents the world's boundary (room's boundary) this.worldRect = new Game.Rectangle(this.xView, this.yView, this.wView, this.hView); } // gameObject needs to have "x" and "y" properties (as world(or room) position) Camera.prototype.follow = function(gameObject, xDeadZone, yDeadZone) { this.followed = gameObject; this.xDeadZone = xDeadZone; this.yDeadZone = yDeadZone; } Camera.prototype.update = function() { // keep following the player (or other desired object) if(this.followed != null) { if(this.axis == AXIS.HORIZONTAL || this.axis == AXIS.BOTH) { // moves camera on horizontal axis based on followed object position if(this.followed.x - this.xView + this.xDeadZone > this.wView) this.xView = this.followed.x - (this.wView - this.xDeadZone); else if(this.followed.x - this.xDeadZone < this.xView) this.xView = this.followed.x - this.xDeadZone; } if(this.axis == AXIS.VERTICAL || this.axis == AXIS.BOTH) { // moves camera on vertical axis based on followed object position if(this.followed.y - this.yView + this.yDeadZone > this.hView) this.yView = this.followed.y - (this.hView - this.yDeadZone); else if(this.followed.y - this.yDeadZone < this.yView) this.yView = this.followed.y - this.yDeadZone; } } // update viewportRect this.viewportRect.set(this.xView, this.yView); // don't let camera leaves the world's boundary if(!this.viewportRect.within(this.worldRect)) { if(this.viewportRect.left < this.worldRect.left) this.xView = this.worldRect.left; if(this.viewportRect.top < this.worldRect.top) this.yView = this.worldRect.top; if(this.viewportRect.right > this.worldRect.right) this.xView = this.worldRect.right - this.wView; if(this.viewportRect.bottom > this.worldRect.bottom) this.yView = this.worldRect.bottom - this.hView; } } // add "class" Camera to our Game object Game.Camera = Camera; })(); // wrapper for "class" Player (function(){ function Player(x, y){ // (x, y) = center of object // ATTENTION: // it represents the player position on the world(room), not the canvas position this.x = x; this.y = y; this.srcX = 1700; this.srcY = 599; this.drawX = 350; this.drawY = 400; xView = this.x-this.width/2; yView = this.y-this.height/2; // move speed in pixels per second this.speed = 100; // render properties this.width = 85; this.height = 80; } Player.prototype.update = function(step, worldWidth, worldHeight){ // parameter step is the time between frames ( in seconds ) // check controls and move the player accordingly if(Game.controls.left) this.x -= this.speed * step; if(Game.controls.up) this.y -= this.speed * step; if(Game.controls.right) this.x += this.speed * step; if(Game.controls.down) this.y += this.speed * step; // don't let player leaves the world's boundary if(this.x - this.width/2 < 0){ this.x = this.width/2; } if(this.y - this.height/2 < 0){ this.y = this.height/2; } if(this.x + this.width/2 > worldWidth){ this.x = worldWidth - this.width/2; } if(this.y + this.height/2 > worldHeight){ this.y = worldHeight - this.height/2; } } Player.prototype.draw = function(/*context,*/ xView, yView){ ctxPlayer.clearRect(0,0,800,599); context.save(); ctxPlayer.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,(this.x-this.width/2),(this.y-this.height/2),this.width,this.height); context.restore(); } // add "class" Player to our Game object Game.Player = Player; })(); </code></pre> <p>It shows the image and player, but the canvas doesn't follow the player object, It does if I use a background like this, though:</p> <pre><code>(function(){ function Map(width, height){ this.width = width; this.height = height; this.image = null; } Map.prototype.generate = function(){ var ctx = document.createElement("canvas").getContext("2d"); ctx.canvas.width = this.width; ctx.canvas.height = this.height; var rows = ~~(this.width/44) + 1; var columns = ~~(this.height/44) + 1; var color = "red"; ctx.save(); ctx.fillStyle = "red"; for (var x = 0, i = 0; i < rows; x+=44, i++) { ctx.beginPath(); for (var y = 0, j=0; j < columns; y+=44, j++) { ctx.rect (x, y, 40, 40); } color = (color == "red" ? "blue" : "red"); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); } ctx.restore(); this.image = new Image(); this.image.src = ctx.canvas.toDataURL("image/png"); // clear context ctx = null; } // draw the map adjusted to camera Map.prototype.draw = function(context, xView, yView){ var sx, sy, dx, dy; var sWidth, sHeight, dWidth, dHeight; // offset point to crop the image sx = xView; sy = yView; // dimensions of cropped image sWidth = context.canvas.width; sHeight = context.canvas.height; // if cropped image is smaller than canvas we need to change the source dimensions if(this.image.width - sx < sWidth){ sWidth = this.image.width - sx; } if(this.image.height - sy < sHeight){ sHeight = this.image.height - sy; } dx = 0; dy = 0; dWidth = sWidth; dHeight = sHeight; context.drawImage(this.image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); } Game.Map = Map; })(); </code></pre> <p>I looked around, did some google searches and used a JavaScript checker, but no luck. Any suggestions/advice is much appreciated.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload